不用框架手寫新聞首頁界面（大佬勿噴）

一、先放上幾張效果圖吧！

二、大致講解

頂部導航欄

使用了固定定位，這樣可以使導航欄始終出現在屏幕上方。

中間輪播圖

先把所有輪播圖垂直排列在一個盒子中，給這個盒子設置overflow:hidden，並且盒子的大小和單個圖片大小相同。這樣的話，每次展現給用戶的就是一張圖片。然後利用JavaScript設置一個定時器，每隔2s就會時全部圖片整體的margin-top上移一個圖片的垂直高度，這樣在盒子中展示的圖片就會每隔2s自動切換到下一張，建立一個索引，當在盒子中的圖片爲最後一張時，索引歸零，重新計數，margin-top恢復初始值。這樣就可以使得圖片循環切換。

輪播圖下方的Tab切換

左邊是幾個板塊的標題，右邊是每個板塊對應的內容。首先將右邊的內容全部設置display:none，這樣就可以將他們全部隱藏。然後利用JavaScript設置鼠標浮動事件，當鼠標放到某個板塊標題上時，將對應的內容設置成display:block，這樣就可以實現鼠標放到某個板塊顯示某個板塊內容的效果了。

下方的六大板塊

採用了HTML5裏面的table標籤，這樣可以更加方便的設計出樣式和佈局。表格爲5行5列，第一行用來承載第一行板塊的標題，第二行承載的是軍事天地、娛樂頭條和電腦百科的內容。第三行爲分隔條，第四行用來承載第二行板塊的標題，第五行承載的是科技要聞、大街小事和教育前沿的內容。第二列和第四列爲分隔條。

三、關鍵代碼

1、HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>網站首頁</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <header>
        <div id="hea-bar">
            <ul>
                <li>
                    <a id="title" href="index.html">新聞天下</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="index.html">首頁</a>
                </li>
                <li>
                    <a href="#">分類</a>
                </li>
                <li>
                    <a href="#">網站地圖</a>
                </li>
                <li>
                    <a href="#">關於我們</a>
                </li>
            </ul>
            <ul class="ul-right">
                <li>
                    <form>
                        <input type="text" placeholder="關鍵字" class="text">
                        <button type="submit" class="button">搜索</button>
                    </form>
                </li>
                <li>
                    <a href="register.html">註冊</a>
                </li>
                <li>
                    <a href="login.html">登錄</a>
                </li>
            </ul>
        </div>
    </header>
    <section>
        <div id="wrap">
            <ul id="pic">
                <li><img src="images/01.jpg" alt=""></li>
                <li><img src="images/02.gif" alt=""></li>
                <li><img src="images/03.jpg" alt=""></li>
            </ul>
            <div id="bar_left"></div>
            <div id="bar_right"></div>
            <ol id="list">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>
        <div class="container">
            <div class="side">
                <ul id="tab">
                    <li>最新發布</li>
                    <li>本週熱門</li>
                    <li>瀏覽最多</li>
                    <li>網友求助</li>
                    <li>政民互動</li>
                </ul>
            </div>
            <div id="content">
                <div class="nohide">
                    <table class="table1">
                        <tbody>
                            <tr>
                                <td><a href="#">這是一行新聞測試，切勿當真。這是一行新聞測試，切勿當真。</a></td>
                                <td>發佈日期2020-05-01</td>
                            </tr>
                            <tr>
                                <td><a href="#">這是一行新聞測試，切勿當真。這是一行新聞測試，切勿當真。</a></td>
                                <td>發佈日期2020-04-30</td>
                            </tr>
                            <tr>
                                <td><a href="#">這是一行新聞測試，切勿當真。這是一行新聞測試，切勿當真。</a></td>
                                <td>發佈日期2020-04-29</td>
                            </tr>
                            <tr>
                                <td><a href="#">這是一行新聞測試，切勿當真。這是一行新聞測試，切勿當真。</a></td>
                                <td>發佈日期2020-04-28</td>
                            </tr>
                            <tr>
                                <td><a href="#">這是一行新聞測試，切勿當真。這是一行新聞測試，切勿當真。</a></td>
                                <td>發佈日期2020-04-27</td>
                            </tr>
                            <tr>
                                <td><a href="#">這是一行新聞測試，切勿當真。這是一行新聞測試，切勿當真。</a></td>
                                <td>發佈日期2020-04-26</td>
                            </tr>
                            <tr>
                                <td><a href="#">這是一行新聞測試，切勿當真。這是一行新聞測試，切勿當真。</a></td>
                                <td>發佈日期2020-04-25</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tex">
                   <table class="table1">
                        <tbody>
                            <tr>
                                <td><a href="#">爲中華民族崛起而讀書！！！</a></td>
                                <td>發佈日期2020-04-01</td>
                            </tr>
                            <tr>
                                <td><a href="#">爲中華民族崛起而讀書！！！</a></td>
                                <td>發佈日期2020-03-30</td>
                            </tr>
                            <tr>
                                <td><a href="#">爲中華民族崛起而讀書！！！</a></td>
                                <td>發佈日期2020-03-29</td>
                            </tr>
                            <tr>
                                <td><a href="#">爲中華民族崛起而讀書！！！</a></td>
                                <td>發佈日期2020-03-28</td>
                            </tr>
                            <tr>
                                <td><a href="#">爲中華民族崛起而讀書！！！</a></td>
                                <td>發佈日期2020-01-27</td>
                            </tr>
                            <tr>
                                <td><a href="#">爲中華民族崛起而讀書！！！</a></td>
                                <td>發佈日期2020-06-26</td>
                            </tr>
                            <tr>
                                <td><a href="#">爲中華民族崛起而讀書！！！</a></td>
                                <td>發佈日期2020-04-25</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tex">
                    <table class="table1">
                        <tbody>
                            <tr>
                                <td><a href="#">瀏覽量最多的新聞當然是在這裏啦，快來看看吧！</a></td>
                                <td>發佈日期2020-03-23</td>
                            </tr>
                            <tr>
                                <td><a href="#">瀏覽量最多的新聞當然是在這裏啦，快來看看吧！</a></td>
                                <td>發佈日期2020-03-22</td>
                            </tr>
                            <tr>
                                <td><a href="#">瀏覽量最多的新聞當然是在這裏啦，快來看看吧！</a></td>
                                <td>發佈日期2020-03-21</td>
                            </tr>
                            <tr>
                                <td><a href="#">瀏覽量最多的新聞當然是在這裏啦，快來看看吧！</a></td>
                                <td>發佈日期2020-03-20</td>
                            </tr>
                            <tr>
                                <td><a href="#">瀏覽量最多的新聞當然是在這裏啦，快來看看吧！</a></td>
                                <td>發佈日期2020-03-19</td>
                            </tr>
                            <tr>
                                <td><a href="#">瀏覽量最多的新聞當然是在這裏啦，快來看看吧！</a></td>
                                <td>發佈日期2020-03-18</td>
                            </tr>
                            <tr>
                                <td><a href="#">瀏覽量最多的新聞當然是在這裏啦，快來看看吧！</a></td>
                                <td>發佈日期2020-03-16</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tex">
                   <table class="table1">
                        <tbody>
                            <tr>
                                <td><a href="#">網友求助的內容在此，請幫他解答吧~</a></td>
                                <td>發佈日期2020-02-27</td>
                            </tr>
                            <tr>
                                <td><a href="#">網友求助的內容在此，請幫他解答吧~</a></td>
                                <td>發佈日期2020-02-25</td>
                            </tr>
                            <tr>
                                <td><a href="#">網友求助的內容在此，請幫他解答吧~</a></td>
                                <td>發佈日期2020-02-23</td>
                            </tr>
                            <tr>
                                <td><a href="#">網友求助的內容在此，請幫他解答吧~</a></td>
                                <td>發佈日期2020-02-21</td>
                            </tr>
                            <tr>
                                <td><a href="#">網友求助的內容在此，請幫他解答吧~</a></td>
                                <td>發佈日期2020-02-20</td>
                            </tr>
                            <tr>
                                <td><a href="#">網友求助的內容在此，請幫他解答吧~</a></td>
                                <td>發佈日期2020-02-09</td>
                            </tr>
                            <tr>
                                <td><a href="#">網友求助的內容在此，請幫他解答吧~</a></td>
                                <td>發佈日期2020-02-01</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tex">
                    <table class="table1">
                        <tbody>
                            <tr>
                                <td><a href="#">想知道政民互動的最新消息？進來看就對了！</a></td>
                                <td>發佈日期2020-01-31</td>
                            </tr>
                            <tr>
                                <td><a href="#">想知道政民互動的最新消息？進來看就對了！</a></td>
                                <td>發佈日期2020-01-30</td>
                            </tr>
                            <tr>
                                <td><a href="#">想知道政民互動的最新消息？進來看就對了！</a></td>
                                <td>發佈日期2020-01-27</td>
                            </tr>
                            <tr>
                                <td><a href="#">想知道政民互動的最新消息？進來看就對了！</a></td>
                                <td>發佈日期2020-01-25</td>
                            </tr>
                            <tr>
                                <td><a href="#">想知道政民互動的最新消息？進來看就對了！</a></td>
                                <td>發佈日期2020-01-23</td>
                            </tr>
                            <tr>
                                <td><a href="#">想知道政民互動的最新消息？進來看就對了！</a></td>
                                <td>發佈日期2020-01-16</td>
                            </tr>
                            <tr>
                                <td><a href="#">想知道政民互動的最新消息？進來看就對了！</a></td>
                                <td>發佈日期2020-01-05</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <table class="table2">
            <tbody>
                <tr>
                    <td class="headline">軍事天地</td>
                    <td rowspan="2" class="blank"></td>
                    <td class="headline">娛樂頭條</td>
                    <td rowspan="2" class="blank"></td>
                    <td class="headline">電腦百科</td>
                </tr>
                <tr>
                    <td>此處爲軍事新聞版塊</td>
                    <td>此處爲娛樂頭條板塊</td>
                    <td>此處爲電腦百科版塊</td>
                </tr>
                <tr>
                    <td colspan="5" id="blank2"></td>
                </tr>
                <tr>
                    <td class="headline">科技要聞</td>
                    <td rowspan="2" class="blank"></td>
                    <td class="headline">大街小事</td>
                    <td rowspan="2" class="blank"></td>
                    <td class="headline">教育前沿</td>
                </tr>
                <tr>
                    <td>此處爲科技新聞版塊</td>
                    <td>此處爲大街小事版塊</td>
                    <td>此處爲教育前沿版塊</td>
                </tr>
            </tbody>
        </table>
    </section>
    <footer>
        CopyRight By LiKang
    </footer>
    <script src="js/main.js"></script>
</body>

</html>

2、CSS部分

html{
    background: #F1F1F1;
}
*{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}
body {
    padding: 0;
    margin: 0;
}
header {
    background: #FFF;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);/*設置下邊框顏色*/
    position: fixed;/*設置固定定位*/
    top: 0;
    right: 0;
    z-index: 1000;/*保持導航條在最上方*/
}

header ul {
    float: left;
    margin-left: 20px;
    height: 40px;
}

/* 導航欄內容全在裏面 */
#hea-bar {
    width: 90%;
    margin-bottom: 20px;
    height: 40px;
    position: relative;
    margin: 0 auto;
}

/* 新聞天下 */
#title {
    font-size: 25px;
    color: gray;
}

/* 首頁、分類、網站地圖、關於我們 */
ul li a {
    text-decoration: none;
    color: gray;
    line-height: 40px;
}

/* 搜索輸入框 */
.text {
    height: 25px;
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px; /*設置圓滑邊框*/
}

/* 搜索按鈕 */
.button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

header ul li{
    float: left;
    list-style: none;
    margin-right: 20px
}
/* 關鍵字、搜索、註冊、登錄 */
.ul-right {
    position: absolute;
    right: 100px;
}

.ul-right li {
    margin-left: 30px;
}

/* 下 */
section {
    width: 90%;
    margin: 0 auto;
}
#wrap {
    /* margin: 10px; */
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}
#pic{
    margin: 0;
    padding: 0;
    clear: both;
}
#pic img{
    width: 100%;
    height: 520px;
}
#list {
    position: absolute;
    bottom: 0px;
    right: 30px;
    list-style: none;
}

#list li {
    float: left;
    margin-right: 15px;
    cursor: pointer;
    width: 23px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    background: #ADA79D;
    color: #FFF;
    border-radius: 50%;
}

#list .on {
    background: red;
}

#bar_left,
#bar_right {
    width: 33px;
    height: 80px;
    line-height: 80px;
    position: absolute;
    top: 205px;
    background: rgba(0, 0, 0, 0.3);
}

#bar_left {
    left: -33px;
}

#bar_right {
    right: -33px;
}

/*下面利用僞元素實現左側和右側的小箭頭*/
#bar_left:after,
#bar_left:before,
#bar_right:before,
#bar_right:after {
    content: "";
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: 25px;
}

/*左邊箭頭*/
#bar_left:before {
    border-left: 15px solid transparent;
    border-right: 15px solid #F1F1F1;
    right: 10px;
}

#bar_left:after {
    border-left: 15px solid transparent;
    border-right: 15px solid rgba(0, 0, 0, 0.3);
    right: 7px;
}

/*右邊箭頭*/
#bar_right:before {
    border-right: 15px solid transparent;
    border-left: 15px solid #F1F1F1;
    left: 10px;
}

#bar_right:after {
    border-right: 15px solid transparent;
    border-left: 15px solid rgba(0, 0, 0, 0.3);
    left: 7px;
}

#wrap:hover #bar_left {
    left: 0;
    cursor: pointer;
    transition: left 0.5s;
}

#wrap:hover #bar_right {
    /* display: block; */
    right: 0px;
    cursor: pointer;
    transition: right 0.5s;
}

#recent {
    width: ;
}


/* 文字 */
.container {
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    /* width: 100%; */
    height: 270px;
    background: #FFF;
}

.side {
    width: 20%;
    /* margin: 10px 10px; */
    float: left;
}
#tab{
    padding: 0;
}

#tab li {
    padding: 10px;
    margin-top: 10px;
    color: #015293;
    background: #ECF8F8;
    border-radius: 15px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.hov:after {
    content: '';
    border: 15px solid transparent;
    border-left: 15px solid #015293;
    position: absolute;
    top: 5px;
    right: -23px;
}

#content {
    /* border: 1px solid #E8E8E8; */
    width: 77%;
    height: 265px;
    margin: 0 15px;
    float: left;
    background: #FFF;
}

#content>div {
    display: none;
}
.table1{
    width: 100%;
}
.table1 tbody tr td:first-child{
    width: 70%;
}
.table1 td{
    border-bottom: 1px dashed #CCC;
    height: 32px;
    font-weight: normal;
}
.nohide {
    display: block !important;
    font-weight: bold;
    /* overflow: auto; */
}
.table2{
    margin: 20px auto;
    border: none;
    width: 100%;
    background: #FFF;
    border-collapse: collapse;//擠壓兩條邊框爲1條
}
.table2 tbody tr:nth-child(1){
    height: 50px;
    font-weight: bold;
}
.table2 tbody tr:nth-child(2){
    height: 300px;
    color: #337AB7;
}
.table2 tbody tr:nth-child(3){
    height: 30px;
    background: #F1F1F1;
}
.table2 tbody tr:nth-child(4){
    height: 50px;
    font-weight: bold;
}
.table2 tbody tr:nth-child(5){
    height: 300px;
    color: #337AB7;
}
/* tr td:nth-child(1){//選擇第一列
    background: #CCC;
} */
.table2 td{
    border: 1px solid #ccc;
    text-align: center;
}
.blank{
    border: 0 !important;
    background: #F1F1F1;
    width: 20px;
}
#blank2{
    border:none;
    border-right: 1px solid #F1F1F1;
}
.headline{
    background-color: #F5F5F5;
    color: black;
    border-top: 1px solid #CCC;
}
footer{
    /* display: block; */
    width: 90%;
    margin: 10px auto;
    height: 70px;
    border: 1px solid #CCC;
    background: #FFF;
    border-radius: 15px !important;
    text-align: center;
    line-height: 70px;
    font-weight: bold;
}

3、JS部分

    // 輪播圖
    var wrap = document.getElementById('wrap');
    var pics = document.getElementById('pic');
    var lists = document.getElementById('list').getElementsByTagName('li');
    var point_l = document.getElementById('bar_left');
    var point_r = document.getElementById('bar_right');
    var index = 0;
    var counter = null;

    function change() { //計時器
        counter = setInterval(function() {
            index++;
            if (index === lists.length) {
                index = 0;
            }
            img(index);
        }, 2000)
    }
    change();

    function img(curIndex) { //切換圖片
        for (var i = 0; i < lists.length; i++) {
            if (curIndex === i) {
                lists[i].className = 'on';
            } else {
                lists[i].className = '';
            }
        }
        index = curIndex;
        pics.style.marginTop = -504 * curIndex + 'px'; //圖片上移
        wrap.onmouseover = function() { //鼠標放到圖片上時圖片停止播放
            pics.style.cursor = "pointer";
            clearInterval(counter); //清除計時器
        }
        pics.onmouseout = change;
    }
    //鼠標放到指定序號切換到指定圖片
    for (var i = 0; i < lists.length; i++) {
        lists[i].id = i;
        lists[i].onmouseover = function() {
            img(this.id);
            this.className = 'on';
        }
    }
    //當鼠標放在箭頭上時，點擊箭頭切換到下一張圖片
    point_l.onmousedown = function() { //點擊左邊箭頭
        if (index <= 0) {
            index = lists.length;
        }
        img(index - 1);
    }
    point_r.onmousedown = function() { //點擊右邊箭頭
        if (index >= lists.length - 1) {
            index = -1;
        }
        img(index + 1);
    }

    // tab切換
    var tabs = document.getElementById('tab').getElementsByTagName('li');
    var sen = document.getElementById('content').children;
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onmouseover = function() {
            changes(this);
        }
    }
    // console.log(tabs.length)

    function changes(obj) {
        for (var i = 0; i < tabs.length; i++) {
            if (tabs[i] === obj) {
                tabs[i].className = "hov";
                tabs[i].style.color = "#ECF8F8";
                tabs[i].style.background = "#015293";
                sen[i].className = "nohide";
            } else {
                tabs[i].style.color = "#015293";
                tabs[i].style.background = "#ECF8F8";
                tabs[i].className = '';
                sen[i].className = '';
            }
        }
    }

不用框架手寫新聞首頁界面（大佬勿噴）

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

requests庫之IP歸屬地查詢

bs4爬取網頁基礎

post基礎-百度翻譯接口測試

Windows平臺本地搭建PHP環境，超詳細！（Apache+PHP+Mysql）

JavaScript實現輪播圖

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結