前台开发中的极简css
平时的前端开发中，CSS是不可或缺的一部分，它可以精确地控制页面的呈现效果。有时候只需要简单地对页面进行排版和样式设置，这时候使用过多复杂的CSS代码反而会影响开发效率和代码质量，以下为常用CSS特简代码整理：
1. 设置页面字体和背景颜色
body{
font-family: Arial, sans-serif;
background-color: #F8F8F8;
}
2. 清除列表点样式
ul{
list-style: none;
padding-left: 0;
}
3. 设置行内文字颜色
a{
color: #008080;
}
4. 隐藏元素
.hidden{
display: none;
}
5. 设置盒子内部和外部边距
.box{
margin: 20px;
padding: 10px;
}
6. 设置图片大小
img{
width: 100%;
height: auto;
}
7. 设置盒子边框
.box{
border: 1px solid #CCCCCC;
}
8. 设置文字居中
.center{
text-align: center;
}
9. 设置图片居中
img{
display: block;
margin: 0 auto;
}
10. 隐藏滚动条
body{
overflow: hidden;
}
11. 使元素绝对定位
.absolute{
position: absolute;
}
12. 设置悬浮样式
a:hover{
text-decoration: underline;
}
13. 设置字体大小
h1{
font-size: 36px;
}
14. 设置文字粗细
.bold{
font-weight: bold;
}
15. 设置字体样式
.italic{
font-style: italic;
}
16. 设置文字对齐方式
.text-right{
text-align: right;
}
17. 设置单元格边框
td{
border: 1px solid #CCCCCC;
}
18. 设置背景图片
body{
background-image: url('image.jpg');
background-size: cover;
}
19. 设置文本框样式
input[type="text"]{
border: 1px solid #CCCCCC;
padding: 5px;
}
20. 设置容器宽度和高度
.container{
width: 960px;
height: 600px;
}
