Home > Developer > Web Develop
staticStatic positioning (not changing its position, where it is)
The default value. No positioning, the element appears in a normal stream (ignored top , bottom, left, right or z-index declared).
fixedFixed positioning (Reference-browser window)---do pop-up ads
Creates fixed-positioned elements that are positioned relative to the browser window. The position of the element is passed "left" , "top" "right" as well as the "bottom" attributes are specified.
relative(relative positioning) (with reference to himself)
Creates a relative positioned element, positioned relative to its normal position.
absolute(absolute positioning) (except static as you can, find the reference and position it with the nearest parent that has been positioned)
Creates an absolutely positioned element that static is positioned relative to the first parent element other than the anchor.
The position of the element is defined by "," and left" "top" "right" "bottom" attributes
Z-index
z-indexproperty to set the stacking order of the elements. Elements that have a higher stacking order are always in front of elements that are lower in stacking order.
The basic idea of positioning: it allows you to define where the element box should appear relative to its normal position, or relative to the parent element, another element, or even the location of the browser window itself.
Everything is a box
Block-level elements: div , h1 or p elements that are: displayed as a piece of content called "Block box";
Inline elements: span , strong , and a so on, the content is displayed in the line called "inline box";
Use the Display property to change the type of box to display:block be:; Set inline elements to block-level elements, display:none; no boxes
Relative positioning:
If a element is positioned relative to it, it will appear where it is located.
Move the element "relative to" its starting point by setting a vertical or horizontal position
.adv_relative { position: relative; left: 30px; top: 20px; }
Absolute positioning:
The position of the element relative to the nearest positioned ancestor element, if the element has no positioned ancestor element, its position is relative to the original containing block..adv_absolute { position: absolute; left: 30px; top: 20px; }
、
16th Chapter FrameworkframesetFramework:
<frameset> ----used to define a frame; double label
Cannot be <body> used together with
rows, cols attributes
rows Defines how many rows the frame has (value px / % / * )
colsDefines how many columns the frame has (value px / % / * )
Frame Sub-framework
srcThe path to the displayed page
nameFrame name
frameborderBorder Line (value 0/1)
< frame >----represents a part of a frame; a single label, to follow the end flag
< noframes > Properties
< noframes > provides content that is not supported by a frame browser body ; double label
<frameset>
<frame src= ""/>
<frame src= ""/>
<frame src= ""/>
<noframes>
<body> content </body>
</noframes></frameset>
<iframe>Inline frame
iframe Element creates an inline frame that contains another document (inline frame)
Allow and body use together
widthWidth (value px/%)
heightHigh (value px/%)
nameFrame name
frameborder Border Line (value 0/1)
srcThe path to the displayed page
opacityTransparency Properties
For IE6/7/ , use filter:alpha(opacity:值; ) a value of0-100
For Webkit ,,, Opera Firefox IE9+ , using opacity : value;0-1
For early Firefox, use -moz-opacity : value;0-1
So when writing transparent properties, the general wording is
opacity
{
opacity:0.5;
Filter:alpha (opacity:50);/*0-100*/
-moz-opacity:0.5; /* Value 0-1*/--> resolution for early version of Firefox compatibility problem}border-radiusRounded Border properties
border-radius:10px;
To div add a rounded border to an element
box-shadowShadow Properties
box-shadow Property adds a shadow effect to the box followed by 4 parameters.
box-shadow:0px 0px 10px #000;
<embed>Property
is the HTML5 new tag in the media embed plugin tag that can be <embed> inserted by inserting audio or video
<embed src=“media/music.mp3” />
Format .mid .wav .mp3 , etc.
CSS Partial Map Summary
DIVa naming method for enterprises with high frequency
Web content Class
---
notation: /* Footer */ content Area/* End Footer */
Summary:summary
Arrow:arrow
Trademark:label
Website Logo:logo
Corner/Fillet: corner
Banner ads:banner
Sub-menu:subMenu
Search:search
Search box:searchBox
Login:login
Login Bar:loginbar
Tool bar:toolbar
Drop down:drop
tab page:tab
The current:current
List:list
Rolling:scroll
Service:service
Tip Information:msg
Hot:hot
News:news
Tips:tips
Download:download
Column title:title
Hot:hot
Join: joinus
Registered:regsiter
Guide:guide
Friendship Link:friendlink
State:status
Copyright:copyright
Button:btn
Our Partners:partner
Vote:vote
In the left and right: left rightcenter
Title:title
Name of the ID:
---
Navigation:nav
Main navigation:mainbav
Sub-navigation:subnav
Top Navigation:topnav
Side navigation:sidebar
Left navigation:leftsidebar
Right navigation:rightsidebar
Menu:menu
Sub-menu:submenu
Title:title
Summary:summary
Container:container
Page Header:header
Content: content /container
Page Body:main
End of page:footer
Navigation:nav
Side bar:sidebar
Column:column
Page perimeter control overall layout width:wrapper
In the left and right: left rightcenter
Page structure
---
Navigation
Sign:logo
Advertising:banner
Landing:login
Login Bar:loginbar
Registered:regsiter
Search:search
Functional area:shop
Title:title
Join:joinus
State:status
Button:btn
Rolling:scroll
tab page:tab
List of articles:list
Tip Information:msg
The current: current
Tips:tips
Icon:icon
Comments:note
Guide:guild
Service:service
Hot:hot
News:news
Download:download
Vote:vote
Our Partners:partner
Friendship Link:link
Copyright:copyright
Function
className of:
.barnews { }
.barproduct { }
.left { float:left; }
.bottom { float:bottom; }
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
Color: Use the name of the color or the 16 code, as in
Font size, directly using "font+ font size" as the name, as
Alignment style, use the English name of the alignment target, such as
Title bar style, named using "Category + function", as
---
Precautions::
All lowercase;
try to use English;
Do not add the middle bar and underline;
Try not to abbreviate unless you see the words clearly.
---
Recommended CSS Order of writing:
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
width
height
margin
padding
border
background
display
list-style
position
float
clear
Display Properties
Self properties
Text properties
CSS Wizard principles and applications
The image CSS background和background-position is rendered using attributes, which means that your label becomes more complex and the image is CSS defined in, not labeled.
CSSThe basic principle of sprite is to integrate some of the images you use on your site into a single image, reducing the number of HTTP requests on your site.
A simple example:
Three states of a picture to make a button
A link is CSS made into a button style, we can use the same picture, complete the button three states a:link a:hover a:active ,,<a class="button" href="#">链接</a>
Added to the right of the picture is: The three buttons of the picture is 200px 65px flattened, button.png from the top to the next time for the button of the normal, mouse-over, mouse click on the state. You can use CSS to define it.
a {display:block;
width:200px;
height:65px;
line-height:65px; /* Define Status */
text-indent:-2015px; /* Hide Text */
Background-image:url (button.png); /* Define background picture */
background-position:0 0; /* Defines the normal state of the link, at which point the image shows the top part */
}
a:hover {background-position:0 -66px; /* Define the slip-over state of the link, at which point the middle part is displayed, and negative values are taken down */
}
a:active {background-position:0 -132px;
/* Define the normal state of the link, at which point the bottom portion is displayed and negative values are taken down/
}
More CSS Sprite, more complex images, more accurate background positioning. A lot of numbers might be used.
such as: background:url(nav.png) -180px 24pxno-repeat to achieve more precise positioning
Advantages:
Reduce the number of requests to the server when loading Web images
You can combine most background images and small icons to make it easy to use in any location, so requests in different locations only need to call one picture, thus reducing the number of requests to the server, reducing the pressure on the server, and increasing the loading speed of the page and saving the traffic of the server.
Increase the load speed of the page
sprite One of the benefits of technology is the load time of pictures (when there are many sprite , the load time of a single picture). The size of a picture that is created by the picture you want is GIF significantly smaller than the size of all pictures before it is flattened. A single sheet is GIF only related to a color table, and each individual partition GIF has its own color table, which increases the overall size. Therefore, a single sheet JPEG or PNG sprite size is very likely to be smaller than the total size of a picture divided into multiple sheets.
Reduce some of the mouse slide overbug
IE6Do not proactively preload the mouse over a:hover the background picture, so if you use more than one picture, the mouse will appear flashing white phenomenon. With CSS Sprite, this phenomenon does not occur because of a single picture.
Insufficient:
CSSThe biggest problem with Sprite is memory usage
Affects the zoom function of the browser
Puzzle Maintenance More Trouble
Making it CSS difficult to write
CSSSprite calls the picture cannot be printed
Error is used to Sprites affect accessibility
DIV+CSS Study Notes
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
