如皋网站建设-如皋网站优化-如皋SEO-如皋网页设计

如皋网站建设咨询热线:15862770030
网站首页 > 网站建设知识 > 网站建设之DIV+CSS综合应用-创建一个完整的“F”式布局网页

网站建设之DIV+CSS综合应用-创建一个完整的“F”式布局网页

时间:2017/8/29 20:56:00 标签:

这一节对div做一次综合应用,选择的对象头部模块还是我们自己网站“小七论坛”,不过导航条以下的正文内容部分,我们按照常规的企业站布局来写案例,左右分别一个div,均设置左浮动,加边框以便更好的理解两个div之间的关系。这样整体看上去就是一个典型的“F”式布局网页,在上一节的基础上,我们增加3个div来实现这个布局。

1)左侧div:按照最常规的用法做栏目导航用,同样应用了display:block让a元素变成一个块级元素,整个块状的按钮式超链接效果。

2)右侧div,同样按照常规用法做正文内容用,内容放什么涉及到具体的样式,这里就不演示了。

3)底部div,通常放置页面的友情链接,版权信息等等,这里只写一个,需要注意使用<div style=" clear:both"></div>清除上面两个div的浮动,让footer对应的div回归到默认的排列状态,实际应用中还涉及到div内部元素的样式,这里也不做具体的演示。

完整测试代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.all{
width:1100px;
margin:0 auto;
font-size:12px;}
.top{
margin-left:73px;}
.nav ul{
        width:1000px;
        height:40px;
        border-bottom:1px solid #E20001;
        margin:0 auto;
}
.nav ul li{
        float:left;
        list-style:none;
}
.nav ul li a{
        width:100px;
        height:30px;
        line-height:30px;
        background-color:#E20001;
        color:#FFFFFF;
        margin:10px 5px;
        font-size:12px;
        display:block;
        text-align:center;
        text-decoration:none;
}
.nav ul li a:hover{
        background-color:#FFFF00;
        }
.left{
        width:198px;
        height:450px;
        float:left;
        margin-left:30px;
        border:1px solid #CCCCCC;
        }
.left ul{
        list-style:none;
        padding:0px;
        margin:10px;
        }
.left ul li{
        height:35px;
        background-color:#CCCCCC;
        margin-bottom:10px;
        }
.left ul li a{
        display:block;
        width:178px;
        height:35px;
        line-height:35px;
        font-size:12px;
        color:#FFFFFF;
        text-align:center;
        text-decoration:none;
        }
.left ul li a:hover{
        background-color:#999999;
        }

.right{
        float:left;
        width:828px;
        height:450px;
        margin-left:10px;
        border:1px solid #CCCCCC;
        }

.footer{
        float:left;
        width:1020px;
        height:50px;
        padding:10px;
        margin-left:30px;
        margin-top:10px;
        border-top:1px solid #CCCCCC;
        text-align:center;
        }

</style>
</head>

<body>
<div class="all">
   <div class="top"><a href="http://www.0513web.com/" target="_blank"><img src="bbs-logo.png" /></a></div>
   <div class="nav">
     <ul>
           <li><a href="#">0513web</a></li>
           <li><a href="#">0513web</a></li>
           <li><a href="#">0513web</a></li>
           <li><a href="#">0513web</a></li>
           <li><a href="#">0513web</a></li>
     </ul>
   </div>
   <div style="clear:both"></div>
   <div class="left">
     <ul>
           <li><a href="#">项目列表1</a></li>
           <li><a href="#">项目列表2</a></li>
           <li><a href="#">项目列表3</a></li>
           <li><a href="#">项目列表4</a></li>
           <li><a href="#">项目列表5</a></li>
         </ul>
   </div>
   <div class="right">当前位置:首页 >> 0513web</div>
   <div style=" clear:both"></div>
   <div class="footer">版权信息</div>
</div>

</body>
</html>

上一篇:网站建设之CSS项目列表中自定义li列表项图标式项目符号
下一篇:没有资料