search

博客列表 >仿站-20180401-17;56

仿站-20180401-17;56

AsNwds_MIS王的博客
AsNwds_MIS王的博客原创
2018年04月01日 18:01:32588浏览

HTML界面

实例

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

运行实例 »

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


上一条：Javascript的基本语法和计算器实例-2018年3月29日下一条：3月30号作业之javascript实战--2018年4月1号提交
用css建立网站
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多