效果图：
效果图二
效果图三
html代码：
index.html
实例
<!DOCTYPE html> <html lang="en"> <head> <!-- 引入css样式 --> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="common.css"> <link rel="stylesheet" type="text/css" href="reset.css"> <meta charset="UTF-8"> <title>深圳市腾隆钾业有限公司</title> </head> <body> <!-- 头部 --> <div class="header"> <a href="logo.html" class="logo"><img src="images/logo.png" alt="logo"></a> <div class="hdRight"> <div class="text"> <a href="">EN</a> | <a href="">收藏本站</a> | <a href="">企业邮箱</a> </div> <div class="tel"> 咨询电话：400-8888 8888 </div> </div> </div> <hr color="#efefef" size="2" width="98%"> <!-- 导航条 --> <div class="nav"> <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> <li><a href="">联系我们</a></li> </ul> </div> <!-- 首页背景图 --> <div class="banner"></div> <!-- 产品展示区 --> <div class="product"> <div class="title"> <h2>产品展示</h2> <p>Product dispaly</p> </div> <!-- 图片文字区 --> <div class="wrap"> <a href="" class="box"><img src="images/pro1.jpg" alt="氯化钾"> <div class="text"> <h3>氯化钾</h3> <p>主要用于无极工业，是支招各种家宴或咸如青氯化钾、硫酸钾、硝酸钾、氯酸钾...</p> </div> </a> <a href="" class="box"><img src="images/pro2.jpg" alt="硫酸钾镁"> <div class="text"> <h3>硫酸钾镁</h3> <p>主要用于无极工业，是支招各种家宴或咸如青氯化钾、硫酸钾、硝酸钾、氯酸钾...</p> </div> </a> <a href="" class="box"><img src="images/pro3.jpg" alt="硫酸钾"> <div class="text"> <h3>硫酸钾</h3> <p>主要用于无极工业，是支招各种家宴或咸如青氯化钾、硫酸钾、硝酸钾、氯酸钾...</p> </div> </a> </div> </div> <!-- 新闻中心 --> <div class="news"> <div class="title"> <h2>新闻中心</h2> <p>News center</p> </div> <div class="wrap"> <div class="video"><img src="images/shipin.jpg"></div> <ul class="list"> <li> <a href=""> <div class="time"> 02<span>2018年3月</span> </div> <div class="text"> <h3>国礼书法家段明亮先生为公司提名</h3> <p>国礼书法家段明亮先生为公司提名,并祝贺格尔木腾隆钾业有限公司隆重开业，祝愿格尔木腾隆钾业生意兴隆。</p> </div> </a> </li> <li> <a href=""> <div class="time"> 06 <span>2018年4月</span> </div> <div class="text"> <h3>青海湖高端盐湖科技有限公司董事长视察工地及水源地</h3> <p>青海湖高端盐湖科技有限公司董事长视察工地及水源地，了解生产情况就安全生产现场作出重要指示。会议上听取各部门汇报总结并作出战略指导....</p> </div> </a> </li> <li> <a href=""> <div class="time"> 12 <span>2018年4月</span> </div> <div class="text"> <h3>钾肥简介及主要的作用</h3> <p>钾肥全称家属肥料。以钾为主要养分的肥料，植物体内寒假一般占干物质中的0.2%~4.1%，仅次于氮。钾在植物生长发育过程中，参与60种以上...</p> </div> </a> </li> </ul> </div> </div> <!-- 搜索框 --> <div class="more"> <div class="search"><a href="">查看更多 ></a></div> </div> <!-- 关于我们 --> <div class="about"> <div class="bglogo"><img src="images/ablogo.png" alt=""></div> <h1>经营的是品质，销售的是信誉</h1> <div class="line"></div> <div class="text"> 格尔木腾隆钾业有限公司成立于2016年5月，注册资金500万元，该公司属扎根大西北，面向农业、服务于客户的有限责任公司<br/> 主营硫酸钾美肥，淡化钾肥，氯化钾肥，钾肥的加工与销售。目前，根据市场需求，代购代销化肥、氯化镁、低钠盐等业务<br/> 公司位于青海省格尔木市，这里属于柴达木盆地南侧，平均海拔2800米左右<br/> 特殊的气候条件 </div> </div> <!-- 底部 --> <div class="footer"> <div class="wrap"> <div class="textleft">Copyright(C)www.tenglongjiaye.com All Rights Reserved 格尔木腾隆钾业有限 邮编：816099</div> <div class="textright">技术支持：七年</div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
html.css
实例
.banner{
height: 565px;
width: 100%;
min-width: 1100px;
/*border: 1px solid red;*/
background-image: url(images/banner.jpg);
background-position: center;
vertical-align: top;
}
/*产品展示区头部*/
.product{
width: 100%;
min-width: 1100px;
height: 620px;
/*border:1px solid red;*/
background: #f5f5f5;
}
.product .title{
text-align: center;
padding-top: 80px;
}
.product .title h2{
font-size: 30px;
font-weight: bold;
background: url(images/titleline.png) no-repeat center;
}
.product .title p{
font-size: 12px;
color: #888;
margin-top:5px;
text-transform: uppercase;/*大写*/
}
/*产品展示区*/
.product .wrap{
width: 1100px;
margin: 40px auto;
}
.product .box{
/*display:block;*/
width:350px;
height:370px;
margin-left: 14px;
float: left;
background: #fff;
/*border: 1px solid red;*/
}
/*.product .box img{
display: block;
}*/
.product .text{
height: 136px;
border-bottom: 4px solid #0068B7;
padding: 0 20px;
}
.product h3{
font-size: 18px;
padding: 20px 0;
}
.product p{
text-indent: 2em;
line-height: 1.7em;
}
.product .box:hover{
background: #0068B7;
}
.product .box h3:hover{
color: #FFFFFF;
}
.product .box p:hover{
color: #FFFFFF;
opacity: 0.6;/*透明度*/
}
/*新闻中心*/
.news{
height: 460px;
width: 1100px;
/*border:1px solid red;*/
margin: 60px auto;
}
.news .title{
text-align: center;
padding-top: 50px;
}
.news .title h2{
font-size: 30px;
font-weight: bold;
background: url(images/titleline.png) no-repeat center;
}
.news .title p{
font-size: 12px;
color: #888;
margin-top:5px;
text-transform: uppercase;/*大写*/
}
/*新闻中心*/
.news .wrap{
margin-top: 40px;
}
.news .video{
float: left;
}
.news .list{
width: 640px;
float: right;
}
.news li{height: 70px;margin-bottom: 30px;}
.news .time{width: 68px;height: 68px;border:1px dotted #0068b7;float: left;
text-align: center;color: #0068b7;font-size: 40px;
}
.news .time span{display: block;font-size: 12px;}
.news .text{
float: right; width: 550px;height: 40px;
}
.news .text p{
text-indent:2em;
line-height: 1.6em;
opacity: 0.6;
}
.news .text h3{
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.news .text h3:hover{
color: #0068b7;
}
.more{
height: 40px;
width: 100%px;
margin:-20px 0 20px 0;
}
.more .search{
line-height: 40px;
width: 160px;
text-align: center;
margin:0 auto;
border: 1px solid #0DB7E3;
}
.more a:hover{
color:#0DB7E3;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
common.css
实例
.header{
width: 1100px;
height: 100px;
margin: 0 auto;
/*border: 1px solid red;*/
}
.logo{
float:left;
margin: 20px 0 0 0;
}
.hdRight{
float: right;
text-align: right;
}
.hdRight .text{
margin: 40px 0 0 0;
padding-bottom: 8px;
font-size: 14px;
}
.hdRight .text a:hover{
font-weight: bold;
color:#333;
}
.hdRight .tel{
/*margin: 0 0 0 0;*/
font-size: 12px;
}
/*导航条*/
.nav{
width: 100%;
min-width: 1100px;
height: 60px;
margin-top: -9px;
/*border: 1px solid red;*/
}
.nav li{
float: left;
}
.nav ul{
height: 60px;
width: 1160px;
margin: 0 auto;
}
.nav ul li a{
line-height: 60px;
display: block;
padding:0 34px;
font-size: 16px;
}
.nav ul li a:hover{
background: #0068b7;
color:#fff;
}
/*关于我们*/
.about{
width: 100%;
min-width: 1100px;
height: 320px;
background-color: #283442;
text-align: center;
}
.about .bglogo{
padding-top: 30px;
}
.about h1{
font-size: 14px;
font-weight: bold;
color: #b4c2d4;
margin: 20px auto 10px;
}
.about .line{
width: 50px;
height: 1px;
background: #b4c2d4;
margin: 20px auto 10px;
}
.about .text{
color: #98A5B6;
font-size: 14px;
line-height: 1.6em;
margin-top: 20px;
}
/*底部导航*/
.footer{
width: 100%;
height: 50px;
background: #1A222B;
}
.footer .wrap{
width: 1100px;
height:50px;
margin:auto;
/*padding: 15px 0;*/
font-size: 12px;
color: #67727F;
}
.footer .textleft{
float: left;
padding: 20px 0;
}
.footer .textright{
float: right;
padding: 20px 0;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
reset.css
实例
html{
overflow-y: auto;
overflow-x: hidden;
}
body,h1,h2,h3,ul,li,p{
margin: 0;
padding: 0;
font-family: 'microsofe 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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
