一、引入：
1、站点图标（logo）的引入
- 在HTML中的
<head>标签中，通过link进行引入 - 快捷方式：
link:favicon + TAB键可直接生成 - 示例：
<head>
<meta charset="UTF-8">
<title>标题</title>
.......
<link rel="stylesheet" href="css/index.css">
<link rel="shortcut icon" href="img/logo.ico" type="image/x-icon">
........
</head>
二、标签样式：
1、textarea 的边框等
在使用textarea 的时候，系统会自动添加边框和四边线条（一般显示为蓝色），而且可以自由调整大小，这些可以通过css去除掉
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签样式</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 400px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
}
.content {
width: 400px;
height: 100px;
border: none; /*去除边框*/
resize: none; /*大小不可改变*/
outline: none; /*去除元素周围的线条*/
}
</style>
</head>
<body>
<div>
<textarea class="content"></textarea>
</div>
</body>
</html>
textarea样式修改.gif
2、字体样式（@font-face）：
2.1、准备工作：
- 需要先将美工切好的图标，生成字体相关的文件
生成地址：https://icomoon.io/app/#/select
生成图标
2.2、设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<style>
@font-face {
font-family: myfont;
src:
url("../fonts/icomoon.eot") format("embedded-opentype"),
url("../fonts/icomoon.svg") format("svg"),
url("../fonts/icomoon.ttf") format("truetype"),
url("../fonts/icomoon.woff") format("woff");
}
[class^="icon-"],
[class*=" icon-"] {
width: 100px;
height: 50px;
font-family: myfont;
font-style: normal;
}
.icon-1::before {
content: "\e900";
font-size: 13px;
}
.icon-2::before {
content: "\e926";
font-size: 13px;
}
.icon-3::before {
content: "\e927";
font-size: 13px;
}
.icon-4::before {
content: "\e94a";
font-size: 13px;
}
</style>
</head>
<body>
<div>
<div class="icon-1"> 00001</div>
<div class="icon-2"> 00002</div>
<div class="test icon-3"> 00003</div>
<div class="icon-4"> 00004</div>
</div>
</body>
</html>
显示效果
3、样式穿透：
如果当前的页面中引入了其他的js框架，要修改其中的样式，而当前页面的样式又是被scoped （限定当前页面使用）修饰，则可以通过样式穿透的符号>>> 来不受scoped 的约束，如下：
/*.swapper-active表示其他引入的框架使用的样式*/
.wrapper >>> .swapper-active {
width: 100%;
height: 100%;
overflow: hidden;
/*其他样式代码...*/
}
三、图片样式：
1、轮播图中图片的适配
1.1、说明：
- 在开发中，如果需要考虑到不同设备（PC或手机客户端）图片的适配，就需要进行大小图片的宽高适配和变换处理。
- 一般需要准备两套图片，一套（超大尺寸）用于PC等大屏页面中，另一套（小尺寸）用于手机等小屏页面中
- 样式的设置：
- 大屏页面中需要设置
background-size: cover样式等 - 小屏页面中需要设置
background-size: 80%样式等 (注：这里的百分比依据实际情况设定)
- 大屏页面中需要设置
1.2、示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图的图片适配问题</title>
<style>
div {
width: 1000px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
}
@media screen and (max-width: 768px){
.test {
background: url("imgs/pic_650x400.png") no-repeat center center;
background-size: 100%;
}
}
@media screen and (min-width: 768px){
.test {
background: url("imgs/pic_2000x400.png") no-repeat center center;
background-size: cover;
}
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
1.3、轮播图宽高适配方式二
如果当网速较差时，当图片还未加载出来的时候，轮播图下面的内容可能会被显示在轮播图的位置，就可以尝试使用如下方式：
（比如一张640x240大小的图片，其高宽之比为：240/640*100%=37.5%）
.wrapper {
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 37.5%;
}
网友评论