html锚点链接:
1.在链接文本href属性= #名字 的形式;如:<a href="#two">第二季</a>
2.找到目标标签,里面添加一个id属性=刚才的名字;如:<h3 id="two">第二季介绍</h3>
3.下载链接:href属性为压缩包地址 <a href="img.zip">下载文件</a>
1.input去除蓝线边框 :outline:none;
2.textarea防止拖拽文本域 : resize:none;
3.cursor鼠标禁止 :cursor:not-allowed;
4.vertical-align针对行内元素,行内块元素设置,经常用于设置 图片 / 表单元素 和 文字垂直对齐 : vertical-align:baseline/middle/top/bottom;
5.解决图片底部默认空白缝隙问题 :1:将图片转换为块级元素 display:block;
2:给图片添加vertical-align:middle/baseline/top/bottom;
6.行内块的巧妙应用:a链接转化为行内块元素,设置宽高,给它的父盒子设置text-align:center;即可垂直居中。
7.商品原价删除线:text-decoration:line-through;
8.文字围绕图片:给图片添加浮动,文字在p标签内,浮动的盒子压住p标签,但是不会压住文字;
9.伪元素::before,::after 是行内元素
10.文字阴影:text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
11.盒子阴影:box-shadow:水平 垂直 blur spread rgba;
12.背景颜色线性渐变:必须添加-webkit-兼容
background:-weblit-linear-gradient(起始方向,颜色1,颜色2);起始方向可以是组合
left top;从左上角到右下角
background: -webkit-linear-gradient(red ,blue);省略方位名词,默认从上到下;
background: -webkit-linear-gradient(left,red ,blue);
background: -webkit-linear-gradient(left top,red ,blue);
13.用伪元素做箭头
.more {
position: absolute;
top: 11px;
right: 5px;
background: -webkit-linear-gradient(left, #ff506c, #ff6bc6);
border-radius: 15px;
padding: 3px 20px 3px 10px;
color: #fff;
}
.more::after {
content: "";
position: absolute;
top: 9px;
right: 9px;
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}