3月28日作业 - 培训班作业提交

Home > List of blog posts > 3月28日作业

Blogger Information

Blog 44

fans 0

comment 1

visits 30815

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<!-- 导入重置样式表 -->
	<link rel="stylesheet" href="css/reset.css">
	<!-- 导入公共样式表 -->
	<link rel="stylesheet" href="css/common.css">
	<!-- 导入首页样式表 -->
	<link rel="stylesheet" href="css/index.css">

</head>
<body>
	<!-- 公共头部 -->
	<div class="header">
		<div class="tape">
			<div class="info">
				<p class="left">欢迎访问某某某</p>
				<div class="right">咨询电话：0934-324232
				</div>
			</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>
						<li><a href="">人才招聘</a></li>
					</ul>
				</div>
			</div>
		</div>	


		<div class="info">
			<div class="logo"></div>
			<div class="search">
				<input type="text" name="name" placeholder="关键字">
				<button>搜索</button>
			</div>
		</div>
	</div>
	
	<!-- 首页Banner图 -->
	<div class="banner">
		<img src="/image/banner.jpg" alt="图片">
		<div class="line"></div>
	</div>

	<!-- 产品列表 -->
	<div class="product">
		<!-- 标题部分 -->
		<div class="title">
			<h2>产品 <img src="" alt="">中心</h2>
		</div>
		<p>局域网远程监控无处不在</p>
		
		<!-- 产品列表 -->
		<ul>
			<li><a href=""> <img src="/images/product.jpg" alt="产品"></a><a href="">产品应用案例</a></li>
			<li><a href=""> <img src="/images/product.jpg" alt="产品"></a><a href="">产品应用案例</a></li>
			<li><a href=""> <img src="/images/product.jpg" alt="产品"></a><a href="">产品应用案例</a></li>
			<li><a href=""> <img src="/images/product.jpg" alt="产品"></a><a href="">产品应用案例</a></li><br>
			<li><a href=""> <img src="/images/product.jpg" alt="产品"></a><a href="">产品应用案例</a></li>
			<li><a href=""> <img src="/images/product.jpg" alt="产品"></a><a href="">产品应用案例</a></li>
			<li><a href=""> <img src="/images/product.jpg" alt="产品"></a><a href="">产品应用案例</a></li>
			<li><a href=""> <img src="/images/product.jpg" alt="产品"></a><a href="">产品应用案例</a></li>
		</ul>
	</div>

	<!-- 广告 -->
	<div class="ads-img"></div>

	<!-- 我们是做什么的 -->
	<div class="make">
		<img src="images/make.png" alt="">
		<div class="refer">
			<p>企业主要运营溯源体系的建设</p>
			<button>了解更多</button>
		</div>
	</div>

	<hr color="#efefef" size="1">

	<!--新闻列表  -->
	<div class="news">
		<div class="left">
			<img src="images/news.jpg" alt="">
		</div>

		<div class="right">
			<ul>
				<li>
					<span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第八十</a>
					<p>本公司参加第八十届</p>
				</li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>

	<!--公共底部-->
	<div class="footer">
		<div class="top">
			<ul>
				<li><a href="">阿里云</a></li>
				<li><a href="">支付宝</a></li>
				<li><a href="">腾讯QQ</a></li>
				<li><a href="">百度搜索</a></li>
				<li><a href="">PHP中文网</a></li>
				<li><a href="">阿里云</a></li>
				<li><a href="">支付宝</a></li>
				<li><a href="">腾讯QQ</a></li>
				<li><a href="">百度搜索</a></li>
				<li><a href="">PHP中文网</a></li>
			</ul>
		</div>

		<div class="bottom">
			<p>dasjklfjdsaljflsaj</p>
		</div>
	</div>
</body>
</html>

运行实例 »

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

common.css

实例

/*公共头部样式*/
.header{
	width: 100%;
	height: 170px;
}

.header .tape{
	height: 28px;
	border-top:1px solid #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
	background-color: #fbfbfb;
}

.info{
	width: 1140px;
	margin:auto;

	/*BFC:块级格式化上下文;页面上元素的作用域*/
	overflow: hidden;
}

.header .tape .info .left{
	float:left;
}

.header .tape .info .right{
	float: right;
}

.header .info .logo{
	width: 440px;
	height: 88px;
	float: left;
}

.header .info .search{
	float: right;
	height: 88px;
	margin-right: 100px;
	margin-top: 10px;
}


.header .info .search input{
	width: 200px;
	height: 26px;
	border: 2px solid coral; 
	margin:18px 0;
}

.header .info .search button{
	width: 40px;
	height: 28px;
	background-color: coral;
	border: none;
	color:white;
	margin-left: -40px;
}

/*头部菜单*/
.header .menu{
	width: 100%;
	height: 50px;
	background-color: black;
}

.header .menu ul li{
	float: left;
	line-height: 50px;
	padding: 0 40px;
}

.header .menu ul li a{
	font-size: 1.1em;
	color: #fff;
}

.header .menu ul li:hover{
	background-color: coral;
	cursor: pointer;
}

/*公共底部*/
.footer .top{
	width: 100%;
	height: 40px;
	background-color: #3e3e3e;
	margin:auto;
}

.footer .top ul{
	width:1140px;
	margin:auto;
}

.footer .top li{
	float:left;
}

.footer .top li a{
	height: 100%;
	padding: 0 20px;
	color: #fff;
	text-align: center;
	line-height: 40px;
}

.footer .bottom{
	width: 100%;
	height: 92px;
	background-color: black;
	text-align: center;
}

.footer .bottom p{
	background-color: #fff;
	line-height: 92px;
}

运行实例 »

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

index.css

实例

/*首页专用css样式表*/
.banner{
	border: 1px solid red;
}

.banner img{
	width: 100%;
	height:452px;
	vertical-align: top;
}

.banner .line{
	height: 30px;
	background-color: #696969;
	opacity: 0.3;
	margin-top: -30px;
}

/*产品列表*/
.product{
	width: 1140px;
	margin:auto;
	margin-top: 30px;
	margin-bottom: 30px;
/*浮动只在这个块中*/
	overflow: hidden;
}

.product .title{
	text-align: center;
	background-image: url(../image/title_bg.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

.product .title img{
	padding: 0 5px;
}

.product li{
	width: 260px;
	height: 282px;
	text-align: center;
	float: left;
	margin:10px;
}

.product li img{
	width: 260px;
	height: 197px;
	margin-bottom: 10px;
}

.product li img:hover{
	opcity:0.8;
}

/*广告图片，直接用背景的方式*/
.ads-img{
	width:100%;
	height: 412px;
	background-image: url('../images/ads-jpg');
	background-repeat: no-repeat;
	margin-bottom: 50px;
}

/*我们做什么*/
.make{
	width: 1140px;
	margin:auto;
	margin-bottom:50px;
}

.make img{
	width: 286px;
	height: 177px;
	float: left;
	margin-right: 50px;
}

.make .refer p{
	line-height: 2em;
}

.make .refer button{
	width: 130px;
	height: 34px;
	border: none;
	background-color: gray;
	color: #fff;
}

.make .refer button:hover{
	background-color: coral;
	cursor:pointer;
}

/*新闻列表*/
.news{
	width: 1140px;
	margin:auto;
	margin-top:50px;
	margin-bottom: 50px; 
	overflow: hidden;
}

.news .left {
	float:left;
}

.news .left img{
	width: 500px;
	height: 315px;
}

.news .right{
	overflow: hidden;
}

.news .right ul{
	margin-left: 50px;
}

.news .right ul li{
	height: 80px;
}

.news .right li span{
	float: left;
	width: 60px;
	height: 18px;
	background-color: black;
}

.news .right li span *{
	color: #fff;
	text-align: center;
}

.news .right li{
	border:1px dotted #333
}

运行实例 »

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

reset.css

实例

/*样式重置*/

html{
	overflow-y: auto;
	overflow-x: hidden;
}

body, h1, h2, h3, ul, li, p{
	margin:0;
	padding: 0;
	font-family: 'microsoft yehei,Verdana, Arial;'
	color:#505050;
}

p, li, a{
	font-size: 14px;
}

ul, li{
	list-style-type: none;
}

a:link, a:visited, a:active{
	color:#505050;
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	color: #ff0000;
}

运行实例 »

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

Correction status：Uncorrected

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

自定义助手函数

2018-06-28 00:18:38