div+css搭建网站

一，分析页面结构
如一个页面有导航栏

该结构在分析时应从大到小进行分析
首先是一个大div里面套有3个小div
中间的div是一个ul li结构
一，应设置body的属性比如字体大小和类型
二，应设置父div的宽，高由内容填充
三，导航栏
第一部分是一张图片设置它的margin-right和float为left
第二部分是一个ul li结构的导航条

   .header{        //设置背景颜色占满浏览器的宽        background: black;        height: 58px;    }   .inner_c{        //设置导航栏居中        width: 1000px;        margin: 0 auto;    }    body{        font-size: 14px;        font-family: "Microsoft YaHei","SimSun";        height: 8888px;    }    .header .nav{        float: left;   //设置导航栏左浮动    }    .header .nav ul{        list-style: none;      }    .header .nav ul li{   //设置每一个li的内容向左浮动，宽，和行高文本居中以及边框        float: left;        width: 100px;        line-height: 58px;        text-align: center;        border-left: 1px solid #252947;    }    .header .nav ul li.last{        border-right: 1px solid #252947;    }    .header .nav ul li a{//设置li中的内容的属性，display: block使a标签脱离标准文档流        display: block;        height: 58px;        color:#818496;        text-decoration: none;    }    .header .nav ul li a.current{        background: #252947;        color:white;    }    .header .nav ul li a:hover{        background: #252947;        color:white;    }<div class="header">        <div class="inner_c">            <h1 class="logo">                <img src="images/logo.png" alt="" />            </h1>            <div class="nav">                <ul>                    <li><a href="#" class="current">首页</a></li>                    <li><a href="#">博雅游戏</a></li>                    <li><a href="#">博雅新闻</a></li>                    <li><a href="#">关于我们</a></li>                    <li><a href="#">客服中心</a></li>                    <li class="last"><a href="#">投资者关系</a></li>                </ul>            </div>            <div class="jrwm_box">                <a href="#" class="jrwm">                    <img src="images/jrwm.png" alt="" />                </a>            </div>        </div>    </div>