仿站-20180401-17;56 - 森田的微博

Home > List of blog posts > 仿站-20180401-17;56

Blogger Information

Blog 34

fans 2

comment 2

visits 22739

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>某某家具公司</title>
	<!-- 重置样式表 -->
	<link rel="stylesheet" type="text/css" href="reset.css">
	<!-- 头部 -->
	<link rel="stylesheet" type="text/css" href="common.css">
	
	<!-- 主体 -->
	<link rel="stylesheet" type="text/css" href="content.css">


</head>
<body>
	<!-- 头部 -->
	<div class="headr">
		<div class="tape">
			<div class="top">
				<p class="left">欢迎进入家具有限公司!</p>
				<p class="right">24小时咨询热线：+020-22043297</p>
			</div>
		</div>
		<div class="menu">
			<div class="logo"><img src="logo.jpg" ></div>
			<div class="menu1">
				<div class="menu2">
					<ul>
						<li class="a1"><a href="">网站首页</a></li>
						<li class="a2"><a href="">公司简介</a></li>
						<li class="a3"><a href="">新闻动态</a></li>
						<li class="a4"><a href="">产品系列</a></li>
						<li class="a5"><a href="">品牌加盟</a></li>
						<li class="a6"><a href="">客户服务</a></li>
						<li class="a7"><a href="">人才招聘</a></li>

					</ul>
				</div>
			</div>
			
		</div>
	</div>
	<!-- 底部 -->
	<div class="bottom">

	</div>

	<div class="content">
		<div class="desktop"><img src="c.jpg"></div>
		<div class="line"></div>

	</div>
	<div class="product">
		<div class="title">
			<h1>新品推荐</h1>
			<p>NEW ARRIVALS</p>

		</div>
	
	</div>	
	<div class="product1">		
		<ul>
			<li><a href="">产品系列一</a></li>
			<li><a href="">产品系列二</a></li>
			<li><a href="">产品系列三</a></li>
			<li><a href="">产品系列四</a></li>
		</ul>
		
	</div>
	<br>
	<div class="product2">
		<ul>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
		</ul>
		<ul>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
			<li><a href=""><img src="product.jpg" alt=""></a>
				<a href="">我的产品名称</a>
			</li>
		</ul>

	</div>
	<div class="make">
		<img src="img.png" alt="">
		<div class="p">
			<p>某某家具以板木家具为主，其现代简约的风格，环保第一的理念，原创设计的宗旨，早已深入人心，不管是家具业的行内人，还是追求时尚，追求美的大众都被某某家具所深深的吸引。经过多年的发展，某某家具的专卖店已遍布全国各主要城市，出口海外62个国家和地区。</p><br>
			<p>某某家具采用模块化的设计，用户可以根据自己的要求自由组合，通过自己的双手，自己的想法，设计出属于自己的独特的家居空间，某某家具一直坚持“我的家，我做主！”某某家具目前主要系列的产品涵盖:客厅家具系列，卧室家具系列，餐厅家具系列，书房家具系列等。</p><br><br>
			<p> 通过优化我们的整个价值链，与供应商建立长期合作关系，投资高度自动化和大规模生产等方式，我们努力为顾客提供物美价优的产品。我们的愿景不局限于家居装饰。我们希望通过努力，为大众创造更美好的日常生活。</p><br>
			<button>企业详情</button>
			<button>联系方式</button>

		</div>
	</div>

	<div class="foot">
		<p>备案号：沪icp 8888XXXX号       邮箱：0000XXXX@XX.com      电话：+86-021-1234567XX <br>
		传真：+86-021-1234567X8        网址：www.xxxxxx.com</p>
	</div>
</body>
</html>

运行实例 »

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

样式重置CSS

实例

html{
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0;
}
body,h1,h2,h3,h4,h5,p {
	margin:0;
	padding: 0;
	font-family: "仿宋";
	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;
}

运行实例 »

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

公共样式表首、尾css

实例

/*公共样式表
头部菜单*/
.headr{
	width: 100%;
	height: 128px;
}
.headr .tape {
	height: 28px;
	border-top: 1px solid #f5f5f5;
	background-color: #434343;


}
.top {
	width: 100%;
	margin:auto;
	overflow: hidden;
	padding:0; 

}
.headr .tape .top .left {
	float: left;
	color:white;
	margin-left: 80px;
	margin-top: 5px;


}

.headr .tape .top .right {
	float: right;
	color:white;
	margin-right: 80px;
	margin-top: 5px;

}
/*头部菜单、logo*/
.headr .menu {
	height: 100px;
	background-color: white;
}

.headr .menu img {
	width: 180px;
	height: 70px;
	float: left;
	margin-left: 80px;
	margin-top: 12px;
}

.headr .menu .menu1 .menu2 {
	width: 800px;
	height: 100px;
	float: right;
	margin-right: -12px;

}

.headr .menu .menu1 .menu2 ul{
			margin: 0;
			padding: 0;
			text-align: right;

}
.headr .menu2 ul li{
	float:left;
	line-height: 100px;
	padding-right: 40px; 
	text-align: center;

}
.headr .menu2 ul li:hover{
	background-color: #E71F19;
	cursor: pointer;
}

.headr .menu .menu1 .menu2 ul li a {
	height: 100px;
	width: 100px;
	font-size: 1.2em;
	color: black;
	text-align: center;

}
.foot{
	width: 1394px;
	height:100px;
	background-color: black;
	text-align: center;
}

.foot p{
	color: white;
	line-height: 50px;
	font-size: 1.2em;

}

运行实例 »

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

主体CSS

实例

/*主体*/

.content {
/*	border: 1px solid red;*/
}
.content img {
	width: 100%;
	height:510px;
	margin:0;
	padding:0;
	background-repeat: no-repeat;  
	vertical-align: top;
}

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


}

.product  {
	width:1349px;
	margin:auto;
	margin-top: 20px;
	margin-bottom: 30px;
	overflow:hidden;  

}

.product .title{
	/*text-align: center;*/
	/*border: 1px solid red;*/
	width: 100%;
	background-image: url(tiao.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	padding: 0;


}
.product .title h1 {
	margin-left: 540px;
	margin-top: 15px;


}
.product .title p {
	margin-left: 560px;
}

.product1{
	width: 1349px;
	height: 60px;
	margin:auto;
	/*margin-top: 5px;*/
/*	margin-bottom: 5px;*/
	overflow: hidden;
	text-align: center;
}

.product1 ul {
    display:inline-block;
}
.product1 ul li {
	height:40px;

	float: left;
	line-height: 50px;
	padding: 0px 40px;
	border: 1px solid black;
	margin-left:10px;
	

}

.product1 ul li a {
	font-size: 1.0em;
	color: black; 
}
.product1 ul li:hover {
	background-color:white;
	cursor: pointer;
	color: red;
	border-color: red;
}

.product2{
	width: 1349px;
	margin:auto;
	margin-top: 15px;
	margin-bottom: 30px;
	overflow: hidden;
}

.product2 li{
		width: 200px;
		height: 300px;
		text-align:center;
		float:left;
		margin:25px;
}

.product2 li img{
	width:200px;
	height: 260px;
	margin-bottom: 10px;
}
.product2 li img:hover {
	border: 1px solid red;
	cursor: pointer;

}

.make {
	width: 1349px;
	margin: auto;
	margin-bottom: 50px;
}

.make img {
	width: 300px;
	height: 350px;
	float:left;
	margin-right: 30px;
	margin-left: 50px;

}
.make .p p {
	line-height:1.5em;
	color: black;
	font-size: 1.2em;

}

.make .p button {
	width: 150px;
	height: 50px;
	border: none;
	background-color: red;
	color: #fff;
	border-radius: 10px;
	font-size: 1.3em;
}

.make .p button:hover {
	background-color: #FE3B4A;
	cursor: pointer;
}

运行实例 »

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

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

用javascript实现明星相册-20180330-16:34

2018-03-30 16:42:24