Home > Developer > Web Develop
The full HTML structure
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<body>
</body>
A reference to a style
One. Internal writing
<title> </title>
<style type= "Text/css" >
body {background:black; text-spacing:0.5em}
. div_css1 {align= "center" margin:20px}
. p_css1 {color:red; font: (Style) itlic| | Oblique (variant) small-caps| | None (weight) (400=NORML 700=bold) (size) 4em (family) "Arial" | | Times New Norman}
</style>
<div class= "" >
(if ues:so use the style just 1 times)!!!
#div_css {}
<div id= "" >
(or ues:so don ' t write "class or id =?")
DIV.P {}
div p {}
Two. External references
<link rel= "stylesheet" type= "Text/css" href= "Xx.css" >
Style of the hyperlink
A {}//All Super Links
A:link {}//no linked links
a:visited{}//alredy Linked links
a:hover{}//on Mose move to the link
a:action{}//Tap
Insert Flash File
<object type= "Application/x-shockwave-flash" date= "//" width= "" height= "" id= "" >
<param name= "movie" value= "//"/>
<param name= "allowscriptacess" value= "Samedomain"/>
<param name= "Quality" value= "best"/>
<param name= "bgcolor" value= "#FFFFFF"/>
<param name= "scale" value= "Noscale"/>
<param name= "salign" calue= "TL"/>
<param name= "Flashvars" value= "playermode=embedded"/>
</object>
Insert Video
<object type= "video/x-ms-wmv" date= "////xx" width= "height=" ">
<param name= "src" value= "////xx"/>
<param name= "Autostart" value= "true"/>
<param name= "Controller" value= "true"/>
</object>
Insert a page block
<iframe
Src= "XX"
Width= ""
Height= ""
scrolling= "Auto"
Frameborder= "O"
Name= "XX" >
</iframe>
Insert Form
<form action= "#" name= "id=" "method=" post "> </form>
One. Text input (account number, password)
Account <input type= "text" name= "" id= "" maxlenth= ""/>
Password <input type= "password" name= "" id= "" maxlenth= ""/>
Two. Submit Form
<input type= "Submit" Name= "id=" "value=" confirm "></input>
Three. Radio
<input type= "Radio" name= "id=" "value=" XX ">xx</input>
<input type= "Radio" name= "id=" "value=" XX ">xx</input>
Four. Multi-Select
<input type= "checkbox" Name= "id=" "vslue=" XX ">xx</input>
<input type= "checkbox" Name= "id=" "vslue=" XX ">xx</input>
<input type= "checkbox" Name= "id=" "vslue=" XX ">xx</input>
Five. Drop-down menu
<select name= "" Id= "" >
<option vslue= "XX" >xx</option>
<option vslue= "XX" >xx</option>
<option vslue= "XX" >xx</option>
</select>
Six. List (no drop-down)
<select name= "" id= "" size= "number" >
<option value= "" >xx</optin>
.......
......
</select>
Hover text Box
<fieldset>
<legend>xx</legend>
</fieldset>
Scrolling text
<maquee direction= "Up | | Left "scrollamount=" 0-x "onmouseover=" Stop () "onmouseout=" Start () ">
Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</marquee>
Form
<table>
<tr>
<td>xx</td>
</tr>
<tr>
<TD colspan= "num" >xx</td>//Merge Landscape
<TD rowspan= "num" >xx</td>//Merge Vertical
</tr>
</table>
Some properties of the text
Set text properties for element content
(1) For example, set the first line indent of text
Text-indent:2em;
(2) Example of setting text alignment
Text-align:left | Right | Center
(3) Example of setting the text decoration method
Text-decoration:underline;
(4) Set word spacing for example
Letter-spacing:2em;
(5) Set word spacing for example
Word-spacing:0.5em;
(6) Example blank Display form P56
White-space:pre;
Margins margin: An optional area that surrounds the bounding rectangle of the element.
padding padding: An optional area between the text content and the border
Element floating
Floating:
Float
There are 2 directions: Left Right none (not floating)
For text floating, you must set the height, width, if not set, after the consequences at your own risk.
Cases
Clear float:
Clear:none; Allows both sides of an element to have floating
Clear:left; Floating elements are not allowed on the left
Clear:right; Floating elements on the right are not allowed
Clear:both; Floating elements are not allowed on either side
Positioning type Position
Classification:
static (Static) This is the default, which is to take a normal position as normal text flow.
Fixed (stationary) relative to the browser window (retains the original position)
Position:absolute;
Absolute positioning: Relative to the parent element (contained container).
position:relative;
Relative positioning: Normal position positioning when position is not set
The original space is preserved. (meaning that there is no additional label where the static position is counted.) such as div,img and so on. ）
Example:
<style type= "Text/css" >
. div_1 {width:150px;height:200px;}
. text1 {width:200px;height:100px;left:160px;}
</style>
<body>
<div>
<div class= "div_1" style= "Position:absolute;" >
Ha, I'm a handsome guy.
</div>
<div class= "Text1" style= "Position:absolute;" >
Oh, I'm dizzy.
</div>
<div style= "position:relative;left:10px;top:15px;" >
I'll see if I can. </div>
</div>
</body>
The result of the operation is: Ha, I'm a handsome guy isn't that oh I'm dizzy you
I'll see if I can.
Explanation: "Ha I am a handsome guy" with the absolute absolute positioning, which is positioned relative to the first Div, because the first div is its parent element, which is included in it. So it appears at the top of the head. (because it is not set to left and top, etc.)
"Is not oh, I faint you" is also absolute absolute positioning, it is relative to the first Div positioning, set the left value of 160px, greater than the width of the previous Div, so does not overlap.
"I'll see if it's okay" is relative relative positioning, which is relative to the parent element, which is the first Div, where it locates from the beginning of the parent element, so if you do not set top then it will coincide with the second Div. And the font size is generally 15px '
Specify crop area
Position:absolute;
Clip:rect (top right bottom left);
Top: Cut the top length from top to bottom.
Left: Cuts the length of ieft to the right.
Right: Cut the length from left.
Bottom: Cut the length of bottom from top to bottom
Convert block-level elements to character-level elements
Display:inline;
Convert character-level elements to block-level elements
Display:block;
Handling Overflow
Position:absolute; (Must be absolute)
overflow:visible; Overflow area visible
Overflow:hidden; Overflow area not visible
Overflow:scroll; Scroll bar appears in overflow area
Box Model
With margin padding border width height
To write in the left and right order.
Example: Border-width:1em 2em 2em 2em
Note: The following properties are left and right:
If only 3 values appear on the set, the upper and lower left
2 values: up or down
1 values: all = 4 identical values appear
Insert Multimedia
<embed src= "1.swf" width=300 height=200></embed>
<embed src= "1.mp3" width=300 height=200></embed>
<embed src= "1.wmv" width=300 height=200></embed>
Reproduced
HTML+CSS Foundation
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
