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

2025-04-19 20:05:01

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"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>华网智通信技术集团</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body></body></html>

2、在<body></body>部分创建头部，html代码如下：<body><div class="header wid1000"><h2>华网智通信技术集团</h2></div></body>

3、在网站头部下面创建导航，html代码如下：<body><div class="header wid1000"><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代码如下：争犸禀淫<div class="wid1000">  <div class="home"> <p><span class="nowAddress">当前位置：</span><a href="#">首页</a><span class="symbol">></span>行业新闻</p> </div>  <div class="list"> <ul> <li><a href="#"><span class="time">2015-01-26</span><span class="icon1"></span>关于召开二维码应用及标准规范体系建设工作研讨会的通知</a></li> <li><a href="#"><span class="time">2015-01-26</span><span class="icon1"></span>关于召开二维码应用及标准规范体系建设工作研讨会的通知</a></li> <li><a href="#"><span class="time">2015-01-26</span><span class="icon1"></span>关于召开二维码应用及标准规范体系建设工作研讨会的通知</a></li> <li><a href="#"><span class="time">2015-01-26</span><span class="icon1"></span>关于召开二维码应用及标准规范体系建设工作研讨会的通知</a></li> <li><a href="#"><span class="time">2015-01-26</span><span class="icon1"></span>关于召开二维码应用及标准规范体系建设工作研讨会的通知</a></li> <li><a href="#"><span class="time">2015-01-26</span><span class="icon1"></span>关于召开二维码应用及标准规范体系建设工作研讨会的通知</a></li> </ul> <div class="fenye fr"> <p><a href="#">1</a><a href="#">2</a><a href="#">下一页</a></p> </div> <div class="clear"></div> </div></div>

5、在网站列表下面创建网站底部，html代码如下：<div class="footer"> <div class="links"> <p><a href="#">关于我们</a><a href="#">合作专区</a><a href="#">人才招聘</a><a href="#">开发项目</a><a href="#">行业信息</a></p> </div> <div class="tips"> <p>公司地址：河北省廊坊市爱民西道101号</p> <p>联系电话：0316-2260291 0316-2260292 邮编：065000 河北华网智 ( 冀ICP备11018258号-1 )</p> </div></div>

6、css样式倦虺赳式如下：@charset "utf-8";/* CSS Document *//*基础样式*/*{margin:0; padding:0;}body{font-si芰垄孕动ze: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。