1. 程式人生 > >2018.11.17(5,6,7)章,及第八章練習作業

2018.11.17(5,6,7)章,及第八章練習作業

第五章
1.使用font-family屬性,同時設定英文字型和中文字型需要注意什麼問題?
首先設定英文字型 再設定中文字型
2.在css中,常用的背景屬性有哪幾個?他們的作用是什麼?
color image 背景顏色和背景影象
3.製作所示課程介紹頁面,要求如下:
使用div,p,span等標籤編輯頁面,頁面整體背景顏色使用線性漸變(#ECECEC,#FFFFED)。
課程特色字型顏色為綠色(#5C9815),設計理念字型顏色為橙色(#F26522)。
課程特色和課程理念每行開頭帶背景顏色的字型為白色,使用結構偽類選擇器元素。
使用外部樣式表建立頁面樣式。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>北大青鳥課程介紹頁面</title>
    <link href="CSS/1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>
    <p><img src="imges/title.gif"></p>
    <p><img src="imges/img_01.png">
    <p><span id="one">逆向課程設計:</span>以企業需求決定課程設計內容,確保訓練內容及深度和企業需求一致</p>
    <p><span id="two">模擬學員學習路線:</span>強調難點和複雜技能點的反覆訓練,力求學習效果和學習體驗</p>
    <p><span id="san">網際網路作為教學環境:</span>學員的日常教學和訓練均在網際網路線上進行</p>
    <p><span id="si"> 學習擋板監控網上學習效果:</span>每個學習階段設定線上線下測試,嚴密監控學習效果</p>
    <p><span id="wu">真實開發專案經驗積累:</span>採用專業網際網路企業提供的真實專案作為模擬開發</p>
    <p><img src="imges/img_02.png"></p>
</div>
<div>
    <p><span id="a1">【實用性】——</span> 以就業崗位需求為導向,重點講解企業80%的時間在使用的20%的技術</p>
    <p><span id="a2">【權威性】——</span> 與來自百度等知名企業的專家聯合開發</p>
    <p><span id="a3">【專業性】——</span> 引進業內資深人才和典型行業開發專案</p>
    <p><span id="a4">【真實性】——</span> 在網際網路真實環境下進行教學和訓練</p>
    <p><span id="a5">【易學性】——</span> 線上培訓模式,24小時專家線上解答疑難問題</p>
    <p><span id="a6">【完整性】——</span> 利用SNS虛擬社群:學習、人脈雙豐收</p>
</div>
</div>
</body>
</html>
body>div{
    width: 600px;
    background: linear-gradient(to top,#ECECEC,#FFFFED);
    background: -webkit-linear-gradient(to top,#ECECEC,#FFFFED);
}
div div:nth-child(1)>p{
    color: #5C9815;
}
div div:nth-child(1)>p>span{
    color: #FFFFFF;
}
#one{
    background-color:#66ccff;
}
#two{
    background-color:blueviolet;
}
#san{
    background-color:red;
}
#si{
    background-color:brown;
}
#wu{
    background-color:blue;
}

div div:nth-child(2)>p{
    color: #F26522;
}
div div:nth-child(2)>p>span{
    color: #FFFFFF;
}
#a1{
    background-color:#66ccff;
}
#a2{
    background-color:blueviolet;
}
#a3{
    background-color:red;
}
#a4{
    background-color:brown;
}
#a5{
    background-color:coral;
}
#a6{
    background-color:blue;
}

4.製作圖所示的席慕蓉的詩《初相遇》要求如下:
頁面總寬度400px,整體背景顏色線性漸變(#CAEFFE,#FFFFED)
使用h1標籤排版文字標題,字型大小為18px,黑色文字陰影。
使用p標籤排版文字正文,首行縮排2em,行高為22px。
首行第一個“美”字,字型大小為18px,加粗顯示,黑色和白色文字陰影,第二段中的“胸懷中……在我眼前”字型風格為傾斜,顏色為藍色,字型大小為16px。正文其他文字大小為12px。
最後一段文字帶下劃線。
使用外部樣式表建立頁面樣式。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>初相遇--席慕容</title>
    <link href="CSS/2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
    <h1><span>初相遇</span>&nbsp;&nbsp;文/席慕容</h1>
    <p><span class="mei">美</span>麗的夢和美麗的詩一樣,都是可遇而不可求的,常常在最沒能料到的時刻裡出現。</p>
    <p>我喜歡那樣的夢,在夢裡,一切都可以重新開始,一切都可以慢慢解釋,心裡甚至還能感覺到,所有被浪費的時光竟然都能重回時的狂喜與感激。<span class="xio">胸懷中滿溢著幸福,只因你就在我眼前</span>,對我微笑,一如當年。</p>
    <p>我喜歡那樣的夢,明明知道你已為我跋涉千里,卻又覺得芳草鮮美,落落英繽紛,好像你我才初相遇。</p>
</div>
</body>
</html>
h1{
    color: rgba(70, 74, 71, 0.8);
    font-size: 18px;
    text-shadow: black 1px 1px 1px;
    text-align: center;
}
h1>span{
    font-size:28px;
    font-weight: bolder;
    color: blue;
}
div{
    width: 400px;
    background: linear-gradient(to top,#CAEFFE,#FFFFED);
    background:-webkit-linear-gradient(to top,#CAEFFE,#FFFFED);
}
div p{
    font-size: 12px;
    line-height: 22px;
    text-indent: 2em;
}
p:last-child{
    text-decoration: underline  ;
    color:green;
}
.mei{
    font-size: 18px;
    font-weight: bold;
    color: #5c5aff;
    text-shadow: black 2px 1px 2px;
}
.xio{
    color: blue;
    font-size: 16px;
    font-style: italic;
}

5.製作圖所示的淘寶女裝分類頁面,要求如下:
使用無序列表等HTML標籤有語義化的編輯頁面
女裝內容字型大小為12px,超連結文字字型顏色為黑色,無下劃線,當滑鼠移到超連結文字上時字型顏色變為橙色(#F60),並且顯示下劃線。
使用外部樣式表建立頁面樣式。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<link href="CSS/3.css" rel="stylesheet" type="text/css">
    <style>
        .img1{
            background: url("imges/dress01.png")no-repeat;
        }
        .img2{
            background: url("imges/dress02.png")no-repeat;
        }
        .img3{
            background: url("imges/dress03.png")no-repeat;
        }
        .img4{
            background: url("imges/dress04.png")no-repeat;
        }
        .img5{
            background: url("imges/dress05.png")no-repeat;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <h3 class="img1">夏季流行</h3>
            <hr/>
            <div>
                <p><a href="#">夏季新品</a> <a href="#">雪紡裙</a> <a href="#">短袖T</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>
                </p>
            </div>
        </li>
        <li>
            <h3 class="img2">上裝</h3>
            <hr/>
            <div>
                <p><a href="#">夏季新品</a> <a href="#">雪紡裙</a> <a href="#">短袖T</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>
                </p>
            </div>
        </li>
        <li>
            <h3 class="img3">裙子</h3>
            <hr/>
            <div>
                <p><a href="#">夏季新品</a> <a href="#">雪紡裙</a> <a href="#">短袖T</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>
                </p>
            </div>
        </li>
        <li>
            <h3 class="img4">褲子</h3>
            <hr/>
            <div>
                <p><a href="#">夏季新品</a> <a href="#">雪紡裙</a> <a href="#">短袖T</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>
                </p>
            </div>
        </li>
        <li>
            <h3 class="img5">其他女裝</h3>
            <hr/>
            <div>
                <p><a href="#">夏季新品</a> <a href="#">雪紡裙</a> <a href="#">短袖T</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>
                </p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>
body>div{
    width: 350px;
}

h3{
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 40px;
}

li{
    list-style-type: none;
}
li>div{
    font-size: 12px;
}
a{
    text-decoration:none;
    color: black;
}
a:hover{
    text-decoration: underline;
    color: #F60;
}

第六章
1.什麼是盒子模型?盒子模型的屬性有哪幾個?它們的作用分別是什麼?
網頁設計中常聽的屬性名:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin), CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物–盒子作一個比喻來理解,所以叫它盒子模式。
margin-bottom, margin-top, margin-left, margin-right 設定外邊距上下左右
padding-top,padding-bottom, padding-left, padding-right 設定內邊距上下左右

2.盒子模型有哪幾種解析方式?它們有什麼不同?
當我們在樣式表輸入box-sizing時,會顯示border-box和content-box,第一種是邊框盒子尺寸,第二種是內容尺寸
當我們給一個元素設定尺寸時,預設設定的是元素內容的尺寸,也就是content-box,這種在後期佈局時會有很多不便
而當我們用border-box時,我們設定的尺寸實際等於:內容尺寸+兩邊的內邊距+兩邊的邊框寬度

3.製作圖所示的網站的中心開班資訊模組。要求如下:
頁面總寬度為250px,整體居中顯示,背景使用線性漸變及1px灰色圓角邊框
標題左側的小圖示以背景影象的方式實現,標題顏色為白色
使用無序列表實現開班資訊列表,列表前的小三角形箭頭和下方虛線均使用背景圖片的方式實現
列表超連結文字顏色為灰色,無下劃線,當滑鼠懸浮在超連結文字上時,字型顏色發生變化,無下劃線
頁面中涉及盒子模型解析方式都使用border-box



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>中心開班資訊</title>
    <link href="css/1.css" rel="stylesheet" type="text/css">
    <style>
        .bg2 {
            text-indent: 7px;
            background: url("imges/dotBg.gif") -9px -8.5px no-repeat;
        }
        .bg{
            background: url("imges/bg.gif")no-repeat;
            text-indent: 35px;
            color: #FFFFFF;
            height: 30px;
        }
    </style>
</head>
<body>
<div>
    <div>
        <h4 class="bg">中心開班資訊</h4>
        <hr/>
    </div>
    <div>
        <ul>
            <li class="bg2">
                <p><a href="#">8月12日:學歷+技能班</a></p>
            </li>
            <li class="bg2">
                <p><a href="#">8月16日:高考特招班</a></p>
            </li>
            <li class="bg2">
                <p><a href="#">8月23日:Java精英班</a></p>
            </li>
            <li class="bg2">
                <p><a href="#">8月31日:學士後強化班</a></p>
            </li>
            <li class="bg2">
                <p><a href="#">9月5日:大學生就業班</a></p>
            </li>
            <li class="bg2">
                <p><a href="#">9月9日:企業定向委培班</a></p>
            </li>
            <li class="bg2">
                <p><a href="#">9月16日:網路營銷強化班</a></p>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
body>div{
    width: 250px;
    margin: 0px auto;
    border:solid;
    border-color: gray;
    border-width: 1px;
    border-radius: 15px;
    background:linear-gradient(to top,#FFFFFF,#66ccff);
    background:-webkit-linear-gradient(to top,#FFFFFF,#66ccff);
}

hr{
    height: 2px;
    background-color: #FFFFFF;
    border: none;
}
li{
    list-style-type: none;
    margin-left: -25px;
}


a{
    color: gray;
    text-decoration: none;
}
a:hover{
    color: coral;
    text-decoration: none;
}

4.製作圖所示的商品分類列表頁面,要求如下:
商品列表在一個div中,div的四個邊框均為2px的橙色實線圓角邊框
用結構偽類選擇器選擇每個列表併為其加上背景圖,每個列表下方為1px的灰色虛線邊框,最後一個列表沒有
文字超連結為黑色粗體,當滑鼠懸停在超連結文字上時文字變色,並且無下劃線

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品分類列表類</title>
    <link href="css/2.css" rel="stylesheet" type="text/css">
    <style>
        li:nth-of-type(1){
            background: url("imges/icon_01.jpg") no-repeat;
            text-indent: 50px;
        }

        li:nth-of-type(2){
            background: url("imges/icon_02.jpg") no-repeat;
            text-indent: 50px;
        }
        li:nth-of-type(3){
            background: url("imges/icon_03.jpg") no-repeat;
            text-indent: 50px;
        }
        li:nth-of-type(4){
            background: url("imges/icon_04.jpg") no-repeat;
            text-indent: 50px;
        }
        li:nth-of-type(5){
            background: url("imges/icon_05.jpg") no-repeat;
            text-indent: 50px;
        }
        li:nth-of-type(6){
            background: url("imges/icon_06.jpg") no-repeat;
            text-indent: 50px;
        }
        li:nth-of-type(7){
            background: url("imges/icon_07.jpg") no-repeat;
            text-indent: 50px;
        }
        li:nth-of-type(8){
            background: url("imges/icon_08.jpg") no-repeat;
            text-indent: 50px;
        }
        li:nth-of-type(9){
            background: url("imges/icon_09.jpg") no-repeat;
            text-indent: 50px;
        }
        li:nth-of-type(10){
            background: url("imges/icon_10.jpg") no-repeat;
            text-indent: 50px;
            border-bottom-style:none;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
                <p><a href="#">酒水、飲料</a></p>
            </li>
            <li>
                <p><a href="#">進口食品</a></p>
            </li>
            <li>
                <p><a href="#">休閒零食</a></p>
            </li>
            <li>
                <p><a href="#">地方特產</a></p>
            </li>
            <li>
                <p><a href="#">保健、衝調</a></p>
            </li>
            <li>
                <p><a href="#">糧油、生鮮</a></p>
            </li>
            <li>
                <p><a href="#">美容洗護</a></p>
            </li>
            <li>
                <p><a href="#">清潔洗滌</a></p>
            </li>
            <li>
                <p><a href="#">母嬰、紙品</a></p>
            </li>
            <li>
                <p><a href="#">家居百貨</a></p>
            </li>
        </ul>


    </div>
</body>
</html>
body>div{
    width: 180px;
    border: 2px;
    border: solid;
    border-color: coral;
    border-radius: 15px;
}
li{
    list-style-type: none;
    height: 50px;
    margin-left: -40px;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: gray;
}

p{
    padding-top: 10px;
    font-weight: bold;
}
a{
    color: black;
    text-decoration: none;
}
a:hover{
    text-decoration: none;
    color: coral;
}

5.製作圖所示的權威課程免費體驗登入頁面,要求如下:
頁面文字顏色為白色,*的字型顏色為紅色
使用無序列表排版表單元素
無序列表內容在頁面中居中顯示
“免費體驗”按鈕使用背景影象方式實現
按語義化使用表單元素,且是圓角邊框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>免費體驗登入頁面</title>
    <style>
        div{
            background: url("imges/bg.jpg")no-repeat;
            height: 335px;
        }

        .input2{
            background:url("imges/btn.jpg") no-repeat;
            width: 152px;
            height: 49px;
            border: none;
        }
        span{
            color: red;
        }
        ul{
            margin: 0px auto;
            padding-top: 80px;
        }
        li{
            color: #FFFFFF;
            margin-top: 10px;
            list-style-type: none;
        }
        li:last-child{
            margin-left: 40px;
            margin-top: 20px;
        }
        .input1{
            border-radius: 3px;
            border-width: 1px;
            border-color: #757574;
            border-style: solid;
        }
    </style>
</head>
<body>
    <form action="" method="post">
      <div>
          <ul>
              <li><span>*</span>&nbsp;姓名:<input type="text" value="" class="input1"required></li>
              <li><span>*</span>&nbsp;郵箱:<input type="text" value="" class="input1"required></li>
              <li><span>*</span>&nbsp;電話:<input type="text" value="" class="input1"required></li>
              <li>性別:
                  <select class="input1">
                         <option selected>請選擇</option>
                         <option>男</option>
                         <option>女</option>
                  </select>
              </li>
              <li>年齡:
                  <select class="input1">
                      <option selected>請選擇</option>
                      <option>1</option>
                      <option>2</option>
                  </select>
              </li>
              <li><input type="submit" class="input2"value=""></li>
          </ul>
     </div>
    </form>
</body>
</html>

第七章
1.清除浮動的方法有哪幾種?分別如何實現?
4種
1.浮動元素後面加空div
2.設定父元素的高度
3.父級新增overflow屬性 overflow-hidden
4.父級新增偽類after content:’’; display:block; clear:both;

2.使用display:inline-block或float佈局網頁有什麼區別?需要注意什麼?
display:inline-block 有縫隙 float沒有
注意使用場景

3.製作圖所示的攝影社群熱門小區頁面,要求如下:
使用div和無序列表相結合的方法佈局HTML文件
使用float屬性建立橫向多列布局排版網頁元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>攝影社群熱門小鎮</title>
    <link href="src/css/1.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="a1">
      <div class="a2"><p>攝影社群熱門小鎮</p></div>

      <div class="a3">
        <div class="a31"><img src="src/img/pic_01.jpg"></div>
        <div class="a32">
          <ul>
            <li class="a321">風景狙擊手</li>
            <li class="a322">成員:80</li>
            <li class="a322">作品:276</li>
          </ul>
        </div>
      </div>

      <div class="a4">
        <div class="a31"><img src="src/img/pic_02.jpg"></div>
        <div class="a32">
          <ul>
            <li class="a321">敘事感</li>
            <li class="a322">成員:235</li>
            <li class="a322">作品:116</li>
          </ul>
        </div>
      </div>

      <div class="a5">
        <div class="a31"><img src="src/img/pic_03.jpg"></div>
        <div class="a32">
          <ul>
            <li class="a321">定焦視界</li>
            <li class="a322">成員:56</li>
            <li class="a322">作品:456</li>
          </ul>
        </div>
      </div>

      <div class="a6">
        <div class="a31"><img src="src/img/pic_04.jpg"></div>
        <div class="a32">
          <ul>
            <li class="a321">中畫幅樂園</li>
            <li class="a322">成員:130</li>
            <li class="a322">作品:239</li>
          </ul>
        </div>
      </div>

      <div class="a7">
        <div class="a31"><img src="src/img/pic_05.jpg"></div>
        <div class="a32">
          <ul>
            <li class="a321">《卡啪》先鋒...</li>
            <li class="a322">成員:78</li>
            <li class="a322">作品:125</li>
          </ul>
        </div>
      </div>

      <div class="a8">
        <div class="a31"><img src="src/img/pic_06.jpg"></div>
        <div class="a32">
          <ul>
            <li class="a321">植物的無聲世界</li>
            <li class="a322">成員:235</li>
            <li class="a322">作品:1258</li>
          </ul>
        </div>
      </div>

    </div>
</body>
</html>

div>div{
  margin-left: 8px;
}
.a1{
  margin: 50px auto;
  width: 730px;
  border: 1px;
  border-color: gray;
  border-style: solid;
}
.a1:after{
  content: '';
  display: block;
  clear: both;
}
li{
  list-style-type: none;
}
.a2{
  color: #555555;
  font-weight:bolder;
  margin-left: 15px;
  float: left;
}
.a3{
  float: left;
  clear: left;
}
.a31,.a32{
  display: inline-block;
}
.a32{
  margin-left: -30px;
}
.a321{
  font-size: 18px;
  color:blue;
  margin-bottom: 2px;
}
.a322{
  color: #888888;
}
.a31{
  padding: 3px;
  padding-bottom: 0px;
  border-radius: 5px;
  border: 1px;
  border-color: gray;
  border-style: solid;
}
.a4{
  margin-left: 60px;
  float: left;
}
.a5{
  margin-left: 80px;
  float: left;
}
.a6{
  float: left;
  clear: left;
}
.a7{
  margin-left: 60px;
  float: left;
}
.a8{
  margin-left: 36px;
  float: left;
}

4.製作圖所示的名人名言頁面,要求如下:
使用header,article,section,nav,footer等結構元素佈局
使用float屬性建立橫向多列布局
使用無序列表製作導航選單,並使盒子屬性美化選單,當滑鼠移至導航選單上時顯示下劃線
使用標題標籤排版網頁中的各級標籤
頁面的完整效果及頁面中字型樣式、顏色等參照素材

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>名人名言</title>
    <link href="src/css/2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="kkk">
    <header>
      <h1>名人名言</h1>
      <p>分享名人名言,開始一段觸動心靈的智慧之旅跳到內容</p>
             <ul>
                <li class="a1"><a href="#">登入</a></li>
                <li><a href="#">關於</a></li>
                <li><a href="#">名人名言</a></li>
                <li><a href="#">英文名言(English)</a></li>
                <li><a href="#">心理雜誌</a></li>
                <li><a href="#">心理書籍</a></li>
                <li><a href="#">專題活動</a></li>
                <li><a href="#">發表</a></li>
            </ul>
    </header>
  <section>
    <div class="no1">
        <div class="a2">
            <h3>心理學經典名言的智慧</h3>
            <p>洞察人性的美與醜,認識自我的強與弱。一句好的格言能夠穿越時間,永不失色、歷久彌香,它總是能給人們帶來心靈的滋養。</p>
        </div>

        <div class="a3">
          <p>創造力(creativity)有兩個詞根:Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實現”。所以,創造力不僅僅是一種想象力、一種天賦,創造力更是一種將自己的想法付諸實現的能力。</p>
          <p>創造力(creativity)有兩個詞根:Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實現”。所以,創造力不僅僅是一種想象力、一種天賦,創造力更是一種將自己的想法付諸實現的能力。</p>
          <p>發表在 未分類 | 標籤: 《換個腦袋去思考》, 創造力 | 留下評論</p>
        </div>

        <div class="a4">
          <h3>作者簡介</h3>
        </div>

        <div class="a5">
          <p>如果你還沒有注意到你有能力讓對方作出你所希望得到的反應,那麼你就還沒有很好地掌握人生的真諦。這其實簡單到不可思議。如果你希望他人對你感興趣,那麼你就要先對他人產生興趣;如果你想讓他人緊張,那麼你自己首先要緊張起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人,你可以在與下一個人交流時證實這一點。</p>
          <p>如果你還沒有注意到你有能力讓對方作出你所希望得到的反應,那麼你就還沒有很好地掌握人生的真諦。這其實簡單到不可思議。如果你希望他人對你感興趣,那麼你就要先對他人產生興趣;如果你想讓他人緊張,那麼你自己首先要緊張起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人,你可以在與下一個人交流時證實這一點。</p>
          <p>發表在 未分類 | 標籤: 《怎樣出售設計創意》, 溫斯頓·丘吉爾 | 留下評論</p>
        </div>

        <div class="a6">
          <p>贊助廣告</p>
          <img src="src/img/ad_2.jpg">
        </div>
    </div>
    <div class="no2">
      <ul>
        <li>贊助廣告</li>
        <li><img src="src/img/ad.jpg"></li>
        <li>搜尋</li>
        <li><input type="text" value="點選搜尋" size="18"></li>
        <li>標籤</li>
        <li><a href="#">60年語錄</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 href="#">新聞事件</a> <a href="#">李白</a>
          <a href="#">愛情語錄</a> <a href="#">韓寒語錄</a></li>
      </ul>
    </div>
  </section>
  <footer>
    <p>&copy;All Rights Reserved by Psytopic. 來自Psytopic.com的禮物</p>
  </footer>
</div>
</body>
</html>

.kkk{
  content: '';
  display: block;
  clear: both;
  width: 950px;
  margin: 0px auto;
  font-size: 14px;
}
li{
  list-style-type: none;
}
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
header a{
  color: gray;
}
header li{
  float: left;
  padding: 10px;
  border: 1px solid gray;
  border-bottom: none;
  border-left: none;

}
.a1{
  border-left: 1px solid gray;
  margin-left: 10px;
}
header ul{
  margin-top: 40px;
  overflow:hidden;
  border-bottom: 1px solid gray;
}
header p,.a6 p, .no2 li{
  color: gray;
  font-style:oblique;
}

.a2{
  border: 1px solid gray;
  overflow: hidden;
}

.no1{
  margin-top: 30px;
  width: 60%;
  float: left;
}
.a2 h3{
  margin-left: 10px;
  margin-top: 5px;
}
.a2 p{
  margin-left: 10px;
  color: gray;
}
.a3 p:nth-of-type(1)~p,.a5 p:nth-of-type(1)~p{
  color: gray;
  margin-top: -15px;
}
.a4{
  margin-top: -12px;
  border: 1px solid gray;
  height: 37px;
}
.a4 h3{
  margin-top: 5px;
  margin-left: 10px;
}

.a6{
  border: 1px solid gray;
}
.a6 img{
  width: 95%;
  margin-left: 10px;
}
.a6 p{
  margin-left: 10px;
}
.no2{
  margin-top: 30px;
  width: 35%;
  float: right;
  border: 1px solid gray;
}
.no2 li{
  margin-top: 15px;
  margin-left: -20px;
  margin-right: 20px;
}
.no2 ul{
  margin-top: 40px;
}
.no2 li a{
  color: gray;
}
footer{
  width: 100%;
  margin-top: 30px;
  border-top: 1px solid gray;
  float: left;
}
footer p{
  text-align: center;
  color: gray;
}

5.製作彩妝熱賣產品頁面,要求如下:
頁面背景顏色為淺黃色,彩妝熱賣產品列表背景顏色為白色
標題放在段落標籤中,標題背景顏色為桃紅色,字型顏色為白色
使用無序列表製作彩妝熱賣產品列表,兩個產品列表之間使用虛線隔開
超連結字型顏色為灰色,無下劃線,數字顏色為白色,數字背景為灰色圓圈
當滑鼠移到超連結上時,超連結字型顏色為桃紅色,無下劃線,數字顏色為白色,數字背景為桃紅色圓圈,並顯示產品對應圖片、價格和當前已購買人數

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>彩妝熱賣產品列表</title>
    <link href="src/css/3.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="top">
        <p>大家都喜歡的彩妝</p>
        <ul>
          <li><a href="#"><span>1</span>Za姬芮新能真皙美白隔離霜 35g <div>
            <img src="src/img/icon-1.jpg" alt="Za姬芮新能真皙美白隔離霜 35g ">
            <p>¥62.00 最近69122人購買</p>
          </div></a></li>
          <li><a href="#"><span>2</span>美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml<div>
            <img src="src/img/icon-2.jpg" alt="美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml">
            <p>¥89.00 最近13610人購買</p>
          </div></a></li>
          <li><a href="#"><span>3</span>菲奧娜水漾CC霜40g<div>
            <img src="src/img/icon-3.jpg" alt="菲奧娜水漾CC霜40g">
            <p>¥59.90 最近13403人購買</p>
          </div></a></li>
          <li><a href="#"><span>4</span>DHC 蝶翠詩橄欖卸妝油 200ml<div>
            <img src="src/img/icon-4.jpg" alt="DHC 蝶翠詩橄欖卸妝油 200ml">
            <p>¥169.00 最近16757人購買</p>
          </div></a></li>
        </ul>

    </div>
</body>
</html>

.top{
  width: 320px;
}
li{
  padding-bottom: 15px;
  margin-top: 20px;
  list-style-type: none;
  border-bottom: 2px dashed gray;
}
div div{
  display: none;
}
div a:hover div{
  display: block;
  color: red;
}
a:hover{
  color: red;
}
div a:hover span{
  border:1px solid #fb4e4c;
  background-color: #fb4e4c;
}
span{
  color: #FFFFFF;
  text-align: center;
  display: inline-block;
  width: 20px;
  height:20px;
  border:1px solid gray;
  border-radius: 50%;
  background-color: gray;
}
a{
  color: gray;
  text-decoration: none;
}
.top>p{
  background-color: #fb4e4c;
  height: 34px;
  width: 300px;
  font-weight: bold;
  color: #FFFFFF;
  padding-top: 10px;
  padding-left: 20px;
}
ul{
  margin-left: -38px;
}

 
 
 
 
 
第八章練習
 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>噹噹圖書館</title>
    <style>

        li{
            list-style-type: none;
        }
        header{
            margin: 0px auto;
            width: 960px;
            content: '';
            display: block;
            clear: both;
        }
        .a1{
            height: 40px;
        }
        .a11 a{
            text-decoration: none;
            color: gray;
        }
        header a:hover{
            text-decoration: underline;
        }
        header ul{
            margin-left: -70px;
            margin-top: 8px;
        }
        .a11 li{
            float: right;
            margin-left: 20px;
            margin-right: 4px;
            font-size: 10px;
        }
       .a11{
           float: right;
           margin-top: 16px;
           background-color:#eafffa;
           height: 30px;
           width: 250px;
           border: 1px solid greenyellow;
           border-bottom: none;
           position: relative;

       }
        .a2{
            margin-top: 15px;
            width: 100%;
            height: 35px;
            background-image: url("img/menuBg.jpg");
        }
        .a2 ul{
            margin-left: -50px;
        }

        .a2 li {
            float: left;
            margin-left: 25px;
            font-size: 16px;
            margin-top: 7px;
        }
        .a2 a{
            color: #FFFFFF;
            text-decoration: none;
        }
        section{
            content: '';
            display: block;
            clear: both;
            margin: 0px auto;
            width: 960px;
            margin-top:8px;
        }
        .b1{
            border: 2px solid greenyellow;
            margin-top: 20px;
            display: inline-block;

        }
        .b11{
            width: 550px;
            height: 100%;
            float: left;
            position: relative;
        }
        .b12{
            margin-top: 90px;
            width: 400px;
        }
        .b11 img{
            margin-top: 90px;
        }

        .b111{
            margin-top: 80px;
            width: 280px;
            height: 280px;
            float: right;
        }

        .b112,.b121{
            float: left;
        }

        .b12,.b122{
            float: right;
        }
        .b111 li{
            font-size: 14px;
            margin-bottom: 10px;
            margin-left: -50px;
        }
        .b122{
            width: 290px;

        }
        .b122 li{
            margin-bottom: 5px;
            margin-left: -40px;
            margin-right: 10px;
            font-size: 14px;
        }
        .b121{
            margin-top: 25px;
            margin-left: 4px;
        }
        section a{
            text-decoration: none;
            font-size: 16px;
        }
        section a:hover{
            text-decoration: underline;
        }
        .jiage{
            font-weight: bold;
            color: brown;
        }
        .jiage2{
            color: greenyellow;
        }
        footer{
            margin: 0px auto;
            width: 960px;
        }
        footer p{
            text-align: center;
            font-size: 14px;
            color: gray;
        }
        footer span,img{
            vertical-align: middle;
        }
        .no1,.no2,.no3,.no4{
            z-index: 2;
        }
        .no1{
            position: absolute;
            left: 20px;
            top: -5px;
        }
        .no2{
            position: absolute;
        }
        .no3{
            position: absolute;
        }
        .no4{
            position: absolute;
            top: -5px;
        }
    </style>
</head>
<body>
    <header>
        <div class="a1">
            <img src="img/logo.jpg">
            <div class="a11">
                <ul>
                    <li><a href="#">都看閱器</a></li>
                    <li><a href="#">數字館</a></li>
                    <li><a href="#">噹噹優品</a></li>
                    <li><a href="#"><img src="img/icon_count.png" class="no4">尾品彙</a></li>
                </ul>
            </div>
        </div>
        <div class="a2">
            <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>
                <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>
                <li><a href="#">家電</a></li>
            </ul>
        </div>
    </header>
    <section>
        <div>
           <img src="img/banner.png">
        </div>
        <div class="b1">
            <div class="b11">
                <div class="b112">
                    <img class="no1" src="img/bookNo1.gif"><img src="img/book-01.jpg">
                </div>
                <div class="b111">
                    <ul>
                        <li><a href="#">偷影子的人</a></li>
                        <li>作者:[法]馬克·李維(Marc Levy)  著,段韻靈 譯</li>
                        <li>出版社:湖南文藝出版社</li>
                        <li>噹噹價:<span class="jiage">¥ 17.90</span></li>
                        <li>不知道姓氏的克蕾兒。這就是你在我生命裡的角色,我童年時的小女孩,今日蛻變成了女人,
                            一段青梅竹馬的回憶,一個時間之神沒有應允的願望。 一個老是受班上同學欺負的瘦弱小男孩,
                            因為擁有一種特殊能力而強大:他能“偷別人的影子”,因而能看見他</li>
                    </ul>
                </div>
            </div>
            <div class="b12">
                <div>
                    <div class="b121">
                        <img class="no2" src="img/bookNo2.gif"><img src="img/book-02.jpg">
                    </div>
                    <div class="b122">
                        <ul>
                            <li><a href="#">看見(央視知名記者、主持人柴靜:十年個人成長的告白,中國社會變遷的備忘</a></li>
                            <li>作 者:柴靜 著</li>
                            <li>出版社:廣西師範大學出版社</li>
                            <li><span class="jiage">¥ 29.40</span> <span class="jiage2">7.4折</span></li>
                        </ul>
                    </div>
                </div>
                <div>
                    <div class="b121">
                        <img class="no3" src="img/bookNo3.gif"><img src="img/book-03.jpg">
                    </div>
                    <div class="b122">
                        <ul>
                            <li><a href="#">改變孩子先改變自己</a></li>
                            <li>作 者:賈容韜 賈毅 著</li>
                            <li>出版社:作家出版社</li>
                            <li><span class="jiage">¥ 22.20</span> <span class="jiage2">7.4折</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div>
            <p><span>Copyright (C) 噹噹網 2004-2017, All Rights Reserved</span><img src="img/validate.gif"><span>京ICP證041189號出版物經營許可證 新出發京批字第直0673號</span></p>
        </div>
    </footer>
</body>
</html>