div+css网页布局时注意事项 1.对于网页进行分析，划分方块。 2.选择器的优先级及精确定位需要设置样式的标签。 3.浮动属性对于其他元素的影响 4.使用定位属性时，精确找到定位参考点。

解决8像素问题：

加上：padding: 0px; margin: 0px;

body,img,ul,li,a,h6,p{
    padding: 0px;
    margin: 0px;
    list-style: none;
    text-decoration:none;
}

让div居中的方法：

加上margin: npx auto; 也就是上下n像素，左右自动，自动就会居中

一般会在我们认知的最外层（我们常称作定位元素）的最外层再加一个div（宽度设置为100%），这样方便控制我们的最外层（定位元素）的一个位置（看实际情况）

.header{
    width:1200px;
    height:40px;
    /*border: 1px solid red;*/
    margin: 0px auto;
}

#logo{
    width:1200px;
    height:120px;
    border:1px solid red;
    margin:10px auto;
}

定位策略及需要注意的问题：

css计算属性：calc，注意运算符两端必须要加空格，数值要加单位px

#banner{
    width:100%;
    height:516px;
    background: #F4F4F4;
    position: relative; /*父类设置成相对定位，才可以让子类以这个div为参照物*/
    /*relativ如果不设置top,left等属性，那就相当于加了一个标记，但是位置不改变，是让父类做参照物的一个策略*/
}
.banner>img{
    width:100%;
}
#p_content{
    width:1200px;
    border:1px solid red;
    height:516px;
    position: absolute; /*利用绝对定位，以其父类#banner为参照物，则可以实现这个div去贴合#nav的div，并且不占据原来的物理位置*/
    top:0px;/*实现这个div去贴合#nav的div*/
    /*css计算属性：calc*/
    /*因为用的是绝对定位，所以当前这个div脱离了文档流，用margin:0px auto就不好使了*/
    left:calc(50% - 1200px / 2); /*计算距离左侧的距离，利用left结合absolute绝对定位，必须有单位px*/
    /*页面的一半-div的一半，就可以居中了*/
}

设置背景颜色：

backgroung：颜色（简写）

background-color：颜色（全写）

/*fixed定位也是一样，会使div脱离文档流*/
#sidebar{
    width:80px;
    height:360px;
    border:1px solid #ccc;
    position: fixed;
    right:0px;
    top:calc(50% - 360px / 2); /*用top结合fixed*/
    background: #fff;
    /*圆角边框*/
    border-radius:10px 0px 0px 10px; /*左上右上右下左下*/
}

设置div里面的文字水平居中：

text-align:center; /*文字水平居中*/

设置div里面的文字垂直居中：

设置 height与line-height（文字的行高）的大小一样

.footer_bottom{
    height:28px;
    border:1px sienna solid;
    text-align:center; /*文字居中*/
    /*padding-top: 5px;* 这样是不好用的/ 
    line-height:28px;
    color:#8492A6;
    font-weight:bold; /*加粗*/
    border: 1px #ef092b solid;
}

当然也可以让文字靠下，那么就把line-height设置的大一些：38>28

.footer_bottom{
    height:28px;
    border:1px sienna solid;
    text-align:center; /*文字居中*/
    line-height:38px;
    color:#8492A6;
    font-weight:bold; /*加粗*/
    border: 1px #ef092b solid;
}

可以把定位属性left，right，top，bottom，设置成为负值，让其超出原有的div，呈现特殊的效果

.footer_top_left>img{
    width:130px; /*让其宽度缩小*/
    position: absolute; /*以父类为参照物*/
    top:-30px;
    left:calc(50% - 130px / 2);
    /*margin: 40px auto; 不管用，因为它的父类浮动了*/
}

设置背景图片：

background: url("../img/javajb.png") no-repeat;

或：

background-image: url("../img/javajb.png") no-repeat;

设置==div里面的p标签（或其他标签）里面的文字居中（垂直或者水平）==：

或者设置里面的图片img标签居中：

利用margin和padding等属性来进行定位

.footer_top_left>p{
    /*border:1px solid blue;*/
    margin-top: 70px;
    margin-right: 10px;
    padding-top: 40px;
    padding-left: 15px;
    font-size:14px;
    text-indent: 2em;
    color:#8492A6;
}

或：

.footer_top_center>div>h6{
    font-size:18px;
    /*border-bottom:1px solid blue;*/
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.footer_top_center>div>ul>li{
    /*border:1px solid fuchsia;*/
    padding: 10px 5px;
}

或：

.footer_top_right>img{
    width:100px;
    height:100px;
    margin-left:10px;
    margin-top: 70px;
}

注：也就是说，==直接div里面的文字==和==div的标签里面的文字==在居中时的策略是不一样的

设置段落标签p内的文字首行缩进：text-indent

text-indent: 2em;

设置div里面的无序列表：

ul>li>a>img>span 一般都是这种递进结构

<div class="footer_top_center">
<div>
    <h6>新手指南</h6>
    <ul>
        <li><a href="">挑选课程</a></li>
        <li><a href="">购买课程</a></li>
        <li><a href="">学习课程</a></li>
        <li><a href="">配套资源</a></li>
    </ul>
</div>
</div>

.footer_top_center>div{
    float:right; /*都向右浮动，但是会颠倒顺序*/
    margin-right: 50px;
    margin-top: 50px;
    text-align: center;
}
.footer_top_center>div>h6{
    font-size:18px;
    border-bottom:1px solid blue;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.footer_top_center>div>ul>li{
    /*border:1px solid fuchsia;*/
    padding: 10px 5px;
}
.footer_top_center>div>ul>li>a{
    color:#8492A6;
}
.footer_top_center>div>ul>li:hover>a{
    color:#306eff;
    text-decoration:underline;
}

注：这种无序列表可以是横向的，也可以是竖向的：

但是这样的话，必须设置ul及里面属性的浮动属性

.header_right{
    width:400px;
    height:40px;
    /*border:1px solid #000000;*/
    float:right;
}
.header_right>ul{ /*ul靠右，大容器*/
    float:right;
}
.header_right>ul>li,.header_right>ul>li>a,.header_right>ul>li>a>img{ /*小内容靠左*/
    float:left;
}

实现文字的下面有一条小横线：

border-bottom:1px solid blue;

####hover属性

鼠标动作效果：

例1：当鼠标放到li上面时，让它里面的a变成蓝色，并且加下划线：

.footer_top_center>div>ul>li:hover>a{
    color:#306eff;
    text-decoration:underline;
}

或者：反过来也可以

.footer_top_center>div>ul>li>a:hover{
    color:#306eff;
    text-decoration:underline;
}

例2：

#top_nav{ /*其实就是.header_left>div:last-child>div*/
    display: none; /*默认是隐藏起来的*/
}
.header_left>div:last-child:hover>#top_nav{ /*放到父元素div:last-child上时，子元素top_nav显示*/
    display: block; /*display属性设置为bolock就显示了*/
}

当元素颜色与背景颜色一样的时候，需要用阴影给边框：shadow属性，如果是文本标签i，那么就用text-shodow

text-shadow:1px -1px #ccc,-1px -1px #ccc; /*需要用阴影属性给边框*/