HTML+CSS的練習之網上書城主頁面的實現
博主終於把CSS學完了,廢話不說,先上程式碼~
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bookStore</title> <style type="text/css"> .clear{ clear:both; } #top_left{ width:300px; float: left; } #top_right{ width:400px; float: right; margin-top:15px; font-size: 13px; } #top_right img{ margin-bottom: -5px; } #top_right a{ text-decoration: none; color:#06F; } #top_right a:hover{ color:#909; } #menu{ background-color: #1C3F09; border-top:5px solid #82B211; padding: 10px 0px; text-align: center; } #menu a{ margin: 0 8px; color: #fff; text-decoration: none; font-weight: bold; font-size: 15px; } #menu a:hover{ color: #999; } #menu .all{ color: yellow } #search{ background-color: #B6B684; padding:7px 0; text-align: right; } #search input[type='image']{ /* margin-top: 5px; */ margin-right: 250px; margin-bottom: -4px; } #search input[type='text']{ height: 16px; border:1px solid #999; } /*-------------------------------------------------------*/ #content{ width:900px; margin:8px auto 15px;/*auto div居中*/ } #content_top{ text-align: right; font-size:13px; } #content_bottom{ border:1px solid #999; background-color: #FCFDEF; padding:10px 15px; } #content_bottom h1{ font-size: 15px; display: inline; } #content_bottom span{ font-size: 13px; } #productlist_img img{ width: 100%; } .book{ float: left; width: 25%; text-align: center; padding:10px 0px; } .bookimg img{ width: 130px; height: 196px; } #jumpPage{ text-align: center; margin: 10px; } #jumpPage a{ padding:2px 6px; border: 1px solid #9AAFE5; text-decoration: none; color:#9AAFE5; } #jumpPage a:hover{ color:#2B66A5; border: 1px solid #2B66A5; } .current{ background-color: blue; } /*-------------------------------------------------------*/ #bottom{ background-color: #EFEEDC; height:60px; padding:10px 0px; } #bottom_left{ width: 400px; float: left; margin-left: 200px; } #bottom_right{ width: 500px; float: left; line-height:28px;/*行高*/ } </style> </head> <body> <div id="page"> <div id="top"> <div id="top_left"> <img alt="" src="images/logo.png"> </div> <div id="top_right"> <img alt="" src="images/cart.gif"> <a href="#">購物車</a>| <a href="#">幫助中心</a>| <a href="#">我的賬戶</a>| <a href="#">新使用者註冊</a> </div> </div> <div class="clear"></div> <div id="menu"> <a href="#">文學</a> <a href="#">生活</a> <a href="#">計算機</a> <a href="#">外語</a> <a href="#">經管</a> <a href="#">勵志</a> <a href="#">社科</a> <a href="#">學術</a> <a href="#">少兒</a> <a href="#">藝術</a> <a href="#">原版</a> <a href="#">科技</a> <a href="#">考試</a> <a href="#">生活百科</a> <a class="all" href="#">全部目錄商品</a> </div> <div id="search"> <span>Search</span> <input type="text" /> <input type="image" src="images/serchbutton.gif" /> </div> <div id="content"> <div id="content_top"> <span>首頁 > 旅遊 > 圖書列表 </span> </div> <div id="content_bottom"> <h1>商品目錄</h1> <hr/> <h1>計算機類</h1> <span>共100種商品</span> <hr/> <div id="productlist"> <div id="productlist_img"> <img alt="" src="images/productlist.gif" width="100%"> </div> <div id="booklist"> <div class="book"> <div class="bookimg"> <img alt="" src="bookcover/101.jpg"> </div> <div class="bookIntr"> <span>書名:xxx</span><br/> <span>售價:xxx</span> </div> </div> <div class="book"> <div class="bookimg"> <img alt="" src="bookcover/102.jpg"> </div> <div class="bookIntr"> <span>書名:xxx</span><br/> <span>售價:xxx</span> </div> </div> <div class="book"> <div class="bookimg"> <img alt="" src="bookcover/103.jpg"> </div> <div class="bookIntr"> <span>書名:xxx</span><br/> <span>售價:xxx</span> </div> </div> <div class="book"> <div class="bookimg"> <img alt="" src="bookcover/104.jpg"> </div> <div class="bookIntr"> <span>書名:xxx</span><br/> <span>售價:xxx</span> </div> </div> <div class="book"> <div class="bookimg"> <img alt="" src="bookcover/105.jpg" width="102"> </div> <div class="bookIntr"> <span>書名:xxx</span><br/> <span>售價:xxx</span> </div> </div> <div class="book"> <div class="bookimg"> <img alt="" src="bookcover/106.jpg" width="102"> </div> <div class="bookIntr"> <span>書名:xxx</span><br/> <span>售價:xxx</span> </div> </div> <div class="book"> <div class="bookimg"> <img alt="" src="bookcover/107.jpg"> </div> <div class="bookIntr"> <span>書名:xxx</span><br/> <span>售價:xxx</span> </div> </div> <div class="book"> <div> <img alt="" src="bookcover/108.jpg" width="130"> </div> <div> <span>書名:xxx</span> <br> <span>售價:xxx</span> </div> </div> <div class="clear"></div> <div id="jumpPage"> <a href="#">上一頁</a> <a class="current" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">下一頁</a> </div> </div> </div> </div> </div> <div id="bottom"> <div id="bottom_left"> <img alt="" src="images/logo.png"> </div> <div id="bottom_right"> <span>CONTACT US</span><br/> <span>copyright 2017 © striner All Rights RESERVED</span> </div> </div> </div> </body> </html>
接下來,我對CSS做一個小小的總結.不全面之處大家勿怪~
CSS官方的定義為"層疊樣式表".引入方式一共分為四種:
常用的分為內嵌樣式,內部樣式,外部樣式三總,外加@import不常用方式一種.這四種是針對CSS與HTML檔案的關係而劃分.
這裡我採用外部樣式在<head>標籤中使用<stytle>標籤將CSS進行引入.
CSS選擇器分為基本選擇器(元素選擇器,id選擇器,class選擇器),屬性選擇器,偽元素選擇器三種.
其中,元素選擇器書寫語法為: html標籤名 {CSS屬性}
id選擇器書寫語法為: #(id) {CSS屬性}
class選擇器書寫語法為: .class的值 {CSS屬性}
屬性選擇器語法為: 基本選擇器[屬性='屬性值'] {CSS屬性}
偽元素選擇器最為有趣,可以使一個物件根據滑鼠懸浮點選事件分為四個狀態: 靜止,懸浮,觸發,完成
當滑鼠不觸及該元素時,可使用 a:link {CSS屬性} 對其進行設定 -----靜止狀態
當滑鼠觸及該控制元件時,可使用 a:hover {CSS屬性} 對其進行設定 -----懸浮狀態
當滑鼠點選事件發生時,可使用 a:active {CSS屬性} 對其進行設定 -----觸發狀態
當點選事件完成時,可使用 a:visited {CSs屬性} 對其進行設定 -----完成狀態
至於CSS的七大屬性以及它的盒子模型(border,padding,margin)我暫且略去不談.
接下來,就上效果圖吧~
用木有發現加上CSS之後頁面比之前更好看了,我將"全部目錄商品"修改為了黃色,top部分還使用了盒子模型對其位置進行了修飾,部分元素我還對其設定了不同顏色的懸浮狀態,效果圖如下:
喜歡就請關注我,你們的關注是我最大的動力~