2018.11.17（5，6，7）章，及第八章練習作業

阿新 • • 發佈：2018-12-22

第五章
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>

2018.11.17（5，6，7）章，及第八章練習作業

2018.11.17（5，6，7）章，及第八章練習作業

輸入一個數1-5表示上課，6和7表示休息，其他數字表示輸入有誤

網站zy老是被掛掉，查詢原因---2018.11.02（20%）

《惢客創業日記》2018.10.17（週三）80後很優秀，就差一點沒捅透

Python Day 17 （常用模塊一時間模塊，random模塊，os模塊，sys模塊，序列化模塊）

2018-11-09 趕雙十一入手個阿里雲伺服器，開始各種裝軟體

C語言資料型別輸入輸出函式（2018.11.17）

2018.11.17 hdu5829Rikka with Subset（ntt）

2018.11.17 bzoj4259: 殘缺的字串（fft）

2018.11.17 codechef PRIMEDST（點分治+fft）

2018-11-28親測有效的python執行緒終結，終止執行緒方法

動手造輪子，用DownLoadManage封裝一個App的更新元件（相容android 6、7、8）

快速判斷一個數能否被1、2、3、4、5、6、7、8、9、10、11、12、13、17、19、23等整除的規律

hadoop分散式搭建（+zookeeper，6臺機器）

輸入n個整數，找出其中最小的K個數。例如輸入4,5,1,6,2,7,3,8這8個數字，則最小的4個數字是1,2,3,4,。

23.輸入n個整數，找出其中最小的K個數。例如輸入4,5,1,6,2,7,3,8這8個數字，則最小的4個數字是1,2,3,4,。

上周熱點回顧（5.29-6.4）

CentOS（5.8/6.4）linux生產環境若幹優化實戰

周計劃（5.28 ~ 6.3）

創建用戶，設置密碼（長度是否大於等於7）

2018.11.17（5，6，7）章，及第八章練習作業

相關推薦