css实践头部banner定位案例轮播点溢出布局技巧

已于 2022-09-29 16:34:14 修改
阅读量457 收藏
点赞数
分类专栏： 前端 javaweb web实践案例 文章标签： 前端 css html
于 2022-09-28 23:16:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57780589/article/details/126879579
版权
前端 同时被 3 个专栏收录
26 篇文章 0 订阅
订阅专栏
javaweb
13 篇文章 0 订阅
订阅专栏
web实践案例
13 篇文章 1 订阅
订阅专栏

先放html,后放css

css各模块

头部


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
<!--    切记颜色单词别打错了-->
</head>
<body>
<div class="header w">
    <div class="logo">
        <img src="96/logo.png">
    </div>
    <div class="nav">
         <ul>
             <li>< a href="#">首页</ a> </li>
             <li>< a href="#">课程</ a> </li>
             <li>< a href="#">职业规划</ a> </li>
         </ul>
    </div>
    <div class="search">
        <input type="text" value="输入关键词">
        <button></button>
    </div>
    <div class="user">
        <img src="96/num_07.gif">
        qq.com
    </div>
</div>

</body>
</html>

*{
padding:0;
margin:0;
}
.w{
width:1200px;
margin:auto;
}
body{
background-color:#f3f5f7;
}
li{
list-style:none;
}
.header{
height:68px;

margin:30px auto;
}
.logo{
float:left;
width:164px;
height:68px;
}
.nav{
float:left;
margin-left:60px;
}
a{
text-decoration:none;
}
.nav ul li {
float:left;
margin:0 15px;
}
.nav ul li a{
display:block;
height:42px;
padding:0 10px;
line-height:68px;
font-size:24px;
color:#050505;
}
.nav ul li a:hover{
border-bottom:5px solid #00a4ff;
color:#00a4ff;
}
.search{
width:480px;
height:68px;
background-color:skyblue;
float:left;
margin-left:50px;
}
.search input{
width:385px;
height:66px;
border:1px solid #00a4ff;
border-right:0px;
font-size:18px;

padding-left:15px;
float:left;
}
.search button{
float:left;
width:80px;
height:68px;
background:url(96/login.gif);
border:0;
}
.user {
float:right;
line-height:68px;
margin-right:10px;
font-size:18px;

}

banner


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
<!--    切记颜色单词别打错了-->
</head>
<body>
<div class="banner">
    <div class="w">
        <div class="subnav">
            <ul>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
            </ul>

        </div>
    </div>

</div>

</body>
</html>

*{
padding:0;
margin:0;
}
.w{
width:1200px;
margin:auto;
}
.banner{
margin-top:400px;
height:421px;
background-color:#1c036c;
}
.banner .w{
height:421px;
background:url(96/logo.png) no-repeat top center;
}
.subnav{
width:190px;
height:421px;
background: rgba( 0,0,0,0.3);
}
.subnav ul li{
height:45px;
line-height:45px;
padding:0 20px;
}
.subnav li a{
font-size:14px;
color:white;
}
li{
list-style:none;
}

精品修饰


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
<!--    切记颜色单词别打错了-->
</head>
<body>
<div class="banner">
    <div class="w">
        <div class="subnav">
            <ul>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
                <li>< a href="#">前端开发</ a> </li>
            </ul>
        </div>
        <div class="course">
            <h2>我的课程表</h2>
            <div class="bd">
                <ul>
                    <li>
                        <h4>加油学习</h4>
                        <p>enenenenen</p>
                    </li>
                    <li>
                        <h4>收到收到</h4>
                        <p>hahahahah</p>
                    </li>
                    <li>
                        <h4>好的好的</h4>
                        <p>hehehehehe</p>
                    </li>
                </ul>
                < a href="#" class="more">全部课程</ a>
            </div>
        </div>
    </div>

</div>

</body>
</html>

*{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
.w{
width:1200px;
margin:auto;
}
.banner{
margin-top:400px;
height:421px;
background-color:#1c036c;
}
.banner .w{
height:421px;
background:url(96/logo.png) no-repeat top center;
}
.subnav{
width:190px;
height:421px;
background: rgba( 0,0,0,0.3);
float:left;
}
.subnav ul li{
height:45px;
line-height:45px;
padding:0 20px;
}
.subnav li a{
font-size:14px;
color:white;
}
.course{
float:right;
width:230px;
height:300px;
background-color:pink;
margin-top:50px;
}
.course h2{
text-align:center;
}
.bd{
margin-left:20px;
}
.bd ul li{
padding:10px 0;
border-bottom:0px solid #ccc;
}
.bd ul li h4{
font-size:14px;
color:#4e4e4e;
}
.bd ul li p{
font-size:12px;
color:#a5a5a5;
}
.more{
width:190px;
display:block;
height:38px;
border:2px solid #00a4ff;
text-align:center;
line-height:38px;
color:#00a4ff;
font-size:16px;
font-weight:700;
margin-top:40px;
}
定位

知识点

定位
在这里插入图片描述
选择器`
静态

{position:static;}

相对定位（自己原来位置）

{position:relative;}

绝对定位(父辈位置）

{position:absolute}

在这里插入图片描述
固定定位

{position:fixed;}

在这里插入图片描述
粘性定位

{position:sticky;top:10px;}

在这里插入图片描述
叠放次序

{z-index:1;}

数值越大越上，无单位，只有定位的盒子才有

案例分析

在这里插入图片描述
右侧同左侧


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
<!--    切记颜色单词别打错了-->

    <style>
    a{
    text-decoration:none;
    color:#fff;
    }
    .tb-promo{
    position:relative;
    margin:50px 100px;
    }
        .tb-promo img{
        width:140px;
        height:125px;
        }
        .prev{
        position:absolute;
        left:0;
        top:50%;
        margin-top:-13px;
        width:18px;
        height:26px;
        background:rgba(0,0,0,.3);
        text-align:center;
        line-height:26px;
        border-top-right-radius:13px;
        border-bottom-right-radius:13px;
        }

    </style>
</head>
<body>
<div class="tb-promo">
    <img src="921/1.jpg">
    <a href="#" class="prev">&lt;</a>
   
</div>
</body>
</html>

在这里插入图片描述

优化

重复代码多，用并集选择器
右边设next
一个盒子既有left属性也有right属性，则默认执行left属性
同理先执行上非下

.prev，
.next{
        position:absolute;
        top:50%;
        margin-top:-13px;
        width:18px;
        height:26px;
        background:rgba(0,0,0,.3);
        text-align:center;
        line-height:26px;
}
轮播点

li小圆点

案例分析


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="src\web.css">
<!--    切记颜色单词别打错了-->

    <style>
    *{
padding:0;
margin:0;
}

    a{
    text-decoration:none;
    color:#fff;
    }
    .tb-promo{
    position:relative;
    margin:80px 43%;
    }
     .tb-promo img{
        width:140px;
        height:125px;
        }
        .promo-nav{
        position:absolute;
        bottom:10px;
        left:50%;
        bottom:15px;
        margin-left:-35px;
        width:70px;
        height:13px;
        background:rgba(255,255,255,.3);
        border-radius:7px;
        }
        li{
        list-style:none;
        }
        .promo-nav li{
        float:left;
        width:8px;
        height:8px;
        background-color:#fff;
        border-radius:50%;
        margin:3px;
        }
        .promo-nav .selected{
        background-color:#ff5000;
        }

    </style>
</head>
<body>
<div class="tb-promo">
    <img src="921/1.jpg">
    <ul class="promo-nav">
        <li></li>
        <li class="selected"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>
</body>
</html>

在这里插入图片描述

隐藏和溢出

visibility和display
在这里插入图片描述
overflow
在这里插入图片描述
完全显示

.box{
width:444px;
height:320px;
background-color:pink;
margin:30px auto;
}
.box img{
width:100%;
height:100%
}

视频黑色盒子+播放按钮

.box{
width:444px;
height:320px;
background-color:pink;
margin:30px auto;
position:relative;
}
.box img{
width:100%;
height:100%
}
.mask{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.3) url(images/arr.png)no-repeat center;
}

隐藏接上面案例

.box{
width:444px;
height:320px;
background-color:pink;
margin:30px auto;
position:relative;
}
.box img{
width:100%;
height:100%
}
.mask{
display:none;
position:absolute;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.3) url(images/arr.png)no-repeat center;
}
.box:hover .mask{
diaplay:block;
}

高级技巧

空白和溢出

在这里插入图片描述

vertical-align:middle;

图片转块级元素

display:block;

单行溢出
在这里插入图片描述
在这里插入图片描述
多行溢出
在这里插入图片描述

布局技巧

在这里插入图片描述

*{
margin:0;
padding:0;
}
.box a{
display:inline-block;
width:36px;
height:36px;
background-color:#f7f7f7;
border:1px solid #ccc;
text-align:center;
line-height:36px;
text-decoration:none;
color:#333;
font-size:14px;
}
.box .prev,
.box .next {
width:85px;
}
.box .current,
.box .elp{
background-color:#fff;
border:none;
}
.box input {
height:36px;
width:45px;
border:1px solid #ccc;
outline:none;
}
.box button{
width:60px;
height:36px;
background-color:#f7f7f7;
border:1px solid #ccc
}

在这里插入图片描述
三角强化
在这里插入图片描述

.price {
width:160px;
line-height:24px;
border:1px solid red;
margin:0 auto;
height:24px;
}
.miaosha{
position:relative;
right:0;
top:0;
width:90px;
height:100%;
background-color:red;
text-align:center;
color:#fff;
font-weight:700;
margin-right:8px;
}
.miaosha i{
position:absolute;
width:0;
height:0;
border-color:transparent blue transparent transparent;
border-style:solid;
border-width:24px 10px 0 0;
}
.origin {
font-size:12px;
color:gray;
text-decoration:line-through;
}

<div class="price">
<span class="miaosha">
$1650
<i></i>
</span>
<span class="origin">
$5650
</span>
</div>

三级目录

佳美不ERROR
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详细页的banner实现
szuwaterbrother的博客
05-21 536
Banner的实现 首先是整个组件的页面布局 然后Banner 的代码如下 <template> <div> <div class="banner" @click="handleBannerClick"> <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1505/be/be4802e10f3b3107.water.jpg_600x330
HTML 标签
senlinyo的博客
03-22 804
THML -- HTML(HyperText Markup Language)指的是超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。HTML标签是给指定的文字语义化，作用是...
跟着黑马学CSS打卡第二天(设置banner）
m0_74385740的博客
10-14 369
设置banner区域所有样式
【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-05 1082
一、Banner 栏右侧课程盒子测量及样式 1、盒子尺寸测量 2、课程表头部样式 3、列表样式 4、最下方按钮样式 二、Banner 版心盒子模型右侧课程栏代码示例 1、HTML 标签结构 2、CSS 样式 3、展示效果
html中banner属性,banner是什么
weixin_39703468的博客
06-04 9781
现在人们离不开网络，基本上人走到哪里手机都不会离身，而banner也是大家常见的，很多朋友只听到这个词但是并不知道banner是什么意思，即使看到了也不清楚。其实banner也就是大家常见的广告大图，或者广告小图；Banner可以作为网站页面的横幅广告，主要用到网站页面的顶部、电商平台顶部、报纸上面部分、各种宣传大图。例：Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。ban...
【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-03 1378
一、Banner 栏测量 1、盒子模型尺寸测量 2、背景测量切图 二、Banner 盒子模型代码 1、HTML 标签结构 2、CSS 样式 3、显示效果
纯css实现轮播图banner自动轮换效果
11-19
Pure CSS实现轮播图Banner自动轮换效果 知识点1: CSS Reset 在开始之前，我们需要对HTML元素进行reset，以避免浏览器默认样式的干扰。在上面的代码中，我们可以看到 `{margin: 0;padding: 0;}` 的写法，这是CSS ...
jquery+css实现简单的图片轮播效果
10-19
`.banner`类设置了轮播容器的基本样式，如宽度、高度、隐藏溢出内容，并设置相对定位。`.pic-list`设置了绝对定位，其宽度远大于所有图片的宽度，这样可以实现无缝滑动效果。图片的宽度被设置为1170px，并使用浮动...
jquery实现自动轮播
04-11
我们可以设置`#banner`的宽度、高度以及溢出隐藏，以确保图片在容器内正确显示和切换。还可以为图片添加过渡效果，提升视觉体验： ```css #banner { width: 100%; height: 400px; overflow: hidden; } #banner ...
简单的banner轮换
12-22
例如，我们可以设置容器的宽度、高度和溢出隐藏，以及图片的绝对定位： ```css .banner-container { width: 100%; height: 300px; /* 根据需要自定义高度 */ overflow: hidden; position: relative; } .banner...
jQuery制作全屏宽度固定高度轮播图(实例讲解)
10-19
【jQuery制作全屏宽度固定高度轮播图】是...通过理解这段代码，开发者可以学习到HTML结构设计、CSS布局技巧，以及jQuery事件处理和动画效果的运用。对于初学者来说，这是一个很好的实践项目，有助于提升前端开发技能。
前端开发——轮播图banner
Congee_porridge的博客
08-01 1445
@[TOC]前端开发——轮播图banner 使用的是swiper.css。 要修改的点： ①img的src，其中width和height也可作出相应改变 ②根据所需轮播的图片数量在class值为swiper-wrapper的区域中复制出相应数量的div html部分： <!-- 横幅图片的广告模式 --> <!-- 专业术语：轮播图 --> <div id="banner"> <!-- <div class="contain
Vue3.0组件—banner轮播图（渐入渐隐效果）
前端菜鸟
09-19 4711
①组件图片切换有三种方式，第一种是图片两边按钮切换，第二种是点击图片下方小横条切换，第三种是自动切换；②子组件props的属性：listBanner（播放的图片源）、interval（图片播放的间隔时间）、 autoSwitc（是否自动播放banner）、 setHeight（banner的高度）；③给切换图片的标签添加ref，改变ref属性中的opacity，切换透明度，达到图片渐隐渐显的效果，再给对应标签样式中添加`transition-duration: 1.5（片透明度切换的时间）
CSS进阶——制作热词以及banner效果
最新发布
Gilpin30的博客
11-15 332
CSS进阶——制作热词以及banner效果
纯css实现banner图轮播且放大缩小100%居中显示
qq_69555866的博客
06-07 2714
纯css实现banner图轮播且放大缩小100%居中显示 效果展示： 通过对css代码的运行，在浏览器内实现了bannar图的100%居中轮播，由于本人是一个技术小白，在某些 方面表达的不是太过清除，欢迎各位批评指正。......
banner图片通用设置
qq_41515821的博客
12-12 1031
banner图片通用设置 html代码： <!--banner图--> <div class="banner"> <div class="tu"> <img src="图片的路径"> </div> </div> CSS代码： .banner{height:380px;overflow:hidden;position...
html如何设置banner,css设置banner图自适应的方法
weixin_30546201的博客
06-17 4471
css设置banner图自适应的方法发布时间：2021-04-15 09:46:55来源：亿速云阅读：76作者：小新这篇文章给大家分享的是有关css设置banner图自适应的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。在css中，可以使用“background-size”设置banner图自适应，语法“background-size:cover”；其中cover是...
纯html+css制作banner轮播图
满怀热情
08-05 2854
应用css3高级特效 translateX,一般的滑动轮播图都是在水平方向上的滑动，原理是：在一个盒子里面把所需用到的图片放里面，进行float浮动 ，经过浮动后的元素是没有的间隙的，然后在装图片的盒子外边再外套一个盒子，进行溢出隐藏over-flow:hidden。装图片的盒子宽度是与所有图片的宽高一直，外套盒子宽高与一张banner图一致。/* 显示一张图片的宽高 *//*所有图片总宽度 *//* 图片不换行 */.........
页面头部banner动画效果
weixin_30312563的博客
05-30 487
<style>.gofirst_w1920{ height:825px; overflow:hidden; background:url(http://img14.360buyimg.com/cms/jfs/t5047/174/1365291527/300533/83ca39e1/58f03b5eNa6f01cec.jpg) no-repeat top center;}...
精通Div+CSS 3.0：网页布局实战与案例分析
本书通过理论与实践相结合的方式，深入浅出地讲解了CSS样式的基础知识和应用技巧，帮助读者掌握Div+CSS布局的核心技能。" 在网页设计中，Div（Division）是一种HTML元素，常用于组织和分隔页面内容，而CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佳美不ERROR

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值