DIV+CSS首页布局练习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Abenazhan/article/details/72818493
新建外部样式,
html中设置<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >表示文件格式,在加入<link rel="stylesheet" type="text/css" href="css/hh.css"> 引入外部css链接
最先布局一个最外面的层,设置宽度960像素,临时高度800像素和背景颜色

布局整个body体 ,所有外边距和内填充变成0,顶点对齐

最外面的层设置居中margin:0 auto
兼容:整个body体里也设置居中,text-align:center;
最外面的层在设置整个文本左对齐方便布局text-align:leftr;

最外面层里设置三个层
头部层,内容层,页脚层
头部层设置宽度100%沾满,临时高度150像素,背景颜色用来区分
内容层设置宽度100%沾满,临时高度150像素,背景颜色用来区分
页脚层设置宽度100%沾满,临时高度150像素,背景颜色用来区分
里面三个层高度临时固定,删除最外层的临时高度 和背景颜色

三个层之间需要有间隙,空白,如果在每个层里定义margin修改的时候很麻烦,所以定义一个加塞的层,类名nav,定义宽度width:100%,高度10px;
兼容:IE浏览器在设置高度低于18像素的时候都按照18像素计算,所以IE高度高于其他浏览器的高度,添加一句超出的部分隐藏,overflow:hidden

在头部的层里分为4格层,logo层,banner层,工具层,导航层。
样式定义在头部附近,便于寻找。 
logo层定义宽度,高度和背景颜色
banner层定义宽度,高度和背景颜色
工具层定义宽度,高度和背景颜色
导航层定义宽度,高度和背景颜色
兼容:标准的盒子外层指定高度是不会给撑开的,非标准的盒子会撑开,去掉头部的高度
logo层设置左浮动float:left;
banner层设置左浮动float:left;并且外边距设置10像素隔开
工具层设置右浮动float:right;
导航层设置左浮动
兼容:非IE浏览器出现不在一个层的情况,把所有层设置成浮动,对于间隙层,单设置浮动会往上走,所以不挨着浮动块,clear:both;
 删掉头部的颜色
body体内设置两个层,左侧层,右侧层
左侧层宽度750像素,高度600像素,背景颜色,左侧浮动
右侧层宽度200像素,高度600像素,背景颜色,右侧浮动

在左侧层里设置左右两层,小左层,小右层 。
左层的选择器定义的是id,#left,小左层选择器定义的是class,.left,在左层的附近定义小左层 ,#left .left
在定义两个层,一共四个层,中间设置间隙div布局。
去掉body的背景颜色和高度。

logo位置换成图片
html里加入<img>
csss设置图片边框为0,内边距,外边距都为0.
去掉logo层的颜色
调整图片的外边距或者logo层的内边距,让图片居中
调整图片的大小和边距给图片加格样式。

在导航栏里加列表
列表清空一下外边距,内边距和列表的样式,margin:0;padding:0;list-style:none;
列表设置左侧浮动,列表的文字居中,设置文字的行高
加小竖条,宽度和高度自定义,IE高度小于18像素,使用overflow:hidden,隐藏起来,调整位置

内容层里加两个层
上边标题层,下边内容层。
上下层的宽度设置100%适应内容层的宽度,高度设置26像素,设置边框实线,删掉内容层里的高度和背景颜色,
兼容:设置边框线后,iE浏览正常,非IE浏览时候,增加1像素的边框线。所以格外设置一个样式,用来存贮新的宽度,
在上边层 加个类名class=“tit kuan1” 下边层加一个类名class=“nei kuan2”
kuai1样式:width:298 !important; width:300px; 


上边标题层删除背景颜色换成背景图片
在html里写入标题<h3>
样式里给h3清空样式
给h3加新样式,水平居中
给某个层里html标记的时候可以使用层里的类名加上html标记,表名只给这个层里的这个html标记样式,不影响其他层里同样html标记的样式。
图片大小和层的大小不合适的时候可以通过background-position和background-size来定义。
阅读更多
换一批

没有更多推荐了,返回首页