style.css CSS内部样式文件
/**
*
*/
#content{ /* 给ID选择器 命名 content并在里面添加样式 */
980px; /* 宽度980像素 */
margin:0 auto; /* 外边距居中 以后看到0 auto 都是居中 */
}
#header{ /* 给ID选择器 命名 header并在里面添加样式 */
margin-top:150px; /* 给header盒子添加上面外边距 150像素 */
background-color:#333; /* 给header盒子添加背景颜色 */
height:50px; /* 给header盒子添加 高度 50像素 */
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 */
700px; /* 宽度700像素 */
float:left; /* 浮动：左边*/
background-color:blue; /* 背景颜色：蓝色 */
}
aside{ /* 侧边栏 样式 */
270px; /* 宽度 270像素 */
padding-left:5px; /* 左边内边距离:5像素*/
padding-right:5px; /* 右边内边距距离:5像素 */
float:left; /* 浮动：左边 */
}
/* 注：这里分了 两段代码
*@media only screen 表示下面的css 针对屏幕有效果
*/
/**
* and (max-767px) 当屏幕分辨率最大为767px时下面的css起作用
*/
@media only screen and (max-767px){
section{ /* 内容(section) 部分 */
min-100%; /* 最小宽度:100像素 */
}
aside{ /* 侧边栏 (aside) 部分 */
min-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; /* 文本对齐：居中 */
}