CSS+DIV-網上購物

19.css

body{
  background-color: #ffd8d9;
  margin: 1px 0px 0px 0px;
  padding: 0px;
  text-align: center;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}
#container{
  position: relative;
  margin: 0px auto 0px auto;
  width: 700px;
  text-align: left;
}

#globallink{
  margin: 0px; padding: 0px;
}
#globallink ul{
        list-style: none;
  padding: 0px; margin: 0px;
}
#globallink li{
  float: left;
  text-align: center;
  width: 100px;  
}
#globallink a{
  display: block;
  padding: 9px 6px 11px 6px;
  background: url(button1.jpg) no-repeat;
  margin: 0px;
}
#globallink a:link, #globallink a:visited{
  color: #630002;
  text-decoration: none;
}
#globallink a:hover{
  color: #FFFFFF;
  text-decoration: underline;
  background: url(button1_bg.jpg) no-repeat;
  /* 替換背景圖片 */
}

#left{
  width: 180px;
  float: left;
  background: #FFFFFF url(leftbottom.jpg) no-repeat bottom; /* 下端圓角 */
  margin: 1px 0px 0px 0px;
}
#login{
  background: url(login.jpg) no-repeat;
  padding: 55px 0px 10px 0px;
}
#login form{
  padding: 0px; margin: 0px;
}
#login p{
  margin: 0px; text-align: left;
  padding: 5px 0px 0px 25px;
}
#login p input{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
#login form input.text{
  border-bottom: 1px solid #000000;
  border-left: none; border-right: none;
  border-top: none;
  padding: 0px; width: 90px;
}
#login form input.btn{
  border: 1px solid #000000;
  background-color: #ffeff0;
  height: 17px; padding: 0px;
}
#login p a:link, #login p a:visited{
  color: #333333;
  text-decoration: none;
}
#login p a:hover{
  color: #000088;
  text-decoration: underline;
}

#category{
  background: url(category.jpg) no-repeat;
  padding: 55px 0px 40px 0px;
}
#category h4{
  margin: 0px 18px 0px 18px;
  padding: 3px 0px 1px 5px;
  background-color: #ffd1d1;
  font-size: 12px;
}
#category ul{
  list-style: none;
  margin: 0px;
  padding: 5px 22px 15px 22px;
}
#category ul li{
  padding: 2px 0px 2px 16px;
  border-bottom: 1px dashed #999999;
  background: url(icon1.gif) no-repeat 5px 7px;
}
#category ul li a:link, #category ul li a:visited{
  color: #000000;
  text-decoration: none;
}
#category ul li a:hover{
  color: #666666;
  text-decoration: underline;
}

#main{
  float: left;
  width: 518px;
  margin: 1px 0px 0px 2px
}
#latest{
  background: url(latest.jpg) no-repeat;
  padding: 35px 0px 0px 0px;
}
#latest img{
  border: none;
  padding-left: 1px;
}
#recommend{
  background: url(recommend.jpg) no-repeat;
  margin: 5px 0px 0px 0px;
  padding: 35px 0px 0px 0px;
  background-color: #FFFFFF;
}
#recommend br,#new br, #tips br{
  display: block;
  clear: both;
  margin: 0px; padding: 0px;
}
#recommend ul, #new ul{
  list-style: none;
  margin: 0px;
  padding: 5px 5px 5px 8px;
}
#recommend ul li, #new ul li{
  text-align: center;
  float: left;
  width: 125px;
}
#recommend ul li img, #new ul li img{
  border: none;
  margin: 5px 0px 3px 0px;
  padding: 0px;
}
#recommend ul li a:link,#recommend ul li a:visited, #new ul li a:link,#new ul li a:visited{
  color: #666666;
  text-decoration: none;
}
#recommend ul li a:hover, #new ul li a:hover{
  color: #d20005;
  text-decoration: underline;
}

#new{
  background: url(new.jpg) no-repeat;
  margin: 5px 0px 0px 0px;
  padding: 35px 0px 0px 0px;
  background-color: #FFFFFF;
}

#tips{
  background: url(tips.jpg) no-repeat;
  margin: 5px 0px 0px 0px;
  padding: 35px 0px 0px 0px;
  background-color: #FFFFFF;
}
#tips ul{
  list-style: none;
  margin: 0px;
  padding: 5px 5px 5px 30px;
}
#tips ul li{
  background: url(icon2.gif) no-repeat 5px 6px;
  padding: 1px 0px 1px 12px;
  float: left;
  width: 220px;  /* 指定寬度 */
}
#tips ul li a:link,#tips ul li a:visited{
  color: #222222;
  text-decoration: none;  
}
#tips ul li a:hover{
  color: #d20005;
  text-decoration: underline;
}

19.html

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title >鮮花滿屋 </title>
< link href ="19.css" rel ="stylesheet" type ="text/css" >
     </head>

< body >
< div id ="container" >
   < div id ="banner" > < img src ="banner.jpg" > </div>
   < div id ="globallink" >
     < ul >
       < li > < a href ="#" >鮮花禮品 </a> </li>
       < li > < a href ="#" >自助訂花 </a> </li>
       < li > < a href ="#" >綠色植物 </a> </li>
       < li > < a href ="#" >花之物語 </a> </li>
       < li > < a href ="#" >會員中心 </a> </li>
       < li > < a href ="#" >聯繫咱們 </a> </li>
       < li > < a href ="#" >支付方式 </a> </li>
     </ul>
     < br >
   </div>
   < div id ="left" >
     < div id ="login" >
       < form >
         < p >用戶: < input type ="text" class ="text" > </p>
         < p >密碼: < input type ="text" class ="text" > </p>
         < p > < input type ="button" class ="btn" value ="登陸" > < input type ="button" class ="btn" value ="註冊" > < a href ="#" >忘記祕密 </a> </p>
       </form>
     </div>
     < div id ="category" >
       < h4 > < span >用途 </span> </h4>
       < ul >
         < li > < a href ="#" >愛情鮮花 </a> </li>
         < li > < a href ="#" >生日送花 </a> </li>
         < li > < a href ="#" >新年鮮花 </a> </li>
         < li > < a href ="#" >家庭用花 </a> </li>
         < li > < a href ="#" >親情用花 </a> </li>
         < li > < a href ="#" >道歉鮮花 </a> </li>
         < li > < a href ="#" >開業花籃 </a> </li>
         < li > < a href ="#" >會議用花 </a> </li>
       </ul>
       < h4 > < span >花材 </span> </h4>
       < ul >
         < li > < a href ="#" >玫瑰花 </a> </li>
         < li > < a href ="#" >百合花 </a> </li>
         < li > < a href ="#" >鬱金香 </a> </li>
         < li > < a href ="#" >太陽花 </a> </li>
         < li > < a href ="#" >康乃馨 </a> </li>
         < li > < a href ="#" >馬蹄蓮 </a> </li>
         < li > < a href ="#" >扶朗 </a> </li>
         < li > < a href ="#" >劍蘭 </a> </li>
       </ul>
       < h4 > < span >價格 </span> </h4>
       < ul >
         < li > < a href ="#" >100～200元 </a> </li>
         < li > < a href ="#" >200～300元 </a> </li>
         < li > < a href ="#" >300～400元 </a> </li>
         < li > < a href ="#" >400～500元 </a> </li>
         < li > < a href ="#" >500～600元 </a> </li>
         < li > < a href ="#" >600～800元 </a> </li>
         < li > < a href ="#" >800元以上 </a> </li>
       </ul>
     </div>
   </div>
   < div id ="main" >
     < div id ="latest" > < a href ="#" > < img src ="new1.jpg" > </a> < a href ="#" > < img src ="new2.jpg" > </a> < a href ="#" > < img src ="new3.jpg" > </a> </div>
     < div id ="recommend" >
       < ul >
         < li > < a href ="#" > < img src ="flower1.jpg" > < br >幸福的味道 </a> < br >￥288元 </li>
         < li > < a href ="#" > < img src ="flower2.jpg" > < br >陽光守護你 </a> < br >￥300元 </li>
         < li > < a href ="#" > < img src ="flower3.jpg" > < br >溫情永遠 </a> < br >￥268元 </li>
         < li > < a href ="#" > < img src ="flower4.jpg" > < br >愛××× </a> < br >￥318元 </li>
         < li > < a href ="#" > < img src ="flower5.jpg" > < br >親親寶貝 </a> < br >￥368元 </li>
         < li > < a href ="#" > < img src ="flower6.jpg" > < br >相信是緣 </a> < br >￥188元 </li>
         < li > < a href ="#" > < img src ="flower7.jpg" > < br >水晶童話 </a> < br >￥198元 </li>
         < li > < a href ="#" > < img src ="flower8.jpg" > < br >天使之愛 </a> < br >￥268元 </li>        
       </ul>
       < br > 
     </div>
     < div id ="new" >
       < ul >
         < li > < a href ="#" > < img src ="flower9.jpg" > < br >粉色迷情 </a> </li>
         < li > < a href ="#" > < img src ="flower10.jpg" > < br >海岸的幽雅 </a> </li>
         < li > < a href ="#" > < img src ="flower11.jpg" > < br >百年地中海 </a> </li>
         < li > < a href ="#" > < img src ="flower12.jpg" > < br >愛要說出口 </a> </li>      
       </ul>
       < br > 
     </div>
     < div id ="tips" >
       < ul >
         < li > < a href ="#" >各類鮮花所表明的含義 </a> </li>
         < li > < a href ="#" >花的喜怒哀樂與人的各類感受 </a> </li>
         < li > < a href ="#" >養花與養生之道 </a> </li>
         < li > < a href ="#" >天天清晨的第一縷陽光 </a> </li>
         < li > < a href ="#" >花香的味道 </a> </li>
         < li > < a href ="#" >世界各地關於送花的習俗 </a> </li>
         < li > < a href ="#" >種花與送花 </a> </li>
         < li > < a href ="#" >手捧一束鮮花的等待 </a> </li>
       </ul>
       < br > 
     </div>
   </div>
</div>
</body>
</html>

來源：《精通CSS+DIV網頁樣式與佈局 》