Standard Application WEB instance: Create a list page

Document directory

• (1) TOP Creation
• (2) RIGHT Production
• (3) create LEFT
• (4) BOTTOM Creation

Example: overall observation:

Before starting to create a page, we should first observe the graph structure and consider how to layout it. layout is very important for a website. It is the skeleton of the entire system.

Let's look at this figure again.

The classic structure of the three rows and two columns is divided into four parts: TOP, RIGHT, LEFT, and BOTTOM. For example

We have considered the overall structure. Next, we should consider how to change the thought structure to "skeleton"

For example, use the box model for analysis)

Production process:

Subject production --> detail Production

I. Production subjects:

Xhtml:

<Div class = "editorChoose">
<H1>

<Div class = "edRight"> </div>
<Div class = "edLeft"> </div>
<Div class = "edBottom"> </div>
</Div>

Css:

@ Import url ("http://www.07art.com/public/public.css ");
. EditorChoose {width: 591px; height: 400px; border: 1px solid # aaa; background: # fff ;}
/* TOP content */
. EditorChoose h1 {height: 30px; line-height: 30px; border-bottom: 1px solid # aaa; text-align: center; font-weight: bold; color: #000; background: # efefef ;}
/* LEFT content */
. EdLeft {float: left; width: 142px; height: 317px; border-right: 1px solid # aaa; overflow: auto ;}
/* RIGHT content */
. EdRight {float: right; width: 448px; height: 317px; overflow: auto ;}
/* BOTTOM content */
. EdBottom {clear: both; padding-top: 15px; height: 35px; border-top: 1px solid # aaa; text-align: center; background: # efefef ;}

When the skeleton is out, we should add "blood" and "meat" to the skeleton. This is complete.

Ii. Details: (1) TOP Creation

First, let's take a look at the details in the TOP container.

It looks simple here. The text is centered. The close button is right and 8 PX away from the top and 10 px from the right.

Consider the TOP structure. If the close button is on the right side, a right floating (float: right;) is required for the close button ;).

Note: When the close button needs to float on the right, the close button is placed in front of the text. <H1> <a href = "#"> </a> select an image Corresponding css

. EditorChoose h1 {height: 30px; line-height: 30px; border-bottom: 1px solid # aaa; text-align: center; font-weight: bold; color: #000; background: # efefef;}/* center text */
. EditorChoose h1 img {float: right; margin: 8px 10px 0px 0px;}/* the picture is right */

(2) RIGHT Production

Let's take a look at the details in the RIGHT container.

The red block area is a duplicate area, so you only need one block and copy it.

<Div>
<Input name = "checkbox" type = "checkbox" value = ""/>

</Div>

Corresponding css

. EdRight div {width: 95px; padding: 18px 0px 12px 10px; float: left ;}
. EdBottom {clear: both; padding-top: 15px; height: 35px; border-top: 1px solid # aaa; text-align: center; background: # efefef ;}

(3) create LEFT

Let's take a look at the details in the RIGHT container.

This is a list-based graph. We need to consider ul li first.

H2 tag write album"Album list"Location

Ul writes down the following list and uses overflow: auto; to control the scroll bar,

Xhtml:

<H2> <span> album list </span> <Ul>
<Li> <a href = "#"> my happy life </a> </li>
<Li> <a href = "#"> How did a package die? </A> </li>
<Li> <a href = "#"> Yang Wen, you are a real asshole! </A> </li>
<Li class = "background"> <a href = "#"> Xiaobai is abandoned </a> </li>
<Li> <a href = "#"> my happy life </a> </li>
<Li> <a href = "#"> gardenia blossom </a> </li>
<Li> <a href = "#"> my brutal girlfriend </a> </li>
<Li> <a href = "#"> blue Life and Death </a> </li>
<Li> <a href = "#"> This dead love </a> </li>
<Li> <a href = "#"> Hunan University </a> </li>
<Li> <a href = "#"> Xin Yijia </a> </li>
<Li> <a href = "#"> Xin Yijia </a> </li>
<Li> <a href = "#"> Xin Yijia </a> </li>
<Li> <a href = "#"> Xin Yijia </a> </li>
<Li> <a href = "#"> Xin Yijia </a> </li>
</Ul>

Css:

. EdLeft h2 {padding: 1px 1px 0px 1px; height: 26px; border-bottom: 1px solid # aaa ;}
. EdLeft h2 span {text-align: center; height: 25px; background: # BFBDBD; color: #000; text-align: center; font-weight: bold; line-height: 25px; display: block ;}
. EdLeft {float: left; width: 142px; height: 317px; border-right: 1px solid # aaa ;}
. EdLeft ul {height: 290px; overflow: auto ;}
. EdLeft li {height: 27px; line-height: 27px; border-bottom: 1px solid # aaa; padding-left: 10px ;}
. EdLeft li a {color: #000 ;}
. EdLeft li a: link,. edLeft dd a: visited {text-decoration: none ;}
. EdLeft li a: hover {text-decoration: underline ;}
. EdLeft li. background {background: # ECEBEB ;}

(4) BOTTOM Creation

Here I write the button as input.

<Input type = "button" name = "button" value = ""/> <input name = "button" type = "button" value = ""/>

Corresponding css

. EdBottom input {width: 37px; height: 22px; color: #000; border: 1px solid #555; background: # aaa ;}

Xmlns = "http://www.w3.org/1999/xhtml">

Select Image

Album list

• My happy life
• How did a package die?
• Yang Wen, you are a real asshole!
• Xiaobai abandoned
• My happy life
• Gardenia blossom
• My Brutal girlfriend
• Blue life and death
• This dead love
• Hunan University
• Xin Yijia
• Xin Yijia
• Xin Yijia
• Xin Yijia
• Xin Yijia