May 04, 2021 CSS
1. Think about layout before making a DIV CSS web page:
2. Follow these steps to build a website page:
3. Some of the basics commonly used in the layout of DIV-CSS web pages
All said that the use of DIV-CSS layout to design the site is easy to optimize, easy to be included, so you know the use of DIV-CSS layout? T he CSS layout is the general name for a web page html created by the DIV tag and CSS style sheet code. T he DIV-CSS layout is now a very popular layout method, replacing the original table layout. Let's start by taking a look at the basic steps for learning the layout of DIV-CSS:
First, recognize the requirements of learning
1, to find out the purpose, first of all to understand why to learn CSS?
2, the state of mind can not be anxious, if you are very impatient, otherwise you will quickly lose interest.
3, insist, this is not a day or two thing, is a long process (at least two months).
Second, basic learning
1. What is the role of CSS?
(i.e. what is the relationship between CSS, html, and JS, and the importance of HTML structure)
2, CSS basics, CSS property style
3、HTML
The above points, generally very quickly mastered, also do not need to be proficient, understand about it.
Around the time, start looking for some psd designs online, do your own thing, find out what's wrong, and summarize them.
Third, learn to analyze the layout of other people's web pages
When you do psd design code, find questions, may not find the answer or no one to help you answer, do not rush, then it is best to look at the layout structure of other people's web pages, mainly look at the html layout framework, for reference (of course, there are many structure code on the Internet is very slotted cake).
Then learn how art diagrams are analyzed, how to use PS tools to cut out the footage you need, how to use these cut-out picture footage for layout, layout techniques, compatibility resolution and avoidance, and more.
In short: is to let their layout can know how the large layout structure layout, the establishment of layout ideas and techniques.
Fourth, the code specification
When you
read a
lot of other people's web code, you will find that they all have norms, these norms have many on the Internet, you need to summarize and recite, of course, not rote mestration, mainly on the cut chart to do more practice, familiar can remember.
Five, a lot of practice
Practice is from start to finish, don't break, even if looking for some simple web page layout practice, the beginning may be slow to develop, will encounter a lot of small problems, not in a hurry.
<div id="header">我是头部(上)</div>
<div id="centers">
<div class="c_left">我是中的左</div>
<div class="c_right">我是中的右</div>
<div class="clear"> </div>
</div>
<div id="footer">我是底部(下)</div>
body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,h5,h6,p,pre,table,
caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;
font-weight:normal;font-style:normal;font-size:100%;font-family:inherit;}
ol,ul,li{list-style:none;}
img{border:0;}
body{color:#000;background:#FFF;text-align:center;font:12px/1.5Arial,Helvetica,sans-serif;}
.clearfix:after{clear:both;content:".";display:block;height:0pt;visibility:hidden;overflow:hidden;}
.clear{clear:both;height:1px;margin-top:-1px;width:100%;}
.dis{display:block;}
.undis{display:none;}
/ * This above code is the initial CSS template, below is the new write CSS layout frame code * /
#header,#centers,#footer{width:100%;margin:0auto;
clear:both;font-size:18px;line-height:68px;font-weight:bold;}
#header{height:68px;border:1px solid #CCCCCC;}
#centers{padding:8px0;}
#footer{border-top:1px solid #CCCCCC;background:#F2F2F2;}
#centers.c_left{float:left;width:230px;border:1px solid #00CC66;
background:#F7F7F7;margin-right:5px;}
#centers.c_right{float:right;width:500px;border:1px solid #00CC66;background:#F7F7F7}
One. File naming specification
Global style: global .css;
Frame layout: layout .css;
Font style: font .css;
Link style: link .css;
Print style: print .css;
Two.
Common class/ID naming conventions
Header: Header
Inside: content
Capacitor: container
Foot: footer
Copyright: copyright
Navigation: menu
Main navigation: mainMenu
Sub-navigation: subMenu
Logo: logo
Label: banner
Title: Title
Sidebar: sidebar
Picture: Icon
Note: note
Search: search
Press button: btn
Record: login
Chain: link
Infobox: manage
......
Common classes should be named as far as possible by common English words, so that they are easy to understand and annotated where appropriate. F
or secondary class/ID naming, the pattern of combined writing is used, and the initials of the last word should be capitaled: such as "search box" should be named "searchInput," "search icon" named "search Icon," "search button" named "searchBtn," and so on.
Strict: Strict: Strict DTD, you can't use any of the identity and attributes of the performance layer, such as . The full code is as follows:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
Frameset: A DTD specifically designed for frame pages that you need to use if you have a framework in your page. The full code is as follows:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
In order to be correctly interpreted by the browser and verified by the W3C code, all XHTML documents must declare the coding language they use;
As commonly used language definitions:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
Standard XML document language definitions:
<?xml version=”1.0″ encoding=” utf-8″?>
Language definitions for older browsers:
<meta http-equiv=”Content-Language” content=” utf-8″ />
To improve the character set, "utf-8" is recommended.
3. Call the style sheet:
External style sheet calls:
Inline to the page: Is to write the style sheet directly in the head area of the page code.
Such as:
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
External call method: Write the style sheet in a separate .css file, and then call it in the page head area with code similar to the following.
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />
In web-compliant designs, it is recommended to use an external call method that allows you to change the style of a page without modifying .css only the file. I
f all pages call the same style sheet file, changing one style sheet file can change the style of all files.
4, choose the appropriate elements:
Choose HTML elements based on the structure of the document, not html elements based on their style. F
or example, use the P element to contain text paragraphs, not to line up. I
f you can't find the appropriate element when you create the document, consider using a generic div or span;
Avoid transitions using div and span. A
small, appropriate use of div and span elements can make the structure of the document clearer, more reasonable and easy to use styles;
Use labels and structure nesting as little as possible, which can not only make the document structure clear, but also keep the file small, while improving the user download speed, but also easy for the browser to interpret and view the document;
5, derived selector:
You can use a derived selector to define styles for child elements in an element, simplifying naming while also making the structure clearer, such as:
.mainMenu ul li {background:url(images/bg.gif;)}
The "secondary picture" here refers to images that are not part of what the page wants to express, but are used only for decoration, spacing, and reminders. Make it a backmap, and you can make changes with CSS styles without changing the page, such as:
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7, structure and style separation:
Only the structure of the document is written to the page, but the style is written in the css file, and the structure and style are separated by external calls to the CSS style sheet.
8, the structure of the document writing:
Page CSS documents should be structured and easy to read.
Such as:
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x; }
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer; }
9, mouse gestures:
In the XHTML standard, hand is recognized only by IE, and when the mouse gesture needs to be converted to "hand", the "hand" is changed to "pointer", i.e. "cursor:pointer;" ”
Two.
Comment writing specifications
1, inter-line comments:
Write directly after property values, such as:
.search{
Border: 1px solid #fff; / * Define Search Enter Box Box * /
Background: URL (./ images / icon.gif) No-report # 333; / * Define the background of the search box * /
}
2, the whole paragraph of comments:
Add comments at the beginning and end places, such as:
/ * ===== Search bar ===== * /
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333; }
/ * ===== Search bar end ===== * /
Three.
Style property code abbreviation
1, different classes have the same properties and property values of abbreviations:
For two different classes, but some or even all of the same properties and property values, you should combine abbreviations, especially if there are multiple different classes with the same properties and property values, which can reduce the amount of code and be easy to control.
Such as:
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
The property values of the two different classes are duplicated and can just be abbreviated as:
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}
2, the abbreviation of the same property:
The same property can also be shorted based on its property values, such as:
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
In CSS, the distance between the inside and outside borders is arranged in order of top, right, bottom, and left, when these four property values are not also directly abbreviated, such as:
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
You can abbreviated to:
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}
If the top and bottom, left, and right border property values are the same, the property values can be abbreviated directly to two, such as:
.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
The abbreviations are:
.btn {margin:10px 5px;}
When the property values of the top and bottom left and right borders are the same, you can abbreviated directly into one, such as:
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
The abbreviations are:
.btn{margin:10px;}
4, the abbreviation of color values:
When the three color values of RGB are the same, the color value code can be abbreviated.
Such as:
.menu { color:#ff3333;}
It can be abbreviated as:
.menu {color:#f33;}
1, IE6, IE7, Firefox compatible writing:
Write one:
IE can identify *; standard browser (such as FF) cannot recognize *;
IE6 can identify *, but not to identify! Important,
IE7 can identify *, can also identify! Important;
Ff can't identify *, but you can identify! Important;
According to the above expression, the CSS Hack under the same category / ID is writable:
.searchInput {
Background-color: # 333; / * All of the three can * /
* Background-color: # 666! important; / * only IE7 * /
* Background-color: # 999; / * Only IE6 and IE6 below * /
}
The writing order of the three is: FF, IE7, IE6.
Write two:
IE6 recognizes """" and doesn't recognize between IE7 and FF, so when only for the difference between IE6 and IE7 and FF, write this:
.searchInput {
Background-color: # 333; / * Universal * /
_Background-color: # 666; / * only IE6 recognizable * /
}
Write three:
* + HTML and * HTML are IE-specific tags, Firefox is not supported.
.searchInput {background-color:#333;}
* html .Searchinput {background-color: # 666;} / * only IE6 * /
* + html .Searchinput {background-color: # 555;} / * only IE7 * /
Block Internet Explorer:
Select is a selector that is replaced as the case may be.
The second sentence is unique to Safari browsers on MAC.
*: lang (zh) select {font: 12px! important;} / * ff dedicated * /
SELECT: EMPTY {Font: 12px! important;} / * safari visible * /
IE6 identifies:
Here is mainly through CSS comments to separate a property from the value, comments before the colon.
SELECT {Display / * IE6 does not recognize * /: none;
If condition hack of IE:
All IE identifiable:
<!–[if IE]> Only IE <![end if]–>
Only IE5.0 can be identified:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0 replacement IE5.5 can be identified:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
IE6 only:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6 and IE5.x below IE6 can be identified:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
IE7 only recognition:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
In Firefox, when the children are floating, the height of the parent cannot completely wrap the entire child, so you can solve this problem by defining the parent once with this clear floating HACK.
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}