最近两天做了一个小的网页页面,发现也是有许多问题的对于网页,真的是需要多加练习的,下面就来说说网页中的那些事!
1,页面的框架搭建
<div class="content">
<header></header>
<nav></nav>
<aside></aside>
<article>
<div>内容文档</div>
<figure> //对元素进行组合。
<figcaption>**</figcaption> //为元素组添加标题。
</figure>
</article>
</div>
2,做网页的一般流程步骤
1,先找好文字图片,建好目录images,css,js等文件夹
2,在dw中新建TXT文档把文字先粘贴进去的
3,把HTML基本元素加到不同的文字中去
4,将HTML的头,导航,左侧,主题,尾部元素加上去
5,再单独用个文件先写好公共的样式,在写中心的样式文件(原则是从大到小,从外到内,从上到下)
6,不断的调试设置直到效果出现
3,制作过程中出现的问题与解决
1,在设置header时,一般是将h1的内容隐藏掉的,是使用display:none;进行的可以;也可以如下
<div class=“logo”><h1><a href="#">**</a></h1></div>
其次,在处理代码的同时要利用CSS进行修饰下。如下边所示: .logo h1{padding:0px;} .logo h1 a{display:block;width:170px;height:50px;background:url(images/logo.gif) scroll no-repeat 0 40px;text-indent:-9999em;}
2,在设置导航的过程中的,对于下方内容会飘上来是因为木有清除浮动的clear:both;不是none;对于设置<a>标签的时候先是要进行display:block;为块状元素才能设置样式的,对于设置导航的响应区域设置最好是设置宽度,先计算好再平均下的,不推荐设置margin,为了使得文字居中的话,设置好text-align和line-hegiht就可以的;
3,在aside过程中的话,对于设置背景图片出现了不显示的问题,是因为背景的图片是不能设置大小的,只能设置相对位置,所以说是先把图片的大小设置好,否则就会不显示的;不论是什么先要是在总的元素框架中设置width,可以设置百分比的;
4,其他的技术问题,设置圆角矩形的话,border-radius,一般是设置宽度的一半是圆形的,其余自控;而网页标题的左侧图标是在head中加入<link rel="**" href="**" type="image/x-icon">,设置透明度test {
background-color:transparent;/*设置背景色为透明*/
color:#000; /*设置字体颜色为黑色,根据需要修改颜色*/
} 还有的话就是div设置宽高
4,总结
多思考,多调试,多搜索,多动手,提前完成!及时总结与反馈!
下面是网页界面: