search

博客列表 >3月28日作业

3月28日作业

时光记忆的博客
时光记忆的博客原创
2018年03月28日 22:28:04644浏览

header.html

实例

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

运行实例 »

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


上一条：双飞翼和圣杯布局设计2018-03-28下一条：网页布局 3月27日 作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多