Application Web Standard instance: List page Making _ Experience Exchange

Instance:

Holistic Observation and reflection:

Before we start making a page, we first have to look at the structure of the diagram, consider how it should be laid out, and the layout is very important to a website, which is the skeleton of the whole system.

Look at this picture again

The classic three row two-column structure is divided into four blocks, TOP, right, left, and BOTTOM. Such as

We have thought about the structure of the whole, and then we need to consider how to change the structure of thought into "skeleton".

such as (box model to analyze)

Production process:

Body production--detail making

First, the production of the main body:

Xhtml:

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 ;}

Bones come out, and then we should add "blood" to the bone to meet the "meat", so that it is complete.

Second, the details of the production:

(1) Top production

Take a look at the details section of the top container first.

It looks very concise here, the text is centered, the Close button is right and the distance from the 8px, right 10px away.

Consider the top structure, close the button on the right, then we will give the Close button a right float (float:right;).

Note: When the close button is floating to the right, the Close button is placed in front of the text.

Select picture

The corresponding CSS

. editorchoose h1{height:30px;line-height:30px;border-bottom:1px solid #aaa; text-align:center;font-weight:bold; Color: #000; background: #efefef;} /* Text Centered */
. editorchoose H1 img{float:right;margin:8px 10px 0px 0px; /* Picture Right */

(2) Right production

Take a look at the details section of the right container.

The Red block area is a repeating area, so just one piece, and then copy will do.

The 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) left production

Take a look at the details section of the right container.

This is a list of the nature of the diagram, first of all to consider UL Li.

H2 label Write album "album list" location

UL write the following list and use Overflow:auto to control the scroll bar,

Xhtml:

Album List

• A happy life of my family


• How did bonded labour die?


• Yangwen you're such a jerk!


• Little White was abandoned


• A happy life of my family


• Gardenia Flower Open


• My savage girlfriend.


• Blue Life and Death Love


• This fucking love.


• Hunan University


• The new one Good


• The new one Good


• The new one Good


• The new one Good


• The new one Good

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;p adding-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 production

Here I put the button in the form of input

　　　　

The corresponding CSS

. Edbottom Input{width:37px;height:22px;color: #000, border:1px solid #555; background: #aaa;}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <!--=========================================================== ======= General XHTML 1.0-main style sheet-design 2007-03-27 Author-Bill-cap made by MOP "application Web Standard instance: Making of List Page" ======== ==========================================================-<pead> <meta http-equiv= "Content-Type" Content= "text/html; Charset=utf-8 "/> <meta name=" description "content=" Application Web Standard instance: Production of list pages "/> <meta name=" keywords "content=" Application Web Standard instance: Making a list page "/> <meta name=" Author "content=" http://www.07art.com "/> <meta name=" robots "content=" All "/> <title>11111111111</title> <style type=" text/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;} . editorchoose H1 img{float:right;margin:8px 10px 0px 0px; /*left content */. edleft{float:left;width:142px;height:317px;border-right:1px solid #aaa;}. 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;p adding-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;}/*right content */. Edright{float:right;width:448px;height:317px;overflow:auto;}. 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;} /*bottom content */. Edbottom input{width:37px;height:22px;color: #000; border:1px solid #555; background: #aaa;} </style > </pead> <body> <p> Select picture </p> <input name= "checkbox" Type= "C Heckbox "value=" "/> <input name=" checkbox "type=" checkbox "value=" "/&G T <input name= "checkbox" type= "checkbox" value= "/> <input name=" Check Box "type=" checkbox "value=" "/> <input name=" checkbox "type=" checkbox " Value= ""/> <input name= "checkbox" type= "checkbox" value= ""/> <input name= "checkbox" type= "checkbox" value= ""/> &Lt;input name= "checkbox" type= "checkbox" value= "/> <input name=" checkb Ox "type=" checkbox "value=" "/> <input name=" checkbox "type=" checkbox "V Alue= ""/> <input name= "checkbox" type= "checkbox" value= ""/> <input name= "checkbox" type= "checkbox" value= ""/> <input name= "checkbox" type= "checkbox" value= ""/> <i Nput name= "checkbox" type= "checkbox" value= ""/> <input name= "checkbox" type= "checkbox" Value= "/> <p><span> album list </span></p> <ul> <li> a happy life for me </li> <li> How did bonded labour die? </li> <li> Yangwen You're such a jerk! </li> <li class= "Background" > Small white was discarded </li> <li> my happy life </li> <li> Gardenia Blossom </li > <li> My brutal girlfriend </li> <li> blue life and death </li> <li> this damn love </li> <li> Hunan University </li> <li> new Best </li> <li> new Best </li> <li> new </li> <li> new best </li> <li> new Best </li> </ul> <input type= "button" name= "button" value= "OK"/> <input name= "button" type= "button" value= "Cancel"/ > </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]

