/**
*
*/
#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; /* */
font: 14px/1.5em "微软雅黑"; /* */
display: block; /* */
text-decoration:none; /* */
}
section{ /* */
width:700px; /* */
float:left; /* */
background-color:blue; /* */
}
aside{ /* */
width:270px; /* */
padding-left:5px; /* */
padding-right:5px; /* */
float:left; /* */
}
/*
*@media only screen 表示下面的css 针对屏幕有效果
*/
/**
* and (max-width:767px) 当屏幕分辨率最大为767px时下面的css起作用
*/
@media only screen and (max-width:767px){ /* */
section{ /* */
min-width:100%; /* */
}
aside{ /* */
min-width:100%; /* */
}
}
.item h3{ /* */
font-size:18px; /* */
text-align:left; /* */
padding:5px 10px; /* */
border:1px solid #ccc; /* */
background:#f0f0f0; /* */
}
#profile_block{ /* */
margin-top:5px; /* */
line-height:1.5; /* */
text-align:left; /* */
}
footer{ /* */
clear: both; /* */
}
原文：https://www.cnblogs.com/lszw/p/11022410.html