css-3秒（大概吧...）快速撸出YY游戏页面（三）

最新推荐文章于 2024-05-03 01:29:44 发布

weixin_34242331

最新推荐文章于 2024-05-03 01:29:44 发布

阅读量719

点赞数

原文链接：https://juejin.im/post/5a37c8fd6fb9a04512390dc1

版权

有哪里不懂的，请在下面留言，我每天都看，有时间我会一一解答，看评论区也许有人提出了跟你同样想问的问题，可以看看我给出的回答，不用重复提问。

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;
}
复制代码

weixin_34242331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-3秒（大概吧...）快速撸出YY游戏页面（三）

有哪里不懂的，请在下面留言，我每天都看，有时间我会一一解答，看评论区也许有人提出了跟你同样想问的问题，可以看看我给出的回答，不用重复提问。css-3秒（大概吧...）快速撸出YY游戏页面（一）css-3秒（大概吧...）快速撸出YY游戏页面（二）首先我们看看页面的样子接着上一篇，我们这篇来写nav部分下面的焦点图声明，本教程只是为了帮助大家更好的理解css的一些细节，所以在这三篇里没...
复制链接

扫一扫