Web前端学习6

最新推荐文章于 2024-04-22 15:36:45 发布

404我只想睡觉

最新推荐文章于 2024-04-22 15:36:45 发布

阅读量121

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/weixin_71337144/article/details/128044629

版权

@TOC

一、fixed和sticky及zlndex

fixed固定定位
1.使元素完全脱离文档流
2.使内联元素支持宽高(让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.相对整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位
在指定的位置，进行黏性操作。
z-index定位层级
默认层级为0
嵌套时候的层级问题

 <style>
        /* 相对定位 */
        #box1{ width: 100px;height: 100px;background-color: aqua;}
        #box2{ width: 100px;height: 100px;background-color: blue;position: relative;left: 100px;top: 100px;}
        #box3{ width: 100px;height: 100px;background-color: yellow;}
        /* 绝对定位 */
        #box4{ width: 100px;height: 100px;border: 1px black solid;margin: 200px;position: relative;}
        #box5{ width: 10px;height: 10px;background-color: red;position: absolute;right: 2px;bottom: 0;}
        /* 固定定位 ，随着整个浏览器窗口进行偏移，不随浏览器滚动条的影响*/
        body{ height: 2000px;}
        #box6{ width: 300px;height: 100px;border: 1px black solid;margin: 200px;position: relative;}
        #box7{ width: 100px;height: 100px;background:red;position: fixed;left: 0;top:0;}
        /* 粘性定位 */
        body{ height: 2000px;}
        #box8{background-color: aqua;position:fixed;top: 0;}
        /* 重叠定位 */
        #box9{ width: 100px;height: 100px;background: red;position: absolute;z-index: 0;}
        #box10{ width: 100px;height: 100px;background: blue;position: absolute;left: 50px;top: 50px;z-index: -1;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4">
        <div id="box5"></div>
    </div>
    <div id="box6">
        <div id="box7">疫情结束</div>
    </div>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <div id="box8">疫情结束</div>
    <p>222222</p>
    <p>222222</p>
    <p>222222</p>
    <p>222222</p>
    <p>222222</p>
    <p>222222</p>
    <p>222222</p>
    <div id="box9"></div>
    <div id="box10"></div>  
</body>

二、定位实现下拉菜单

<style>
        *{ margin: 0; padding: 0;}
        ul{ list-style: none;}
        #menu{ width: 100px; height: 30px; margin: 20px auto; border: 1px black solid; position: relative;}
        #menu ul{ width: 100px; border: 1px black solid; position: absolute; left: -1px; top: 30px; background: white;
        display: none;}
        #menu:hover ul{ display: block;}
        #menu ul li:hover{ background: gray;}
        p{ text-align: center;}
    </style>
</head>
<body>
    <div id="menu">
        卖家中心
        <ul>
          <li>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落测试段落</p>
</body>

效果：
在这里插入图片描述

三、定位实现居中和装饰点

<style>
        #box1{ width: 300px; height: 300px; border: 1px black solid; position: relative;}
        #box2{ width: 100px; height: 100px; background: red; position: absolute; left: 50%; top: 50%; margin: -50px 0 0
            -50px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

效果：
在这里插入图片描述

四、css添加省略号

width
必须有一个固定的宽
white-space: nowrap
不让内容折行
overflow : hidden
隐藏溢出的内容
text-overflow : ellipsis
添加省略号

测试文字测试文字测试文字测试文字测试文字

效果： ![在这里插入图片描述](https://img-blog.csdnimg.cn/f278a04371e14d2788efa8e97b6517e7.png)

五、css精灵及好处

CSS Sprite
特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及的所有零星图片都包含到一张大图中去加载。
好处
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

产品中心

六、css圆角设置

border-radius
给标签添加圆角

<style>
         #box{ width: 200px; height: 200px; background: red; border-radius: 100px;}
        /#box{ width: 300px; height: 300px; background: red; border-radius: 50%;}
        #box{ width: 300px; height: 300px; background: red; border-radius: 10px 20px 30px 40px;}
        #box{ width: 300px; height: 300px; background: red; border-radius: 20px / 40px;} 
        #box{ width: 300px; height: 150px; background: red; border-radius: 150px 150px 0 0;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>

效果：
在这里插入图片描述
半圆效果：

七、标签

1、strong与b、em与i

strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
区别：strong和em是具备语义化的，而b和i是不具备语义化的。

<body>
    <strong>文本strong</strong>
    <b>文本b</b>
    <em>文本em</em>
    <i>文本i</i>
</body>

效果：
在这里插入图片描述

2、引用标签

blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标签

<body>
    <p>1111111111111111111111 <blockquote>22222222222</blockquote> <q>333333333333333</q>
<br><abbr title="World Health Organization">WHO</abbr>成立于1948年
<br>什么什么公司 <address>地址：某某地</address> <cite>某某文章</cite></p>
</body>

效果：
在这里插入图片描述

3、iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）
在这里插入图片描述
应用场景：数据传输、共享代码、局部刷新、第三方介入等。

<style>
        #a1{width: 100%;height: 200px;position: absolute;display: none;}
        #a2{position: fixed;}
        #a3{ float: right;}
</style>
</head>
<body>
    <iframe id="a2" src="https://www.baidu.com/" frameborder="1" width="300" height="300"></iframe>
    <iframe id="a3" src="https://www.taobao.com/" frameborder="0" width="400" height="400"></iframe>
</body>

效果：
在这里插入图片描述

4、br与wbr标签

br标签表示换行操作，而wbr标签表示软换行操作。

<body>
    <p>11111 1111111 1111111 aaaaaaa aaaa <br> aaaaa aaaaaa  aaaaaa aaaaaa aaaaaaaaa</p>
    <p>aaaaaaa aaaaaa 111111111a aaaaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaa aaaa aaaabbbbcccccc aaaaa aaaaaa  11111111111 aaaaaa aaaaaaaaa</p>
    <p>aaaaaaa aaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaa aaaa aaaa<wbr>bbbb<wbr>cccccc aaaaa 111111111111  aaaaaa aaaaaa aaaaaaaaa</p>
</body>

5、pre标签与code标签

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是吧文本变成等宽字体，但它暗示着这段文本是源程序代码。

6、map标签与area标签

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

<img src="" alt="" usemap="#star">
    <map name="star">/*五角星*/
            <area shape="rect" coords="123 123 321 321" href="#" alt="">矩形，coords左上角和右上角坐标
        <area shape="circ" coords="100 100 50" href="#" alt="">圆形，coords中心点坐标和半径
        <area shape="poly" coords="111 111 222 222 333 333 444 444 555 555" href="#" alt="">多边形，coords各点坐标
    </map>

7、embed与object标签

embed和object都能表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器。

object元素需要配合param元素一起完成。

<body>
    <embed src="./" type="">
    <object>
        <param name="movie" value="./">
    </object>
</body>

8、audio与video标签

audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。

为了能够支持多个备选文件的兼容支持，可以配合source标签。
loop：循环
autoplay：自动播放

<body>
    <audio src="./" controls loop autoplay></audio>
                            （循环播放）  (自动播放)
    <video>
        <source src="./.mp4">
        <source src="./.ogv">
    </video>
    <div style="position: relative;height: 300px;overflow: hidden;">
        <video style="min-height: 100%;min-width: 100%;" loop>
            <source src="./mp4" type="video/mp4">
            <source src="./webm" type="video/webm">
        </video>
    </div>
</body>

9、文字注解与文字方法

ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。

bdo标签可覆盖默认的文本方向。

<style>
        span{direction: rtl;unicode-bidi: bidi-override;}
    </style>
</head>
<body>
    <ruby>
        寒<rt>han</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">创作中心</bdo>创作中心
    </p>
    <p>
        <span>创作中心</span>创作中心
    </p>
</body>

效果：
在这里插入图片描述

10、扩展link标签

1、添加网址标题栏前的小图标：

<link rel="icon" type="/image/x-icon" href="">

效果如图中橙色部分：
在这里插入图片描述
2、加快访问速度

<link rel="dns-prefetch" href="远程IP地址">

11、扩展meta标签

1、定义可描述的内容及辅助信息

<meta name="description" content="淘宝网提供女装、男装、鞋包、饰品、运动、家居家纺、手机数码、家电、美妆等各品类优质商">
    <meta name="keywords" content="淘宝网提供女装、男装、鞋包、饰品、运动、家居家纺、手机数码、家电、美妆等各品类优质商">
    <meta name="renderer" content="webkit">

2、功能
渲染模式、刷新、缓存

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="3" url="">
    <meta http-equiv="expires" content="">

八、HTML5新语义化标签

网页布局展示：
在这里插入图片描述

header：页眉
在这里插入图片描述

footer：页脚
在这里插入图片描述

main：主体
在这里插入图片描述

hgroup：标题组合
在这里插入图片描述
nav：导航

注：header、footer、main在一个网页中只能出现一次。

<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>

效果：
在这里插入图片描述

article：独立的内容
在这里插入图片描述

aside：辅助信息的内容
在这里插入图片描述

section：区域
在这里插入图片描述

figure：描述图像或视频
figcaption：描述图像或视频的标题部分

<article>
        <section>
            <figure>
                <img src="" alt="">
                <figcaption>标题</figcaption>
            </figure>
        </section>
        <section></section>
        <section></section>
    </article>
    <aside></aside>

datalist：选项列表
details/summary：文档细节/文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本

 <section>
            <input type="text" list="elems">
            <datalist id="elems">
                <option value="a"></option>
                <option value="ab"></option>
                <option value="abc"></option>
                <option value="abbr"></option>
                <option value="apple"></option>
            </datalist>
            <details>
                <summary>HTML</summary>
                <p>超文本标记语言</p>
            </details>
            <progress min="0" max="10" value="8"></progress>
            <meter min="0" max="100" value="80" low="10" high="60"></meter>
            <p>
                今天是<time title="1-1">元旦</time>
            </p>
            <p>
                今天是<mark>元旦</mark>
            </p>
        </section>