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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
