收藏
批改状态：合格
老师批语：
大家好：
下面是我仿一个网站首页的项目，里面如果有什么错误或者重复啰嗦的地方请帮忙指出，谢谢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 引入外部CSS样式表 --> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>某某某环保设备有限公司</title> </head> <body> <div class="header"> <div class="tape"> <div class="info"> <img src="images/logo.png" alt=""> <p class="left"><strong>XXX环保设备有限公司</strong> <br>XXXHUANBAOSHEBEIYOUXIANGONGSI</p> <p class="right">全国咨询热线 <br> 00-000-00000000</p> </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="" alt="留言板">联系我们</a></li> </ul> </div> </div> </div> <div class="banner"> <img src="images/banner.jpg" alt=""> </div> <div class="about"> <div class="info"> <div class="about1"> <p>关于我们</p> <span>为各大重型工业工厂所制造的环境问题提供相关处理净化设备</span> </div> </div> </div> <div class="make"> <ul> <li> <img src="images/main1.jpg" alt=""> <p>工业废气净化</p> </li> <li> <img src="images/main2.jpg" alt=""> <p>有机废气净化</p> </li> <li> <img src="images/main3.jpg" alt=""> <p>粉尘净化</p> </li> </ul> <p class="make1">我公司主要产品以治理工业废气为主，我公司产品有：净化设备，废气净化设备，酸废气净化器，有机废气净化器，干式废气净化 设备，湿式废气净化设备等。还生产噪声治理， 暖通设备及电镀槽、水槽及排风净化设备、送风设备等。我公司生产的WGF-3型复合吸附剂治理酸废气净化器及DBS吸附剂荣获国家环保局最佳使用技术型...</p> <a href="" title="">了解更多</a> </div> <div class="ads"> <img src="images/main4.jpg" alt=""> </div> <div class="title"> <p>工程案例</p> <span>为各大重型工业工厂所制造的环境问题提供相关处理净化设备</span> </div> <div class="example"> <ul> <li> <img src="images/main1.jpg" alt=""> <p>湖南省废气净化处理项目</p> <span>保护环境就是保护我们赖以生存的家</span> <button type="">MORE</button> </li> <li> <img src="images/smcase2.jpg" alt=""> <p>宜昌市固体废物处理项目</p> <span>保护环境就是保护我们赖以生存的家</span> <button type="">MORE</button> </li> <li> <img src="images/smcase3.jpg" alt=""> <p>江西污染土壤修复工程</p> <span>保护环境就是保护我们赖以生存的家</span> <button type="">MORE</button> </li> </ul> </div> <div class="news"> <h2>新闻资讯</h2> <div class="news-img"> <img src="images/smcase4.jpg" alt=""> <p>全国各地将大幅度提高垃圾处理费排污费</p> <span>继居民垃圾处理费，排污费后，全国各省市将会陆续公布相似措施，且二氧化硫等排污费还会列入未来环境税征收范围</span> <button type="">MORE</button> </div> <div class="right"> <ul> <li> <img src="images/smcase5.jpg" alt=""> <p>全国各地将大幅度提高垃圾处理费排污费</p> <span>继居民垃圾处理费，排污费后，全国各省市将会陆续公布相似措施，且二氧化硫等排污费还会列入未来环境税征收范围</span> <button type="">MORE</button> </li> <li> <img src="images/smcase6.jpg" alt=""> <p>全国各地将大幅度提高垃圾处理费排污费</p> <span>继居民垃圾处理费，排污费后，全国各省市将会陆续公布相似措施，且二氧化硫等排污费还会列入未来环境税征收范围</span> <button type="">MORE</button> </li> <li> <img src="images/smcase7.jpg" alt=""> <p>全国各地将大幅度提高垃圾处理费排污费</p> <span>继居民垃圾处理费，排污费后，全国各省市将会陆续公布相似措施，且二氧化硫等排污费还会列入未来环境税征收范围</span> <button type="">MORE</button> </li> </ul> </div> </div> <div class="footer"> <div class="info"> <div class="left"> <p>网站首页 | 关于我们 | 工程案例 | 新闻资讯 | 联系我们</p> <p>地址：湖北省大冶市XXX大道XXX办公室</p> <p>电话：0714-8868331</p> <p>邮编：435100</p> </div> <div class="right"> <img src="images/qccode.png" alt=""> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
html {
/*使页面可以上下滑动，取消左右滑动*/
overflow-x: hidden;
overflow-y: auto;
}
body,ul,li,p,h2 {
/*清楚自带的内外间距*/
margin: 0;
padding: 0;
}
ul li {
/*清楚列表前面自带的样式*/
list-style-type: none;
}
a:hover {
/*取消a标签下划线你*/
text-decoration: none;
color: #f00;
}
a:link, a:visited, a:active {
color: #505050;
text-decoration: none;点击 "运行实例" 按钮查看在线实例
.header {
width: 100;
height: 138.4px;
}
.header .tape {
height: 77.6px;
}
.header .menu {
height:60.8px;
background-color: #28905A;
}
.info {
/*设置头部和尾部内容区的宽度*/
width: 1100px;
/*水平居中*/
margin: auto;
/*可以包裹住浮动区块*/
overflow: hidden;
}
.header .tape .info .left {
float: left;
margin-left: 10px;
margin: 8px;
}
.header .tape .info .right {
float: right;
margin: 8px;
}
.header .tape .info img {
float: left;
margin: 8px;
}
.header .tape .info .left strong {
font-size: 2em;
color:#28905a;
}
.menu .info ul li {
float: left;
line-height:60.8px;
padding:0 1.6em;
}
.menu .info ul li a {
font-size: 1.3em;
color: white;
}
.menu .info ul li:hover {
background-color: #5eb95e;
}
.footer {
/*设置尾部的宽和高样式*/
width: 100%;
height: 230px;
background-color:#28905A;
margin: 80px auto;
}
.footer .left {
float: left;
margin: 40px 0;
}
.footer .left p {
line-height: 1.6em;
color: white;
}
.footer .right img {
float: right;
margin: 40px;
}点击 "运行实例" 按钮查看在线实例
.banner {
/*可以取消图片自带的间隙*/
line-height: 1px;
}
.banner img {
width: 100%;
height: 678.79px;
}
.about {
height: 153.6px;
}
.about .info .about1 {
text-align: center;
padding: 30px;
}
.about p {
font-size: 1.6em;
padding: 10px;
font-weight:700;
}
.make {
width: 1100px;
margin: auto;
overflow: hidden;
}
.make ul li img {
width: 344px;
height: 261px;
}
.make ul li {
float: left;
text-align: center;
padding: 0 10px;
}
.make ul li p {
font-weight:700;
margin-top:1.6em;
margin-bottom: 4.4em;
}
.make1 {
text-align: center;
font-size: 0.87em;
margin:4em 0;
}.make a {
/*使行内元素转换为块元素*/
display: block;
width: 113px;
height: 35px;
background-color: #28905a;
text-align: center;
/*设置边框圆角*/
border-radius: 20px;
line-height: 35px;
margin: auto;
color: white;
}
.ads {
margin-top: 100px;
}
.ads img {
width: 100%;
height: 261.38px;
/*消除图片与区块自带的间隙*/
vertical-align: top;
}
.title {
width: 1100px;
margin: auto;
height: 153.6px;
text-align: center;
padding: 40px;
}
.title p {
font-weight: 700;
font-size: 2em;
/*设置透明度*/
opacity: 0.8;
}
.title span {
opacity: 0.4;
}
.example {
width: 1100px;
margin: auto;
height: 391.48px;
overflow: hidden;
margin-top: -80px;
}
.example ul li img {
width: 344px;
height: 220px;
}
.example ul li {
float: left;
text-align: center;
padding:0 10px;
}
.example ul li p {
font-weight: 700;
margin: 15px;
}
.example ul li button {
/*使行内元素转换为块元素*/
display: block;
background-color: white;
width: 119px;
height: 28px;
text-align: center;
/*设置边框的样式*/
border: 1px solid #999;
margin: 30px auto;
}
.news {
width: 1100px;
height: 588.81px;
margin: auto;
/*使该区块可以包裹住浮动区块*/
overflow: hidden;
}
.news .news-img {
width: 410px;
height: 445px;
float: left;
}
.news .news-img img {
width: 410px;
height: 290px;
}
.news .news-img p {
font-weight: 700;
margin-top: 20px;
text-align: center;
}
.news .news-img span {
display: block;
line-height: 25px;
opacity: 0.5;
margin: 5px 0 0 10px;
}
.news .news-img button {
display: block;
width: 90px;
height: 28px;
margin: 0 auto;
background-color: white;
border: 1px solid #999;
}
.news .right {
float: right;
width: 660px;
height: 468px;
overflow: hidden;
}
.news .right ul li {
width: 100%;
float: left;
overflow: hidden;
}
.news .right img {
width: 165px;
height:128px;
float: left;
margin-bottom: 23px;
margin-right: 10px;
}
.news .right p {
font-weight: 700;
margin: 10px;
}
.news .right span {
display: block;
width: 351px;
height: 76px;
margin-left: 175px;
line-height: 1.5em;
opacity: 0.5;
}
.news .right button {
display: block;
float: right;
width: 90px;
height: 28px;
background-color: white;
border: 1px solid #999;
margin-top: -75px;
}
.news h2 {
width: 100px;
border-bottom: 2px solid #000;
margin: 40px auto;
}点击 "运行实例" 按钮查看在线实例
总结：
通过这个仿站项目让我了解了自己哪方面还有不足，尤其是对代码的运用和单词的记忆还是差的太多了，下面我分享我在这个项目中遇到的几点困难
1.往区块中引入一个图片的同时，图片与区块自带缝隙，要消除
2.居中问题运用的不熟悉，尤其是区块中同时有行内元素和块元素
3.行内元素和区块的转换，不了解转换的用途
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
