1, style alignment
. div { width:70%; height:1000px; background-color:red; position:relative; left:15%; right:15%; /*margin:10px auto;*/ }2, Style size
<body> <p class= "P1" >hell World HTML5 Hell World html5</p> <p class= "P2" >hell World HTML5 Hell World html5</p> <p class= "P3" >hell World HTML5 Hell World html5</p> <ul> <li>111111</li> <li>222222</li> <li>33333333</li> </ul > </body>
. p1 { width:200px; /* Line High */ line-height:normal; } . p2 { width:200px; line-height:20px; /* Whether the element displays */ visibility:visible; } . P3 { width:200px; line-height:50%; /* Mouse Focus Display */ Cursor:cell; } Whether the li {/ * element is displayed, how to display block elements or inline elements */ display:inline; }3, navigation bar
<body> <ul> <li><a> navigation 1</a></li> <li><a> navigation 2</a ></li> <li><a> navigation 3</a></li> <li><a> navigation 4</a></li > </ul> </body>
UL { list-style-type:none; margin:0px Auto; padding:0px; width:300px; Background-color:chocolate; Text-align:center; } Li { /*none does not show that block is a chunk element, inline inline element, element has no newline character before and after, inherit specifies that the value of the display property should be inherited from the parent element * /display: inline; padding:10px; } A:link, a:hover { background-color:aqua; Text-decoration:none; width:50px; Text-align:center; } a:visited, a:active { background-color:blue; }4, Photo Show
<body> <div class= "Content" > <div class= "div" > <di V class= "text" > Picture introduction </div> </div> <div class= "div" > <div class= "text" > Picture introduction </div> </div> <div class= "div" > <div class=" text "> Photo introduction </div> </div> <div class=" div "> <div class= "text" > Photo introduction </div> </div> <div class= "div" > <div class= "text" > Photo introduction </div> </div> <div class= "div" & Gt <div class= "text" > Photo introduction </div> </div> <div class= "Div" ; <div class= "text" > Photo introduction </div> </div> <div class= "Div"; <div class= "text" > Photo introduction </div> </div> <div class= "Div" ; <div class= "text" > Photo introduction </div> </div> <div class= "Div" ; <div class= "text" > Photo introduction </div> </div> <div class= "Div" ; <div class= "text" > Photo introduction </div> </div> <div class= "Div" ; <div class= "text" > Photo introduction </div> </div> <div class= "Div" ; <div class= "text" > Photo introduction </div> </div> <div class= "Div" ; <div class= "text" > Photo introduction </div> </div> </div> </body& Gt
* { margin:0px; padding:0px } body { width:70%; Height:auto; margin:0px auto; } img { width:100px; height:100px; border:1px solid black; } . text { text-align:center; Background-color:chocolate; Width:inherit; } . div { Width:auto; border:1px solid red; padding:1px; Height:auto; margin:5px; Float:left; }The above is the CSS common operation example content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
