对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,谢谢,这是第一篇,淘宝顶部排版方式
我们看看原始图片
通过观察,我们把它分为如下图所示块
具体的HTML,DIV+CSS排版样式为
我们一行一行分析,
1.全部的代码均在一个DIV容器(我暂时这样称呼) Head里面,我们来看看Head的写法
#Head{
text-align:center;
}
为什么Head前面有一个"#"号呢?
而有的却是在前面加一个"．"比如 "．Head",有时候写css的时候干脆什么也不加,比如 td,body,他们有什么区别,具体怎么用,如果仔细你就会发现在HTML代码的DIV容器里面,有的是
而有的是这样
From the literal meaning of id and class, we have also understood that id is unique, and class is a class, suitable for containers that can be reused multiple times, and the one with nothing in front is The default description in CSS is generally used for HTML code, which has a global effect on the code in HTML. For example, td works on all columns in the HTML table. text-align:center refers to the text in this container. All are centered and aligned. We noticed that there is a semicolon ";" after the line,
Syntax text-align: left | right | center | justify
Value description:
left :? Default value. Align left
right :? Align right
center :? Align center
justify :? Align both ends
2. HeadTop
#Head #HeadTop{
position:relative ;
width:760px;
margin:10px auto 10px;
text-align:left;
}
Why is there a #Head in front of #HeadTop?
We found #headTop It is nested in #Head. In order for the settings in Head to also take effect in HeadTop, put HeadTop behind Head
position: static | absolute | fixed | relative
Value:
static :? Default value. There is no special positioning. The object follows HTML positioning rules
absolute:? Drag the object out of the document flow and use left, right, top, bottom and other attributes to make it absolute relative to its closest parent object with the most positioning settings. position. If no such parent object exists, the body object is used. And its cascading is defined through the z-index attribute
fixed : not supported. Object positioning follows the absolute method. But some specifications must be followed
relative: objects cannot be stacked, but will be offset in the normal document flow based on left, right, top, bottom and other attributes
width: auto | length
auto: ? default value. No special positioning, assigned according to HTML positioning rules
length :? A length value composed of a floating point number and a unit identifier | Percentage. The percentage is based on the width of the parent object. Cannot be negative. You can use the relative length pixel unit px or the absolute length in as the unit (1in = 2.54cm = 25.4 mm = 72pt = 6pc)
margin:10px auto 10px;
Retrieve or set the outer edges of the four sides of the object Patch
If all four parameter values are provided, it will be applied to the four sides in the order of up-right-down-left (clockwise direction). If only one is provided, it will be used on all four sides. If two are provided, the first is used for up-down and the second is used for left-right. If three are provided, the first is for top, the second is for left-right, and the third is for bottom.
text-align:left;
We see that the text alignment has been set in the Head to be centered, and here the text is defined to be left, so how to align the text? If there are conflicting definitions , CSS will be executed according to the latest definition, which is the same as in HTML, such as
What color am I?
3.
#Head #Logo{
width: 240px;
height: 31px;
float: left;
margin-left: 2px;
}
Width (width), height (height) are not mentioned
float : none | left | right
Value:
none :? Default value. The object does not float
left :? The text flows to the right side of the object
right :? The text flows to the left side of the object
is translated as floating. The left description is to arrange from the left
margin-left: 2px; equivalent to maign:0px;0px;0px;2px
The logo container here explains that the arrangement is from the left, the width is 240px, the height is 31px, the left patch (left side is empty) 2px wide
4. Left side of HeadNavBar Navigation bar
#Head #HeadNavBar{
float:right;
clear:right;
background: url(images/header_mm_bk.gif) left top no-repeat;
width:510px;
}
clear:right; clear the right float, indicating that there can be no more containers on the right
clear : none | left | right | both
background: url(images/header_mm_bk.gif) left top no-repeat;
(meaning the background image is aligned left, top, and does not repeat)
background : background-color || background-image || background-repeat || background-attachment || background-position
background-color:silver; Background color
background-image:url(http://www.dayanmei.com/images/space.gif);
Background color when both background image and background color exist Will be overwritten
background-repeat : repeat | no-repeat | repeat-x | repeat-y
Values:
repeat :? Default value. The background image is tiled both vertically and horizontally
no-repeat :? The background image is not tiled
repeat-x :? The background image is only tiled horizontally
repeat-y :? The background image is only tiled vertically Tile on top
background-attachment : scroll | fixed
Value:
scroll :? Default value. The background image scrolls with the object content
fixed :? The background image is fixed
background-position : length || length
background-position : position || position
Value:
length :? Percent | A length value consisting of a floating point number and a unit identifier.
position :? top | center | bottom | left | center | right
The whole sentence means that containers with a width of 510px pixels are arranged from right to left
5.
#Head ul{
list-style-type:none;
margin:0;
padding:0;
}
list-style-type:none;
list- style : list-style-image || list-style-position || list-style-type
list-style-image : url ( url ); You can change the list style to an image
list- style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Value: You can change the list to other styles
disc :? CSS1 Default value. Solid circle
circle :? CSS1 Hollow circle
square :? CSS1 Solid square
decimal :? CSS1 Arabic numerals
lower-roman :? CSS1 Lowercase Roman numerals
upper-roman :? CSS1 Uppercase Roman numerals
lower-alpha :? CSS1 Lowercase English letters
upper-alpha :? CSS1 Uppercase English letters
none :? CSS1 Do not use bullets
6.
#Head #HeadNavBar li{
float:left;
height:31px;
background: url(images/header_mm_sep.gif) left center no-repeat;
display:inline;
}
display:inline; Default value for inline objects. Force the object to be rendered as an inline object and remove lines from the object (displayed within the line, and beyond will not be displayed)
display : block | none | inline | inline-block
7.
#Head #HeadNavBar li.NoSep{
background: none;
margin-left: 5px;
}
When the flag class in the list block is NoSep, there is no background color "background: url( images/header_mm_sep.gif) left center no-repeat;", and the left patch is 5px
8. #MyTaoBao {
padding-left: 14px!important;
margin-left: 9px! important;
margin-left: 4px;
background:transparent url(images/header_mm_mytb_icon.gif) no-repeat left center;
}
padding:lenth; inner patch, usage reference margin,
padding-left: 14px; refers to the value of the 14px left margin, which is used to place the background image centered on the left.
!important; improves the application priority of the specified style rule.
9. Set the link style in the list
#Head #HeadNavBar li a{
display:block;
padding: 0 6px 0 7px;
float:left;
height:31px;
line-height:31px;
color: #0f3a66;
font-size: 13px;
}
display:block; rendered in block form
padding : 0 6px 0 7px; The left and right inner patches are each 7px, 6px
color: #0f3a66; The text color when linking is #0f3a66;
The complete definition of the link can also include the background color background, link style text-decoration( text-decoration: none[no decoration] || underline[underline] || blink[text flash] || overline[overline] || line-through[through line])
The order of the links should be like this (LVHA)
a:link
a :visited
a :hover
a :active
#Head #HeadNavBar li a:hover{
color: #e60;
}
10.
#Head #HeadNavBar li#AdvanceBox {
background: none;
margin-left: 10px;
}
Because AdvanceBox is inside the block li, so the order is #Head #HeadNavBar li#AdvanceBox. This sentence means there is no background, and the left outer patch (left margin) is 10px;
11. For other forms in #AdvanceBox Element definition
#Head #HeadNavBar li#AdvanceBox form {
margin:0;
padding:0;
margin-left:8px;
margin-top:5px;
}
#Head #HeadNavBar li#AdvanceBox .HeaderSearchBox {
display:block;
float:left;
width:112px;
height:15px!important;
height /*ie55*/: 21px;
padding:3px 2px 1px 2px;
padding-right:0;
border: 1px solid #7ad2ff;
background:url(images/header_mm_srch_bk.png) no-repeat;
color: #000;
}
#Head #HeadNavBar li#AdvanceBox input.DC {
color: #90B1C5 !important;
}
#Head #HeadNavBar li#AdvanceBox .HeaderSearchBtn {
display:block ;
float:left;
margin-left /*ie55*/: -3px;
}
#Head #HeadNavBar li#AdvanceBox li {
background: none!important ;
}
12. #QuickLinks
#Head #QuickLinks{
float:right;
width:750px;
margin-top:6px;
margin -right:6px;
}
Float right, width is 750px, top and right patches are 6px each
13. Define list li style for #Head #QuickLinks
#Head #QuickLinks li{
float: right;
margin-left:10px;
line-height:21px;
}
line-height:21px; line height 21px;
14. Define the link style within #Head #QuickLinks li. Multiple identical definitions can be separated by ",", and the path must be written completely
#Head #QuickLinks li a:link, #Head #QuickLinks li a: visited {
font-style:normal;
font-weight:normal;
font-size: 12px;
color:#04d;
}
#Head # QuickLinks li a:hover, #Head #QuickLinks li a:active {
color:#e60;
}
15.
.HackBox{
border-top:1px solid transparent !important;
border-top:0;
clear:both;
}
There are two repeatedly defined border-tops (top border, !important takes precedence, border is 1px, transparent
clear: both; Clear both left and right floats, similar to changing a line
Taobao head navigation has been basically analyzed. Now let’s summarize:
(1). Container divs can be nested, For example, , the way to write the container when nesting: you need to add the name of the container in front, such as # Head #Logo, we found that although the Logo is in the container "HeadTop", it does not need to be written as #Head #HeadTop #Logo, because HeadTop does not have restrictions on Logo
(2). Add a symbol before the unique container name. #", a common symbol preceded by a period "."
(3). The basic parameters of the container include outer patch margin, inner patch padding, width, background, floating float, clear, these Remember the usage of each parameter
(4). Use clear:both;
(5) when you need to wrap the display (a:link, a:visited, a:hover, a:active), several parameters of the link style: background (background), inner patch (padding) width (width) description (text-decoration) text color (color), etc. , you can set the link to be displayed in a block format
For other things not summarized, please read the source code.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
