四、常用样式讲解二

最新推荐文章于 2024-06-17 09:00:23 发布
最新推荐文章于 2024-06-17 09:00:23 发布
阅读量492 收藏
点赞数
分类专栏： HTML5+CSS 文章标签： css css3 前端 HTML html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42710036/article/details/129005171
版权

文章目录

一、常用样式讲解二

1.1 元素隐藏

如何让一个元素隐藏
1、不定义颜色 占用空间
2、display: none 不占用空间
3、visibility: hidden 占用空间
4、opacity: 0 透明度 占用空间
5、height: 0 不占用空间
6、transform: scal(0) 缩放 占用空间，不管缩小还放大，空间还是原来大小 css3

1.2 二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .nav{
            width: 900px;
            height: 80px;
            margin: 0 auto;
            background-color: #0d0e24;
        }
        .nav>li{
            float: left;
            color: white;
            font-size: 20px;
            line-height: 80px;
            text-align: center;
            width: 100px;
            cursor: pointer;
        }
        .nav>li:hover>ul{
            display: block;
        }
        .nav>.one:hover{
            color: orange;
        }
        .nav>li>ul{
            width: 100px;
            height: 280px;
            background-color:aquamarine;
            display: none;
        }
        .nav>li>ul>li{
            color: white;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

    </style>
</head>
<body>
    
    <ul class="nav">
        <li class="one">游戏资料
            <ul>
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li>爆料站</li>
                <li>世界观体验站</li>
                <li>游戏壁纸</li>
            </ul>
        </li>
        <li class="one">内容中心
            <ul>
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li>爆料站</li>
                <li>世界观体验站</li>
                <li>游戏壁纸</li>
            </ul>
        </li>
        <li class="one">赛事中心
            <ul>
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li>爆料站</li>
                <li>世界观体验站</li>
                <li>游戏壁纸</li>
            </ul>
        </li>
        <li class="one">百态王者
            <ul>
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li>爆料站</li>
                <li>世界观体验站</li>
                <li>游戏壁纸</li>
            </ul>
        </li>
        <li class="one">社区互动
            <ul>
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li>爆料站</li>
                <li>世界观体验站</li>
                <li>游戏壁纸</li>
            </ul>
        </li>
        <li class="one">玩家支持
            <ul>
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li>爆料站</li>
                <li>世界观体验站</li>
                <li>游戏壁纸</li>
            </ul>
        </li>
        <li class="one">IP新游
            <ul>
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li>爆料站</li>
                <li>世界观体验站</li>
                <li>游戏壁纸</li>
            </ul>
        </li>
    </ul>
    
    
</body>
</html>

1.3 相对定位和绝对定位

定位(position)：解决一个元素在页面当中或者容器当中实现任意一个位置摆放的问题。
属性: position
值：
position: static 静态定位默认值
position: relative 相对定位
相对定位的特点：
1、添加完相对定位的元素可以通过方位值来进行位移。
postion: relative;
top: 100px;
2、相以定位不脱离文档流它位移的时候之前的位置还是被占用的状态。
3、位置的参照物是自己之前的位置。

position: absolute 绝对定位
1、绝对定位会脱离常规文档流。会出现类似浮动的效果。
2、绝对定位参照物是有定位属性的父容器，如果父容器没有则向上找，没找到就是浏览器。
3、一般我们给子元素设定绝对定位，那么父元素设置相对定位。

position: fixed 固定定位（浏览器定位）
参照物是浏览器。

position: sticky 粘性定位
特点：像相对定位一样会占用页面空间，当进行滑动时会像固定定位一样按照某个值来进行定位。
导航吸顶效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .nav{
            width: 100%;
            height: 40px;
            background-color: black;
            position: fixed;
            opacity: 0.5;
        }
        .nav li{
            float: left;
            width: 20%;
            font-size: 14px;
            color: white;
            line-height: 40px;
            text-align: center;
        }
        .nav li:hover{
            background-color: orange;
        }
        .imgbox img{
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>加粗</li>
        <li>倾斜</li>
        <li>标题</li>
        <li>删除线</li>
        <li>无序</li>
    </ul>
    <div class="imgbox">
        <img src="./images/1.jpeg" alt="">
        <img src="./images/2.jpeg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpeg" alt="">
    </div>
</body>
</html>

1.4 定位的特殊情况

1、给多个元素添加定位（相对、绝对、固定）
a 给相对定位添加
都有相对定位的时候在层级显示的关系上后面的会盖住前面
z-index属性可以来进行元素之间层级显示的权重，值越大越靠前，可以取值为负，默认为0
b 给所有元素添加绝对定位
添加完后会脱离文档流，会重叠在一起
z-index属性可以来进行元素之间层级显示的权重，值越大越靠前，可以取值为负值。
c 固定定位所有元素添加后
像绝对定位一样会叠在一起然后通过zindex来进行切换
2、绝对定位和固定定位的区别
绝对定位如果超出页面可以通过滚动条滑动看到，固定定位是基于浏览器无法观看
3、当添加完定位后margin 0 auto 不好使了。
4、当设定绝对定位后宽度自适应填充的效果不能实现需要定义具体的宽度。
5、定位效果的编写
a、让一个盒子宽300 高300，位置为浏览器的中心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: orange;
            position: fixed;
            top: 50%;
            margin-top: -150px;
            left: 50%;
            margin-left: -150px;
        }
        
    </style>
</head>
<body>
    <div class="box">

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

b、让一个在一个盒子的正中心是赤
1、给父容器添加相对定位
2、四个方位归0
top: 0;
left: 0;
right: 0;
bottom: 0;
margin auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .box{
            width: 1180px;
            height: 365px;
            margin: 0 auto;
            position: relative;
        }
        .box .nav{
            width: 100px;
            height: 365px;
            background-color: pink;
            float: left;
        }
        .box .nav li{
            font-size: 14px;
            color: white;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }
        .box .nav li:hover{
            background-color: orange;
        }
        
        .box .nav li:hover .xmgw,.box .nav li:hover .xmsc,
        .box .nav li:hover .xmyx,.box .nav li:hover .xmui{
            display: block;
        }

        .box .banner{
            display: block;
            float: left;
        }
        .xmgw,.xmsc,.xmyx,.xmui{
            width: 800px;
            height: 365px;
            background-color: chartreuse;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 100px;
            display: none;
        }

    </style>
</head>
<body>
    <div class="box">
         <ul class="nav">
            <li>小米官网
                <div class="xmgw"></div>
            </li>
            <li>小米商城
                <div class="xmsc"></div>
            </li>
            <li>小米影像
                <div class="xmyx"></div>
            </li>
            <li>MIUI
                <div class="xmui"></div>
            </li>
            <li>Lot</li>
            <li>云服务</li>
         </ul>
         <img class="banner" src="./images/小米.png" alt="">
    </div>
</body>
</html>

注意行级元素，块级元素，行块级元素，定位子绝父相。

1.5 表格

表格的作用：用来显示数据，以前可以用来进行布局
基本语法
table 代表一个表格
tr 代表行
td 代表列

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

表格的属性(table tr td)
table的属性
border=“1” 边框属性
width=“300px” 表格的宽度 px可以不加，默认就是px,也可以用百分比
height=“200px" 表格的高度 不能使用百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
</head>
<body>
    <table border="1" width="600px" height="300px" align="center">
        <tr>
            <td>我是一个兵</td>
            <td>来自老百姓</td>
        </tr>
        <tr>
            <td>打倒了日本狗强盗</td>
            <td>消灭了蒋匪军</td>
        </tr>
    </table>
</body>
</html>

1.6 表格的css属性

border : 1px solid #008000;
border-spacing: 10px ; 单元格之间的间距
border-collapse: collapse; 细线边框
table-layout: auto
单元格跟着内容扩展，不会溢出，每次加载要进行表格大小计算，浏览器来重新渲染。
table-layout: fixed
固定宽度，浏览器不需要重新计算，数据多单元格装不下就会溢出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .tb1,.tb2,.tb3,.tb4,.tb5,.tb6, h2{
            margin: 0 auto;
            text-align: center;
        }
        .tb1,.tb2,.tb3,.tb4{
            width: 300px;
            height: 100px;
            border-collapse: collapse;
        }
        .tb1{
            border: 1px solid black;
        }
        .tb1 td, .tb2 td{
            border: 1px solid black;
        }
        .tb2{
            border: 2px solid black;
        }
        .tb3{
            /* 线要精一点才能体现出double */
            border: 5px double black;
        }
        .tb3 td{
            border: 3px double black;
        }
        .tb4{
            /* 
            border-spacing：一个值；代表水平方向和垂直方向的间距是一样的 
            注意：只有在 边框独立border-collapse: separate时才能用
             */
            border-collapse: separate;
            border-spacing: 20px;
        }
        .tb4 td{
            border: 1px solid black;
        }
        .tb5{
            width: 300px;
            height: 100px;
            margin: 0 auto;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }
        .tb6{
            width: 300px;
            height: 300px;
            border: 3px solid black;
            border-spacing: 15px;
            /* 内容为空的单元格隐藏 */
            empty-cells: hide;
        }
        .tb6 td{
            background-color: aqua;
        }
        

    </style>
</head>
<body>
    <h2>细线表格</h2>
    <table class="tb1">
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>
    <h2>粗线表格</h2>
    <table class="tb2">
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>
    <h2>双线表格</h2>
    <table class="tb3">
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>
    <h2>宫字格</h2>
    <table class="tb4">
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>

    <h2>单线表格</h2>
    <table class="tb5" rules="rows">
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>

    <h2>日历表格</h2>
    <table class="tb6">
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

1.7 表格中新增的标签

分组标签
thead 表格的头部
tfoot 表格的底部
tbody 表格的主体
如果我们没有创建tbody，浏览器会创建一个
一个表格只能有一个头部和一个尾部，但可以有多个主体。

永恒的宁静
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Android UI 常用控件讲解
CodingEnding的博客
03-07 3776
Android系统提供了种类繁多的控件，很多的用法都很简单。但是由于控件的多样性，偶尔也容易忘记控件的一些细节问题。因此，本文将总结、讲解一些常用控件的用法和技巧。本文的内容包括：CheckBox、RadioButton、ToggleButton、Switch、ProgressBar、SeekBar、RatingBar、Spinner、ImageButton。 CheckBox ...
HTML常用标签及CSS常用样式
m0_63564182的博客
06-12 1363
HTML常用标签及CSS常用样式
IntelliJ IDEA 常用设置讲解
勿忘初心
07-02 3498
本篇内容为大家提供的是IntelliJ IDEA 使用教程中的IntelliJ IDEA 常用设置讲解，IntelliJ IDEA是java语言开发的集成环境，IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。 。感兴趣的同学可以参考学习下，具体内容
TableauBI常用图形讲解
qq_41821132的博客
10-26 1159
tableau问题总结 目录读取数据的方式 读取数据的方式 数据读取分为两去种： 甘特图：展示和分析某个项目的开始、截止日期，多用于对项目日期的管理。也可用于比如：观察分析某个群体的人，研究公司的固定资产等随时间的变化。 标靶图：条形图的一种变形，又称子弹图。主要用来显示任务的实际执行与预设目标的对比情况。 盒须图：用来显示一组数据分散情况的统计图，又称盒形图和箱线图。 瀑布图：用来阐述多个元素的积累效果，可以描述一个初始值在受到一系列正值或负值的影响后是怎么变化的。 直方图： 帕累托图...
前端常用布局大全——细致讲解
qq_44197554的博客
01-07 3580
作为一名前端开发者，每天都在和浏览器打交道，而浏览器中展示的网页需要做的很美观，并且可以吸引住用户浏览网页，提升用户体验是很重要的，所以不可避免的就要用到各种各样的布局。今天就来列举一下各种常用布局以及实现方法。...
Win32常用API讲解
weixin_33701251的博客
10-30 8278
初讲 MessageBox 函数作用：弹出一个对话框，典型的模态型对话框函数原型：int WINAPI MessageBox(HWND hWnd, LPCTSTR lpText, LPCTSTR lpCaption, UINT uType) 参数含义： hWnd：该消息框的父窗口句柄，如果此参数为NULL，则该消息框没有父窗口lpText...
xlsxwriter 单元格样式讲解
Likianta 的博客
08-09 9225
如何设置单元格样式 示例如下: import xlsxwriter book = xlsxwriter.Workbook( filename='./test.xlsx', options={ # 全局设置 'strings_to_numbers': True, # str 类型数字转换为 int 数字 'strings_to_urls': False, # 自动识别超链接 'constant_memory': False, # 连续内
CSS常用滤镜讲解
IT_SunFei的博客
03-08 3091
上了点年纪的人一般见过胶卷相机，照片的底片那种效果其实就是图片反转效果。旋转成新的对应颜色。通过设置grayscale(%)将图片转换成灰度图片,值可以是小数和百分数.默认 0。为图像设置高斯模糊,值越大越模糊, 默认是0,既不模糊. 值的单位是。当值超过100%时完全转换成灰度图片,当值为0% 图像无变化。该函数的值为0-1之间的数字或者百分比，默认值为0。所谓色相旋转，就是指将图像中的各种颜色按照给定的角度在。,图像的对比度更加强,意味着图片的鲜艳度更强。图片更加鲜艳了 白的更白,黑的更黑。
Bootstrap常用布局样式
热门推荐
橘猫吃不胖的博客
01-16 1万+
Bootstrap常用布局样式1 内容布局1.1 标题类1.2 文本类1.3 列表类2 代码和图文布局2.1 代码样式2.2 图文样式3 表格布局4 辅助样式4.1 添加或移除边框4.2 设置边框颜色 1 内容布局 1.1 标题类 在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。下面对标题类相关样式进行讲解。 在浏览网页时最先关注的就是文章的标题，Bootstrap和普通的H
SpringMVC中常用注解（案例讲解）
『愚』的博客
01-25 5834
SpringMVC中常用注解RequestParamRequestBodyPathVaribale先了解下REST 风格 URLRequestHeaderCookieValueModelAttribute修饰的方法有返回值修饰的方法没有返回值SessionAttribute RequestParam 说明 作用： 把请求中指定名称的参数给控制器中的形参赋值。 属性： value：请求参数中的名称。 required：请求参数中是否必须提供此参数。默认值：true。表示必须提供，如果不提供将报错。 代码示
css样式总结，仅样式相关，整理大部分样式与参数讲解
05-04
适合新手及后期查漏补缺使用，包含了大部分实战样式及其常用参数，含意思讲解
js 获取元素的具体样式信息getcss(实例讲解)
12-11
2、使用window.getComputedStyle(当前操作的元素对象，当前元素的伪类【一般我们不用伪类写null】)这个方法获取所有经过浏览器计算过的样式 所有经过浏览器计算过的样式：只要当前的元素标签可以在页面中呈现出来，...
vue基本语法讲解.pdf
05-11
Vue 基本语法讲解 一、 Vue 项目重点概念介绍 1. 单页面应用程序：单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序将所有的功能局限在...
【Android】常用对话框大全Demo
06-19
讲解了Dialog的样式，使用可参考： 1、https://binyouwei-comeon.blog.csdn.net/article/details/125182197 2、https://binyouwei-comeon.blog.csdn.net/article/details/125192455 3、...
MFC树形控件创建实例讲解
12-24
MFC树形控件创建实例讲解 MFC树形控件是MFC应用程序中常用的控件之一，用于显示树形结构的数据。MFC树形控件的使用能够帮助开发者快速构建树形结构的界面，提高开发效率。 知识点1：新建MFC应用程序项目 在Visual ...
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 427
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
发博客了发博客
最新发布
Cherry_garcia的博客
06-17 153
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。-- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。-- 1.IE盒子模型||怪异盒子模型 box-sizing: border-box;-- 1.标准盒子模型 box-sizing: content-box;弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 382
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
day02 CSS基础
Liang_z_的博客
06-11 945
今日内容：CSS概念及基本使用、box模型、元素显示方式
超链接详细讲解
05-26
除了 href 属性之外，<a> 标签还可以使用其他属性来控制链接的行为和样式，例如： - target：指定链接打开的方式，可以是 _self、_blank、_parent、_top 等； - title：指定链接的提示信息，鼠标悬停时会显示； - ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

永恒的宁静

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

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

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

打赏作者

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

抵扣说明：

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

余额充值