CSS3的使用及基本注意说明相关笔记（四）

最新推荐文章于 2021-07-12 19:25:22 发布
最新推荐文章于 2021-07-12 19:25:22 发布
阅读量10w+ 收藏 2
点赞数 1
分类专栏： HTML JS JQUERY HTML5 CSS3 MobileWeb 文章标签： HTML CSS3 JS JQUERY HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jwlLWJ_2018/article/details/80882323
版权

1.使用CSS3来DIY图片i无缝轮播效果：图片大小：126*86

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用css3动画制作自动无缝轮播图</title>
    <style>
        body, ul, li {
            margin: 0;
            padding: 0;
        }

        img {
            border: 0 none;
            vertical-align: top;
        }

        .warp {
            width: 882px;
            /*width: 126px;*/
            height: 86px;
            border: 1px solid #000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
        }

        ul:hover {
            /*动画的播放状态
             使用这个属性能够改变动画的播放状态，
             如动画正在播放时，
             可以通过这个属性，
             让动画暂停一下*/
            animation-play-state: paused;
        }

        ul {
            list-style: none;
            width: 1800px;

            /*动画名称  必写*/
            animation-name: dong;
            /*动画一次所持续的时间  必写*/
            animation-duration: 2000ms;

            /*动画执行的次数（动画重复的次数） 无数次:infinite;*/
            animation-iteration-count: infinite;

            /*动画的方向：normal 全正向，alternate 先正向再反向*/
            animation-direction: normal;

            /*动画结束后保持的状态  backwards(默认值)表示回退到原点
            forwards表示不回到原点，backwards表示动画结束后 保持 动画开始前的状态，
            forwards表示动画结束后 保持 动画结束后状态*/
            animation-fill-mode: backwards;

            /*动画的类型 也就是动画的运动曲线
              linear 表示线性匀速
              ease-in 表示慢慢变快
              ease-in-out 表示先快后慢
              steps(3) 表示每一次动画都是分三步完成(速度就像是一帧一帧的完成的)，
              steps这个属性可以用来做时钟，
              也能够用来做那些 很准确的一帧一帧完成的动画，
              因为steps的每一帧都是瞬间完成的*/
            animation-timing-function: linear;

            /*动画每次执行时延迟的时间*/
            animation-delay: 0s;
        }

        li {
            float: left;
        }

        @keyframes dong {
            from {
            }
            to {
                transform: translate(-882px, 0);
            }
        }


    </style>
</head>
<body>
<div class="warp">
    <ul>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
        <li><img src="images/5.jpg"></li>
        <li><img src="images/6.jpg"></li>
        <li><img src="images/7.jpg"></li>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
        <li><img src="images/5.jpg"></li>
        <li><img src="images/6.jpg"></li>
        <li><img src="images/7.jpg"></li>
    </ul>
</div>
</body>
</html>


2.使用CSS3来DIY立体导航栏效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用css3中的transform制作立体导航栏</title>
    <style>
        body,ul,li {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: deeppink;
        }

        ul {
            width: 900px;
            margin: 100px auto;
            height: 80px;
            list-style: none;
            position: relative;

        }

        ul li {
            width: 180px;
            height: 80px;
            cursor: pointer;
            float: left;
        }

        li span {
            float: left;
            height: 80px;
            background-color: #ccc;

        }

        span.left {
            width: 30px;
            height: 80px;
            transform-origin: left;
        }

        span.center {
            width: 120px;
            height: 80px;
            text-align: center;
            font: 500 20px/80px "Microsoft yehei";
            /*color: white;*/
        }

        span.right {
            width: 30px;
            height: 80px;

            transform-origin: right;
        }

        li:hover span.left {
            transform: skew(0deg, -30deg);
            background-color: #c0c0c0;

        }

        li:hover span.center {
            transform: translateY(-18px);
            text-shadow:5px 5px 3px #333;
            box-shadow: 0 15px 20px -4px #666;
        }

        li:hover span.right {
            transform: skew(0deg, 30deg);
            background-color: #c0c0c0;

        }
        ul::before,ul::after {
            content:"";
            position: absolute;
            z-index: -1;
            /*width: 450px;*/
            width: 30px;
            height: 80px;
            left: -30px;
            /*background-color: #e0e0e0;*/
            background-color: #ccc;
        }
        ul:after {
            left: auto;
            right: -30px;
        }


    </style>
</head>
<body>
<ul>
    <li>
        <span class="left"></span>
        <span class="center">水晶女孩</span>
        <span class="right"></span>
    </li>
    <li>
        <span class="left"></span>
        <span class="center">水晶女孩</span>
        <span class="right"></span>
    </li>
    <li>
        <span class="left"></span>
        <span class="center">水晶女孩</span>
        <span class="right"></span>
    </li>
    <li>
        <span class="left"></span>
        <span class="center">水晶女孩</span>
        <span class="right"></span>
    </li>
    <li>
        <span class="left"></span>
        <span class="center">水晶女孩</span>
        <span class="right"></span>
    </li>
</ul>
</body>
</html>


3.CSS3新增的伸缩布局，主轴方向是从左到右，侧轴方向是从上到下：

◆

display：flex;

默认从左到右，从上到下

◆设置主轴排列方向的方式：，

flex-direction:row;

（默认属性，表示从左至右的排列），

flex-direction:row-reverse;

（表示从右至左的排列），

flex-direction:column;

（表示从上到下的排列），

flex-direction:column-reverse;

（表示从下到的排列），

最重要的是横向排列时，当所有子元素的宽小于父容器的宽时，子元素多宽就是多宽，但是如果所有子元素的宽大于父容器了，那么就会自适应父容器的宽，于是子元素原来的宽就无效了，子元素的宽度就变成父容器除以子容器的个数的值了，当然如果有外边距也会加进去用来计算，纵向排列也是如此，但是如果父容器没有设置高，那就不会自适应父容器的高了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3中的伸缩布局（主轴排列方向的方式）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 400 22px "Microsoft yehei";
            background-color: #eee;
        }

        h3 {
            font-weight: normal;
        }

        section {
            width: 1000px;
            margin: 40px auto;
        }

        ul {
            list-style: none;
            border: 1px solid #ccc;
            background-color: #fff;            height:500px;

        }

        ul li {
            width: 200px;
            height: 200px;
            background-color: #0ff;
            box-sizing: border-box;
            margin: 10px;
        }

        section:nth-child(1) ul {
            overflow: hidden;
        }

        section:nth-child(1) ul li {
            float: left;
        }

        section:nth-child(2) ul {
            display: flex;
        }

        section:nth-child(3) ul {
            display: flex;
            flex-direction: row;
        }

        section:nth-child(4) ul {
            display: flex;
            flex-direction: row-reverse;
        }

        section:nth-child(5) ul {
            display: flex;
            flex-direction: column;
        }

        section:nth-child(6) ul {
            display:flex;
            flex-direction:column-reverse;
        }

        section:nth-child(7) ul {
            text-indent:2em;
            color:#daa520;
        }


    </style>
</head>
<body>
<section>
    <h3>传统布局方式</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>伸缩布局方式 display:flex</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>伸缩布局方式(设置主轴方向的方式) flex-direction:row;（默认属性，表示从左至右的排列）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>伸缩布局方式(设置主轴方向的方式) flex-direction:row-reverse;（表示从右至左的排列）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>伸缩布局方式(设置主轴方向的方式) flex-direction:column;（表示从上到下的排列）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>伸缩布局方式(设置主轴方向的方式) flex-direction:column-reverse;（表示从下到的排列）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>小总结</h3>
    <ul>
        最重要的
        是横向排列时，当所有子元素的宽小于父容器的宽时，子元素多宽就
        是多宽，但是如果所有子元素的宽大于父容器了，那么就会自适应父
        容器的宽，于是子元素原来的宽就无效了，子元素的宽度就变成父容
        器除以子容器的个数的值了，当然如果有外边距也会加进去用来计算
        ，纵向排列也是如此，但是如果父容器没有设置高，那就不会自适应
        父容器的高了。
    </ul>
</section>
</body>
</html>

◆设置主轴对齐的方式：

justify-content:flex-start

（表示对齐方式是从主轴方向开始的地方对齐），

justify-content:flex-end

（表示对齐方式是从主轴方向结束的地方对齐），

justify-content:center

（表示对齐方式是从主轴方向中间的地方对齐），

justify-content:space-round

（表示对齐方式是从主轴方向空间平分），

justify-content:space-between

（表示对齐方式是从主轴方向两端对齐中间的居中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3中的伸缩布局（设置主轴对齐的方式）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 400 22px "Microsoft yehei";
            background-color: #eee;
        }

        h3 {
            font-weight: normal;
        }

        section {
            width: 1000px;
            margin: 40px auto;
        }

        ul {
            list-style: none;
            border: 1px solid #ccc;
            background-color: #fff;            height:500px;

        }

        ul li {
            width: 200px;
            height: 200px;
            background-color: #0ff;
            box-sizing: border-box;
            margin: 10px;
        }

        section:nth-child(1) ul {
            display: flex;
            /*justify :整理*/
            justify-content: flex-start;
        }

        section:nth-child(2) ul {
            display: flex;
            justify-content: flex-end;
        }

        section:nth-child(3) ul {
            display: flex;
            justify-content: center;
        }

        section:nth-child(4) ul {
            display: flex;
            /*space:空间*/
            /*around:四周 周围*/
            justify-content: space-around;
        }

        section:nth-child(5) ul {
            display: flex;
            justify-content: space-between;
        }

    </style>
</head>
<body>
<section>
    <h3>justify-content:flex-start（表示对齐方式是从主轴方向开始的地方对齐）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>justify-content:flex-end（表示对齐方式是从主轴方向结束的地方对齐）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>justify-content:center（表示对齐方式是从主轴方向中间的地方对齐）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>justify-content:space-round（表示对齐方式是从主轴方向空间平分）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>justify-content:space-between（表示对齐方式是从主轴方向两端对齐中间的居中）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

</body>
</html>

◆侧轴对齐的方式：

align-items:flex-start

（表示对齐方式是从侧轴方向开始的地方对齐），

align-items:flex-end

（表示对齐方式是从侧轴方向结束的地方对齐），

align-items:center

（表示对齐方式是从侧轴方向中间的地方对齐），

align-items:baseline

（表示对齐方式是从侧轴方向基线的地方对齐，与flex-start一样），

align-items:stretch

（表示对齐方式是从侧轴方向的以拉伸的方式对齐，只要子元素的高度为auto，那么会自适应父容器的高度，既拉伸）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3中的伸缩布局（设置侧轴对齐的方式）</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 400 22px "Microsoft yehei";
            background-color: #eee;
        }

        h3 {
            font-weight: normal;
        }

        section {
            width: 1000px;
            margin: 40px auto;
        }

        ul {
            list-style: none;
            border: 1px solid #ccc;
            background-color: #fff;
            height: 500px;
        }

        ul li {
            width: 200px;
            height: 200px;
            background-color: #0ff;
            box-sizing: border-box;
            margin: 10px;

        }

        section:nth-child(1) ul {
            display: flex;
            align-items: flex-start;
        }

        section:nth-child(2) ul {
            display: flex;
            align-items: flex-end;
        }

        section:nth-child(3) ul {
            display: flex;
            align-items: center;
        }

        section:nth-child(4) ul {
            display: flex;
            align-items: baseline;
        }

        section:nth-child(5) ul {
            display: flex;
            /*stretch:伸展*/
            align-items:stretch;
        }

        section:nth-child(5) ul li{
            height: auto;
        }


    </style>
</head>
<body>
<section>
    <h3>align-items:flex-start（表示对齐方式是从侧轴方向开始的地方对齐）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>align-items:flex-end（表示对齐方式是从侧轴方向结束的地方对齐）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>align-items:center（表示对齐方式是从侧轴方向中间的地方对齐）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>align-items:baseline（表示对齐方式是从侧轴方向基线的地方对齐，与flex-start一样）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
<section>
    <h3>align-items:stretch（表示对齐方式是从侧轴方向的以拉伸的方式对齐，只要子元素的高度为auto，那么会自适应父容器的高度，既拉伸）</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
&
最低0.47元/天 解锁文章
jwllwj_2018
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
电脑主板资料库 04【转至www.ongood.com.tw】【FreeXploiT收集整理】
FreeXploiT
11-28 8557
MB(主機版)資料 第四頁AWARD BIOS設置(轉貼自BIOS維修網站)　　 只要選擇主功能表相應選項，即可了解相關內容。 　　電腦加電后，系統將會開始POST（加電自檢）過程，當屏幕上出現以下資訊時，按鍵或同時按下++　　[ TO ENTER SETUP BEFORE BOOT.PRESS OR KEY ]　　如果此資訊在您做出反映前就消失了，而您仍需要進入SETUP，請關機后再開機或按機
MIT 线性代数（31—33）读书笔记
Paul_Huang的专栏
04-26 2145
第三十一讲：线性变换及对应矩阵本讲从线性变换这一概念出发，每个线性变换都对应于一个矩阵。矩阵变换的背后正是线性变换的概念。理解线性变换的方法就是确定它背后的矩阵，这是线性变换的本质1 线性变换1.1 定义如何判断一个操作是不是线性变换？ 线性变换需满足以下两个要求： T(v+w)=T(v)+T(w)(1) T(v+w)=T(v)+T(w)\tag{1} T(cv)=cT(v)(2
XMAN选拔赛官方Writeup
zsj2102的专栏
07-20 2万+
XMan选拔赛官方Writeup XMan 2017 Baaa [原理] 栈溢出。 [目的] 盲打栈溢出。 [环境] Ubuntu。 [工具] gdb、objdump、python。 [步骤] 拿到题目，发现并没有给二进制，估计是盲打。nc一下，发现返回了一个地址，我们尝试不同大小payload，最后确定下来大约为72位junk加上16位的地址。 exp from
vue pc端打印二维码
jingruoannan的博客
07-12 38万+
import Vue from "vue"; let a = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAKoCAYAAACvNywJAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF7svQmcZVdV73+6q7tr6Bq6q+fupDN15lETZEgkiIkSME4BgYeAQp78ow/Rv/8HweERnnwk8p5/RP+apwQUkI9IiCI8jRoQ0BDgETAkIWNn6KTn6qGqurrmqv6v7.
VID PID -List of USB ID's(一)
阿Sir问道
02-29 5万+
# # List of USB ID's # # Maintained by Stephen J. Gowdy <linux.usb.ids@gmail.com> # If you have any new entries, please submit them via # http://www.linux-usb.org/usb-ids.html # or send entrie...
CSS3弹性盒模型开发笔记（二）
12-13
本文为大家继续分享CSS3弹性盒模型开发笔记第二篇，之前一篇以及为大家引入了CSS3弹性盒模型的相关介绍，点击查看：CSS3弹性盒模型开发笔记（一） box-flex属性 box-flex属性能够灵活地控制子元素在盒子中的显示空间...
Html\CSS+DIV学习笔记(史上最实用的CSS笔记)
03-09
3. **静态页面**：XHTML+CSS组合形成的静态页面，意味着内容是预先定义好的，没有服务器端动态生成的内容。 4. **表现与结构分离**：内容（HTML）专注于传达信息，结构（HTML标签）使内容逻辑化，CSS则负责视觉设计...
OBLOG 橙色笔记
12-19
在使用"OBLOG 橙色笔记"时，了解基本的HTML、CSS和JavaScript知识将非常有帮助。HTML是构建网页结构的语言，CSS则用于美化网页的外观，而JavaScript用于增加交互性。对于不熟悉这些技术的新手，可以利用在线教程或...
Javascript经典学习笔记
07-29
以下是对标题和描述中提到的知识点的详细说明： 1. **数据类型**：JavaScript拥有五种原始数据类型，包括Undefined、Null、Boolean、Number和String。另外，还有两种复合数据类型：Object和Function。Undefined代表...
html-my-notes:资料库包含我HTML研究资料汇编，包括个人笔记，练习，示例和摘要
04-17
它包含有关HTML的我的个人笔记，练习，见解和摘要，并作为指导和指导我的学习！ :books: 我正在/接受的课程是开发本汇编的基础： 注意：本资料的某些部分已直接从HTML教程进行了翻译。 完整的参考资料在。 指数 ...
ijkplayer实现网络视频流播放
01-22
ijkplayer实现网络视频流播放，优化一部分功能
java调用阿里OCR身份识别接口
weixin_34318326的博客
04-13 14万+
前几天需要用到阿里的OCR接口，中间有踩坑，现在记录下来,已便使用 一.BASE64 OCR调用文档中需要传入BASE64,感谢Apache <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</a...
Oracle数据库资源部署-projec管理资源配置
oradbm的博客
09-18 563
修改system文件 编辑/etc/system文件，添加下行 set noexec_user_stack=1 3.2创建project 检查用户配置文件 #id -p oracle uid=101(oracle) gid=103(oinstall) projid=100(default) 如果是default，则添加proj配置 创建oracle用户的project #projadd –p 1003 group.dba 在/etc/user_attr文件添加一行 oracle::::project=gro
栈的学习
dwdwscott的专栏
09-20 9万+
栈：实质也是一种线性表。只是栈只允许在栈尾添加和删除元素（因此不存在元素的删除与插入等问题）。栈是一种先入后出（FILO）的数据结构,表尾被称为栈顶（top,指向表中最有一个元素的下一位，和vector中的成员函数end()返回的位置相似），表头被称为栈底(base)。一般来说，对栈的操作就是对栈顶的操作。
signature=f9667ae3a5dc60103aa3485a3a871a35,Viewers/yarn.lock at master · OHIF/Viewers · GitHub
weixin_31175771的博客
05-29 5万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1JSONStream@~1.3.1:version "1.3.5"resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a...
signature=a6939fa78126daaf498815fc1602b11a,sculptgl/yarn.lock at master · kilisio/sculptgl · GitHub...
weixin_31854867的博客
05-29 2万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":version "7.5.5"resolved "https://registry.yarnpkg.com/@babel/co...
图片和Base64编码相互转换
weixin_46113920的博客
06-22 7万+
https://www.cnblogs.com/hzhl/articles/14919747.html
Postman测试百度AI翻译接口、接口测试
Figowo丶
12-22 3万+
Postman测试百度AI翻译接口、接口测试
http://95u.free.fr/index.php,Electronic Software Distribution Service
热门推荐
weixin_39632291的博客
03-19 54万+
Content-Type: multipart/related; start=; boundary=----------OH5LlQ9dynBJGqR8E2AiMRContent-Location: https://software.pitt.edu/software/software.aspSubject: =?utf-8?Q?Electronic=20Software=20Distributi...
HTML5+CSS3笔记.docx
最新发布
11-28
...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值