css-3秒（大概吧...）快速擼出YY遊戲頁面（一）

工地程式設計_大奶夫發表於2017-12-17
CSS遊戲

有哪裡不懂的，請在下面留言，我每天都看，有時間我會一一解答，看評論區也許有人提出了跟你同樣想問的問題，可以看看我給出的回答，不用重複提問。

首先我們看看頁面的樣子

css-3秒（大概吧...）快速擼出YY遊戲頁面（一）

1秒鐘看完進入第一次準備工作

  • 開始專案的時候先建立好老三樣，因為本篇不涉及js所以是老三樣

css-3秒（大概吧...）快速擼出YY遊戲頁面（一）

  • style資料夾下先建立好兩個css一個是你這個專案樣式comment.css,另一個是重置瀏覽器的公共樣式樣式reset.css
  • images裡面隨便放圖片

1秒鐘完成了第一次準備工作，進入第二次準備工作

  • 首先我們來寫個reset.css
@charset "utf-8";

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd {
    margin: 0;
    padding: 0;
}

ul,ol {list-style: none;}

img {border: none;vertical-align: top;}

a {text-decoration: none;}

/*選擇性的*/

em,i {font-style: normal;}

/*公用*/

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {zoom: 1;}

.fl {float: left;}

.fr {float: right;}

複製程式碼
  • 每個瀏覽器對每個不同的標籤都有一些大同小異的預設樣式，為了統一所以需要讓其重置，暴力reset*{margin:0;padding:0}給整個頁面裡的所有元素都重置的樣式，雖然簡單快速但是有時候一些預設的東西你還是需要去保留它，寫個簡單規範的reset其實不難，，所以我不推薦用暴力reset。
  • 上面的reset裡img去除了邊框和增加了頂部對齊，部分瀏覽器裡img在盒子裡面的對齊方式如果是底部對齊，那麼會有撐出多餘的高度，給予vertical-align:top;是為了解決這個小bug，a標籤也有類似的問題，稍後再講。
  • 我們這個reset.css裡面有.clearfix:after，親測其實這裡面寫三個就OK了，不需要給heigh:0;overflow:hidden;但如果你裡面有元素設了負值的margin頂到了盒子外面則你可能需要單獨加一個overflow:hidden;

1秒鐘完成了第二次準備工作，進入正式工作部分

css-3秒（大概吧...）快速擼出YY遊戲頁面（一）

  • 首先從最頂部的入手
  • 把左邊的圖切出來放到images資料夾下備用
  • 書寫html結構和填充內容

結構詳解

  • 首先我們給一個大盒子給三個類名，header/gWidth/clearfix，請看本篇開頭的那張整圖，頁面整體集中在中間且寬度一樣，所以給了一個寬1000px叫做gWidth類名的版心，盒子裡面的元素時左右浮動的如果不清楚浮動則header盒子會沒有高度，於是加了一個我們在reset裡面寫好的clearfix類名
  • header盒子下分左右兩個盒子，左邊是有連結跳轉的廣告圖片，右邊是浮動成行的導航連結
  • 左邊廣告圖片是帶有連結的用a標籤包起來，右邊是導航連結，對於導航連結一般做法是用ul li標籤來做，間隔中的span用來做文字中間的豎線

樣式詳解

  • gWidt版心可能不像大家平時的margin:0 auto;這樣的寫法，這裡多寫了一點是為了怕覆蓋，假如你這個盒子需要給margin-top/bottom值，被gWidt覆蓋掉了就不起作用了。當然也可以把gWidt放到css最開始的地方也覆蓋其他樣式，但多留點心總是好的。
  • 右邊導航普遍的寫法是用ul li標籤把li標籤浮動成一行排列
  • 我們在li標籤裡面放置了a標籤，先把a標籤轉行塊（display: inline-block;），行內元素需要轉了行塊之後才可以設定寬高，設定高度與行高相同文字會在盒子裡處於居中狀態（height: 40px;line-height: 40px;），在這裡設定了屬性（vertical-align: top;）和我們在reset.css裡面給img設定的（vertical-align: top;）是一個道理，在某些版本的瀏覽器裡，像img，a等標籤在父盒子裡會有一個對齊的問題，這個對齊的問題主要導致了高度增加，打個比方，我不設定（vertical-align: top;），a的高度是40px這個沒錯，但是a在li裡面，li由a撐開，因為某些瀏覽器預設版本a標籤在父盒子裡面的對齊方式問題會讓li的高度會變成42px，所以設定（vertical-align: top;）之後，li的高度就能準確變成40px；當然也不用你每次寫都要加個vertical-align: top;，因為這個是我們自己寫的reset.css，當你去用別人寫的reset.css時一般裡面都已包含了這個問題的解決方案，在這裡的reset.css只是為了幫助大家認識何為reset.css為什麼要寫reset.css
  • 文字中間的那條豎線用span來代替，span裡面不要寫|（豎），因為測量值是小於12px，12px是chrome瀏覽器最小字型，設定1px再小也只會是12px，一般的做法是給span轉換成行塊獲得可設寬高的屬性，設定寬1px高8px背景色黑色來替代豎線，但這裡的做法是沒有給span設定（display: inline-block;）來轉行塊，這裡用了（float: left;），《css3權威指南》裡有講到行內元素設定浮動後也能獲得可設寬高的屬性。
<div class="header gWidth clearfix">
    <div class="ad fl">
        <a href="#"><img src="images/ad.jpg" alt=""></a>
    </div>
    <ul class="header_nav fr">
        <li><a href="#">登陸</a></li>
        <li><span></span></li>
        <li><a href="#">註冊</a></li>
        <li><span></span></li>
        <li><a href="#">今天卡夫</a></li>
        <li><span></span></li>
        <li><a href="#" class="red">登陸登陸</a></li>
    </ul>
</div>
複製程式碼
/*公用*/

.gWidth {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
/*頭部*/
 
.header {
    position: relative;
}

.ad,.ad img {
    width: 492px;
    height: 41px;
}

.header_nav {
    line-height: 40px;
    height: 40px;
}

.header_nav li {
    float: left;
}

.header_nav a {
    font-size: 12px;
    color: #757575;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    vertical-align: top;
    position: relative;
    _top: 2px;
}

.header_nav span {
    color: #020202;
    width: 1px;
    height: 8px;
    overflow: hidden;
    background-color: #000;
    float: left;
    margin: 16px 10px;
    /*        pc 端 chrome 不允許小於12px的文字    */
}
複製程式碼

相關文章