仿站练习 2018年3月29日 - CSS

Home > List of blog posts > 仿站练习 2018年3月29日

Blogger Information

Blog 27

fans 2

comment 1

visits 13583

Special Recommendation

More>

Related recommendations

实例

<!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">咨询电话：020-22043297</p>
			</div>
		</div>

		<div class="info">
			<div class="logo"><img src="images/logo.png"></div>
			<div class="search">
				<input type="text" name="name" placeholder="关键字">
				<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>
					<li><a href="">人才招聘</a></li>
				</ul>
			</div>
		</div>
	</div> 

	<!-- banner图 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="">
		<div class="line"></div>
	</div>

	<!-- 产品列表 -->
	<div class="product">
		<!-- 标题部 -->
		<div class="title">
			<h2>产品<img src="images/proicon.png" alt="">中心</h2>
			<p>局域网远程、外网远程、手机远程、让监控 无处不在</p>
		</div>

		<!-- 产品列表 -->
		<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>
			<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>
					<span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
				</li>
				<li>
					<span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
				</li>
				<li>
					<span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
				</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="">谷歌</a></li>
			</ul>
		</div>


</body>
</html>

运行实例 »

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

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


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

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

}

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

运行实例 »

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

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;
	overflow:hidden;
}

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

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

.header  .info .logo {
	width:440px;
	height:58px;
	float:left;
}
.header  .info .search {
	float:right;
	height:88px;
	margin-right:100px;
	margin-top:10px;
}

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

.header .info .search button {
	width:45px;
	height:32px;
	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;
	padding:0 30px;
	line-height: 50px;
	
}

.header .menu ul li a {
	font-size:1.5em;
	color:white;
}

.header .menu ul li:hover {
	background: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 {
	color: #fff;
	line-height: 92px;
}

运行实例 »

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

index.css

实例

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

} 

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

.product {
	width:1140px;
	margin:auto;
	margin-top:30px;
	margin-bottom: 30px;
	overflow:hidden;
}

.product .title {
	text-align: center;
	background-image:url(../images/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;
}

.prouduct li img:hover {
	opacity: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: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: 58px;
	background-color: black;

}

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

运行实例 »

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

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

将$.ajax()的第一种用法 2018-4-10

2018-04-12 11:29:59

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例

实例

实例