2.4、CSS布局、CSS3过渡与动画

最新推荐文章于 2023-11-10 18:14:22 发布

ShawnYue_08

最新推荐文章于 2023-11-10 18:14:22 发布

阅读量227

点赞数

分类专栏：前端三剑客

本文链接：https://blog.csdn.net/ShawnYue_08/article/details/107155872

版权

前端三剑客专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

CSS布局
CSS3过渡
CSS3动画

CSS布局

overflow属性

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        #overflowtest {
            background-color: green;
            height: 100px;
            padding: 15px;
            border: 1px white solid;
            overflow: scroll;
        }
        #overflowtest > p {
            margin: 0px;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div id="overflowtest">
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    </div>
</body>
</html>

在这里插入图片描述
overflow属性有以下值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

注意: overflow 属性只工作于指定高度的块元素上。

浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 300px;
            margin-left: 60px;
            margin-right: 60px;
            margin-bottom: 20px;
            float: left;
        }
    </style>
</head>
<body>
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img src="img/girl1.jpg" alt="">
    <img src="img/girl2.jpg" alt="">
    <img src="img/girl3.jpg" alt="">
    <img src="img/girl4.jpg" alt="">
    <img src="img/girl1.jpg" alt="">
    <img src="img/girl2.jpg" alt="">
    <img src="img/girl3.jpg" alt="">
    <img src="img/girl4.jpg" alt="">
</body>
</html>

在这里插入图片描述

当图片没有足够的空间就会向下移动。

清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 125px;
            height: 250px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 30px;
            float: left;
        }
        h3:nth-of-type(2) {
            clear: both;
        }
    </style>
</head>
<body>
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img src="img/girl1.jpg" alt="">
    <img src="img/girl2.jpg" alt="">
    <img src="img/girl3.jpg" alt="">
    <img src="img/girl4.jpg" alt="">
    <h3>第二行</h3>
    <img src="img/girl1.jpg" alt="">
    <img src="img/girl2.jpg" alt="">
    <img src="img/girl3.jpg" alt="">
    <img src="img/girl4.jpg" alt="">
</body>
</html>

在这里插入图片描述

浮动的练习

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0px;
        }
        .header {
            background-color: rgb(30, 103, 212);
            color: white;
            text-align: center;
            padding: 15px;
        }
        .footer {
            background-color: rgba(61, 53, 53, 0.856);
            color: white;
            padding: 15px;
        }
        .topmenu {
            list-style-type: none;
            /* 列表的样式类型 */
            margin: 0px;
            padding: 0px;
            background-color: grey;
            overflow: hidden;
        }
        .topmenu li {
            float: left;
        }
        .topmenu li a {
            text-decoration: none;
            text-align: center;
            display: inline-block;
            /* 只有display属性改为块元素，才可以有padding属性 */
            padding: 16px;
            color: white;
        }
        /* 伪类选择器 */
        .topmenu li a:hover {
            background-color: black;
        }
        .topmenu li a.active {
            background-color: green;
        }
        .column {
            float: left;
            padding: 15px;
        }
        .clearfix::after {
            /* 伪元素，工具人，在主体内容的后面插入，没有内容，只是清除浮动 */
            clear: both;
            content: "";
            display: block;
        }
        .sidemenu {
            width: 25%;
        }
        .content {
            width: 75%;
        }
        .sidemenu ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .sidemenu ul a {
            text-align: center;
            text-decoration: none;
            margin-bottom: 4px;
            display: block;
            padding: 8px;
            background-color: gray;
            color: white
        }
        .sidemenu li a:hover {
            background-color: black;
        }
        .sidemenu li a.active {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul class="topmenu">
        <li><a href="#home" class="active">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系我们</a></li>
        <li><a href="#about">关于我们</a></li>
    </ul>

    <div class="clearfix">
        <div class="column sidemenu">
            <ul>
                <li><a href="#flight">The Flight</a></li>
                <li><a href="#city" class="active">The City</a></li>
                <li><a href="#island">The Island</a></li>
                <li><a href="#food">The Food</a></li>
                <li><a href="#people">The People</a></li>
                <li><a href="#history">The History</a></li>
                <li><a href="#oceans">The Oceans</a></li>
            </ul>
        </div>

        <div class="column content">
            <div class="header">
                <h1>The City</h1>
            </div>
            <h1>Chania</h1>
            <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts,
                the old town and the modern city.</p>
            <p>You will learn more about responsive web pages in a later chapter.</p>
        </div>
    </div>

    <div class="footer">
        <p>底部文本</p>
    </div>
</body>

</html>

最初的HTML页面

在这里插入图片描述
添加CSS修饰后

在这里插入图片描述

水平 & 垂直对齐

元素居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: content-box;
            /* 默认盒子模型，指定元素的width和height为内容的宽度和高度，不包括内边距、边框 */
        }
        div {
            width: 500px;
            line-height: 20px;
            margin: auto;
            border: 2px green solid;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>水平居中块级元素如div，可以使用margin:auto</div>
</body>
</html>

在这里插入图片描述

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        div {
            width: 500px;
            line-height: 20px;
            margin: auto;
            border: 2px green solid;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>水平居中块级元素如div，可以使用margin:auto</div>
</body>
</html>

在这里插入图片描述
文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

img {
    display: block;
    width: 60%;
    margin: auto;
}

垂直居中

使用line-height。

伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2::before {
            content: "哈喽";
        }
        h2::after {
            content: "我在你后面";
        }
    </style>
</head>
<body>
    <h2>在标题二的前面插入一条内容。</h2>
</body>
</html>

导航栏

导航栏=链接列表

下面的例子中的代码是垂直和水平导航栏使用的标准代码。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1、清除列表样式，清除边距和填充 */
        ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
</body>

</html>

垂直导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 200px;
            background-color: #f1f1f1;
        }
        ul li a {
            display: block;
            /* 行内标签转换为块标签 */
            text-decoration: none;
            padding: 10px 20px;
            /* 上下 左右 */
            color: black;
        }
        ul li a:hover {
            /* 鼠标移动到选项上 */
            color: white;
            background-color: black;
        }
        ul li a.active {
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#home" class="active">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
</body>
</html>

在这里插入图片描述

水平导航栏

有两种方法创建横向导航栏。使用**内联(inline)或浮动(float)**的列表项。

ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
li {
    display:inline;
}

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            background-color: rgb(39, 38, 38);
            overflow: hidden;
        }
        ul li {
            float: left;
        }
        ul li a {
            text-decoration: none;
            color: white;
            text-align: center;
            display: block;
            padding: 15px 30px;
            /* 上下 左右 */
        }
        ul li a:hover {
            background-color: black;
        }
        ul li a.active {
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
      </ul>
</body>
</html>

在这里插入图片描述

固定导航栏

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

下拉菜单

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a{
            display: inline-block;
            color: white;
            text-align: center;
            padding: 15px 30px;
            text-decoration: none;
        }

        li a:hover{
            background-color: #111;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            width: 123px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: red
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li><a class="active" href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li class="dropdown">
            <a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content">
                <a href="#">链接 1</a>
                <a href="#">链接 2</a>
                <a href="#">链接 3</a>
            </div>
        </li>
    </ul>
</body>

</html>

CSS3过渡

过渡div的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: red;
            transition-property: width,height;
            /* 规定应用过渡的 CSS 属性的名称 */
            transition-duration: 1s;
            /* 定义过渡效果花费的时间。默认是 0 */
            transition-delay: 0s;
            /* 规定过渡效果何时开始。默认是 0 */
            transition-timing-function: linear;
            /* 规定过渡效果的时间曲线。默认是 "ease" */
        }
        div:hover {
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>

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

旋转过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: auto;
            width: 100px;
            height: 50px;
            border: 1px greenyellow solid;
            background-color: greenyellow;
            text-align: center;
            line-height: 25px;
            transition: transform 1s;
        }
        
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>CSS3 <br>过渡</div>
</body>
</html>

位移过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: red;
            transition: transform 1s;
        }
        div:hover {
            transform: translate(100px, 50px);
            /* 位移动画，100px：左右 50px 上下 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

缩放过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: red;
            transition: transform 1s;
        }
        div:hover {
            transform: scale(0.5);
        }
    </style>
</head>
<body>
    <div>

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

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-top: 50px;
        }
        div:first-child {
            width: 150px;
            height: 75px;
            background-color: red;
        }
        div:nth-child(2) {
            width: 200px;
            height: 100px;
            background-color: orange;
        }
        div:nth-of-type(3) {
            width: 300px;
            height: 150px;
            background-color: yellow;
        }
        div:last-child {
            width: 400px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

在这里插入图片描述

CSS3动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

from-to

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: red;
            animation-name: myfirst;
            /* 规定 @keyframes 动画的名称 */
            animation-duration: 2s;
            /* 规定动画完成一个周期所花费的秒或毫秒。默认是 0 */
            animation-timing-function: linear;
            /* 规定动画的速度曲线。默认是 "ease" */
            animation-iteration-count: 4;
            /* 规定动画播放的次数 */
            animation-direction: alternate;
            /* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
        }
        @keyframes myfirst {
            /* 自定义动画的关键字@keyframes */
            from {
                background-color: red;
            }
            to {
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
    <div>

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

%形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: red;
            animation-name: mysecond;
            animation-duration: 4s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            /* 无穷的次数 */
        }
        @keyframes mysecond {
            0% {
                background-color: red;
                top: 0px;
                left: 0px;
            }
            25% {
                background-color: yellow;
                top: 0px;
                left: 200px;
            }
            50% {
                background-color: blue;
                top: 200px;
                left: 200px;
            }
            75% {
                background-color: green;
                top: 200px;
                left: 0px;
            }
            100% {
                background-color: red;
                top: 0px;
                left: 0px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

漂浮广告页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#out {
            width: 150px;
            height: 300px;
            background-image: url(../img/girl1.jpg);
            background-size: cover;
            /* 铺满整个div */
            position: absolute;
            animation-name: ad;
            animation-duration: 10s;
            /* 周期 */
            animation-iteration-count: infinite;
            /* 无穷次 */
            animation-play-state: running;
            animation-direction: alternate;
        }
        div#out:hover {
            /* 当鼠标悬浮时,暂停动画 */
            animation-play-state: paused;
            /* 修改鼠标箭头为小手 */
            cursor: pointer;
        }
        #out > #in {
            /* 子元素选择器 */
            height: 18px;
            color: white;
        }
        /* 动画 */
        @keyframes ad {
            25% {
                background-image: url(../img/girl2.jpg);
                background-size: cover;
                top: 100px;
                left: 100px;
            }
            50% {
                background-image: url(../img/girl3.jpg);
                background-size: cover;
                top: 200px;
                left: 200px;
            }
            75% {
                background-image: url(../img/girl4.jpg);
                background-size: cover;
                top: 300px;
                left: 300px;
            }
            100% {
                background-image: url(../img/girl5.jpg);
                background-size: cover;
                top: 400px;
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <div id="out">
        <div id="in">
            <span onclick="closeAd()">关闭</span>
        </div>
    </div>

    <script type="text/javascript">
        function closeAd() {
            document.getElementById("out").style.display = "none";
        }
    </script>
</body>
</html>

ShawnYue_08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.4、CSS布局、CSS3过渡与动画

文章目录CSS布局overflow属性浮动水平 & 垂直对齐伪元素导航栏下拉菜单CSS3过渡过渡div的宽度和高度旋转过渡位移过渡缩放过渡伪类选择器CSS3动画from-to%形式漂浮广告页CSS布局overflow属性CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
复制链接

扫一扫