Beautify web page elements
Why beautify
- Effectively convey page information
- Beautify the page, the page is beautiful to attract users
- Highlight page theme
- Improve user experience
span tags
Use span tags to cover key words
<style>
#demo1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="demo1"class="span1">java</span>
</body>
Font style
Font
font-family
font-family:楷体；
font size
font-size
Font weight
font-weight
font color
color
Text style
colour
Color, RGB 0~F, RGBA transparency 0~1
color:rgba(0,255,255,0.5);
Text alignment, typesetting
text-align：center right left；
text-align: center;/*水平居中*/
First line indent
text-indent: 2em;
em represents the size of a word,
Line height, single line text is centered up and down
line-height
height block height
If the row height is the same as the block height, it can be centered. Single line text applies
.p2{
background: #b4a53b;
height: 100px;
line-height: 100px;
}
Top, middle and underline
.l1{
/*下划线*/
text-decoration: underline;
}
.l2{
/*中划线*/
text-decoration: line-through;
}
.l3{
/*上划线*/
text-decoration: overline;
}
The a tag of the hyperlink is underlined, if you want to remove the underline
a{
text-decoration:none;
}
Horizontal alignment of text and image
img image tag
span text label
<style>
img,span{
vertical-align:middle;
}
</style>
Text shadow and hyperlink pseudo-classes
Hyperlink pseudo-class
/*鼠标悬浮的状态*/
a:hover{
color: chocolate;
font-size: 30px;
}
/*鼠标按下之后不弹开的状态，变色*/
a:active{
color: blueviolet;
}
a:hover{}
Selected link
a:active{}
When hovering over the link
a:link{} is the link to visit
a:visited{}visited link
Text shadow
#price{
/*阴影颜色，水平偏移，垂直偏移，阴影半径*/
text-shadow: chartreuse 10px 10px 2px;
}
List
list-style:circle hollow circle, square square, decimal, number
ul li{
height:30px;
list-style:none;/*去掉无序列表前的圆点*/
}
div tag
The nav navigation bar is generally written in a div
<div id="nav">
#nav{
width: 300px;/*调整宽度*/
background: bisque;
}
Hyperlink pseudo-classes generally appear in pairs a and a: hover
The original state and the state after the mouse is moved up
a{
text-decoration: none;
font-family: 楷体;
font-size: 18px;
color: black;
}
a:hover{
/*鼠标移上去之后变色*/
color: orange;
}