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

2025-11-05 05:18:57

1、打开DW，新建html文档，命名为list.html，保存后进行样式链接

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>华网智通信技术集团</title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>

<body>

</body>

</html>

2、在<body></body>部分创建头部，html代码如下：

<body>

<h2>华网智通信技术集团</h2>

</div>

</body>

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

<body>

<h2>华网智通信技术集团</h2>

</div>

<div class="nav">

<ul class="wid1000">

<li><a href="ind.html">网站首页</a></li>

<li><a href="webInfor.html">网站开发</a></li>

<li><a href="webInfor.html">微信开发</a></li>

<li><a href="webInfor.html">APP开发</a></li>

<li><a href="webInfor.html">公司形象</a></li>

<li><a href="case.html">经典案例</a></li>

<li><a href="list.html">行业新闻</a></li>

<li><a href="list.html">就业信息</a></li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

</body>

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

<span class="nowAddress">当前位置：</span><a href="#">首页</a><span class="symbol">></span>行业新闻

</div>

<ul>

<li><a href="#"><span class="time">2015-01-26</span><span class="icon1"></span>关于召开二维码应用及标准规范体系建设工作研讨会的通知</a></li>

</ul>

</div>

</div>

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

</div>

公司地址：河北省廊坊市爱民西道101号

联系电话：0316-2260291 0316-2260292 邮编：065000 河北华网智 ( 冀ICP备11018258号-1 )

</div>

6、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;}

7、保存，按F12浏览效果

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。