CSS page cut diagram example under tutorial

CSS page cut diagram example under tutorial

7, the production of navigation, is a typical Ulli list. We first write the HTML code, and there is a vertical line between our navigation lists.

650) this.width=650; "style=" width:540px;height:26px; "alt=" CSS page cut example "src=" http://www.divcss8.com/ckfinder/ Userfiles/images/cssbj4.jpg "/>

<ul>

<li><a href= "#" >divcss8.com home </a>|</li>

<li><a href= "#" > About Tiefora </a>|</li>

<li><a href= "#" > Product information </a>|</li>

<li><a href= "#" > News </a>|</li>

<li><a href= "#" > Human Resources </a>|</li>

<li><a href= "#" > Company Home </a>|</li>

<li><a href= "#" > Company Home </a>|</li>

<li><a href= "#" > Company Home </a>|</li>

<li><a href= "#" > Company Home </a></li>

</ul>

Write CSS styles according to HTML.

#nav {

height:25px;

Background: #000;

}

CSS explanation of the style code:

The parent element div of the navigation sets the height. Then set the background color to black

#nav ul{

List-style:none;

padding-left:10px;

}

CSS explanation of the style code:

Let the navigation ul remove the default dot. Let the overall UL left empty a certain distance.

#nav ul li{

Color: #fff;

Float:left;

line-height:25px;

}

CSS explanation of the style code:

Change the text color of the specific item in the navigation to white, because the Li element is a block element. So we set the float for it. This allows the navigation to be displayed on the same line. line-height:25px is for Li to center vertically in the navigation.

#nav ul Li a{

Color: #FFF;

font-size:13px;

padding:0px 15px;

Text-decoration:none;

}

CSS explanation of the style code:

Set the navigation link state, why set two times the color, Li set white, most mainly for the vertical line with. Links can only be set by the a style. and padding:0px 15px; This property is for a vertical bar so that it is in the middle of two navigation text.

#nav ul Li a:hover{

Color: #FF0;

}

CSS explanation of the style code:

When you set the mouse hover. Change the color of the link

8. Set the main content area of the Web page: It has been analyzed before. This is a typical two-column center layout. We're letting <div id= "main" >4</div> set the width first, and let it center. Then nest the div in this div. Then let the nested div two column layout

650) this.width=650, "style=" WIDTH:511PX;HEIGHT:84PX; "alt=" CSS page cut diagram example under the Tutorial "", "" The "" "The" "" "src= Userfiles/images/cssbj5.jpg "/>

HTML Code:

<div class= "Sider" >

<ul>

<li><a href= "#" > This is news headlines 1</a><span>2015-5-10</span></li>

<li><a href= "#" > This is news headlines 2</a><span>2015-5-10</span></li>

<li><a href= "#" > This is news headlines 1</a><span>2015-5-10</span></li>

<li><a href= "#" > This is news headlines 2</a><span>2015-5-10</span></li>

</ul>

</div>

<div class= "Container" >

<dl>

<dt></dt>

<dd>HD32B68S</dd>

<dd> Category: CRT housings </dd>

<dd> Name: hd32b68s </dd>

<dd> views: 52 Times </dd>

</dl>

<dl>

<dt></dt>

<dd>HD32B68S</dd>

<dd> Category: CRT housings </dd>

<dd> Name: hd32b68s </dd>

<dd> views: 52 Times </dd>

</dl>

</div>

HTML Code Explanation:

1. Column name title. We use H4 or H3 tags, on the one hand, for the style of writing, two aspects. In the site optimization, relatively important text, where the use of H4

2. News typical List of Ulli

3. and the right product. The DL DT DD narrative list is used. DT is often used for headings. And DD is used for description. In that case. We can assume that the product picture is the title. The individual attributes of the product are described.

Finally the style is written

#main {

Clear:both;

padding:20px 0px;

}

CSS explanation of the style code:

1. Clear:both; Indicates clear float. Why do you write this? is because the LI element of the navigation has been written floating. And as shown: there will be a part of the blank. This will affect the content of the page below. Therefore, the main content of the first to clear the float. 650) this.width=650, "style=" width:533px;height:60px; "alt=" CSS page cut diagram example under the Tutorial "", "" The "" "The" "" "src= Userfiles/images/cssbj6.jpg "/>

2. padding:20px 0px; Let the main content of the top and the top left a certain interval

#main. sider{

width:370px;

margin:0px 20px;

Float:left;

}

CSS explanation of the style code:

is a two-column layout, let the left news module first. Set the width, and float floats. Then set the spacing to the product module.

#main. Sider h4, #main. Container h4{

Background:url (images/libiao.jpg) no-repeat;

Text-indent:2em;

font-size:14px;

padding-bottom:5px;

}

CSS explanation of the style code:

1. The news column name is the same as the product column, so a group selector is used

2. Our Column name small icon made background. Let the text indent, and then control the text size.

#main. Sider ul{

List-style:none;

}

#main. Sider ul li {

height:24px;

line-height:24px;

border-bottom:1px dotted #ccc;

}

CSS explanation of the style code:

Set the news list to a certain height and center vertically. Add a dashed line at the bottom (border-bottom:1px dotted #ccc;

）

#main. Sider ul Li a{

font-size:13px;

Text-decoration:none;

Color: #666;

}

CSS explanation of the style code:

Control the link status of the News list: Remove underline text-decoration:none; Set text color

#main. Sider ul Li a:hover{

Color: #F00;

}

#main. Sider ul Li span{

font-size:13px;

Color: #666;

padding-left:60px;

}

#main. container{

width:570px;

margin:0px 20px 0px 0px;

Float:left;

}

CSS explanation of the style code:

1. Set product content area width and float

2. The last 570px+20px+370px+40px is just 1000PX. This place is a typical box model. To understand. How these values are derived.

#main. Container dl{

width:260px;

Float:left;

}

CSS explanation of the style code:

We use a list of DL lists, so to say. Our products are tied up. Just let the DL float a bit. Also conducive to the background program loop output content

#main. Container DL dt{

Float:left;

}

CSS explanation of the style code:

Let the title dt float in the DL

#main. Container DL dd{

font-size:13px;

Color: #333;

Text-indent:1em;

height:22px;

}

CSS explanation of the style code:

Finally control the product description of the text specific properties can be.

We recommend that you use the DL DT DD to write

You can try writing the bottom information

CSS Tutorial www.divcss8.com

This article is from the "Book House" blog, please be sure to keep this source http://jiefei.blog.51cto.com/6994042/1659079

CSS page cut diagram example under tutorial