主要模拟以下网站：
index.html代码如下：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>建筑公司业务简介页面</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <!-- 头部 --> <div class="header"> <div class="top"> <div class="left"><a href=""><img src="images/logo.png" alt="logo" /> </a></div> <div class="right"> <p class="set"><a href="">设为首页</a> | <a href="">加入收藏</a></p> <p class="tel">咨询电话：13023288071</p> </div> </div> </div> <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> </ul> </div> <!-- banner --> <div class="banner"> <img src="images/banner.jpg" alt="banner"> </div> <!-- body部分 --> <div class="main"> <div class="left"> <div class="left1"> <div class="title">服务项目 Service</div> <ul class> <li>拆旧、敲墙、酒店、商场</li> <li>宾馆拆旧工程</li> <li>建筑工地废旧厂房拆酒店</li> <li>娱乐场所</li> <li>建筑工地及家庭</li> </ul> </div> <div class="left2"> <div class="title">联系我们</div> <div class="contact"> <p><b class="f15">XX工程有限公司</b></p> <p>电话：130555555</p> <p>传真：0517-85932887</p> <p>地址：淮安天桥区北园大街548号</p> <p>网址：www.gggg.com</p> </div> </div> </div> <div class="right"> <div class="a_left"> <div class="tit"><span><a href="">公司简介</a></span></div> <p>拆旧 各种砸墙、砸地砖 铲墙皮、旧房改造，拆隔墙门窗等 清理垃圾 建筑垃圾 垃圾清理 敲墙 敲墙、改结构 酒店、商场,宾馆拆旧工程： 室内结构包括（拆吊顶、拆电缆电线、拆通风系统、拆隔间、拆地板、砸墙、砸地平,室外结构包括：拆广告牌、拆霓虹灯、拆铝合金门窗等。 建筑工地： 拆活动房、拆配电房、拆建筑废料、拆电线电缆、拆水暖器件、拆钢管扣件及门窗材料等。...[详细]</p><img src="images/gs_t.jpg" width="410" height="105"> </div> <div class="a_right"> <div class="titl"><span><a href="">新闻中心</a></span></div> <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 class="example"> <div class="title"><a href="">案例展示</a></div> <div class="pic"> <ul> <li><a target="_blank" href="#"><img src="images/cp_cp.png"/><p>案例展示名称</p></a></li> <li><a target="_blank" href="#"><img src="images/cp_cp.png"/><p>案例展示名称</p></a></li> <li><a target="_blank" href="#"><img src="images/cp_cp.png"/><p>案例展示名称</p></a></li> </ul> </div> </div> </div> </div> </div> <!-- foot部分 --> <div class="footer"> <p>联系人：林先生 13023288071</p> <p>Copyright © 2014-2015 www.haiis.com,All Rights Reserved 苏ICP备12345678号</p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
common.ccs代码如下：
实例
/*
* @Author: Marte
* @Date: 2018-03-29 13:25:11
* @Last Modified by: Marte
* @Last Modified time: 2018-03-29 17:51:49
*/
.header {
width: 100%;
height: 95px;
}
.header .top {
width: 1000px;
height: 95px;
backgrou-color: #E4F4F6;
margin: 0 auto;
// position: relative;
}
.header .top .left {
width: 50%;
height: 95px;
line-height: 95px;
float: left;
}
.header .top .left img {
vertical-align: middle;
}
.header .top .right {
float: right;
text-align: right;
}
.header .top .right .set {
padding-top: 5px;
}
.header .top .right .tel {
font-size: 1.2em;
padding-top: 20px;
padding-bottom: 1px;
}
.nav {
// clear: both;
width: 100%;
height: 40px;
background-color: #603EE8;
}
.nav ul {
width: 900px;
height: 40px;
margin: auto;
}
.nav ul li {
float: left;
line-height: 40px;
padding: 0 40px;
}
.nav ul li a {
font-size: 1.1em;
color: white;
}
.nav ul li:hover {
background-color: coral;
cursor: pointer;
}
.banner {
width: 1000px;
margin: auto;
}
.banner img {
width: 1000px;
background-repeat: no-repeat;
}
.footer {
width: 100%;
height: 90px;
background-color: #603EE8;
}
.footer p {
color: white;
font-size: 1.05em;
text-align: center;
padding-top: 15px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
index.css代码如下：
实例
/*
* @Author: Marte
* @Date: 2018-03-29 13:25:21
* @Last Modified by: Marte
* @Last Modified time: 2018-03-29 19:20:57
*/
.main {
width: 1000px;
min-height: 535px;
overflow: hidden;
margin: auto;
position: relative;
}
.main .left {
width: 240px;
height: 100%;
float: left;
}
.main .left .left1 {
width: 240px;
height: 50%;
// background-color: blue;
}
.main .left .left1 .title {
background-color: #3E49F4;
text-align: center;
color: white;
height: 40px;
line-height: 40px;
}
.main .left .left1 ul li {
background: url(../images/menu_li_bg.jpg) no-repeat;
height: 43px;
line-height: 40px;
padding-left: 40px;
font-size: 14px;
color: #82846f;
margin-top: 10px;
}
.main .left .left2 .title {
background-color: #3E49F4;
text-align: center;
color: white;
height: 40px;
line-height: 40px;
}
.main .left .left2 .contact {
background: url(../images/left_lx_bg.jpg) repeat-x;
height: 174px;
padding: 8px 15px;
line-height: 2.4em;
font-size: 13px;
}
.main .right {
float: left;
width: 760px;
height: 100%;
}
.main .right .a_left {
width: 410px;
height: 330px;
float: left;
}
.main .right .a_left .tit {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.main .right .a_left .tit span {
height: 40px;
line-height: 40px;
padding-left: 20px;
}
.main .right .a_left p {
line-height: 2em;
}
.main .right .a_right {
width: 350px;
height: 342px;
float: left;
}
.main .right .a_right .titl {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.main .right .a_right .titl span {
height: 40px;
line-height: 40px;
padding-left: 20px;
}
.main .right .a_right ul li {
background: url(../images/li_ico.jpg) no-repeat left center;
padding-left: 15px;
line-height: 35px;
font-size: 13px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.main .right .example {
clear: both;
width: 760px;
height: 191px;
// overflow: hidden;
}
.main .right .example .title {
height: 40px;
line-height: 40px;
color: #0061aa;
padding-left: 20px;
border-bottom: 1px solid #d9d9d9;
}
.main .right .example .pic ul li {
float: left;
text-align: center;
width: 230px;
height: 170px;
overflow: hidden;
margin-top: 20px;
}
.main .right .example .pic ul li img {
width: 200px;
height: 140px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
reset.css代码如下：
实例
/*
* @Author: Marte
* @Date: 2018-03-29 13:25:51
* @Last Modified by: Marte
* @Last Modified time: 2018-03-29 19:28:33
*/
html {
overflow-y: auto;
overflow-x: hidden;
}
body, h1, h2, h3, ul, li, p {
margin: 0;
padding: 0;
font-family: 'microsoft 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;*/
color: #f00;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
完成后的页面如下：
