前端开发
1.rem的适配方案
1.1flexible.js的介绍
flexible的介绍：
为了使用rem,通常情况中还需要一个rem插件。cssrem
cssrem使用的快捷方式
cssrem修改的地方
2.css文件和js文件的引入方式
3.特色小边框的制作
设置一个panel(公面板)，创建：：before和::after伪类元素，利用position：relative，设置伪类为position:absolute，定义边框。下方放入一个盒子，设置宽度为100%，再用相同方式定义css，既可以得到样式。
代码：
.panel {
position: relative;
padding: 0 0.1875rem 0.5rem;
height: 3.875rem;
background:url(../image/line.png) no-repeat rgba(255,255,255,0.04);
margin-bottom: .1875rem;
border: 1px solid rgba(25,186,139,0.17);
.panel_foot {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
&::before{
content: '1';
height: 10px;
width: 10px;
position: absolute;
bottom: 0;
left: 0;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&::after{
content: '1';
height: 10px;
width: 10px;
position: absolute;
bottom: 0;
right: 0;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
}
&::before {
content: '1';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-left: 2px solid #02a6b5;
border-top: 2px solid #02a6b5;
}
&::after {
content: '1';
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-right: 2px solid #02a6b5;
border-top: 2px solid #02a6b5;
}
}
4. DS-Digital.ttf数字展示屏的使用方法：
5.自适应图片 background-size
background-size: 100%,100%;
6. 一张图片想覆盖在另一张图片上z-index或者写在他下面
7.jQuery使用的一个bug
jQuery必须放在index.js的前面。
8.a的四种状态
a:link {color:#FF0000;}/* 未被访问的链接 */
a:visited {color:#00FF00;}/* 已被访问的链接 */
a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}/* 正在被点击的链接 */
9.盒子居中
css设置盒子居中的方法：
第一种：
用css的position属性
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: relative;
}
.div2 {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<div class="div1">
<div class="div2 ">
</div>
</div>
第二种：
利用css3的新增属性table-cell, vertical-align:middle;
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
.div2 {
width: 40px;
height: 40px;
background-color: red;
margin: auto;
}
</style>
<div class="div1">
<div class="div2">
</div>
</div>
第三种：
利用flexbox布局
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
display: flex;
/*!*flex-direction: column;*!可写可不写*/
justify-content: center;
align-items: center;
}
.div2 {
height: 40px;
width: 40px;
background-color: red;
}
</style>
<div class="div1 ">
<div class="div2 ">
</div>
</div>
第四种：
利用transform的属性（缺点：需要支持Html5）
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: relative;
}
.div2 {
height: 40px;
width: 40px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="div1 ">
<div class="div2 ">
</div>
</div>
10.斜体
font-style属性的取值如下：
- normal 默认值。浏览器显示一个标准的字体样式。
- italic 浏览器会显示一个斜体的字体样式。
- oblique 浏览器会显示一个倾斜的字体样式。
- inherit 规定应该从父元素继承字体样式。
2.Vant组件库
Vant组件库的文档地址：Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.
第一步 npm下载。
第二步 main.js导入包。
