网页布局

一个web页面通常由多个模块结构组成，模块化就是为了减少HTML之间的耦合，提高网页设计的效率。
良好的设计规则会把耦合密集的设计参数进行归类，作为一个模块并以此划分工作区域。

网页布局中常用的四种块布局结构：

1. div-ul-li
2. div-dl-dt-dd
3. div-table-tr-td
4. div-form-table-tr-td

按照标签是否成块显示或是独占一行把标签分类：

1.块状标签（块级标签）
常用的块级标签有：
    基本块级标签：标题（h1~h6）、段落(p)、水平线(hr)
    局部布局块级标签：div、列表（ul ol li、dl dt dd）、表单（form）、表格（table）

特点：
   1）总是在新行开始，独占一行
   2）高度、行高、内外边距都可控制
   3）宽度始终与浏览器宽度一样，与内容无关
   4）可以容纳内联元素和其他元素

使用场所：
   分类导航或菜单，div-ul(ol)-li li包含导航项或菜单项，通过浮动布局样式来设置分类导航显示方向是垂直还是水平
   图文混编，div-dl-dt-dd dt代表图片，dd代表图片的文字说明
   图文布局或显示数据，div-table-tr-td
   布局表单，div-form-table-tr-td

2.行内标签（行级标签）
常用的行级标签有：图片、span范围、换行、以及超链接

特点：
   1）和其它元素都在同一行上
   2）行高、内外边距部分可改变
   3）宽高只与内容相关
   4）行内元素只能容纳文本或其他行内元素

 

div-ul-li布局实现菜单导航栏

 

    *{
        margin:0;
        padding: 0;
    }
    body{ 
        font-size:12px
    }
    a{
        /*去除下划线*/
        text-decoration:none;
        color: black;
    }
    a:hover{
        color:orange;
    }
    a img{
        border:none;
    }
    ul{
        /*去除无序列表中小圆点*/
        list-style:none;
    }
    #header{
        width:1000px;
        margin: 0 auto;
    }
    #menu{
        height:33px;
        /*background-color: aqua;*/
    }    
    #menu ul li{
        /*background-color: antiquewhite;*/
        float: left;
        height:33px;
        line-height: 33px;
    }
    #menu ul li.city{
        font-weight: bold;
        width: 641px;
    }
    #menu ul li.space{
        margin:0 8.5px;
    }
    #serch ul li{
        float: left;
        height:73px;
        line-height: 73px;
    }
    #serch ul li.gll{
        width:304px;
        height:73px;
        margin-right:150px;
        font-size:24px;
        font-weight:bold;
        color:orange;
    }
    #serch ul li.se{
        height:43px;
    }
    #serch ul li #setxt{
        width:310px;
        height:40px;
        line-height:40px;
        border: 1px solid #ff7701;
    }
    #serch ul li #btnSerch{
        width:80px;
        height:42px;
        line-height: 42px;
        border:none;
        background-color: #ff7701;
    }
    #serch ul li.keyword{
        margin:0 10px;
    }

 

<div id="header">
        <div id="menu">
            <ul>
            <li class="city">武汉<a href="">【切换城市】</a></li>
            <li>购乐乐，每天乐乐购</li>
            <li class="space"><a href="">购物中心</a></li>
            <li class="space"><a href="">购物车</a></li>
            <li class="space"><a href="">【登录】</a></li>
            <li class="space"><a href="">【注册】</a></li>
            </ul>
        </div>
        <div id="serch">
            <ul>
                <li class="gll">购乐乐，每天乐乐购</li>
                <li class="se">
                    <form>
                        <input type="text" id="setxt">
                        <input type="button" id="btnSerch" value="搜索">
                    </form>
                </li>
                <li class="keyword">旅游</li>
                <li class="keyword">酒店</li>
                <li class="keyword">KTV</li>
            </ul>
        </div>
    </div>