web前端初学--基础列表页

打开DW，新建html文档，命名为list.html，保存后进行样式链接代码如下：

在部分创建头部，html代码如下：

在网站头部下面创建导航，html代码如下：

在网站导航下面创建列表内容，html代码如下：

在网站列表下面创建网站底部，html代码如下：

css样式如下：@charset 'utf-8';/* CSS Document *//*基础样式*/*{margin:0; padding:0;}body{font-size:14px; color:#333; line-height:2em; background-color:#f1f1f1;}ul{list-style:none;}img,a img{border:0; outline:none;}h1,h2,h3,h4,h5{font-weight:normal;}a{text-decoration:none; color:#333; outline:none;}a:hover{color:#082f5d;}table{border-collapse:collapse;}/*公共类*/.wid1000{width:1000px; margin:auto;}.fl{float:left; display:inline;}.fr{float:right; display:inline;}.clear{clear:both;}/*网站头部*/.header{height:80px; line-height:80px;}.header h2{ font-size:30px; font-family:'微软雅黑'; color:#000;}/*网站导航*/.nav{background-color:#000; height:50px; line-height:50px; width:100%; color:#fff; font-size:14px;}.nav ul li{float:left; display:inline; width:100px; text-align:center;}.nav ul li a{color:#fff; display:block;}.nav ul li a:hover{background-color:#454648;}/*-----------------------------列表页--------------------------------------*/.list,.article{background-color:#fff; min-height:500px; padding:30px 40px; margin-bottom:20px; font-size:12px; border:1px solid #ddd; }.list ul li{ height:50px; line-height:50px; border-bottom:1px solid #ddd;}.list ul li .time{float:right; display:inline; font-family:Arial;}.list ul li .icon1{width:8px; height:8px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background-color:#dbdbdb; display:inline-block; margin-right:8px;}.list .fenye{margin-top:25px;}.list .fenye a{padding:5px 10px; background-color:#f7f7f7; border:1px solid #ddd; margin-left: 5px;}.list .fenye a:hover{padding:5px 10px; background-color:#1c59a8; border:1px solid #1552a1; margin-left: 5px; color:#fff;}/*网站底部*/.footer{background-color:#000; height:100px; padding:20px 0;}.footer .links{text-align:center;}.footer .links a{color:#fff; margin:0 20px; }.footer .tips{font-size:12px; color:#999; text-align:center; margin-top:15px;}

保存，按F12浏览效果