web基礎(6): CSS綜合實例-咖啡網頁設計

咖啡店案例效果圖

  （一）頁面的布局

1. 最上方的header：右下角是四個小圖標，像圖層一樣附加在當前的header部分上。

2. 超鏈接構成的導航欄，鼠標懸浮的時候字體顏色發生變化。

3. 主體分為左右兩欄：邊欄 和右側的主要內容。邊欄有一個table ,table下方是圖片（圓角陰影），還有傾斜的效果。右側主體分為四個子區域，每個區域都有左側的圖片和右側的文字構成，右側的文字又有標題和正文內容。

4. footer部分。

5. 左側有一個“廣告”部分，fixed定位。

 ----------------------------

先創建一個站點文件夾，里面創建images, css文件夾。我們采用link來引用css樣式。 

HTML基本結構為

<div id="container">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="main">
        <div id="aside"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

先簡單定義上述幾個元素的樣式

*{
    margin: 0;
    padding: 0;
}
body { 
    font-family:"微軟雅黑"; 
    font-size:16px; 
    color: #673929; /*深棕色*/
}
#container {
    margin:0 auto;  /*水平居中*/
    width:900px;     
}
#header { 
    height:220px;    
}
#nav{ 
    height:30px;    
    margin-bottom:5px;
    background:#09c;         
    font: 18px/30px 微軟雅黑;
    color: #fff;
    letter-spacing: 2px;
    text-align: center;
}
#main{ 
    background:#000; /*黑色*/ 
    height:2050px;/* 需要之后根據內容計算，內容有了這個高度就不需要寫了*/
}
#aside { 
    float:left; 
    width:300px; 
    background:#6cf;
    text-align: center;
    font-size: 14px;
    color: #000;
}
#content{ 
    float:right; 
    width:595px; 
    margin-bottom:5px;
    background:#cff;
}
#footer { 
    height:60px; 
    line-height: 60px;
    background:#6cf;
    clear:both; /*保證位置最底部*/
    text-align: center;
}

效果如下：上述header沒有設置背景色，是白的。

 （二）改進1

在原有的HTML結構增加header 的圖片，nav的5個超鏈接

    <div id="header">
        <img src="images/banner.jpg" alt="" />    
    </div>
    <div id="nav">
        <a href="#">menu</a>
        <a href="#">party</a>
        <a href="#">join us</a>
        <a href="#">more</a>
        <a href="#">help</a>
    </div>

在CSS也要增加超鏈接的一些樣式, 放在原來的#nav后面。

a:link{
    color: #fff; /*白色*/
    text-decoration: none; 
}
a:visited{
    color: #fff; 
    text-decoration: none;
}
a:hover{
    color: yellow; /*鼠標懸停時變黃色*/
    text-decoration: none;
}
a:active{
    color: #fff;
    text-decoration: none;
}

上述的a 的四種狀態都是不添加下划線的，可以簡化代碼

a{
    text-decoration: none; 
}
a:link{
    color: #fff; /*白色*/
}
a:visited{
    color: #fff; 
}
a:hover{
    color: yellow; /*鼠標懸停時變黃色*/
}
a:active{
    color: #fff;
}

但是萬一別的地方的超鏈接想要有下划線，這種方法不可行。最好用嵌套 #nav  a{ text-decoration:none;}

預覽效果發現 nav的文字沒有居中顯示，在#nav樣式中增加 line-height：30 px  , 與 其height一致就行了。 

 （三）改進2

在content 下面有四行，每一行的左側是圖片，右側是文字。文字部分又分為標題和內容。

在sublime 中可以輸入  .subcont*4>img+ .subtext> h2+p 進行拓展。

        <div class="subcont">              
            <img src="images/Latte.jpg" alt="">
            <div class="subtext">
                <h2>拿鐵Caffè Latte</h2>
                <p>這是一種傳統的經典飲料——濃縮咖啡調入熱牛奶，其上覆蓋一層輕盈的奶沫。
<br>品嘗此款咖啡時，您可以選擇特別加入某種口味（如香草，焦糖或杏仁口味）的糖漿。</p>
            </div>
        </div>

這樣輸入四次，把四行內容都添加上。

上述CSS的補充如下

.subcont{
    width: 570px;
    margin: 10px auto;    
    clear: both;
}
.subcont img{
    margin: 5px;
    padding: 5px;
    float: left;
    border: 1px dashed #000; /*黑色虛線*/
}
.subcont .subtext{
    width: 60%;
    float: left;
    margin: 5px;
}
.subcont h2{
    margin: 5px;
}
.subcont p{    
    font:16px/2em 微軟雅黑;  /*2倍行 高*/
}

content的內容都有了，那么可以把CSS樣式中#content{} 的height去掉了。進一步，也可以把main{}的height去掉。

（四）改進3

現在在header部分的右下角增加一個圖片的列表，需用用到層定位。

在HTML的header部分增加一個icon-list ， 添加四張圖片。

<div id="icon-list">
         <img src="images/1.bmp">
         <img src="images/2.bmp">
         <img src="images/3.bmp">
         <img src="images/4.bmp">
</div>

預覽效果發現四個小圖片由於沒有了位置，位置在header下方了，如何使用層定位改變？

（1）在CSS樣式中，#header增加 position ：relative;

（2）增加子元素#icon-list 的樣式

#icon-list{
    position:absolute;/*子層定位*/
    top:170px; /*距離父元素上方170px*/
    right: 30px;
    width: 130px;
    height: 30px;    
    font-size: 0px; /*去掉圖片直接默認的空隙*/
}
#icon-list img{
    margin-left:5px;
}

接下來，在窗口的左側添加一個圖片作為“廣告”

這個固定定位與main 無關，可以放在HTML的外面，結構中增加

<div id="l-fix">
      <img src="images/Latte.jpg">   
</div>

設置這一部分的樣式

#l-fix{
    position: fixed;
    top:100px;
    left:5px;
}

（五）改變4

1. 在aside中添加照片牆。

四張照片放在圓角邊框里，還有陰影的效果。每個圖片的傾斜程度不同。

在aside下面增加 imglist, 里面加入四個照片。每個照片放在div中，因為要設置圓角的邊框等效果。四個照片有共同的樣式 pol ， 也有不同的樣式，rotate-left，rotate-right.

 

 CSS中增加樣式

#imglist{
    width: 130px;
    margin: 0 auto;         
}
.pol
{
    width:85px;        
    padding: 10px;
    background-color: #eee;
    border:1px solid #BFBFBF;
    box-shadow:2px 2px 4px #aaa; /*盒子陰影*/
    border-radius: 5px; /*圓角邊框*/
}

.rotate_left
{
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
    transform:rotate(7deg);  /*順時針效果*/
}

.rotate_right
{
    -ms-transform:rotate(-8deg); /* IE 9 */
    -moz-transform:rotate(-8deg); /* Firefox */
    -webkit-transform:rotate(-8deg); /* Safari and Chrome */
    -o-transform:rotate(-8deg); /* Opera */
    transform:rotate(-8deg);
}
#imglist img{
    height: 95px;
    width: 85px;
    margin: 0 auto;
    font-size: 0;
}
#imglist img:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

 還有table 的HTML為

<h2>MENU</h2>
        <table >
          <tr>
              <th ></th>
            <th >Latte</th>
            <th >Cappuccino</th>
            <th >Mocha</th>
            <th >Espresso</th>
          </tr>
          <tr>
            <th scope="row"  >LARGE</th>
            <td>35</td>
            <td>35</td>
            <td>35</td>
            <td>30</td>
          </tr>
          <tr>
            <th scope="row"  >MEDIUM</th>
            <td>30</td>
            <td>30</td>
            <td>30</td>
            <td >25</td>
          </tr>
          <tr>
            <th scope="row"  >SMALL</th>
            <td>25</td>
            <td>25</td>
            <td>25</td>
            <td>20</td>
          </tr>
        </table>

這里的table沒有特別的CSS樣式。

Scope屬性同時定義了行的表頭和列的表頭：
col: 列表頭
row: 行表頭