HTML---百度新闻轮播图--定位练习

最新推荐文章于 2022-07-12 18:39:53 发布

宁在春

最新推荐文章于 2022-07-12 18:39:53 发布

阅读量1.2k

点赞数 3

分类专栏：前端知识文章标签： html css 定位百度

本文链接：https://blog.csdn.net/weixin_45821811/article/details/106095652

版权

前端知识专栏收录该内容

12 篇文章 1 订阅

订阅专栏

HTML—百度新闻轮播图–定位练习

照常是记录自己的学习还有希望能够与大家交流分享
如果那里有错误或者是不足的地方，希望大家能够在评论区指出来都会一一回复的
底下的代码都是附带详细解释的
这一次的练习是一种模仿练习做的地方有一些细节是与原网页是不一样的
希望大家能够谅解啦
以后做的练习也会在博客上和大家一起分享
对了大家也可以一起用博客记录自己的成长经历很赞的

这是静态的效果图

在这里插入图片描述

图的话因为那个设置截不了图只能以文字的方式描述给大家啦

点进百度新闻–> 鼠标悬停在图片上–> 然后按鼠标右键–> 点击检查

在这里插入图片描述
–> 就会显示上面这个画面 – >鼠标悬停在这个上面 -->按鼠标右键 -->会弹出一个选择的

–>然后选择 Open in new tab 就会跳转到图片的地址然后保存就好啦。

这个方法大多数时候是有用的以后大家扣图的时候可以用到

先给大家看一下 HTML代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/Rotaion.css">
    <!-- 这里就是放置css代码 -->
</head>

<body>
    <div class="banner">
        <!-- 给全部的地方第一个范围 -->
        <div class="imgs">
            <!-- 这个div是用来放置图片的  
            需要注意的地方是  大家在使用类名的时候  一定要做到 见名知意 方便以后维护和修改  
            -->
            <a href=""><img src="./img/3.jpeg" alt=""></a>
            <a href=""><img src="./img/2.jpeg" alt=""></a>
            <a href=""><img src="./img/1.jpeg" alt=""></a>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <!-- 这里是模仿那个原网页的  原网页的好像是用图标 做成的   我这里是符号做的  看起来简陋很多   -->
        <div class="modal">
            <!-- 这里是设置底下那个遮挡层的    -->
            <div class="title">
                <h2>
                    南京大报恩塔亮灯致敬“最美天使”
                </h2>
            </div>
            <div class="dots">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

    </div>
</body>

</html>

下面是 C S S 代码

.banner {
    width: 520px;
    height: 304px;
    margin: 0 auto;
    /* 居中 */
    overflow: hidden;
    /* 这是隐藏图片 
      因为 做轮播图  要放置许多图片  虽然图片的变换 需要  js 控制
      但是在做静态网页的时候 ，会把  图片都放进来  把样式都做好     

      内容会被修剪，并且其余内容不可见
            overflow: hidden;
    */
    position: relative;
    /* 这里就是相对定位啦  方便后面的绝对定位 */
}

/* 这里是限制范围    就是要做多大的意思   */
.banner .imgs {
    width: 1560px;
    height: 304px;
    /* 这里就是放置图片   你放置多少张图片 就是需要多宽多高 等等需要一早定好  
        这里的宽度就是放置图片的张数乘以 每一张图片的宽度
    */
}

.banner .imgs img {
    width: 520px;
    height: 304px;
}

/* 这里就是给每一张图片定宽 */

.banner .imgs a {
    float: left;
    /* 让每个图片浮动起来  都在一张图片后面
    这里没有产生高度塌陷的原因是  前面已经定高啦   
    高度塌陷产生的原因 是因为 高度未设置 或者是  为 auto
    */
}


/* 这里就是做那个切换的图标的   
    在这里就是把他们相似 的东西都提出来  
    做成一个样式  以便于代码检查和  简洁  
*/
.banner .left,
.banner .right {
    position: absolute;
    /* 绝对定位  设置绝对定位  就要设置他的父元素  为相对定位 */
    width: 50px;
    height: 50px;
    line-height: 50px;

    top: 0;
    bottom: 0;
    margin: auto;

    font-size: 3em;
    text-align: center;
    /* 文本居中 */
    font-family: Arial, Helvetica, sans-serif;

    color: #fff;
    /* 字体颜色 */
    border-radius: 50%;
    /* 让这个 块盒 变成一个圆形的  */
    cursor: pointer;
    /* 鼠标样式 改为小手 */
}

.banner .left:hover,
.banner .right:hover {
    background-color: #fff;
    color: #f40;
}

.banner .left {
    left: 20px;
}

.banner .right {
    right: 20px;
}

/* 距离左右20px */



/* 这是底下那一层半透明的遮挡层 */
.banner .modal {
    width: 100%;
    /* 宽度为100% */
    height: 40px;

    background: rgb(0, 0, 0, .3);
    /* rgb(,,,.3 ) 
        前三个空就是正常的颜色   第四个空是表示   透明程度
    */
    position: absolute;
    left: 0;
    bottom: 0;
    /* 这就是定位到最低下 */
    line-height: 40px;
    padding: 0 20px;
    /* 左右padding 拉开 */
    box-sizing: border-box;
    /* border-box 告诉浏览器：
    你想要设置的边框和内边距的值是包含在width内的。
    也就是说，如果你将一个元素的width设为100px，
    那么这100px会包含它的border和padding，
    内容区的实际宽度是width减去(border + padding)的值。
    大多数情况下，这使得我们更容易地设定一个元素的宽高。 */
}

.banner .modal .title {
    float: left;
    color: #fff;
    font-weight: bold;
    /* 文字加粗 */
}

.banner .modal .dots {
    float: right;
}

.banner .modal .dots li {
    width: 8px;
    height: 8px;
    display: inline-block;
    /* 行块盒 
    inline-block
    该元素生成一个块元素框，
    该框将随周围的内容一起流动，
    就好像它是单个内联框一样（与被替换的元素非常相似）。*/
    margin: 0 2px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.banner .modal .dots li:hover {
    background-color: #336699;
}

重置样式的话我单独上传了一个博客大家可以去看一看因为每次都这样子太长啦
影响阅读感受
这次就到了这里加油！！！
希望对大家有所帮助

宁在春

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
HTML---百度新闻轮播图--定位练习

HTML—百度新闻轮播图–定位练习照常是记录自己的学习还有希望能够与大家交流分享如果那里有错误或者是不足的地方，希望大家能够在评论区指出来都会一一回复的底下的代码都是附带详细解释的这一次的练习是一种模仿练习做的地方有一些细节是与原网页是不一样的希望大家能够谅解啦以后做的练习也会在博客上和大家一起分享对了大家也可以一起用博客记录自己的成长经历很赞的这是静态的效果图图的话因为那个设置截不了图只能以文字的方式描述给大家啦点进百度新闻–> 鼠标
复制链接

扫一扫