博主終於把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)我暫且略去不談.
接下來,就上效果圖吧~
emmm,這裏放上我用純HTML寫的頁面博客鏈接地址:http://blog.csdn.net/striner/article/details/78605405
用木有發現加上CSS之後頁面比之前更好看了,我將"全部目錄商品"修改爲了黃色,top部分還使用了盒子模型對其位置進行了修飾,部分元素我還對其設置了不同顏色的懸浮狀態,效果圖如下:
瞭解相關git代碼請移步:https://github.com/striner/front-end-development/blob/master/bookStore_html%26CSS
喜歡就請關注我,你們的關注是我最大的動力~