/* 有些元素默认样式不好用,需要在最还是写页面重新设定一下,改成适合于当前项目的样式 */
/* 项目第一步 */
/* 将html根元素设置一下 */
html{
/* 根元素html的高度默认是靠内容撑起来的,很矮,使用起来不方便,我们可以让html的高度为他的父级,也就是浏览器窗口的100% */
height: 100%;
/* 设定根元素html的字体大小,页面中所有使用rem单位的长度都是相对于html的字体大小而言的 */
font-size: 14px;
}
/* body的样式重置 */
body{
/* 不同浏览器外边距不同,不要清零 */
margin: 0;
/* 字体与字体颜色的设置 */
font-family: '黑体';
color: '#666';
/* 背景颜色 */
background-color: #f5f5f5;
}
/* 对超链接样式重置 */
/* 设置超链接访问请的样式 */
a:link{
/* 清除超链接自带的下划线 */
text-decoration: none;
/* 超链接不会继承body的颜色,所有设置 */
color:#808080;
}
/* 设置超链接访问后的样式 */
a:visited{
/* 超链接访问前后都是一样的颜色 */
color:#808080;
}
/* 设置超链接悬停的样式 */
a:hover{
color: #666;
}
/* 列表的样式重置 */
ul,ol{
margin: 0;
padding: 0;
}
/* 清除浏览器提供的每个列表项前的提示符 */
li{
/* 去除列表前的实心圆/阿拉伯数字 */
list-style-type: none;
}
/* 清除段落默认存在的上下边距 */
p{
/* 浏览器为所有的段落提供了上下外边距,需要清空 */
margin: 0;
}
/* 清除输入元素的外轮廓线 */
input{
/* 输入框获得焦点时,会显示外轮廓线,需要清除 */
outline: none;
}
/* 项目第二步 ,样式脚手架,辅助构建整个页面*/
/* 版心基础类 */
.container{
/* 根据设计给的宽度制定版心的宽度 */
width: 1000px;
/* 设置版心中的内容在页面中水平居中 */
margin: 0 auto;
}
/* 清除父级高度坍塌影响的工具类 */
.clearfix::after{
/* 在指定元素的最后生成一个空的假孩子 */
content: '';
/* 显示模式改为块级,才可以使用,因为clear只能用于块级 */
display: block;
/* 清除左右浮动 */
clear: both;
}
/* 开发测试阶段的辅助线,颜色自定义,代码完成后记得删掉 */
.rim{
border: 1px solid #aaa;
}
都是干货,不全自己可以后加