不用框架手写新闻首页界面（大佬勿喷）

程序员班长

已于 2024-03-11 10:19:11 修改

阅读量401

点赞数 2

分类专栏： Web前端文章标签： html5 css3 javascript

于 2020-05-26 15:09:20 首次发布

本文链接：https://blog.csdn.net/kk_2018/article/details/106344597

版权

Web前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一、先放上几张效果图吧！

二、大致讲解

顶部导航栏

使用了固定定位，这样可以使导航栏始终出现在屏幕上方。

中间轮播图

先把所有轮播图垂直排列在一个盒子中，给这个盒子设置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 = '';
            }
        }
    }

程序员班长

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
不用框架手写新闻首页界面（大佬勿喷）

然后利用JavaScript设置一个定时器，每隔2s就会时全部图片整体的margin-top上移一个图片的垂直高度，这样在盒子中展示的图片就会每隔2s自动切换到下一张，建立一个索引，当在盒子中的图片为最后一张时，索引归零，重新计数，margin-top恢复初始值。左边是几个板块的标题，右边是每个板块对应的内容。然后利用JavaScript设置鼠标浮动事件，当鼠标放到某个板块标题上时，将对应的内容设置成display:block，这样就可以实现鼠标放到某个板块显示某个板块内容的效果了。
复制链接

扫一扫