⽹站CSS内部样式
style.css      CSS内部样式⽂件
/**
*padding是外边距还是内边距
*/
#content{          /* 给ID选择器命名 content并在⾥⾯添加样式 */
    width:980px;    /* 宽度980像素 */
    margin:0 auto;      /* 外边距居中以后看到0 auto 都是居中 */
}
#header{          /* 给ID选择器命名 header并在⾥⾯添加样式 */
    margin-top:150px;  　/* 给header盒⼦添加上⾯外边距 150像素 */
    background-color:#333;    /* 给header盒⼦添加背景颜⾊ */
    height:50px;    /* 给header盒⼦添加⾼度 50像素 */
    width:100%;    /* 给header盒⼦添加宽度 100% ⽐例显⽰*/
}
nav ul{        /* ⾸页导航 nav给⽹站添加⼀个 ul 导航列表 */
    min-height: 30px;  /* 最⼩⾼度 30像素 */
    float: left;  /* 浮动显⽰左边这个是重点*/
    margin-left: 30px;  /* 给导航 ul 盒⼦添加左边外边距 30像素  */
    word-break: break-all;    /* 换⾏显⽰ */
}
nav ul li{        　/* 给 li 内容设置样式只对 li 内容起作⽤*/
    float: left;    /* 浮动显⽰左边*/
    list-style: none;    /* ⽆序列表前的符号，none 的意思是不显⽰ */
    margin-top:-20px;    /* 上⾯外边距 -20像素，重点往左、上是给负值，往下、右是给正值*/
}
nav ul li a{          /* 给 a 内容设置样式只对 a 内容起作⽤*/
    color:#fff ;    /* 给字体设置颜⾊，字体font 设置颜⾊就在颜⾊⾥写 color 颜⾊，没有font-color 这个说法，重点重点 */
    margin: 18px 10px 5px 0;  /* 外边距上18像素，右边10像素，下⾯5像素，左边0像素，，18px 10px 5px 0px 上右下左，顺时针⽅向，位置上赋值了⼀定记得带单位*/
    padding: 0 10px;    /*内边距上 0 像素，右边 10 像素  */
    font: 14px/1.5em "微软雅⿊";  /* 字体  */
    display: block;    /* 显⽰⽅式：块状  */
    text-decoration:none;  　/* 下划线：不显⽰  */
}
section{          　/* 类名section  */
    width:700px;    /* 宽度700像素 */
    float:left;      /* 浮动：左边*/
    background-color:blue;  　/* 背景颜⾊：蓝⾊ */
}
aside{        /* 侧边栏样式 */
    width:270px;    /* 宽度 270像素 */
    padding-left:5px;    /* 左边内边距离:5像素*/
    padding-right:5px;  /* 右边内边距距离:5像素  */
    float:left;      /* 浮动：左边  */
}
/* 注：这⾥分了两段代码
*@media only screen 表⽰下⾯的css 针对屏幕有效果
*/
/**
* and (max-width:767px) 当屏幕分辨率最⼤为767px时下⾯的css起作⽤
*/
@media only screen and (max-width:767px){   
section{            /* 内容(section) 部分  */
    min-width:100%;  /* 最⼩宽度:100像素  */
}
aside{  /* 侧边栏 (aside) 部分  */
  min-width:100%;    /* 最⼩宽度:100像素*/
}
}
.item h3{ /* 类选择器 item是类名，这条代码的意思是下⾯的样式代码只在 h3 标签⾥起作⽤  */  font-size:18px;    /* 字体⼤⼩:18像素 */
  text-align:left;  /* ⽂本对齐⽅式：左边  */
  padding:5px 10px ;    /* 内边距上 5 像素，右边 10 像素 */
  border:1px solid #ccc;  /* 边框:1像素线条颜⾊  */
  background:#f0f0f0;  /* 背景  */
}
#profile_block{      /* ID选择器类名为：profile_block */
    margin-top:5px;    /* 上⾯外边距:5像素 */
    line-height:1.5em;  /*  ⾏⾼：1.5倍 */
    text-align:left;  /* ⽂本对齐⽅式：左边  */
}
footer{    /* 页脚 */
    clear: both;  /* 版权下⾯显⽰ */
    background-color:#333;  /* 背景颜⾊ */
    padding-top:3px;  /* 上边内边距：3像素 */
    padding-bottom:3px;  /* 下⾯内边距：3像素 */
}
.
copyright{  　/* 类选择器，copyright 版权 */
    font-size:14px;    /* 字体⼤⼩ */
    color:#fff;    /* 颜⾊：⽩⾊ */
    text-align:center;    /* ⽂本对齐：居中 */
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。