首页 > 其他分享 >前端必学-40个精选案例实战-案例4-仿B站导航条案例【基础样式】

前端必学-40个精选案例实战-案例4-仿B站导航条案例【基础样式】

时间:2024-01-30 14:23:11浏览次数:25  
标签:width color 必学 40 height 案例 background border CSS

image.png

交互方式:CSS样式和HTML的交互方式

image.png

  • CSS是控制html的,我们需要选中元素再进行控制
  • CSS的常见使用方式分别是行间式、内嵌式与外链式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 样式</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <style>
        #leo {
            background-color: red;
        }
        
        #sky {
            background-color: yellow;
        }
        
        #demo {
            background-color: aqua;
        }
    </style>
</head>

<body style="background-color: orange;">
    <div style="background-color: green;">123</div>
    <div id="leo">1234</div>
    <div id="sky">bbb</div>
    <div id="blue">456</div>
    <!-- 行间式最优先级最高的 -->
    <div id="demo" style="background: blue;">demo</div>
</body>

</html>

运用CSS基本样式设定案例宽高

image.png
如果是span的话,给它调整宽高是没有用的

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素宽高</title>
    <Style>
        #leo {
            background: orange;
            width: 200px;
            height: 500px;
        }
        
        #span {
            width: 3000px;
            height: 4000px;
            background-color: red;
        }
    </Style>
</head>

<body>
    <div id="leo">
        12345
    </div>
    <span id="span">123456</span>
</body>

</html>

运用CSS的群组选择器来控制B站导航的一群元素

群组选择器:

image.png
标签选择器:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class</title>
    <style>
        .abc {
            background-color: orange;
        }
        
        #leo {
            background-color: red;
        }
        
        .bbb {
            background-color: green;
        }
        
        div {
            background-color: slategrey;
        }
    </style>
</head>

<body>
    <div class="abc" id="leo">
        第一个元素
    </div>
    <div class="abc">
        第二个元素
    </div>
    <div class="bbb">
        第三个元素
    </div>
    <div>
        第四个元素
    </div>
</body>

</html>

运用 CSS的基本样式设定文字的行高、对齐的样式

image.png

  • CSS中我们可以使用text-align样式来设定文字的左中右对齐
  • CSS中我们可以使用line-height样式来设定文字的上下行高。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字宽高</title>
    <style>
        .leo {
            width: 147px;
            height: 60px;
            background: #f6f7f9;
            text-align: center;
            line-height: 60px;
        }
        
        .sky {
            width: 147px;
            height: 64px;
            background: gray;
            /* 设定文字的左中右对齐 */
            text-align: center;
            /* 来设定文字的上下行高。 该值由到上边距*2+文字高度得出*/
            /* line-height 等于文字的高度,那么该文字就在中间的中心 */
            line-height: 38px;
            /* 设置文字高度 */
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="leo">
        舞蹈
    </div>
    <div class="sky">
        哈哈
    </div>
</body>

</html>

运用CSS的基本样式设定元素的边框

image.png

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字边框</title>
    <style>
        .leo {
            width: 147px;
            height: 60px;
            background: #f6f7f9;
            border-left-width: 5px;
            border-left-style: solid;
            border-left-color: green;
            border-right-width: 5px;
            border-right-style: dashed;
            border-right-color: red;
        }
        
        .sky {
            width: 147px;
            height: 60px;
            background: gray;
            border: 5px solid red;
        }
        
        .blue {
            width: 147px;
            height: 60px;
            background: gray;
            border: 5px solid red;
            border-left-color: green;
            border-right-color: white;
            border-bottom-color: white;
            border-top-color: white;
        }
    </style>
</head>

<body>
    <div class="leo">
        舞蹈
    </div>

    <div class="sky">
        鬼畜
    </div>


    <div class="blue">
        开心
    </div>
</body>

</html>

运用CSS的基本样式设定元素的圆角

image.png

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角</title>
    <style>
        .leo {
            width: 147px;
            height: 60px;
            background: #f6f7f9;
            text-align: center;
            line-height: 60px;
            border: 2px solid #f3f3f5;
            border-radius: 10px;
        }
        
        .sky {
            width: 100px;
            height: 100px;
            border: 5px solid black;
            border-radius: 10px 20px 30px 40px;
        }
        
        .blue {
            width: 100px;
            height: 100px;
            border: 5px solid red;
            border-top-left-radius: 30px;
            border-top-right-radius: 40px;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 60px;
        }
        
        .abc {
            width: 100px;
            height: 100px;
            background: orange;
            /* 设置圆 - 为正方形宽度高度的一半 */
            border-radius: 50px;
        }
    </style>
</head>

<body>
    <div class="leo">
        舞蹈
    </div>

    <div class="sky">

    </div>
    <div class="blue"></div>
    <div class="abc"></div>

</body>

</html>

深入CSS集选择器

CSS层级选择器
image.png

标签:width,color,必学,40,height,案例,background,border,CSS
From: https://www.cnblogs.com/xiaochenNN/p/17996989

相关文章

  • 前端必学-40个精选案例实战-案例2-前端必备技能-PS网页切图
    5大图片类型,在网页中的展示方式图片种类图片一般情况下分为两类,一类为像素图,一类为矢量图像素图是由一颗颗像素点组成,如果放大看,会看到像素点矢量图一般是由软件生成,如果放大看,不会产生像素点PS新建保存新建快捷键为Ctrl加n,或者使用菜单功能另存为ctrl(command)加s,或者使......
  • P4098 [HEOI2013] ALO
    [HEOI2013]ALO题目描述WelcometoALO(ArithmeticandLogisticOnline)。这是一个VRMMORPG,如名字所见,到处充满了数学的谜题。现在你拥有\(n\)颗宝石,第\(i\)颗宝石有一个能量密度,记为\(a_i\),这些宝石的能量密度两两不同。现在你可以选取连续的一些宝石(必须多于一个)进行......
  • 前端必学-40个精选案例实战-案例1-仿百度图文列表实战
    最终呈现效果理解img标签的作用与效果img标签:前端网页的图片展示标签,单标签,英文非缩写为image常用属性为地址、宽度与高度常见的后缀格式为jpg、jpeg、png、gif等<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Com......
  • SQL变量数据加工在Java规则引擎中的应用案例分析
    SQL变量加工SQL加工背景,在决策配置过程中,一些复杂的逻辑或模型可通过自定义SQL脚本编写创建数据变量,通过SQL脚本可以便捷的从数据库中取数,并且自定义SQL支持传参,可满足更复杂多变的数据加工处理。注意,SQL变量加工和算子编排加工的方式不同,SQL变量加工依赖于对应数据源的服务器的性......
  • 算法模板 v1.5.1.20240130
    算法模板v1.1.1.20240115:之前的历史版本已经不可寻,创建了第一份算法模板。v1.2.1.20240116:删除“编译”-“手动开栈”与“编译”-“手动开O优化”;将“编译”-“CF模板”中的第20行代码cin>>T;注释;删除“读写”及其目录下的内容;删除“图论”-“欧拉图”-“混合图”;删除“图论”-......
  • 英伟达系列显卡大解析B100、H200、L40S、A100、A800、H100、H800、V100如何选择,含架构
    英伟达系列显卡大解析B100、H200、L40S、A100、A800、H100、H800、V100如何选择,含架构技术和性能对比带你解决疑惑近期,AIGC领域呈现出一片繁荣景象,其背后离不开强大算力的支持。以ChatGPT为例,其高效的运行依赖于一台由微软投资建造的超级计算机。这台超级计算机配备了数万个NVIDIA......
  • 英伟达系列显卡大解析B100、H200、L40S、A100、A800、H100、H800、V100如何选择,含架构
    英伟达系列显卡大解析B100、H200、L40S、A100、A800、H100、H800、V100如何选择,含架构技术和性能对比带你解决疑惑近期,AIGC领域呈现出一片繁荣景象,其背后离不开强大算力的支持。以ChatGPT为例,其高效的运行依赖于一台由微软投资建造的超级计算机。这台超级计算机配备了数万个NVIDI......
  • P5400 [CTS2019] 随机立方体 题解
    题目链接点击打开链接题目解法参考cmd的博客好复杂的推式子题,而且三维的对我来说好难想象/ll首先二项式反演,把恰好\(k\)个变成求至少\(i\)个的方案数令极大格子有至少\(i\)个的方案数为\(f_i\),\(R=\min\{n,m,k\}\)特判掉\(k>R\)答案为\(0\)根据二项式反演,答案......
  • docker-compose部署简单案例
    Dockerfile#设置基础镜像FROMpython:3.7#设置环境变量ENVPYTHONUNBUFFERED=1ENVPATH/usr/local/bin:$PATH#设置工作目录WORKDIR/home/lab#复制项目文件到容器中COPY./home/lab/#COPYrequirements.txt/home/lab#安装依赖包(先更新pip,换源,再安装包)......
  • 算法模板 v1.4.2.20240129
    算法模板v1.1.1.20240115:之前的历史版本已经不可寻,创建了第一份算法模板。v1.2.1.20240116:删除“编译”-“手动开栈”与“编译”-“手动开O优化”;将“编译”-“CF模板”中的第20行代码cin>>T;注释;删除“读写”及其目录下的内容;删除“图论”-“欧拉图”-“混合图”;删除“图论”-......