简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >PHP课程第九天之-CSS+HTML终极实战制作

PHP课程第九天之-CSS+HTML终极实战制作

Sam徐民强的博客
Sam徐民强的博客原创
2018年03月29日 17:25:531068浏览

经过几天的学习，利用CSS+HTML已经可以制作一个简单的网站了，下面就做一个普通网站的真实页面。

有不对的地方还望指点一二，谢谢！

网站结构是：

index.html

images  图片文件夹

CSS  样式文件夹

  ---common.css  公共样式表

  ---reset.css   全站样式表

  ---index.css  首页样式表


index.html实例源码

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

运行实例 »

reset.css源码

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

运行实例 »

common.css实例

/*公共样式表*/
/*公共头部样式表*/
.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;
}

运行实例 »

index.css实例

.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.jpg

总结：

1，网站结构要简洁完整，目录结构清晰

2，标签定义要规范如class="product-title-img",





上一条：利用CSS知识仿站-2018-03-29 17:20下一条：数组splice操作
CSS+HTML终极实战制作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多