HTML5 + CSS3

已于 2022-10-07 16:27:18 修改
阅读量2.3k 收藏 2
点赞数 6
分类专栏： HTML5 文章标签： HTML5 css css3
于 2021-04-10 11:42:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45895026/article/details/115568982
版权

文章目录


在这里插入图片描述

内容持续更新中…

小程序开发基础

html常用的布局标签

<!-- html5 -->
<!DOCTYPE html><!-- 去掉变成HTML -->
<!-- 网页的根标签 -->
<html lang="en">
<!-- 头部标签 -->

<head>
    <!-- 配置网页信息 -->
    <meta charset="UTF-8">
    <!-- 配置协议 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>Document</title>
</head>
<!-- body控制页面内容区 -->

<body>
    <!-- 每个标签在浏览器渲染的时候都会被浏览器赋予特性 -->
    <!-- h1 - h6都是标题标签（区别是h1最大 -->
    <h1>hello world</h1>
    <!-- 段落标签（用来展示一段文字内容） -->
    <p>我的第一个网页，三周之后我就可以完成第一个小程序了。</p>
    <p>嘎嘎嘎嘎个</p>
    <!-- 直接写标签名字 src:图片的来源 source
    alt:  当src是小的时候  加载alt   alter:提示-->
    <img src="海贼王.jpg" alt="图片未连接">
    
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F228841cf026b2a4af2624ac362733a8f86c63ccb.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620612333&t=cb5b26b6676574a2023c81ecca742f2e" alt="俺老孙去西天取经了">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180119%2Fbc406eb87edf4e62b615a352ce8b9701.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620612457&t=8ffa4985f27799329cf46c8ed85982d8" alt="ONE piece">
    <img src="貂蝉.jpg" alt="貂蝉掉线了"><!-- 图片网上下载-->
    <!-- 超链接标签 href:让a标签跳转的位置 -->
    <a href="http://www.taobao.com">淘宝网</a>
    <!-- hr  修饰线段 -->
    <a href="http://www.zhihu.com">知乎</a>
    <a href="http://www.JD.com">京东</a>
    <a href="http://www.acwing.com">AcWing</a>
    
    <hr>
    <!-- u1: 无序列表 unorder list -->
    <ul>
        <!-- 列表项 -->
        <li>html标签</li>
        <li>css样式</li>
        <li>javascript</li>
    </ul>

    <ol>
        <!-- 列表项 -->
        <li>html标签</li>
        <li>css样式</li>
        <li>javascript</li>
    </ol>
    <p style="color: darkgoldenrod;">111111！</p>
    <h1 style="color: darkred;">22222</h1>
</body>

</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <!-- style标签用来设置元素的层叠样式表 -->
    <style>
        /* 标签名{} >>> 为对应的标签来设置样式 */
        span{
            /* 样式名：样式值 */
            color: gold;
            font-size: 25px;
            font-family: "仿宋";
            /* 字体粗细 */
            font-weight:   bold;
            /* 首行缩进两字符 1em = 16px */
            text: indent 2em;
            /* 背景颜色 */
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <!-- 标签内style属性（行内样式） C
    color(样式名)：darlcyan（样式值）-->
    <span style="color: darkcyan;">该标签只是显示内容,没有任何语义</span>
    <!-- 换行标签 -->
    <br>
    <!-- font-size:字体大侠：px代表的是单位（像素） -->
    <span style="font-size: 20px;">这个span的字体要比上面的字体大</span>
    <br>
    <span style="font-family: '仿宋';">这和span的文字类型与上面的两个文字类型不同</span>
    <br>
    <span style="color: darkturquoise;font-size: 30px; font-family:'正楷'; " >上述三个文本样式都可以再该标签中呈现</span>
    <hr>
    <hr>
    <hr>
    <span>这个span的内容将采用style标签内的样式</span>
    <P>不变色</P>
</body>
</html>

常用css选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            font-size: 25px;
            font-weight: bold;
        }
        /* id值：id选择器的查找 */
        #red{
            color: red;
            
        }
        #blue{
            color: blue;
        }
        #green{
            color: green;
        }
        .test{  
            color: hotpink;
        }
        /* 常用的选择器：
        标签名选择器：选择所有的标签
        id选择器：选择对应id的元素，如果没有则不生成
        class类名选择器：适合多个标签采用同一套样式的时候使用
         */
    </style>
</head>

<body>
    <!-- $读取 -->
    <!-- id：标签的标识 -->
    <!-- 同一个文档不能出现重复的 id -->
    <span id="red">1</span>
    <span id="blue">2</span>
    <span id="green">3</span>
    <hr>
    <!-- 标签名字{内容 $代表要加载几个} -->
    <p>第1个p标签</p>
    <!-- class类型选择器：多个标签次要采用同一套样式 -->
    <p class="test">第2个p标签</p>
    <p class="test">第3个p标签</p>
    <p class="test">第4个p标签</p>
    <p>第5个p标签</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      /* 被Style标签包围的范围是CSS环境 可以写CSS代码 */
      p {
        color: red;
      }
      .f20 {
        font-size: 20px;
      }
      /* ID样式 */
      #p4 {
        background-color: pink;
        font-size: 24px;
        font-weight: bolder;
        font-style: italic;
        font-family: "华文彩云";
      }
      /* 组合样式 */
      div .f32 {
        font-size: 32px;
        font-family: "黑体";
      }

      div p {
        color: blue;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <!-- <p><font color="red">这里是段落1</font></p>  已淘汰 -->
    <p class="f20">类样式</p>
    <p id="p4">id样式</p>

    <div >
      <p><span>hello</span></p>
      <span class="f32">world</span>
      <p class="f32">!!!</p>
    </div>
  </body>
</html>

块元素以及盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块标签块元素</title>
    <style>
        /* 样式选择器之间使用，分隔开 */
        html, body{
            height: 100%;
            /* 浏览器默认带有8px的margin值 */
            margin: 0;
        }
        #boxOne{
            /* 可以使用百分比也可使用具体像素 
            块元素不设置宽度的话, */
            width: 400px; 
            /*h200 + tab快速生成 */
            height: 200px;
            
            background-color: indianred;
            /* 一个值：代表的是同时为四个方向来设置外间距 
            两个值：第一个只代表的是上下，第二个值代表左右
            四个值：上，右，下，左
            */

            /* margin的左右设置成auto */
            margin: 50px auto;
            /* 背景图片 url：图片的链接地址*/
            background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg");
            /* 设置背景的尺寸 */
            background-size: 100% 100%;
            /* 设置背景是否重复  默认是repeat */
            background-repeat: no-repeat;
        }
        img{
            width: 100%;
            height: 200px;
        }
        #box{
            width: 300px;
            height:300px;
            background-color: lightcoral;
            /* 居中设置 */
            margin: 50px auto;
            /* 边框宽度 */
            border-width: 10px;
            /* 边框的样式 */
            /* border-style:dotted; */
            /* border-color: lightseagreen; */
            border-left: greenyellow dotted 10px;
            border-right: indigo double 10px;
            border-top: lightseagreen groove 10px;
            border-bottom: maroon inset 10px;
            /* 复合属性 */
            border: solid 10px red;
            /* 设置边框圆角的值  可以设置百分比 也可以设置像素*/
            border-radius: 20px ;
        }
    </style>
</head>
<body>
    <!-- 块标签div: 收纳一定量的元素标签  
    块标签可以设置大小-->

    <div id="boxOne">
        <!-- <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg" alt="连接错误"> -->
        <a href="">这是图片介绍</a>
    </div>

    <!-- # + id名字   会自动生成对应的加id的div -->
    <div id="box"></div>
</body>

</html>

案例：简易相册

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>块标签块元素</title>
    <style>
      /* 样式选择器之间使用，分隔开 */
      html,
      body {
        height: 100%;
        /* 浏览器默认带有8px的margin值 */
        margin: 0;
      }
      #boxOne {
        /* 可以使用百分比也可使用具体像素 
            块元素不设置宽度的话, */
        width: 400px;
        /*h200 + tab快速生成 */
        height: 400px;

        background-color: indianred;
        /* 一个值：代表的是同时为四个方向来设置外间距 
            两个值：第一个只代表的是上下，第二个值代表左右
            四个值：上，右，下，左
            */

        /* margin的左右设置成auto */
        margin: 50px 80px;
        /* 背景图片 url：图片的链接地址*/
        background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg");
        /* 设置背景的尺寸 */
        background-size: 100% 100%;
        /* 设置背景是否重复  默认是repeat */
        /* background-repeat: no-repeat; */
        border: solid 10px red;
        border-radius: 50%;
      }
      #box {
        width: 400px;
        height: 400px;
        margin: 50px auto;

        background-color: rosybrown;
        background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h814%2F20180107%2F5bed-fyqincv0959698.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620951440&t=ccfbab30ac8d7ca2271a8bc1decbec73");

        background-size: 100% 100%;

        border-radius: 50%;
        border: solid 15px pink;
      }

      #boxTwo {
        width: 400px;
        height: 400px;
        background-color: indianred;

        margin: 50px 50px 50px 1000px;
        border-width: 30px;

        border: solid 10px purple;
        border-radius: 50%;

        background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.imgmini.eastday.com%2Fmobile%2F20180326%2F20180326185557_50bded96bbff45614383af1ceb2a689c_4.jpeg&refer=http%3A%2F%2F00.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620639650&t=b2ebdf239d0c6b5dbdd367b30424fae4");

        background-size: 100% 100%;
        /* background-repeat: no-repeat; */
      }
    </style>
  </head>
  <body>
    <!-- 块标签div: 收纳一定量的元素标签  
    块标签可以设置大小-->

    <div id="boxOne">
      <!-- <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg" alt="连接错误"> -->
      <!-- <a href="">这是图片介绍</a> -->
    </div>

    <!-- # + id名字   会自动生成对应的加id的div -->
    <div id="box"></div>
    <div id="boxTwo"></div>
  </body>
</html>

制作风车动画

图片素材
在这里插入图片描述
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风车</title>
    <style>
        /* div是块元素，可以设置宽高 */
        div{
            width: 800px;
            height: 500px;
            background-color:darksalmon;
            margin: 100px auto;

            background-image: url("背景.png");
            /* 参数为先宽度再宽度 */
            background-size: 100% 100%;
            /* 定位 
            relative:相对定位 元素可以在自身原有的位置基础上进行微调,
            然后为子元素的定位提供参照
            */
            position:relative;
            /* left top bottom right 根据自己的实际需求选择*/
            /* left: 100px;
            top: 50px; */
            /*animation适用于任何标签 animation: zhuan 1s 5 linear; */


        }
        /* nth-child:查找当前元素所在的父元素下面的第n个子元素 */
        img:nth-child(1){
            width: 300px;
            height:300px;
            /* absolute绝对定位，参照父元素的位置定义 */
            position: absolute;
            left: 82px;
            top:  70px;
        }
        img:nth-child(2){
            width: 200px;
            height:200px;

            position: absolute;
            left: 312px;
            top: 255px;
        }
        img:nth-child(3){
            width: 200px;
            height: 200px;
            position: absolute;
            left: 463px;
            top: 205px;
        }
        :nth-last-child(1)
        {
            color: red;
        }
        /*为三个图片添加动画 */
        img{
            /* 动画名称 */
            /* animation-name: zhuan; */
            /* 动画的时间  s秒数*/
            /* animation-duration: 0.5s; */
            /* 控制动画的次数 */
            /* animation-iteration-count: 5; */
            /* 控制动画的执行速率 */
            /* animation-timing-function: ease-in; */
            /* 复合属性 */
            animation: zhuan 1s infinite linear;
            /* 动画适用于任何标签 例如div */
        }
        /* 动画模块 */
        @keyframes zhuan{
            0%{
                /* transfrom变形动画属性 deg代表度数 */
                transform:rotate(0deg);
            }
            100%
            {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
   <!-- 能展示出来草地，同时处在屏幕正中间 -->
   <div>
       <img src="风叶.png" alt="" >
       <img src="风叶.png" alt="" >
       <img src="风叶.png" alt="" >
   </div>
   <div>
       <span>123</span>
       <p>456</p>
   </div>
</body>
</html>

Flex布局语法基础

容器属性:
1.display:flex>>>打开弹性布局
2.flex-direction>>>设置容器的主轴方向
3.flex-wrap:设置项目的换行方式
4.justify-content:项目在主轴的排列方式
5.align-items:项目在交叉轴的对齐方式
6.align-content:项目在交叉轴的排列方式.

项目属性:
1.order:排序，值越大越靠后
2.grow:容器有富裕空间时，单一项目放大的比例。
3.shrink:与grow相反。
4.basis:项目在主轴上的尺寸
5.flex:2~~4的复合属性。
6.align-self:单个项目有与其他项目不一样的对齐方式。

flex-direction属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局基础</title>
    <style>
        #box
        {
            /* dispaly元素展示的样式 */
            display: flex;
            /* flex项目默认按照主轴排列 */
            /* 项目在主轴的排列方向 */
            
            /* 
            row（默认值）：主轴为水平方向，起点在左端。
            row-reverse：主轴为水平方向，起点在右端。
            column：主轴为垂直方向，起点在上沿。
            column-reverse：主轴为垂直方向，起点在下沿。
            */
            flex-direction: column-reverse;
        }
        /* nth-child()  section 200 200  红 绿 黄 */
        section:nth-child(1){
            width: 200px;
            height: 200px;
            color: red;
            background-color: rgb(230, 147, 39);
        }
        section:nth-child(2){
            width: 200px;
            height: 200px;
            color: green;
            background-color: cadetblue;
        }
        section:nth-child(3){
            width: 200px;
            height: 200px;
            color:blue;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- div是容器 section是项目 -->
        <!-- section是区域标签 -->
        <section>1</section>
        <section>2</section>
        <section>3</section>
        
    </div>
</body>
</html>

flex-wrap属性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex-wrap属性</title>
    <style>
        #box {
            /* flex-direction: column-reverse; */
            display: flex;
            /* nowrap（默认）：不换行。
            wrap：换行，第一行在上方。
            wrap-reverse：换行，第一行在下方。
             */
            flex-wrap: wrap;

            /*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
            flex-flow: column-reverse wrap;
        }

        section {
            width: 200px;
            height: 150px;
            margin-bottom: 50px;

        }

        /*2n 代表偶数  */
        section:nth-child(2n) {
            background-color: cornflowerblue;
        }

        section:nth-child(2n + 1) {
            background-color: cyan;
        }
    </style>
</head>

<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
        <section>11</section>
        <section>12</section>
    </div>

</body>

</html>

justify-content属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-content属性</title>
    <style>
        #box{
            display: flex;
            flex-flow: row wrap;
            /* 

                flex-start（默认值）：左对齐
                flex-end：右对齐
                center： 居中
                space-between：两端对齐，项目之间的间隔都相等。
                space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
            */
            justify-content: flex-start;
        }

        section{
            width: 200px;
            height: 150px;
            margin-bottom: 50px;
        }
        section:nth-child(2n){
            background-color: lightcoral;
        }
        section:nth-child(2n +1){
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
        <section>11</section>
        <section>12</section>
    </div>
</body>
</html>

align-items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
        }
        /*
        块元素的宽度如果不设置会继承父元素的宽度
         高度会依据填充的元素的高度来设置自身的高度 */
        #box{
            display: flex;
            width: 1000px;
            height: 800px;
            border: solid 1px red;
            margin: 0 auto;
            /* 主轴对其方式 */
            justify-content: center;
            /* 交叉轴对齐方式 */
            /* 

            flex-start：交叉轴的起点对齐。
            flex-end：交叉轴的终点对齐。
            center：交叉轴的中点对齐。
            baseline: 项目的第一行文字的基线对齐。
            stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

            */
            align-items: center;
        }
        /* 表示box下面的section标签 */
        #box section{
            width: 200px;
            height: 200px;
            background-color: lightseagreen;
            border-radius: 50%;
            /* 文本对齐方式 */
            text-align: center;

            font-size: 50px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
    </div>
</body>
</html>

align-content

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content</title>
    <style>
        #box {
            height: 1000px; 
            /* dispaly打开弹性布局 */
            /* flex-direction设置容器的主轴方向; */
            /* flex-wrap设置项目的换行方式 */
            /* justify-content项目在主轴的排列方式 */
            /* align-items项目在交叉轴的对齐方向 */
            /* align-content项目在交叉轴上的对齐方向 */
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            /*  
                flex-start：与交叉轴的起点对齐。
                flex-end：与交叉轴的终点对齐。
                center：与交叉轴的中点对齐。
                space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
                space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
                stretch（默认值）：轴线占满整个交叉轴。 */
            align-content: space-between;
        }

        section {
            width: 200px;
            height: 200px;
            margin-bottom: 50px;
        }

        section:nth-child(2n) {
            background-color: royalblue;
        }

        section:nth-child(2n +1) {
            background-color: salmon;
        }
    </style>
</head>

<body>
 
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
        <section>11</section>
        <section>12</section>
    </div>
</body>

</html>

案例1：二饼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
        }
        /*
        块元素的宽度如果不设置会继承父元素的宽度
         高度会依据填充的元素的高度来设置自身的高度 */
        #box{
            display: flex;
            width: 300px;
            height: 500px;
            border: solid 1px red;
            margin: 0 auto;
            /* 主轴对其方式 */
            flex-direction: column;
            justify-content: center;
            /* 交叉轴对齐方式 */
            margin: 50px auto;
            /* 
            

        flex-start：交叉轴的起点对齐。
        flex-end：交叉轴的终点对齐。
        center：交叉轴的中点对齐。
        baseline: 项目的第一行文字的基线对齐。
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

     */
            align-items: center;
        }
        /* 表示box下面的section标签 */
        #box section:nth-child(1){
            width: 200px;
            height: 200px;
            background-color: lightseagreen;
            border-radius: 50%;
            /* 文本对齐方式 */
            text-align: center;
            margin-bottom: 20px;
            font-size: 50px;
            color: white;
        }
        #box section:nth-child(2){
            width: 200px;
            height: 200px;
            background-color: rgb(52, 20, 235);
            border-radius: 50%;
            /* 文本对齐方式 */
            text-align: center;

            font-size: 50px;
            color: white;
        }
       
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
    </div>
</body>
</html>

order

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-self属性</title>
    <style>
        #box{
            display: flex;
            height: 800px;
            
        }
        section:nth-child(1){
            background-color: teal;
            flex-basis: 200px;
            height: 300px;
            align-self: flex-start;
        }
        section:nth-child(2){
            background-color:violet;
            flex-basis: 200px;
            height: 200px;
        }
        section:nth-child(3){
            background-color: green;
            flex-basis: 100px;
            height: 200px;
             /* 单一项目的对齐方式 */
             align-self: flex-end;
        }
        section:nth-child(4){
            background-color: blue;
            flex-basis: 150px;
            height: 200px;
            align-self: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
    </div>
</body>
</html>

shrink属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=d, initial-scale=1.0">
    <title>Order2</title>
    <style>
          #box{
            display: flex;
            /* width: 1000px; */
            height: 800px;
            border: solid 2px black;
            margin:0 auto;
        }
        section{
            width: 500px;
            height: 500px;
            background-color: rgb(99, 243, 195);
            color: bisque;
            text-align: center;
            font-size: 50px;
            
           
            /* 行高：字体所占空间垂直度高度 */
            line-height: 300px;
        }
        section:nth-child(1){
            background-color: yellowgreen ;
            flex-shrink: 1;
        }
        section:nth-child(2){
            background-color: cyan;
            flex-shrink: 0; 
        }
        section:nth-child(3){
            background-color: tomato;
            flex-shrink: 1;
        }
       

        section:nth-child(4){
             /* 复合属性  grow shrink basis */
             /* flex:1 0 250px; */
             
        }
       
    </style>
</head>
<body>
    <div id="box">
       <section>1</section>
       <section>2</section>
       <section>3</section>
       <section>4</section>
       <section>5</section>



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

alian-self属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-self属性</title>
    <style>
        #box{
            display: flex;
            height: 800px;
            
        }
        section:nth-child(1){
            background-color: teal;
            flex-basis: 200px;
            height: 300px;
            align-self: flex-start;
        }
        section:nth-child(2){
            background-color:violet;
            flex-basis: 200px;
            height: 200px;
        }
        section:nth-child(3){
            background-color: green;
            flex-basis: 100px;
            height: 200px;
             /* 单一项目的对齐方式 */
             align-self: flex-end;
        }
        section:nth-child(4){
            background-color: blue;
            flex-basis: 150px;
            height: 200px;
            align-self: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
    </div>
</body>
</html>

案例2：微信小窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wechat</title>
    <style>
        html, body{
            height: 100%;
        }
        #box{
            width: 1000px;
            height: 800px;
            display: flex;
            flex-direction:row;
            
            border:solid 10px aqua ;
           
            justify-content: space-between;
            
            align-content: flex-end;

        }
        div{
            align-self: flex-end;
        }
      
        
    </style>
</head>
<body>
    <div id="box">
        <div>
             
            <section><img src="朋友圈.jpg" alt="" width="100px" height="100px"></section>
            <section><a href="./1.html">朋友圈</a></section>
        </div>
        
        <div>
            <section><img src="通讯录.jpg" alt=""width="100px" height="100px"></section>
            <section><a href="./2.html">通讯录</a></section>
            
        </div>
        
        <div>
            <section><img src="首页.jpg" alt=""width="100px" height="100px"></section>
            <section><a href="./3.html">设置</a></section>
        </div>
       
        <div>
            <section><img src="设置.jpg" alt=""width="100px" height="100px"></section>
            <section><a href="./4.html">首页</a></section>
        </div>
        
        
    </div>
    
</body>
</html>

待续…

Charming Boy
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
晚上看了会html写了一个简单的不能再简单的网页…
Code is to be happy
11-05 1146
水调歌头—苏轼 function show() { var date = new Date(); //日期对象 var now = ""; now = date.getFullYear() + "年"; //读英文就行了 now = now + (date.ge
HTML5+CSS3
09-17
该文档是HTML5+CSS3的总结笔记，把工作中的常用的知识点个记录下来，仅供学习和工作的参考资料，不做商业用途，版权归本人所有，侵权必究！
day2-html
zqzb1111的博客
04-17 481
.poem{    color:white;    margin:100px;    padding:100px;    font-size:30px; } 水调歌头·明月几时有       明月几时有，把酒问青天。不知天上宫阙，今夕是何年。    我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？    转朱阁，低绮户，照无眠。不应有恨，何事长
CSS竖字——水调歌头
weixin_33788244的博客
06-11 860
[URL]http://zh.wikisource.org/w/index.php?title=%E6%B0%B4%E8%AA%BF%E6%AD%8C%E9%A0%AD_(%E6%98%8E%E6%9C%88%E5%B9%BE%E6%99%82%E6%9C%89)[/URL] &lt;div style="font-size:xx-large;font-weight:bold;line-h...
HTML5
yezishuibuxing的博客
09-23 360
HTML5的简单学习
html5+css3+js登录页面
最新发布
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML5+CSS3网页设计模板(30例)zip
03-15
HTML5和CSS3是现代网页设计的两大核心技术，它们为创建功能丰富、视觉吸引人的网页提供了强大的工具。这个"HTML5+CSS3网页设计模板(30例)"压缩包文件包含了一系列现成的设计模板，适合初学者和专业设计师用于学习和...
HTML5+CSS3网站设计基础教程 源代码.7z
11-14
HTML5和CSS3是现代网页设计的两大核心技术，它们为创建功能丰富、视觉效果出色的网站提供了强大的工具。这个"HTML5+CSS3网站设计基础教程 源代码.7z"压缩包包含了学习这两项技术的全套源代码，对于初学者来说是一份...
HTML5+CSS3期末大作业——城市简介源码
05-05
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉效果吸引人的网页提供了强大的工具。在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个...
css1.rar_css水调歌头
09-24
html 中 css的基础知识 在html中最重要的就是css样式表 这里讲解的是css的基础知识
authorware7.02_水调歌头_源文件
10-30
用authorware7.02制作的一小课件。
Discuz!代码,HTML代码大全.
06-23
Discuz!代码大全！！HTML代码大全！！
水调歌头flash课件
11-03
水调歌头flash课件
html+css练手项目3
呼啦啦啦啦啦的博客
07-13 1842
简单的综合考察的html+css的练手项目
HTML案例 • 【第1章 排版明月几时有；两个网页相互跳转】
冯上
11-25 1473
Day1学习进度 练习一 <页面相互跳转> 主页 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>主页</title> </head> <body> <h3>当前网页是主页</h3> <a href="day1_03.html">关闭此网页，跳转
html水调歌头实验总结,水调歌头明月几时有反思小结
weixin_35659266的博客
06-05 645
《水调歌头·明月几时有》此词是1076年中秋望月怀人之作，表达了对胞弟苏辙的无限怀念。今天，小编为大家带来了水调歌头明月几时有反思小结，希望大家喜欢!水调歌头明月几时有反思小结篇11.情感升华，仰慕旷达对于《水调歌头》这首词，在完成教学任务后，我发现绝大多数学生都能做到，可以娓娓而谈我眼中的东坡，“可以一挥而就”我仰慕的东坡，能够达到这一步，我想一个可以忧伤可以放旷的东坡因为水调歌头已缓缓流淌在每...
水调歌头
城市蜗牛
06-26 413
水调歌头秋叶已翻飞，躬身街边草。哪堪凄风苦雨，无奈花落早。乌云低沉如幕，愁雨连绵不住，潺潺胜牛毛。杨柳垂怨枝，黄昏灯亮早。旧怨生，新恨消，知情薄。愿非天命，牛郎织女无鹊桥。人历情愁爱恨，季过秋夏春冬，相思却徒劳。此情君不解，心事付飘摇。
HTML——背景、渐变
zx2014567296的博客
06-21 5877
第一份案例图及所需要求展示： 构思： 首先为整体设置个盒子，清除整体的浮动。整体宽750px，高480px，图片可以用backgrou-image设置为背景图片；由于图片的宽高与盒子的宽高一致，因此无需设置backgroud-repeat背景图的平铺。 标题h2与顶部要有60px的空隙，就要用到padding-top上内边距的样式设置。（复习：padding定义内边距时，必须按照顺时针赋值，一个值为4个边；两个值为上下/左右；三个值为上/左右/下） 内容要求显示时不透明度为0.3，需要使用opacity，
html5+css3ppt课件.ppt
11-16
本资源是一份关于HTML5和CSS3的PPT课件，详细讲解了这两种前端开发技术在网页设计中的基础应用。课程内容分为多个章节，涵盖了关键的HTML5元素和语义化结构。 首先，第三章介绍了HTML5的基本结构，包括六级标题的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值