Beginner Notes 2

1: Use the image as the background: <style>tag name{background-image:url(the address where the background image is stored);}</style>
   Repeat the background: background-repeat:repeat Do not repeat: background-repeat: no-repeat Vertical / Repeat horizontally: background-repeat:repeat-y/x
2: Decorate the text line on the text line on the text midline and under the text: text-decoration:overline/line-through/underline
   Set the link without underline: <style>a{ text-decoration:none}</style>
3: The space between letters: p.spread{word-spcing:30px;}
            p.tight{word-spacing:0.5em}
4:: "border-width" property if separate It won't work if you use it. Please use the "border-style:upper down, left and right" property to set the border first.
5: Set the right margin of the text: margin-right:..
   margin-top/right/bottom/left
   margin: 1cm 2cm 3cm 4cm top right bottom left
6: The difference between <tr><td><th>
7: Inside Margin: <style> td {padding-top/right/left/bottom}</style>

            <table border="1">
            <tr><td>Content in the table</td></tr>
            </table>
            </body>
8: The sequence list is replaced by a picture: <style>ul{list-style- image:url('Single quotation marks frame the image address')}</style>
9: Empty table border blank: table{empty-cells: hide;}
10: Element outline setting: p{border:red solid thin;outline- style/color/width/heigh:..;}
11: max width/height of text max-width/height min width/height of text line-weigh/height
12: display: block? ? ? ? Display related knowledge! ! !
13: Picture floating: img{float:right}
   Picture floating with title: write a div attribute in the style, the attribute contains float and
   use div block to encapsulate a box: <div><img src="">title title Title </div>
14: <p>Action on <span>a word or a certain piece of content</span>, use span</p>
   <style type="text/css">

font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
15:创建水平菜单？？？
   <html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li ><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
the above In the example, we float the ul element and the a element to the left. li elements appear as inline elements (no line breaks before and after the element). This will make the list line up in a row. The width of the ul element is 100%, and the width of each hyperlink in the list is 7em (7 times the current font size). We added color and borders to make it more beautiful.
</p>

</body>
</html>
16: Learning of div encapsulation block! ! ! ! ! ! ! ★
17: Positioning: Relative Positioning: p{position:relative;left:-20px}
          Absolute Positioning: p{position:absolute;left:100px;top:100px;}
          Fixed Positioning: p{position:fixed;left/right: 5px;top:

float:left;
clear:both;
}
20: Use the scroll bar to display the overflowing content within the element
     div
{
background-color: #00FFFF;
width: 150px;
height: 150px;
overflow: scroll
}
21: Z-index
Z-index Can be used to place an image element after another.
It must be in this format: the definition of the left or top attribute cannot be omitted
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
22: How does a:hover work on div? ? ? ? ? ?
23: Hyperlinks: Use of :focus
This example demonstrates how to use the :focus pseudo-class (doesn't work in IE).
:first-child (first child object)
This example demonstrates the use of the :first-child pseudo-class.
:lang (language)
This example demonstrates the use of the :lang pseudo-class. ? ? ? ? ?

Guess you like