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>