常见行布局:
导航使用 position:fixed 固定住
导航会脱离文档流, 不占据空间
导致下面的元素上移, 因此需要将下面的元素的 padding-top 设置成导航的高度
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- *{ margin:0; padding:0; } .header{ width:100%; height:50px; background:#333;
- color:#fff; text-align: center; line-height:50px; position:fixed; } .banner{
- width:1200px; height:200px; margin:0 auto; background:#ccc; padding-top:50px;
- }
- </style>
- </head>
- <body>
- <div class="header">
- 导航
- </div>
- <div class="banner">
- banner 图
- </div>
- </body>
- </HTML>
如果行高的单位是百分比, 那么是基于当前字体尺寸的百分比行间距
经典的两列布局
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- *{
- margin:0;
- padding:0;
- font-size:14px;
- }
- .header{
- width:100%;
- height:60px;
- background:#000;
- color:#fff;
- line-height:60px;
- position:fixed;
- }
- .logo img{
- float:left;
- margin-left:20px;
- }
- ul{
- list-style:none;
- float:right;
- margin-right:20px;
- }
- ul li{
- float:left;
- margin-right:20px;
- }
- ul li a{
- text-decoration: none;
- color:#fff;
- }
- .container{
- width:100%;
- height:400px;
- background:rgb(173,216,230);
- padding-top:150px;
- }
- .left{
- width:35%;
- float:left;
- padding-left:15%;
- }
- .right{
- width:35%;
- float:right;
- padding-left:15%;
- }
- .left h1,
- .right h1{
- font-size:20px;
- margin-bottom:10px;
- }
- .item{
- height:40px;
- line-height:40px;
- }
- .item span{
- background:rgb(201,98,79);
- margin-right:2em;
- color:#fff;
- }
- .footer{
- width:100%;
- height:60px;
- background:#333;
- color:#fff;
- text-align: center;
- line-height:60px;
- }
- .footer span{
- margin-right:30px;
- }
- .footer span:last-child{
- margin-right:0;
- }
- </style>
- </head>
- <body>
- <div class="header">
- <div class="logo"><img src="cat-little.jpg" alt="logo" height="60px"></div>
- <ul>
- <li><a href="#"> 导航 1</a></li>
- <li><a href="#"> 导航 2</a></li>
- <li><a href="#"> 导航 3</a></li>
- <li><a href="#"> 导航 4</a></li>
- <li><a href="#"> 导航 5</a></li>
- </ul>
- </div>
- <div class="container">
- <div class="left">
- <h1 > 推荐哦 </h1>
- <div class="item">
- <span > 此乃路径 </span>
html5 与 CSS3 实现动态网页
- </div>
- <div class="item">
- <span > 此乃路径 </span>
html5 与 css3 实现动态网页
- </div>
- <div class="item">
- <span > 此乃路径 </span>
html5 与 css3 实现动态网页
- </div>
- <div class="item">
- <span > 此乃路径 </span>
html5 与 css3 实现动态网页
- </div>
- <div class="item">
- <span > 此乃路径 </span>
html5 与 css3 实现动态网页
- </div>
- </div>
- <div class="right">
- <h1 > 其他相关 </h1>
- <div class="item">
- HTML CSS JavaScript
- </div>
- <div class="item">
- HTML CSS JavaScript
- </div>
- <div class="item">
- HTML CSS JavaScript
- </div>
- </div>
- </div>
- <div class="footer">
- <span > 友链 </span>
- <span > 友链 </span>
- <span > 友链 </span>
- <span > 友链 </span>
- <span > 友链 </span>
- </div>
- </body>
- </HTML>
图文混排使用: dl dt dd
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- *{ margin:0; padding:0; font-size:14px; } .container{ background:#ccc;
- } .content{ width:1000px; margin:0 auto; } dl{ width:300px; float:left;
- text-align:center; margin-right:50px; } dl:last-child{ margin-right:0;
- } dl img{ width:300px; }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="content">
- <dl>
- <dt>
- <img src="cat.jpg">
- </dt>
- <dd>
- 这是一段关于图片的简要描述
- </dd>
- </dl>
- <dl>
- <dt>
- <img src="cat.jpg">
- </dt>
- <dd>
- 这是一段关于图片的简要描述
- </dd>
- </dl>
- <dl>
- <dt>
- <img src="cat.jpg">
- </dt>
- <dd>
- 这是一段关于图片的简要描述
- </dd>
- </dl>
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3402257.html