css 波动(float)网页页面合理布局

日期:2021-03-13 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

【第1步 总体合理布局与公共性CSS界定】
大家先来剖析1下这个网页页面

网页页面关键分5大块,顶部的Logo、导航栏条Nav、Banner、Content、Footer,以下图

这样HTML就很非常容易写出来了

拷贝编码
编码以下:

<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>

由于这5块的宽度全是900像素,而且全是水平垂直居中的,因此相应CSS编码以下

拷贝编码
编码以下:

body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
/*为何写这段编码沒有忘掉吧,功效便是重设将会用到的标识,不搞清楚的去看第4节的课程重要词*/
#logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}

【第2步 合理布局Logo栏】
最先大家必须把网页页面上的logo给激光切割出来,其尺寸为173*46,姓名为:logo.gif
 
1般网站都会保证点一下logo,就会返回首页,应当如何做呢,大伙儿最先会想起,给照片再加连接便可以了,编码1般会这么写
<a href="#" id="logoLink"><img src="#" /></a>
但是KwooJan要详细介绍此外1种方式,将照片做成连接a的情况,一样能够做到上面说的实际效果,而且HTML编码就会更精简,少了<img...>,看看下面Logo栏的网页页面编码,鲜红色的为将logo.gif做为情况的连接

HTML编码:

拷贝编码
编码以下:

<div id="Logo">
<a href="#" id="logoLink"></a>
</div>

CSS编码

拷贝编码
编码以下:

#Logo{
height:80px;/*公共性编码中沒有界定高宽比,在这里界定*/
}
#logoLink{
display:block;/*将连接a转换成块状元素,这样才可以显示信息出情况*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*以便让ie6和ff显示信息实际效果1样,假如不再加这句话,后边的margin-top:20px;两个访问器分析不1样,大伙儿能够去掉这句话,看看二者显示信息实际效果区别*/
margin-top:20px;/*设定a的顶部外边距为20像素,这样才可以和访问器顶部有段间距,才可以和照片中做的1样*/
}

好到这里,头顶部含有logo的地区早已写完,假如自身做不出来,就来免费下载源码
float1.rar
【第3步 合理布局导航栏栏Nav】
网页页面上的导航栏栏和第4节讲的基本上是1样的,而且更简易些,这里我就已不给大伙儿1步1步做,不容易做的就去看第4节,这里我就立即把编码传出来供大伙儿学习培训
HTML编码:

拷贝编码
编码以下:

<div id="Nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

CSS编码

拷贝编码
编码以下:

#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*转换成块状元素,因连接是内链元素,若想给它界定下面的特性,务必将它转换成块状元素,*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*除去连接款式,默认设置是有下划线的,再加这句就沒有任何款式,下划线也沒有了*/
float:left;/*这句1定要加,要不然在IE6中会出現,这类实际效果*/
}
#Nav ul li a:hover{background:#68acd3;}

float2.rar
【第4步 Banner合理布局】
这个就更简易了,有两种方式
第1种:将照片做为<div id="Banner"></div>情况
第2种:立即将照片插进<div id="Banner"></div>之间,编码:<div id="Banner"><img src="" /></div>
大伙儿能够依据要求和具体状况挑选用哪种,在这里大家用第1种
HTML编码沒有甚么转变,只必须在CSS里边界定1下就OK了
CSS编码:

拷贝编码
编码以下:

#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}

源码免费下载: float3.rar (73.79 KB)

如何保证这里较为简易吧,好,接着来
【第5步 內容Content板块合理布局】
从照片上大家看到,內容板块分成上下两个地区,左侧ContentL宽度是600px,右侧ContentR宽度是300px,可是因为大家要将内边距设定成15px(这样才会漂亮),因此ContentL的宽度在CSS中就要设定成600⑴5*2=570px,而右边的ContentR则必须设定成300⑴5*2=270px;

HTML编码:

拷贝编码
编码以下:

<div id="Content">
<div id="ContentL">此处为左侧ContentL</div>
<div id="ContentR">此处为左侧ContentR</div>
</div>

CSS编码:

拷贝编码
编码以下:

#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*为何都要左边波动,假如不搞清楚就去看第2节*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}

网页页面实际效果:

內容一部分大家就先保证这里,最终大家再合理布局里边的实际元素,下面接着来合理布局版权控制模块(Footer)

【第6步 Footer合理布局】
这一部分构造较为简易,大伙儿只必须了解如何合理布局就OK了
HTML编码:

拷贝编码
编码以下:

<div id="Footer">
<p>版权归CSS学习培训(www.cssxuexi.cn)全部</p>
<p>CSS沟通交流QQ群:5505810/87951377/73513641/72263578</p>
</div>

CSS编码:

拷贝编码
编码以下:

#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}

现阶段实际效果以下:
 
就这样大家网页页面的总体构造基础出来了,剩余的工作中便是內容板块內部元素的实际合理布局了,我将在下节课接着讲~
float4.rar
以上编码装包免费下载