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网页样式与布局
相关文章
相关标签/搜索