实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页 - 仿企业网站</title> <!-- 导入样式重置表 --> <link rel="stylesheet" type="text/css" href="css/style_reset.css"> <!-- 导入样式公共表 --> <link rel="stylesheet" type="text/css" href="css/style_public.css"> <!-- 导入首页样式表 --> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!-- 公共头部 --> <div class="header"> <!-- 顶部 --> <div class="top"> <div class="tab"> <p class="left">士林电器 www.gzshilin.net</p> <p class="right">欢迎来电订做：黄经理 13600490158</p> </div> </div> <div class="tab"> <div class="logo"><img src="images/logo.png" alt="LOGO"></div> <div class="search"> <input type="text" name="name" placeholder="关键字"> <button>搜索</button> </div> </div> <!-- 导航 --> <div class="nav"> <div class="tab"> <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="cplb"> <!-- 产品标题 --> <div class="title"> <h2>产品<img src="images/cp_title_mini.png" alt="">中心</h2> <p>士林电器、漏电开关、面板开关、成套配电箱、配电柜</p> </div> <!-- 产品列表 --> <ul> <li> <a href=""><img src="images/cp_pic.jpg"></a> <a href="">士林电力电缆1</a> </li> <li> <a href=""><img src="images/cp_pic.jpg"></a> <a href="">士林电力电缆2</a> </li> <li> <a href=""><img src="images/cp_pic.jpg"></a> <a href="">士林电力电缆3</a> </li> <li> <a href=""><img src="images/cp_pic.jpg"></a> <a href="">士林电力电缆4</a> </li> <br> <li> <a href=""><img src="images/cp_pic.jpg"></a> <a href="">士林电力电缆5</a> </li> <li> <a href=""><img src="images/cp_pic.jpg"></a> <a href="">士林电力电缆6</a> </li> <li> <a href=""><img src="images/cp_pic.jpg"></a> <a href="">士林电力电缆7</a> </li> <li> <a href=""><img src="images/cp_pic.jpg"></a> <a href="">士林电力电缆8</a> </li> </ul> </div> <!-- 企业图片 --> <div class="qy-img"> </div> <!-- 企业简介 --> <div class="jianjie"> <img src="images/shilin.jpg"> <div class="miaoshu"> <p>广州士林电器有限公司成立于2005年,是一家集研制,开发生产,销售,服务于一体的大型现代化实力型企业。主要产品有电线电缆,低压成套电器,面板开关,电子电表,电工产品等。公司一贯坚持以人为本的管理理念,以“顾客就是上帝”的销售观,以“信誉为本、以质取胜”的企业宗旨,竭力让广大客户从我们的产品获得更大的实惠。</p> <button>了解更多</button> </div> </div> <hr color="#efefef" size="1" width="100%"> <!-- 新闻列表 --> <div class="news"> <div class="left"> <img src="images/news.jpg" alt=""> </div> <div class="right"> <ul> <li> <span><h1>31</h1><p>2018-3</p></span> <a href="">电线电缆行业新材料革命时代将到来</a> <p>我国电缆行业年用铜量超过500万吨，占国内铜消耗60%。为满足这种需求每年要花大量外汇进口铜材，约占铜消耗量3/5。该如何解决电缆所需的原材料问题？...</p> </li> <li> <span><h1>28</h1><p>2018-3</p></span> <a href="">“网络红本价”缓解电线电缆行业“价格”之痛</a> <p>“行业内主流的意见是对目前产业质量表示担忧。”这是中国电器工业协会电线电缆分会召开的七届三次理事长工作会上传递出来的声音。事实上，在担忧的背后是行业面临的“价格”之痛。...</p> </li> <li> <span><h1>16</h1><p>2018-3</p></span> <a href="">电线电缆行业发展状况和竞争格局分析</a> <p>有家公司举办新年晚会，一员工经过重重考验，进入到了抽奖环节。台下同事都在起哄：“苹果！苹果！苹果！”结果他真的抽到一张字条：苹果牌笔记本！正在他激动万分之时，司仪缓缓地递给他一个礼品包，里面有一个苹果、一副牌、一个笔记本。...</p> </li> <li> <span><h1>04</h1><p>2018-3</p></span> <a href="">电线电缆行业混乱 铜市反弹高度受制</a> <p>如今，中国电线电缆总产值已超过美国，成为世界上第一大电线电缆生产国。我国电线电缆行业是仅次于汽车行业的第二大产业，近年来对铜的消费占国内铜消费总量的60%-86%，已然是精炼铜的主要需求渠道...</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="">企业优势</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="">PHP中文网</a></li> </ul> </div> <div class="bottom"> <p>COPYRIGHT © 2015 广州士林电器有限公司 ALL RIGHTS RESERVED 粤ICP备16026515号-1 技术支持：浦北社区</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 index.css
/*首页专用样式表*/
.banner {
/*border: 1px solid red;*/
}
.banner img {
width: 100%;
height: 450px;
vertical-align: top;
}
.banner .line {
height: 30px;
background-color: #696969;
opacity: 0.5;
margin-top: -30px;
}
/*产品列表*/
.cplb {
width: 1140px;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
overflow: hidden;
}
.cplb .title {
text-align: center;
background-image: url(../images/title_bg.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
.cplb .title img {
padding: 0 5px;
}
.cplb li {
width: 260px;
height: 282px;
text-align: center;
float: left;
margin:10px;
}
.cplb li a {
font-size: 16px;
}
.cplb li img {
width: 260px;
height: 197px;
margin-bottom: 10px;
}
.cplb li img:hover {
opacity: 0.8;
}
/*企业图片*/
.qy-img {
width: 100%;
height: 412px;
background-image: url(../images/gg.jpg);
background-repeat: no-repeat;
margin-bottom: 50px;
opacity:0.5;
}
/*企业简介*/
.jianjie {
width: 1140px;
margin: auto;
margin-bottom: 50px;
}
.jianjie img {
width: 286px;
height: 177px;
float:left;
margin-right: 50px;
}
.jianjie .miaoshu p {
text-indent: 2em;
line-height: 2em;
margin-bottom: 15px;
}
.jianjie .miaoshu button {
width: 130px;
height: 34px;
border: none;
background-color: gray;
color: #fff;
}
.jianjie .miaoshu 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: 300px;
}
.news .right {
overflow: hidden;
}
.news .right ul {
margin-left: 50px;
}
.news .right ul li {
height: 78px;
}
.news .right li span {
float:left;
width: 70px;
height: 68px;
background-color: black;
margin-right: 10px;
}
.news .right li span * {
color: #fff;
text-align: center;
}
.news .right li:hover {
cursor: pointer;
}
.news .right li a {
font-size: 14px;
font-weight: bolder;
}
.news .right li p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例style_public.css
/*公共样式表*/
/*公共头部的样式*/
.header {
width: 100%;
height: 170px;
}
.header .top {
height: 28px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
background-color: #fbfbfb;
}
.tab {
width: 1140px;
margin: auto;
/*BFC：块级格式化上下文*/
overflow: hidden;
}
.header .top .tab .left {
float:left;
}
.header .top .tab .right{
float:right;
}
.header .tab .logo {
width: 440px;
height: 88px;
float: left;
}
.header .tab .search {
float:right;
height: 88px;
margin-right: 100px;
margin-top: 10px;
}
.header .tab .search input {
width: 210px;
height: 26px;
border: 2px solid coral;
margin: 18px 0;
}
.header .tab .search button {
width: 45px;
height:32px;
background-color: coral;
border: none;
color:white;
margin-left: -40px;
}
/*头部菜单*/
.header .nav {
width: 100%;
height: 50px;
background-color: black;
}
.header .nav ul li {
float: left;
line-height: 50px;
padding:0 40px;
}
.header .nav ul li a {
font-size: 1.1em;
color: #fff;
}
.header .nav ul li:hover {
background-color: 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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例style_reset.css
/*样式重置*/
html {
overflow-y: auto;
overflow-x: hidden;
}
body, h1,h2,h3, ul,li,p {
margin: 0;
padding: 0;
font-family: 'microsoft yahei', 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;*/
color: #f00;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
