仿一个网站首页项目—3月28 - 作业

Home > List of blog posts > 仿一个网站首页项目—3月28

Blogger Information

Blog 38

fans 0

comment 2

visits 24057

Special Recommendation

More>

Related recommendations

实例

<!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;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

某某某环保设备有限公司.jpg

总结：

通过这个仿站项目让我了解了自己哪方面还有不足，尤其是对代码的运用和单词的记忆还是差的太多了，下面我分享我在这个项目中遇到的几点困难

1.往区块中引入一个图片的同时，图片与区块自带缝隙，要消除

2.居中问题运用的不熟悉，尤其是区块中同时有行内元素和块元素

3.行内元素和区块的转换，不了解转换的用途

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

3.15作业

2018-03-16 16:45:54