CSS布局视频-中文企业网站

作者:divcss教程吧      点击次数:926次     发布日期:2015-09-08

CSS布局视频-企业网站
第一步分析效果图:发现LOGO浮在了导航上边。导航相对距左边偏移了一定距离。
我们先写出HTML代码:
<div id="header">
<h1>公司标题-divcss8.com</h1>
<form>
<input type="radio" name="leixing"/>新闻
<input type="radio" name="leixing"/>产品
<input type="text" id="shuru"/>
<input type="submit" id="suosu" value="搜索"/>
</form>
<ul>
<li><a href="#">网站首页</a>|</li>
<li><a href="#">网站首页</a>|</li>
<li><a href="#">网站首页</a>|</li>
<li><a href="#">网站首页</a>|</li>
<li><a href="#">网站首页</a>|</li>
<li><a href="#">网站首页</a>|</li>
<li><a href="#">网站首页</a></li>
</ul>
 
</div>
 
有了HTML代码之后我们就可以按照这个代码进行CSS工作了。由于我们需要对LOGO进行飘浮处理,这时候我们就可以使用position属性,使其脱离文档流。最典型的应用就是让父元素相对定位,子元素(也就是H1)绝对定位,这样就可以浮在上边了。
(1)进行样式的重置
*{ margin:0; padding:0;}
a{ text-decoration:none;}
img{ border:none;}
li{ list-style:none;}
(2)让网页居中
#header,#main{width:1000px;margin:0px auto;}
(3)定义顶部背景颜色及高度
#header{height:73px;background:#e8f6e7;position:relative}
(4)让H1进行以图换字
#header h1{float:left;width:203px;margin-left:20px;background:url(../img/logo.jpg) no-repeat;
height:73px;text-indent:-9999px;position:absolute;
}
(5)我们只需要让表单与导航浮动右侧即可
#header  form{float:right;margin-right:20px;margin-top:10px;}
#header  ul{float:left;height:43px;background:url(../img/navbj.jpg) repeat-x left bottom;
width:700px;padding-left:300px;
}
#header  ul li{float:left;padding-top:15px;color:#fff;}
#header  ul li a{color:#fff; padding:0 10px;}
 
网页正文是一个典型的三列布局
<div id="main">
<div class="gsjj">
 1  305  10  20
</div>
<div class="produt">
<dl>
<dt><img src="img/pic_1.jpg"></dt>
<dd>产品名称</dd>
</dl>
<dl>
<dt><img src="img/pic_1.jpg"></dt>
<dd>产品名称</dd>
</dl>
<dl>
<dt><img src="img/pic_2.jpg"></dt>
<dd>产品名称</dd>
</dl>
</div>
<div class="news">
20  20  233
</div>
</div>
CSS代码:
#main .gsjj{float:left;width:305px;margin-left:10px;margin-right:20px;}
#main .produt{float:left;width:355px;border-left:1px dotted #ccc;border-left:1px dotted #ccc;  height:170px;padding:0 20px;border-right:1px dotted #ccc;background:#e8e8e8;}
#main .produt dl{float:left;}
 
 
 
 

 

分享DIVCSS8

上一篇: