Preview
Presentation style
Debugging Tools
Display Mode
Line topped the problems
Background Style
Presentation style
a. color attribute
color: red #FF0000 rgb(255,0,0)
<style>
span{
color:#FF0000;
}
</style>
<span>评论中大奖</span>
b. line-height
line-height attribute, typically greater than 78 pixels to the text.
<style>
p{
font-size:20px;
line-height:28px;
}
</style>
c. text-align
text horizontally Left Right Center
d. text-indent the first line indent
<style>
p{
text-indent:2em; //sh
}
</style>
e. text-decoration
none/blink/underline/line-through/overline
<em>倾斜</em> <i></i>
<strong>加粗</strong> <b></b>
<u>下划线</u> <ins> </ins>
<s>删除线</s> <del> </del>
Modal tool
Display Mode
Block-level elements
Common labels hp ul ol div li
Exclusive line, has a wide high
Row element
Inline block elements
img table input
Mode conversion
display : block/ inline /inline-block
important point
a. When the layout is inline elements or block elements within the row, as they can be the same text is centered horizontally
b. When the layout height of the line height, then the internal line text vertically.
c. h and p is a text-based block-level element. Thus it can not be placed inside the block-level elements.
D. a check can not be a label, but can be put block-level elements.
e. Note that the label layer is not more than three nested hierarchy
By text line height (the vertical center line element)
顶线 中线 基线 底线
Row height is the distance between the two baseline
Background Style
body{
background-color:pink;
background-image:url('images/hh.jpg');
background-repeat: repeat no-repeat repeat-x repeat-y
background-position:x y 方位名词(如果方位名词只有一个,那么另一个居中);数值
background-attachment: scroll | fixed
//background: #ff0000 url() no-repeat fixed center 0
}
Translucent background
background-color: rgba(0,0,0,0.8)