字体图标的使用
- 找资源 iconfont
找到需要的图标——加入购物车——加入项目——下载到本地 - 在项目文件中等CSS文件中加一个font.css——把资源文件夹中的倒数2.3.4.6加入font.css中——把资源文件夹中的iconfont.css加入项目文件的CSS文件夹中
<link rel="stylesheet" href="./css/iconfont.css">
更改iconfont.css中的路径
<i class="iconfont icon-552cc1e587668 icon"></i>
<i class="iconfont icon-sslvpn67 icon"></i>
<i class="iconfont icon-ssshezhi icon"></i>
- 调整样式
类似条件字体样式
渐变的使用
- http://www.colorzilla.com/gradient-editor/
- 复制备注为W3C的代码,粘贴到所需区域即可
盒模型解析模式
box-sizing: border-box/content-box;
border-box: padding+border+content
content-box:content
响应式布局
Bootstrap 专门用来做响应式开发的:Bootstrap
下载之后引用bootstrap中的bootstrap.css的样式,推荐使用bootstrap.min.css的样式(因为这是压缩过的,体积小)
代码如下:
<style>
.box{
width: 100px;
height: 200px;
background: red;
}
不带区间的写法:
@media (min-width:300px){
.box{
background: pink;
}
}
@media (min-width:400px){
.box{
background: green;
}
}
带区间的写法:
@media screen and (min-width:375px) and (max-width:750px){
.box{
background: purple;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
注意:
min-width:最小宽度—>大于等于 max-width:最大宽度—>小于等于