测开学习篇-css

选择器

/* id选择器#号 */
#ll{
    color: blue;
}
/* 类选择器.号 */
.cl{
    color: aqua;
}
/* 群组选择器逗号隔开 */
h1,h2,span {
    color: burlywood;
}
/*选中top下面的第一个div（伪类选择器）*/
.top>div:nth-child(1){
    margin-top: 11px;
    margin-left: 50px;
    float: left;
}
.top>div:nth-child(2){
    margin-top: 11px;
    margin-right: 50px;
    float: right;
}
/*后代元素层级选择器*/
.body>.main>.search{
    border: blueviolet 1px solid;
    height: 110px;
    width: 1853px;
}

知识总结

body,img,ul,li{
    padding: 0px;
    margin: 0px;
}
/*顶部样式开始*/
/*行内元素没有宽高属性，设置了也没用，全靠内容撑开宽高*/

#header{
    width: 100%;
    height: 40px;
    border-bottom: solid 1px #ccc;
}
.header{
    /*父类定义好宽高后子类浮动后不受影响*/
    width: 1200px;
    height: 40px;
    /*边框*/
    border: solid 1px red;
    /*设置上下外边距为0，左右居中*/
    margin: 0px auto;
}
.header_left{
    width: 400px;
    height: 40px;
    border: solid 1px green;
    /*左浮动*/
    float: left;
}

.header_right{
    width: 400px;
    height: 40px;
    border: solid 1px violet;
    float: right;
}
/*顶部样式结束*/
/*logo样式开始*/
#logo{
    width: 1200px;
    height: 120px;
    border: solid 1px cadetblue;
    /*外边距设置上下10px，左右居中*/
    margin: 10px auto;
}
.logo_left{
    width: 400px;
    height: 120px;
    border: solid 1px lawngreen;
    float: left;
}
.logo_right{
    width: 400px;
    height: 120px;
    border: solid 1px darkblue;
    float: right;
}
/*logo样式结束*/

/*nav样式开始*/
#nav{
    width: 1200px;
    height: 45px;
    border: solid 1px rosybrown;
    /*外边距一次性写4个值设置边距的顺序(margin:10px 12px 19px 9px)上右下左 ，4个值是顺时针的顺序*/
    margin: 0px auto;
}
.nav_left{
    width: 300px;
    height: 45px;
    border: solid 1px darkviolet;
    float: left;
}
.nav_center{
    width: 700px;
    height: 45px;
    border: solid 1px gold;
    float: left;
}
.nav_right{
    width: 150px;
    height: 45px;
    border: solid 1px palevioletred;
    float: right;
}
/*nav样式结束*/

/*banner样式开始*/
#banner{
    width: 100%;
    height: 516px;
    background: #F4F4F4 ;
    /*给后代元素提供绝对定位的点*/
    position: absolute;
}
.banner>img{
    width: 100%;
    height: 300px;
}

#p_content{
    width: 1200px;
    height: 516px;
    border: solid 1px red;
    /*绝对定位*/
    /*
    绝对定位的参考点：
        1.如果元素的外层元素是非static（默认值）那么这个外层元素成为该元素的定位参考点
        2.如果元素的外层没有设置任何的position定位，那么该元素去寻找离自己最近设置了定位属性的外层元素作为参照点（必须为嵌套层）
        3.如果元素的所有外层都没用过position定位，那就以body作为参考点
     绝对定位不会占用原有的物理位置
    */
    position: absolute;
    top: 0px;
    left: calc(50% - 1200px / 2);
}
.banner_nav{
    width: 240px;
    height: 516px;
    border: solid 1px red;
    float: left;
}
.banner_right{
    width: 950px;
    height: 516px;
    border: solid 1px red;
    /*右浮动*/
    float: right;
}
.banner_login{
    width: 950px;
    height: 390px;
    border: solid 1px blueviolet;
}
.banner_bottom{
    width: 950px;
    height: 110px;
    /*
        pidding和border的宽高计算在盒子模型的宽高之内，但是margin不计算在内
    ，所有在写宽高时要减去pidding和border的宽高（标准盒模型）
    */
    border: solid 1px olivedrab;
    /*2个元素（同一层级）外边距上下的会合并，外边距距离以最大的为准，左右不会*/
    margin-top: 5px;
}
.banner_bottom>div{
    width: 220px;
    height: 110px;
    border: solid 1px red;
    margin-left: 15px;
    float: left;
}
/*banner样式结束*/

字体样式

#ziti{
    font-size:17px;
    color:blueviolet;
    /* 粗bold 细normal*/
    font-weight:bold;
    /* 下划线underline 删除线 line-through 不要线none */
    text-decoration:none;
    /* 每个英文单词的首字母大写capitalize 大写uppercase 小写lowercase*/
    text-transform:capitalize;
    /* 制文本的水平方向的对齐方式：左对齐(默认)left、居中对齐(center)、右对齐right */
    text-align:center;
    /* 行高,不是文字的高度，而是整个这行的高度 */
    line-height:19px;
    /* 边框区分上top下bottom左left右right可以单独设置 */
    /* 边框宽度 */
    border-width:1px;
    /* 边框颜色 */
    border-color: aqua;
    /* 边框线  虚线dashed 实线solid*/
    border-style: solid;
}