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

大奶夫_工地程式設計發表於2019-02-18

CSS遊戲

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

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

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

首先我們看看頁面的樣子

接著上一篇，我們這篇來寫nav部分下面的焦點圖

宣告，本教程只是為了幫助大家更好的理解css的一些細節，所以在這三篇裡沒有都涉及js，下面開始的輪播圖我也只是講解其中的css，其中我給出的程式碼可能有些樣式沒給全，這些不是講解的重點，大家可以在實際練習時自行補上。

首先我們先看看今天要寫的部分

輪播圖部分我隨便找了五張圖，大家做練習的時候也隨意，一圖五用也OK，因為這裡不涉及js，只是單講css

結構&樣式詳解

由圖可以看出我們要寫的主體部分後面有背景色且上下有邊距，於是我們先給一個大盒子，設上背景色和上下padding值
下一級的盒子是中間的，所以加上類名gWidth這個我們之前寫好的版心，順手再加個類名clearfix來清楚浮動，因為我們裡面的內容是分左右兩大塊浮動的
先來看左邊這塊，這個是新聞banner輪播區域，在這裡的輪播圖的做法是用ul li結構，給出五個li浮動成一行，每個li裡面都有一張圖，那麼這圖張圖排成了一行，如果不給ul的父盒子設定固定寬度，那麼這五個圖片在同一行會把這個父盒子頂得很長，給ul的父盒子設定固定一張圖片的寬度且加上（overflow:hidden;）超出部分隱藏，然後用js控制沒幾秒ul向左移動一張圖片寬度的距離還有ul這個父盒子左右兩個按鈕也加上事件控制其移動，JS在這裡點到為止，因為在這裡主要還是講解css
我們來給ul這個大長條的父盒子加一個固定寬度和高度且設定為（position: relative;）而ul自身設為（position: absolute;），因為我們把ul設定了absolute，那麼ul會跳出文件流，這裡如果不給我們剛剛設了relative的這個盒子沒有設定固定高度，那麼這個盒子高度為零，因為absolute跳出文件流之後他的內容將不再撐起高度，打個比方就好像你把氣球裡面的空氣拿走，那麼這個氣球就會縮小。
可能有人已經注意到了我們給一些包裹有浮動內容的盒子都隨手設定了clearfix，那為何此處的ul.banner_list沒有給clearfix，裡面包裹著的li不是也浮動的嗎？這個問題我會在完結這個系列教程篇章之後的單獨寫一篇關於高度坍塌詳細講解的技術分享在此補上鍊接跳轉，因為這個不單單隻有clearfix這個知識點，其中浮動和絕對定位還有其他東西都有很大的緊密型，可以算是一個體系,我在這篇裡面做了略微詳細的講解幫助大家理解css-讓我們再深入一點看看ul-li結構裡的浮動和絕對定位（float & absolute）。
來看下ul.banner_list下的li，我們給li設定了（position: relative;），li裡面的描述的div.banner_fd設定了（position: absolute;）且定位在li的底部，並沒有和圖片擠在一塊，有些時候這個圖片描述的div還會設定有透明度，所以此處用這種做法。這裡需要注意的點是我們給div.banner_fd設定了一個（width:100%），這是因為absolute會隱式的把我們這個div變成行塊（display:inline-block;），這樣的話我們不給他設定百分百的寬度那他的寬度則由內容h3來撐開而不是像原本的block獨佔一行，那麼看起來就顯得很短，右邊留出了很多空白，這就和我們圖上的樣子變得不一樣了。
左邊的做法大體上和前兩篇寫的nav的做法相似，在這裡不再講解，該頁面的剩餘其他內容都可以在這三篇的講解裡面找到相同的答案，各位同學請自行發揮腦洞開始練習吧。

<div class="pt30 pb30 bg_qian">
    <div class="gWidth clearfix">
        <div class="banner fl">
            <ul class="banner_list">
                <li>
                    <img src="images/banner/3.jpg" alt="">
                    <div class="banner_fd">
                        <h3>阿斯頓發撒的發撒的發是</h3>
                    </div>
                </li>
                <li>
                    <img src="images/banner/2.jpg" alt="">
                    <div class="banner_fd">
                        <h3>阿斯頓發撒的發撒的發是</h3>
                    </div>
                </li>
                <li>
                    <img src="images/banner/3.jpg" alt="">
                    <div class="banner_fd">
                        <h3>阿斯頓發撒的發撒的發是</h3>
                    </div>
                </li>
                <li>
                    <img src="images/banner/4.jpg" alt="">
                    <div class="banner_fd">
                        <h3>阿斯頓發撒的發撒的發是</h3>
                    </div>
                </li>
                <li>
                    <img src="images/banner/5.jpg" alt="">
                    <div class="banner_fd">
                        <h3>阿斯頓發撒的發撒的發是</h3>
                    </div>
                </li>
            </ul>
            <a href="" class="prev"></a>
            <a href="" class="next"></a>
        </div>
        <div class="news_box fr">
            <div class="ghd">
                <div class="ghd_cont hd_big clearfix">
                    <ul class="news_nav clearfix">
                        <li><a href="#" class="active">新聞</a></li>
                        <li><a href="#">活動</a></li>
                        <li><a href="#">新聞</a></li>
                        <li><a href="#">活動</a></li>
                        <li><a href="#">新聞</a></li>
                    </ul>
                    <!--
                       <h3 class="title">愛上對方</h3>
                       <a href="" class="more">更多+</a>
-->
                </div>
            </div>
            <div class="news_bd">
                <div class="news_item">
                    <h3 class="big_title">啊手動閥手動閥打發手動閥手動閥</h3>
                    <ul class="list">
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                    </ul>
                </div>
                <div class="news_item hide">
                    <h3 class="big_title">啊手動閥手動閥打發手動閥手動閥</h3>
                    <ul class="list">
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                    </ul>
                </div>
                <div class="news_item hide">
                    <h3 class="big_title">啊手動閥手動閥打發手動閥手動閥</h3>
                    <ul class="list">
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                    </ul>
                </div>
                <div class="news_item hide">
                    <h3 class="big_title">啊手動閥手動閥打發手動閥手動閥</h3>
                    <ul class="list">
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                    </ul>
                </div>
                <div class="news_item hide">
                    <h3 class="big_title">啊手動閥手動閥打發手動閥手動閥</h3>
                    <ul class="list">
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                        <li><span>[招募]</span><a href="#">啊手動閥手動閥手動閥</a><em>2000-20-20</em></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
複製程式碼

/*焦點圖*/

.banner {
    width: 497px;
    height: 246px;
    position: relative;
    overflow: hidden;
}

.banner_list {
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
}

.banner_list li {
    float: left;
    position: relative;
}

.banner_list img {
    width: 497px;
    height: 246px;
}

.banner_fd {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: #fff;
}

.banner_fd h3 {
    font: 14px/16px "Microsoft YaHei", "微軟雅黑";
    height: 16px;
    border-left: solid 3px #DD3A29;
    padding-left: 8px;
    margin: 12px 9px;
}

.prev,
.next {
    width: 30px;
    height: 50px;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#7F000000', endColorstr='#7F000000');
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50%;
    margin-top: -45px;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.news_box {
    background-color: #fff;
    width: 497px;
    height: 246px;
}

.news_nav {
    height: 42px;
    font: 12px/42px "Microsoft YaHei", "微軟雅黑";
    padding: 0 3px;
}

.news_nav li {
    float: left;
}

.news_nav a {
    display: inline-block;
    padding: 0 14px;
    color: #393742;
}

.news_nav .active {
    color: #f00;
}

.news_bd {
    padding: 7px 20px 0;
}

.big_title {
    height: 41px;
    font: 16px/41px "Microsoft YaHei", "微軟雅黑";
    text-align: center;
    color: #dd3a29;
}
複製程式碼

css-3秒（大概吧...）快速擼出YY遊戲頁面（二）
2017-12-18
CSS遊戲
css-3秒（大概吧...）快速擼出YY遊戲頁面（一）
2017-12-17
CSS遊戲
BZOJ2769 : YY的快速排序
2016-06-23
排序
用github來展示你的前端頁面吧
2016-11-21
Github前端
手擼Router——解決跨模組下的頁面跳轉
2018-01-10
前端靜態頁面快速迭代工具
2018-05-25
前端
移動端適配頁面快速搭建
2017-01-20
如何“拼”出一個頁面-遊戲中心模組化實踐
2021-11-15
遊戲
動手擼一個微信小程式學生課程表頁面
2017-06-03
微信小程式
指定秒數之後跳轉到其他頁面程式碼
2017-03-21
RabbitMQ的web頁面介紹（三）
2021-10-13
MQWeb
更快速、更精簡的頁面重新載入
2017-02-09
Python 自用程式碼（scrapy多級頁面(三級頁面)爬蟲）
2017-05-09
Python爬蟲
騰訊三面：Cookie的SameSite瞭解吧，那SameParty呢？
2022-04-19
Cookie
結合 Google quicklink，react 專案實現頁面秒開
2018-12-17
GoUIReact
JSP/HTML頁面彈出框
2016-10-20
JSHTML
瀏覽器彈出小頁面
2016-07-04
瀏覽器
給手機端頁面留一個除錯後門吧(vue)
2019-09-04
除錯Vue
網易遊戲-一面-二面-三面+offer意向書
2018-09-01
遊戲
面對疾風吧！今年遊戲代言廣告花樣又翻新了
2020-09-10
遊戲
騰訊校招前端三面,虐完繼續擼|掘金技術徵文
2017-09-25
前端
免費，一鍵釋出web頁面
2018-04-16
Web
WIN10禁止安裝YY遊戲怎麼設定 win10系統禁止安裝YY遊戲應用操作方法
2020-12-03
Win10遊戲
【AI繪畫】秒級出圖快速生成大師級畫作
2023-02-27
AI
javascript輸出頁面節點層級效果
2017-04-08
JavaScript
頁面資料匯出為word或者excel
2016-01-12
Excel
將分頁功能從JSP頁面中獨立出來
2015-04-22
JS
快速構建頁面結構的 3D Visualization
2022-11-21
3D
快速構建H5單頁面切換應用
2024-04-19
H5
js頁面跳轉的問題(跳轉到父頁面、最外層頁面、本頁面)
2020-12-01
JS
python django整理（三）頁面基礎（仿BBS)
2021-09-09
PythonDjango
專案分享三：頁面之間的傳值
2015-12-16
ASP.NET頁面跳轉的三種方法
2009-07-29
ASP.NET
PHP彈出提示框並跳轉到新頁面即重定向到新頁面
2017-11-12
PHP
來學習開發一個網頁版馬里奧小遊戲吧
2021-12-16
網頁遊戲
【歡聚時代】HR獨家傳授YY筆試面經小祕訣！
2018-09-08
筆試
前端大概
2020-10-26
前端
來來來，快速擼 Redis 一遍！
2023-01-12
Redis

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

首先我們看看頁面的樣子

接著上一篇，我們這篇來寫nav部分下面的焦點圖

首先我們先看看今天要寫的部分

結構&樣式詳解

相關文章