初学入门 html/css 的有用知识点简单总结（三）（css部分补充内容）

最新推荐文章于 2024-11-11 00:01:33 发布

Et2nity

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量250

点赞数 1

分类专栏： css实践项目文章标签： css html 前端 javascript chrome

本文链接：https://blog.csdn.net/Eternity_matt/article/details/108139996

版权

css实践项目专栏收录该内容

2 篇文章 1 订阅

订阅专栏

学习目标：

补充几个css常用到的语句段，代码段。

往期链接初学入门 html/css 的有用知识点简单总结（一）

初学入门 html/css 的有用知识点简单总结（二）

学习内容：

1.变形

2.动画

3.响应式布局

4.背景不动的页面滑动

学习时间：

学习时间大概每周5天到6天，早上八点钟开始到晚上10点左右，学习成果不错

学习内容：

一. 变形

1.各个变形效果

transform: scale(2); 变形放大（2是放大缩小的倍数为两倍）

transform: rotate(-30deg); 变形旋转的效果，给一个正值表示顺时针旋转，负值标志逆针旋转

transform: skew(30deg,15deg); 变形的扭曲

transform: skewX(); transform: skewY(30deg); 关于x y轴的变形扭曲

transform: translate(-100px,-100px); 第一个值是x轴的平移距离第二个值是y轴的平移距离

2.盒子水平垂直居中

第一种方法

.son{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

第二种方法

.fa{

display: flex;

align-items: center;

justify-content: center;

}

3.各个变形的过度效果

transition: transform 2000ms ease 2s;

1. 需要有过渡效果的css属性值（必须）

2.完成过渡需要的时间 (必须)

3.过渡的运行曲线

4,过渡延迟开始的时间

4.实现下拉菜单效果

<!DOCTYPE html>
<html>
<head>

  <title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
  <meta charset="utf-8">
  <style>
  .dropdown {
      position: relative;
      display: inline-block;
  }

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

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

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>W3Cschool教程</p>
    <p>www.w3cschool.cn</p>
  </div>
</div>

</body>
</html>

4.实现小米logo的切换效果


<!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>
        * {
            margin: 0px;
            padding: 0px;
            list-style: 0px;
        }

       .nav_logo {
            position: absolute;
            top: 22px;
            left: 0px;
            display: block;
            width: 55px;
            height: 55px;
            overflow: hidden;
            background-color: #ff6700;
            text-align: left;
            position: absolute;

        }

        .nav_logo img {
            height: 55px;
            width: 55px;
        }

        .nav_logo div {
            height: 55px;
            width: 55px;
        }

        .navlogo_left {
            position: absolute;
            left: 0px;
            top: 0px;
            transition: left 0.6s ease;
        }

        .navlogo_right {
            position: absolute;
            left: 55px;
            top: 0px;
            transition: left 0.6s ease;
        }

        .nav_logo:hover .navlogo_left {

            left: -55px;
        }

        .nav_logo:hover .navlogo_right {

            left: 0px;
        }


        }
    </style>
</head>

<body>
     <div class="nav_logo">
                <div class="navlogo_left">
                    <img src="./imgs/mi-logo.png" alt="">
                </div>
                <div class="navlogo_right">
                    <img src="./imgs/mi-home.png" alt="">
                </div>

            </div>


</body>

</html>

二. 动画

1.制作动画效果

          动画是css3中具有颠覆性的特征之一可以通过设置多个节点来精确控制一组或者一个动画，

常常用来实现复杂的动画效果，想对于过度，可以实现更多的变化更多的空，连续自动变化等效果

定义动画：

定义动画向左移动200px

@keyframes move {

from {

transform: translate(0px, 0px);

}

to {

transform: translate(200px, 0px);

}

1.使用动画效果

div {

width: 200px;

height: 200px;

background-color: red;

animation: move3 5s ease infinite alternate;

}

第一个值动画的名字

动画执行的时间

动画运行的曲线，默认是ease

规定动画运行的次数默认1次 infinite 表示无限次

规定动画是否逆向播放。默认是Nomal 如果想要逆向播放，就设置alternate

规定动画结束以后是不是回到起始点，默认值是backwards 如果想要停在终点

可以设置forwards保持结束状态

实例定义音响效果：

<!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>
        .fa {
            width: 30px;
            height: 30px;
            border-radius: 100px;
            margin: 100px auto;
            position: relative;
            background-color: red;
        }

        .box1 {
            width: 30px;
            height: 30px;
            border-radius: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid red;
            animation: yuan 1s infinite;
        }

        @keyframes yuan {
            0%{
                width: 30px;
                height: 30px;
            }
            
            50%{
                width: 40px;
                height: 40px;
                opacity: .5;
            }
            100%{
                width: 50px;
                height: 50px;
                opacity: .1;
            }
        }
       
    </style>
</head>

<body>
    <div class="fa">
        <div class="box1"></div>
    </div>

</body>

</html>

三. 响应式布局

1.设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

以下实例演示了使用viewport和没使用viewport在移动端上的效果：

2.响应式网页布局案例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.header {
    border: 1px solid red;
    padding: 15px;
}
.menu {
    width: 25%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.main {
    width: 75%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="main">
<h1>The City</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>Resize the browser window to see how the content respond to the resizing.</p>
</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>
        .box1{
            margin: 500px 0;
            height: 400px;
            width: 100vw;
            background-image: url('./image/banner_pc.jpg');
            background-attachment: fixed;
            display: block;
        }

        .box2{
            margin: 500px 0;
            height: 400px;
            width: 100vw;
            background-image: url('./image/banner2.jpg');
            background-attachment: fixed;
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

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

图片自己选择路径插入，我这只能做个范例，请大家见谅，以后有要补充的会继续进行补充。