前端代码需要记忆的比较多,需要多写,加深记忆。
目录
设置a链接样式 图片的垂直居中 设置文本阴影 伪类样式 列表样式 背景图 背景图重复方式
设置a链接样式
属性:
text-decoration
属性值:
none 去掉下划线
underline 文本的下划线
overline 设置文本的上划线
语法:
text-decoration:none;
图片的垂直居中
属性:
vertical-align
属性值:
top 居上
moddie 居中
语法:
vertical-align:top;
设置文本阴影
语法:
text-shadow: 阴影颜色 x轴 y轴 模糊半径(模糊程度);
代码:(参考语法含义理解)
text-shadow:black 5px 5px 5px;
伪类样式
语法:
标签名:伪类名{
声明一;
声明二;
}
常用伪类:
link :未单击访问时超链样式 a=a:link;
hover :鼠标悬于上方时的样式;
a:hover{
color:red; //鼠标悬于上方时字体变红;
}
active :单击未释放时的样式;
a:active{
color:red; //鼠标点击后未释放时字体为红色;
}
visited :单击访问后超链接的样式;
a:visited{
color:red; //鼠标点击访问后的a链接字体为红色;
}
列表样式
无前缀列表:
list-style-type:none;
自定义列表图形:
ul li{list-style-image:url(这里写图片路径);}
前缀独占一行:
link-style-position:inside;
设置列表前缀类型:
list-style:前缀类型;
背景图
设置背景图:
background-image:url(img/img1.png);
背景图重复方式
不平铺
background-repeat:no-repeat;
沿着x轴平铺
background-repeat:repeat-x;
背景图定位
background-position:center;
背景尺寸
background-size:100%;
渐变色背景
语法:
linear-gradient:to top(渐变方向),color1,color2;
代码:
linear-gradient:to top,red,blue; //从下到上从红到蓝渐变。