DIV+CSS网页布局技巧实例1：设置网页整体居中的代码
以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用DIV+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不同而已。
请看这段代码，宽度为适合800×600分辨率浏览器的宽度，margin:0 auto; 这句代码就是让居中了，意思是外边距上下设置为0，左右设为自动。这样它就居中了。
那么可能你要问了，text-align:center;为什么还要让内容居中呢？呵呵，别着急，这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:0 auto;不能解析为居中，所以用这种方式来补救，以下在设计内容时再用 text-align:left;就可以了。
注：margin和padding的值的顺序为顺时针上右下左，如margin:1px 2px 3px 4px;还可以缩写为上下、左右，如本例，如果为margin:0px;则是各边都为0
DIV+CSS网页布局技巧实例2：设置容器中的内容垂直居中
如实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们需要垂直居中的时候该怎么办呢？别害怕，跟我来，也是比较简单的，只用设置容器内的行高就行了。
line-height:500px;
这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟～～
DIV+CSS网页布局技巧实例3：设置层的透明度
有时候我们需要用到层的透明度，把下边的背景透出来，如下图：
这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？用JS，NO,NO，既然我们是CSS布局教程，那么就尽量用CSS来解决问题！
filter: alpha(opacity=70);
opacity: 0.7;
把这两句代码加入到要实现半透明层的CSS样式表里即可，简单吧！！
注：70和0.7的值可改为你需要的
Using abbreviations can help reduce the size of your CSS files and make them easier to read. For the main rules of CSS abbreviation, please refer to "Common CSS Abbreviation Grammar Summary". The main rules of CSS abbreviation are as follows:
Color Hexadecimal color value. If the value of each two digits is the same, half of it can be abbreviated, for example:
#000000 can be abbreviated to #000; #336699 can be abbreviated to #369;
Note: In the same CSS configuration section, do not use full-written and abbreviated color configurations alternately. When low, it will cause the browser to fail to render.
Box sizeusually has the following four writing methods:
property:value1; means that all sides have a value value1; property:value1 value2; means that the values of top and bottom are value1, right and left The value is value2 property:value1 value2 value3; means that the value of top is value1, the value of right and left is value2, and the value of bottom is value3 property:value1 value2 value3 value4; The four values represent top, right, bottom, leftA convenient way to remember is clockwise, top right, bottom left. Examples of specific applications in margin and padding are as follows:
margin:1em 0 2em 0.5em;
The properties of the border are as follows:
border-width:1px; border-style:solid ; border-color:#000;can be abbreviated to one sentence: border:1px solid #000;
The syntax is border:width style color;
Backgrounds (Backgrounds)Background attributes As follows:
background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;can be abbreviated as One sentence: background:#f00 url(background.gif) no-repeat fixed 0 0;
The syntax is background:color image repeat attachment position;
You can omit one or more of the attributes Value, if omitted, the attribute value will use the browser default value. The default value is:
color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% fonts (fonts)font attributes As follows:
font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif ;can be abbreviated to one sentence: font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
Note that if you abbreviate the font definition, at least define font-size and font-family two values.
ListsTo cancel the default dots and serial numbers, you can write list-style:none;,
The attributes of list are as follows:
list-style-type:square; list -style-position:inside; list-style-image:url(image.gif);can be abbreviated to one sentence: list-style:square inside url(image.gif);
This article comes from: http://www.aa25.cn/337.shtmlDIV CSS web page layout tips Example 5: Define the unit clearly, unless the value is 0
Forgetting to define the unit of size is a common mistake among CSS newbies. In HTML you can just write width="100", but in CSS you have to give an exact unit, such as: width:100px width:100em. There are only two exceptions for not defining units: row height and 0 value. In addition, other values must be followed by the unit. Be careful not to add spaces between the value and the unit.
DIV CSS Web Page Layout Tips Example 6: Case Sensitivity
When using CSS in XHTML, the element names defined in CSS are case-sensitive. To avoid this error, I recommend using lowercase for all definition names.
The values of class and id are also case-sensitive in HTML and XHTML. If you must write mixed case, please carefully confirm that your definition in CSS is consistent with the tags in XHTML.
DIV CSS web page layout skills example 7: Cancel the element qualification before class and id
When you write to define a class or id for an element, you can omit the previous element qualification, because the ID is in a page is unique, whereas class s can be used multiple times on the page. It makes no sense for you to qualify an element. For example:
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
It can be written as
#content { /* declarations */ }
.details { /* declarations */ }
This can save some bytes.
DIV CSS web page layout skills example 8: Default value of element attributes
Usually the default value of padding is 0, and the default value of background-color is transparent. But the default value may be different in different browsers. If you are afraid of conflicts, you can define the margin and padding values of all elements as 0 at the beginning of the style sheet, like this:
* {
margin:0;
}
DIV CSS web page layout skills Example 9: No need to repeatedly define inheritable values
标准之路（这是父层）
DIV+CSS网页布局技巧实例10：最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个class"update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
DIV CSS web page layout skills example 13: No need to add quotes to the background image path
In order to save bytes, I recommend not to add quotes to the background image path, because the quotes are not necessary. For example:
background:url("images/***.gif") #333;
can be written as
background:url(images/***.gif) # 333;
If you add quotation marks, it will cause some browser errors.
Group selectors (Group selectors)
When some element types, classes or ids have some attributes in common, you can use groups Selector to avoid multiple duplicate definitions. This can save quite a few bytes.
For example: to define the font, color and margin of all titles, you can write like this:
h1,h2,h3,h4,h5,h6 {
font-family :"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
Color: #333;
margin: 1em 0;
}
If used, individual elements need to be defined independently Style, you can add new definitions or overwrite old definitions, for example:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
When you use CSS to define multiple state styles of links, pay attention to the order in which they are written. The correct order is: :link :visited: hover:active. The first letter extracted is "LVHA", which you can remember as "LoVe HAte" (like it or hate it). Why is it so defined? You can refer to Eric Meyer's "Link Specificity".
If your users need to use the keyboard to control and need to know the focus of the current link, you can also define the :focus attribute. The effect of the :focus attribute also depends on the position where you write. If you want the focused element to display the :hover effect, you write :focus before :hover; if you want the focus effect to replace the :hover effect, you put :focus After :hover.
DIV CSS web page layout skills example 16: Clear floats
A very common CSS problem is that when floating is used for positioning, the lower layer is covered by the floating layer, or the layers are nested The sublayer is outside the scope of the outer layer.
The usual solution is to add an extra element behind the floating layer, such as a div or a br, and define its style as clear: both. This method is a bit far-fetched, but fortunately there is a good way to solve it. See this article "How To Clear Floats Without Structural Markup".
The above two methods can solve the problem of floating overflow very well, but what if you really need to clear the layer or the objects in the layer? A simple method is to use the overflow attribute. This method was originally published in "Simple Clearing of Floats" and has been widely discussed in "Clearance" and "Super simple clearing floats".
Which of the above clear methods is more suitable for you depends on the specific situation and will not be discussed here. In addition, some excellent articles have made it very clear about the application of float. I recommend you to read: "Floatutorial", "Containing Floats" and "Float Layouts"
My method is to add this sentence to the style sheet Code:
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
Then add the following to the page where the float needs to be cleared:
This article comes from: DIV CSS web page layout skills example 17: horizontal centering (centering)
This is a simple trick, but it’s worth saying again because I see too many newbie questions asking this: How to horizontally center CSS? You need to define the width of the element and define the horizontal margin. If your layout is contained in a layer (container), like this:
You can define it like this to center it horizontally:
#wrap {
width:760px; /* Modify to the width of your layer*/
margin:0 auto;
}
But IE5/Win cannot display this definition correctly, we use a Very useful trick to solve: use text-align attribute. Like this:
body {
text-align:center;
}
#wrap {
width:760px; /* Change to the width of your layer*/
margin:0 auto;
text-align:left;
}
The text-align:center; rule of the first body defines that all elements of the body in IE5/Win are centered (other browsers just Center the text), the second text-align:left; is to center the text in #warp to the left.
Because older browsers do not support CSS, a common approach is to use the @import technique to hide CSS. For example:
@import url("main.css");
However, this method does not work for IE4, which gave me a headache for a while. Later, I wrote it like this:
@import "main.css";
In this way, CSS can be hidden in IE4. Haha, it also saved 5 bytes. If you want to know the detailed explanation of @import syntax, you can see here "centricle's css filter chart"
Sometimes, you need to solve the bugs of IE browser Define some special rules. There are too many CSS hacks here. I only use two of them. Both of them are the safest.
1. Comment method
(a) To hide a CSS definition in IE, you can use a child selector:
html>body p {
/* Definition Content*/
}
(b) The following writing method can only be understood by IE browser (hidden from other browsers)
🎜> (c) Sometimes, you want IE/Win to be active but IE/Mac to be hidden, you can use the "backslash" technique:
/* */
* html p {
declarations
}
/* */
2. Method of conditional comments
Another method, which I think is more testable than CSS Hacks, is to use Microsoft’s private attribute conditional comments ( conditional comments). Using this method you can define some styles separately for IE without affecting the definition of the main style sheet. Like this:
DIV CSS web page layout skills Example 20: Debugging skills: How big are the layers?
DIV CSS web page layout skills example 21: CSS code writing style
selector1,
selector2 {
property: value; border:1px solid #ccc; }
When using union definitions, I usually write each selector on its own line so that they are easier to find in the CSS file. Add a space between the last selector and the curly braces {. Also write each definition on its own line. The semicolon should be placed directly after the attribute value. Do not add spaces.
Finally, the closing brace } is written on a line by itself.
Other writing methods include:
selector1, selector2 {property:value; border:1px solid #ccc;}
selector1, selector2 {
property:value;
border:1px solid #ccc;
}
This article comes from: http://www.aa25.cn/354.shtmlhttp://www.aa25 .cn/349.shtmlThis article comes from: http://www.aa25.cn/339.shtml
vscode Chinese setting method
jquery implements paging method
oracle cursor usage
Why Windows cannot access the specified device path or file
Introduction to interface types
What does unsigned integer mean?
Web page editing software
The difference between JD.com's self-operated and official flagship stores
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
