Instance Effect diagram:
Overall observation thinking:
In front of the start of the page, we first need to observe the structure of the diagram, consider how the layout, layout for a site is very important, he is the skeleton of the whole system.
Look at this picture again
It's a classic three-line two-column structure, divided into four pieces, top, right, left, and BOTTOM. The following figure
The above we think about the structure of the whole, and then we have to consider how to change the structure of thought into "skeleton"
The following figure (box model to analyze)
Production process:
Making--> details of main body making
First, the production body:
xhtml:
<div class= "Editorchoose"
<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 ;}
The skeleton is out, then we should add "blood" to the skeleton to meet the "meat", so that is complete.
Second, the details of the production:
(1) Top production
Let's take a look at the detail section of the top container.
It looks neat, the text is centered, the Close button is on the right and the distance from 8px to right 10px.
Consider the top structure, the Close button on the right, then we will give the Close button a right float (float:right;).
Note: When the close button is floating right, the close button is placed in front of the text.
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 Center *
. 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 region, so just make a piece and then copy it.
<div>
<input name= "checkbox" type= "checkbox" value= ""/>
</div>
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 the UL Li.
H2 label Write album "album list" location
UL write the following list and use Overflow:auto to control the scroll bar,
Xhtml:
<ul>
<li><a href= "#" > A happy life for me </a></li>
<li><a href= "#" > How did Kamaiya die? </a></li>
<li><a href= "#" > Yangwen you're such a jerk! </a></li>
<li class= "Background" ><a href= "#" > Little white was abandoned </a></li>
<li><a href= "#" > A happy life for me </a></li>
<li><a href= "#" > Gardenia blossom </a></li>
<li><a href= "#" > My Savage girlfriend </a></li>
<li><a href= "#" > Blue love life </a></li>
<li><a href= "#" > This damned Love </a></li>
<li><a href= "#" > Hunan University </a></li>
<li><a href= "#" > A new Best </a></li>
<li><a href= "#" > A new Best </a></li>
<li><a href= "#" > A new Best </a></li>
<li><a href= "#" > A new Best </a></li>
<li><a href= "#" > A new Best </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;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 write the button in the form of input
<input type= "button" name= "button" value= "OK"/> <input name= "button" type= "button" value= "Cancel"/>
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: List page production" ===== =============================================================--> <pead> <meta http-equiv= " Content-type "content=" text/html; Charset=utf-8 "/> <meta name=" description "content=" Application Web Standard instance: Production of List page "/> <meta name=" keywords "content=" Application Web Standard instance: Production of 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> <div class= "Editorchoose" > <p> select Picture </p> <d IV class= "Edright" > <div> <input name= "checkbox" type= "checkbox" value= ""/> </div> <div> <input name= "checkbox" type= "checkbox" value= ""/> </div> <div> <input name= "checkbox" type= "checkbox" value= ""/& Gt </div> <div> <input name= "checkbox" type= "checkbox" value= ""/> </div> <div> <input name= "checkbox" type= "checkbox" value= ""/> </div> <div> <input name= "checkbox" type= "checkbox" value= ""/> </div> <div> <input name= "checkbox" type= "checkbox" value= ""/> </div> <div> <input name= "checkbox" type= "checkbox" value= ""/> </div> <div> <input name= "checkbox" type= "checkbox" Value= "" > </div> <div> <input name= "checkbox" type= "checkbox" Valu E= ""/> </div> <div> <input name= checkbox "type=" checkbox "Value=" "/> </div> <div> <input name=" checkbox "type=" ch Eckbox "value=" "/> </div> <div> <input name=" checkbox "Ty pe= "checkbox" Value= ""> </div> <div> <input name= "checkbox" type= "checkbox" Valu E= ""/> </div> <div> <input name= checkbox "type=" checkbox "Value=" "/> </div> </div> <div class=" Edleft "> <p> ;<span> Albums list </span></p> <ul> <li> My happy life </li> < How did li> Kamaiya die? </li> <li> Yangwen You're such a jerk! </li> <li class= "Background" > Xiao Bai was abandoned </li> <li> my happy Life </li> <li> Gardenia Bloom </li> <li> my savage girlfriend </li> <li> blue death Love </li> <li> this damned love </li> <li> Hunan University </li> <li> new A good </li> & Lt;li> New </li> <li> new one good </li> <li> new oneGood </li> <li> new A good </li> </ul> </div> <div class= "Edbott Om "><input type=" button "name=" button "value=" OK "/> <input" button "name=" button "type=" Cancel "value= ;/div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
