简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实战案例，关于我们介绍0709
Blogger Information
Blog 12
fans 1
comment 0
visits 9797
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实战案例，关于我们介绍0709
简简单单的博客
Original
812 people have browsed it

布局的上中下结构

上半部分header（一般包括logo、nav、banner）

logo的html编码是：<div class="logo"><a href=""></a></div>

css样式是.logo a｛宽度、高度、不要设置平铺no repea｝背景图片用url(...jpg)

nav导航利用ul/li无序列表的标签，然后清除样式list-style：none，设置margin让字的间距宽一点。去除下划线、设置行高让文字水平中间居中，设置hover鼠标移动上去的背景色。

banner广告位用img src:引用

中间部分container(一般包括左边栏、中间主题、右边栏)

container要设置overflow: hidden;把他们包裹住。

双飞翼布局：具体代码顺序是container>wrap>main>left>right>

main要被warp单独包裹住，才会自适应的撑开中间的宽度，

warp、left、right要浮动脱离文档流，然后用margin-left移动到想要的位置，

下面部分footer（一般包括网址导航、友情链接、备案号、联系方式、地址等一些内容）

备注：所有的div class 标签根据实际的情况都要给到颜色、边框、边距、定位等，不然就不会显示出来。

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin:0;
padding:0;
}
.header{
min--width:1300px;
height:60px;
background-color: black;
margin:0 auto;
overflow: hidden;
}
.logo a{
background-image: url(http://www.php.cn/static/images/logo.png);
background-repeat: no repeat;
width:160px;
height:76px;
float:left;
font-size: 14px;
position: relative;
margin-top: -10px;
}
.nav{
margin:0;
padding:0;
list-style:none
}
.nav li a{
float:left;
text-decoration: none;
color: #ccc;
padding:0 30px;
font-size: 14px;
line-height:60px;
height:60px;
}
.nav li a:hover{
background-color: coral;
font-weight: bold;
color: white;
}
.footer{
height:160px;
background-color: #393D49;
width:1900px;
margin:0 auto;
}
.footer ul{
margin:0 150px;
padding:0 180px;
list-style: none;
}
.footer ul li a{
float:left;
color: white;
text-decoration: none;
padding:30px 10px;
font-size: 14px;
}
.footer p{
clear:both;
color:#ddd;
padding-left:340px;
font-size: 14px;
}

.container{
min-height:600px;
width: 1200px;
overflow: hidden;
margin:8px auto;
}
.wrap,.left{
float:left;
}
.wrap{
width:100%;
        }
.left{
width:250px;
min-height:620px;
border:1px solid  #ddd;
margin-left:-100%;
background-color: #fff;
}
.zhong{
min-height:600px;
border:1px solid  #ddd;
margin-left: 270px;
padding-top: 20px;}
.middle h2{
margin:0;
text-align: left;
color: #656e73;
padding-left:40px;
}
.middle p{
font-size: 14px;
margin:35px 40px;
color: #656e73;
}
.banner{
margin:10px auto;
width: 1200px;
}
.left h2{
margin:30px 40px;
color: #656e73;
}
.left ul{
margin:0;
padding:0;
list-style: none;
}
.left ul li{
margin:20px 40px;
}
.left ul li a{
text-decoration: none;
color: #656e73;
font-size:18px;
}
</style>
</head>
<body>
<div class="header">
     <div class="logo">
         <a href=""></a>
     </div>
    <ul class="nav">
        <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">
     <img src="http://www.php.cn/static/images/index_ad222.jpg" alt="">
</div>
<div class="container">
  <div class="wrap">
     <div class="zhong">
	            <p>净水机招商、学习是一个没有止境的东西，需要不断的磨练和锻炼才有进步所有要不断的分析和总结才能有所收获</p>
            <p>通过本次的学习自己收获了很多，有的不足之处，还需要自己去弥补和擦楼补缺才行，一起努力</p>
</div>
</div>
    <div class="left">
         <h2>联系我们列表</h2>
    <ul>
        <li><a href="">地址</a></li>
        <li><a href="">电话</a></li>
        <li><a href="">合作联系</a></li>
        <li><a href="">***中心</a></li>
    </ul>
     </div>
    </div>
<div class="footer">
        <ul>
            <li><a href="#">网站首页</a></li>
            <li><a href="">PHP视频</a></li>
            <li><a href="">PHP实战</a></li>
            <li><a href="">PHP代码</a></li>
            <li><a href="">PHP手册</a></li>
            <li><a href="">词条</a></li>
            <li><a href="">手记</a></li>
        </ul>
        <p>PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
        <p>Copyright 2014-2019 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9  皖公网安备 34010402701654号  免责申明赞助与捐赠</p>
</div>
</body>
</html>

运行实例 »

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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！