收藏
批改状态：合格
老师批语：
经过几天的学习，利用CSS+HTML已经可以制作一个简单的网站了，下面就做一个普通网站的真实页面。
有不对的地方还望指点一二，谢谢！
网站结构是：
index.html
images 图片文件夹
CSS 样式文件夹
---common.css 公共样式表
---reset.css 全站样式表
---index.css 首页样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>苏州风淋净化设备有限公司</title> </head> <body> <!-- 顶部 --> <div class="header"> <div class="tape"> <div class="info"> <p class="left"> 欢迎光临苏州风淋净化设备有限公司! </p> <p class="right"> 0512-11119988 </p> </div> </div> <div class="info"> <div class="logo"><img src="images/logo.jpg"></div> <div class="search"> <input type="" name=""> <button>搜索</button> </div> </div> <div class="menu"> <div class="info"> <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> </div> </div> <!-- banner图片 --> <div class="banner"> <img src="images/banner2.jpg"> </div> <!-- 新闻列表 --> <div class="news"> <div class="hd"> <h2>最新资讯</h2> <div class="text"> 我们洞察市场需求及用户痛点 为用户建立切实可行的互联网产品策略</div> </div> <ul> <li> <div class="left-img"> <a href=""><img src="http://www.wjzy.com.cn/upload/201802/03/201802031637230064.jpg" alt=""/></a> </div> <div class="right-txt"> <a href=""> <p> <span>深度运维“运动吴江”，打造局级自媒体号新标杆</span> “运动吴江”微信公众号，隶属于吴江区体育局，自2017年7月由我公司负责全面的运营维护以来，短短半年的时间，已经从0基础成长为拥有几万粉丝，在吴江地区体育领域具有较强影响力的自媒体公众号。 </p> </a> </div> </li> <li> <div class="left-img"> <a href=""><img src="http://www.wjzy.com.cn/upload/201802/03/201802031637230064.jpg" alt=""/></a> </div> <div class="right-txt"> <a href=""> <p> <span>深度运维“运动吴江”，打造局级自媒体号新标杆</span> “运动吴江”微信公众号，隶属于吴江区体育局，自2017年7月由我公司负责全面的运营维护以来，短短半年的时间，已经从0基础成长为拥有几万粉丝，在吴江地区体育领域具有较强影响力的自媒体公众号。 </p> </a> </div> </li> <li> <div class="left-img"> <a href=""><img src="http://www.wjzy.com.cn/upload/201802/03/201802031637230064.jpg" alt=""/></a> </div> <div class="right-txt"> <a href=""> <p> <span>深度运维“运动吴江”，打造局级自媒体号新标杆</span> “运动吴江”微信公众号，隶属于吴江区体育局，自2017年7月由我公司负责全面的运营维护以来，短短半年的时间，已经从0基础成长为拥有几万粉丝，在吴江地区体育领域具有较强影响力的自媒体公众号。 </p> </a> </div> </li> <li> <div class="left-img"> <a href=""><img src="http://www.wjzy.com.cn/upload/201802/03/201802031637230064.jpg" alt=""/></a> </div> <div class="right-txt"> <a href=""> <p> <span>深度运维“运动吴江”，打造局级自媒体号新标杆</span> “运动吴江”微信公众号，隶属于吴江区体育局，自2017年7月由我公司负责全面的运营维护以来，短短半年的时间，已经从0基础成长为拥有几万粉丝，在吴江地区体育领域具有较强影响力的自媒体公众号。 </p> </a> </div> </li> </ul> </div> <!-- 广告 --> <div class="ad-img"> <img src="http://yulan5.wjzynet.com/images/ad1.jpg" alt=""/> </div> <!-- 产品列表 --> <div class="product"> <div class="products-title"> <div class="title">精品展示</div> <div class="more"><a href="">查看更多>> </a></div> </div> <ul> <li> <a href=""> <img src="http://yulan5.wjzynet.com/upload/201803/28/201803281723468468.jpg" alt=""/> <span>彩钢板单人双吹风淋室1</span> </a> </li> <li> <a href=""> <img src="http://yulan5.wjzynet.com/upload/201803/28/201803281640043488.jpg" alt=""/> <span>彩钢板单人双吹风淋室2</span> </a> </li> <li> <a href=""> <img src="http://yulan5.wjzynet.com/upload/201803/28/201803281612448758.jpg" alt=""/> <span>彩钢板单人双吹风淋室3</span> </a> </li> <li> <a href=""> <img src="http://yulan5.wjzynet.com/upload/201803/28/201803281517105398.jpg" alt=""/> <span>彩钢板单人双吹风淋室4</span> </a> </li> <li> <a href=""> <img src="http://yulan5.wjzynet.com/upload/201803/28/201803281723468468.jpg" alt=""/> <span>百级层流罩 全送风系列</span> </a> </li> <li> <a href=""> <img src="http://yulan5.wjzynet.com/upload/201803/28/201803281640043488.jpg" alt=""/> <span>百级层流罩 全送风系列</span> </a> </li> <li> <a href=""> <img src="http://yulan5.wjzynet.com/upload/201803/28/201803281612448758.jpg" alt=""/> <span>百级层流罩 全送风系列</span> </a> </li> <li> <a href=""> <img src="http://yulan5.wjzynet.com/upload/201803/28/201803281517105398.jpg" alt=""/> <span>百级层流罩 全送风系列</span> </a> </li> </ul> </div> <!-- 底部 --> <div class="footer"> <div class="link"> <a href="">首 页</a> <a href="">关于我们</a> <a href="">服务</a> <a href="">公司动态</a> <a href="">产品展示</a> <a href="">联系我们</a> </div> <div class="copyright"> 公司地址：中华人民共和国国务院办公厅 电话：000-0000000<br> 版权所有 ***** © 2005-2018 All rights reserved 豫ICP备********号 </div> </div> </body> </html>
html{
overflow-x: hidden;
overflow-y: auto;
}
body,h1,h2,h3,ul,li,p{
margin: 0;
padding: 0;
font-family: 'microsoft yahei',Verdana,Arial;
color: #505050;
}
div,p,li,a{
font-size: 14px;
color: ##333;
}
ul,li{
list-style: none;
}
a:link,a:visited,a:active{
color: ##333;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #666;
}/*公共样式表*/
/*公共头部样式表*/
.header{
width: 100%;
height:170px;/*头部内部分项之和的总高度不能超过header设定的高度*/
}
.header .tape
{
height: 28px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
background-color: #fbfbfb;
}
.info{
width: 1140px;
/*height: 88px;*/
margin: auto;
overflow: hidden;
}
.header .tape .info .left{
float: left;
}
.header .tape .info .right{
float: right;
font-size:1.1em;
font-weight: 700;
}
.header .tape .info *{line-height: 28px;background-color: #fff;}
.header .info .logo{
width: 360px;
height: 90px;/*这里应该是90px*/
float: left;
line-height: 90px; /*让logo垂直居中，便于logo高度不满90px也是居中的*/
}
.header .info .logo img{
max-height:100%;
vertical-align: middle;
}
.header .info .search{
float: right;
height: 90px;
line-height: 90px;
}
.header .info .search input{
width: 200px;
height:26px;
border:2px solid coral;
margin: 18px 0;
}
.header .info .search button{
width: 50px;
height:30px;
border:none;
color:white;
margin-left: -54px;
background-color:coral;
}
/*头部菜单*/
.header .menu{
width: 100%;
height: 50px;
background-color: #394240;
/*overflow: hidden;*/
}
.header .menu ul li{
float: left;
line-height: 49px;
padding: 0px 40px;
margin: 0px 0px;
}
.header .menu ul li a{
color: #fff;
font-size: 1.1em;
}
.header .menu ul li:hover{
background-color: coral;
cursor:pointer;
}
.footer{
width: 100%;
text-align: center; /*底部内容全部水平居住*/
line-height: 30px;
color: #fff;
}
.footer .link
{
width: 100%;
height: 35px;
text-align: center;
background-color: #394240;
}
.footer .link a{
color: #fff;
margin: 0 20px;
}
.footer .copyright{
background-color: #39424b;
}.banner{
/*width: 1140px;
margin:0px auto;
background-color: #000fff;*/
text-align: center;
}
.banner img{
width: 1140px;
max-height: 400px;
vertical-align: top;
}
.product{
background-color: #fff;
width: 1140px;
margin:auto;
overflow: hidden;
border-radius: 0px 0px 10px 10px;
}
.products-title{
width: 100%;
margin: auto;
height: 49px;
border-bottom: 1px solid #c3c3c3;
}
.products-title .title{
float: left;
width: 50%;
font-size: 16px;
font-weight: 600;
line-height: 49px;
text-indent: 1em;
}
.products-title .more{
float: right;
width: 50%;
text-align: right;
line-height: 49px;
}
.products-title .title .more a{
text-align: right;
}
.product ul{
width: 1140px;
margin: 10px auto;
background-color: #fff;
}
.product ul li{
width: 260px;
height: 290px;
margin: 15px 10px;
text-align: center;
float: left;
}
.product ul li img{
width: 260px;
height: 260px;
padding: 3px;
border:1px solid #c3c3c3;
border-radius: 5px;
}
.product ul li img:hover{
opacity: 0.8;
filter: alpha(opacity=0.8);
}
.product ul li a span{
color: #333;
}
.ad-img{
width: 1140px;
padding: 20px 0px;
margin: auto;
}
.ad-img img{
max-width: 1140px;
}
.news{
width: 1140px;
height: 520px;
margin:auto;
}
.news .hd{
width: 100%;
margin: 15px auto;
overflow: hidden;
text-align: center;
}
.news .hd h2{
color:#000;
line-height: 1.5xp;
font-weight: normal;
padding: 10px 0;
}
.news .hd .text{
color:#888;
}
.news li{
width: 550px;
height: 190px;
float: left;
margin-top: 10px;
}
.news li .left-img{
width: 210px;
float: left;
}
.news li .left-img img{
width: 210px;
height: 190px;
}
.news li .left-img img:hover{
opacity: 0.8;
filter: alpha(opacity=0.8);
}
.news li .right-txt{
width: 330px;
height: 190px;
margin-left: 10px;
overflow: hidden;
float: right;
}
.news li .right-txt p{
line-height: 1.5em;
}
.news li .right-txt p span{
width: 100%;
line-height: 1.5em;
float: left;
font-size: 16px;
color: #777;
font-weight: 600;
}点击 "运行实例" 按钮查看在线实例
效果图
总结：
1，网站结构要简洁完整，目录结构清晰
2，标签定义要规范如class="product-title-img",
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
