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網頁樣式與佈局》

CSS+DIV-網上購物

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Zend Framework入門

phpPgAdmin登陸方法

小規模應用的開發

JDBC登錄

JSP/Servlet編程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結