琼殿技术论坛»首页 › 前端开发技术交流 › CSS论坛 › 学习狂神说CSS
返回列表 发新帖
查看: 2|回复: 0

学习狂神说CSS

[复制链接]
怕涨的小农思维真好笑

0

主题

0

回帖

0

积分

积极分子

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2009-11-20
发表于 2024-6-16 04:00:00 | 显示全部楼层 |阅读模式

2024-06-15

1.CSS快速入门示例及CSS导入及行内样式、本文件内style定义、外部css定义样式的优先级（就近原则）

CSS文件：

h1{
    color: red;
}

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 标签选择器
         样式定义格式：
         声明1;
         声明2;*/
        h1{
            color: blue;
        }
    </style>
    <link rel="stylesheet" href="css/style.css"/>
    <!-- 行内样式、当前页面内定义style样式、外部引入style里定义样式
    这3种优先级：就近原则
     指 样式代码和这<h1>代码在物理上的远近
     行内样式 肯定最近
     本例子中，外部样式link标签在当前页面的<style>标签下面，
     更靠近<h1>所以本例中外部样式的优先级高于内部<style>样式 -->
</head>
<body>
<!--<h1 style="color: green;">我是标题</h1>-->
<h1>我是标题</h1>
</body>
</html>

2.三种基本选择器及优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
        color: red;
    }
    .practice-class{
        color: blue;
    }
    #practice-id{
        color: green;
    }
  </style>
</head>
<body>
<p>段落1</p>
<p class="practice-class">段落2</p>
<!--<p id="practice-id">段落3</p>-->
<!-- 3种基本选择器优先级：
 id选择器>类选择器>标签选择器 -->
<p id="practice-id" class="practice-class">段落3</p>
</body>
</html>

2024-06-16

1.层次选择器

hierarchical /ˌhaɪəˈrɑː.kɪ.kəl/ 按等级划分的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 不用id选择器、类选择器，来进行选择 */
        /* 层次选择器 */
        /* 1.后代选择器：选择所有后代：
        太爷 爷爷 爸爸 孙子
        对太爷来说，爷爷 爸爸 孙子 全是其后代 */
        /*body p{
            background: green;
        }*/
        /*ul p{
            background: blue;
        }*/
        /* 2.子选择器：选直接后代
        太爷 爷爷 爸爸 孙子
        对太爷来说，爷爷是其直接后代 */
        /*body>p{
            background: red;
        }*/
        /* 3.相邻兄弟选择器
         我备注：也可以理解为相邻弟弟选择器，
         选择直接相邻的那个弟弟 */
        /*.practice-class + p{
            background: orange;
        }*/
        /* 4.通用选择器
         我备注：也可以理解为全部弟弟选择器 */
        .practice-class ~ p{
            background: brown;
        }
    </style>
</head>
<body>
    <p>p0</p>
    <p>p1</p>
    <p class="practice-class">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
</body>
</html>

2024-06-17

1.结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 结构伪类选择器
         伪类：条件
          结构伪类选择器，
          即在结构的基础上，
          伪类 即条件 去选择 */

        /* 在不用id、class选择器的基础上进行练习 */

        /* 选择ul第一个子元素 */
        ul li:first-child{
            background: brown;
        }

        /* 选择ul最后一个子元素 */
        ul li:last-child{
            background: green;
        }
        
        /* 选中p1：
         定位到父元素，
         选择当前的第一个（子）元素。
          注意：这个有个隐含条件是
         要选的元素必须是p标签，
         否则选不上，
          即假设p的父级下的第一个元素为div，
          则该div不会被选中 */
        p:nth-child(1){
            background: burlywood;
        }

        /* 选中p2：
        定位到父元素，
        选择当前的第二个类型为p的（子）元素，
         即必须是其父元素的所有类型为p标签的元素
         构成的列表中的第二个元素，
         若没有这元素（例如父元素总共也没有两个p标签子元素），
         则不会选中*/
        p:nth-of-type(2){
            background: blue;
        }

        /* 超链接鼠标移上去变色 */
        a:hover{
            background: darkorange;
        }
    </style>
</head>
<body>
    <a href="#">验证鼠标效果</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
    </ul>
</body>
</html>

2024-06-18

1.属性选择器（重要）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* .test a 后代选择器 */
    .test a{
      background: dodgerblue;
      border-radius: 170px;
      /* 我一开始不会将其变成球
       要设置浮动，否则是不会变成球的
       float: left，向左浮动*/
      float: left;
      width: 170px;
      height: 170px;
      /* 文字居中 */
      text-align: center;
      color: red;
      /* 去掉下划线 */
      text-decoration: none;
      /*font-style: italic; 斜体*/
      /*font-variant: 这个不会，不用它*/
      /*font-weight: bold;*/
      /*font-stretch: 不会，不用它*/
      font-size: large;
      /*line-height: 50px; 行高*/
      /*font-family: Arial;字体*/
      /* 我一开始写font: solid 10px 楷体;是错误的
       font的顺序是：
       下列字号font-size和font-family这俩是必须的
       其余均可选
       字号和行高用/分隔
       1.font-style: italic; 斜体
       2.font-weight: bold; 加粗
       3.font-size: 50px; 字号 / line-height: 170px; 行高
       4.font-family: Arial; 字体*/
      font: italic bold 50px/170px Arial;
      /* 外边距提供间距 */
      margin-left: 17px;
    }


    /*属性选择器：重要*/
    /* 属性类似于id+class*/
    /* 根据dom元素的属性，选择dom元素*/

    /*1.选择含有id属性的*/
    a[id]{
      background: yellow;
    }
    /*2.选择class属性值为first的 = */
    /* （完全等于）*/
     /*下面这个选不到，
    因为没有class完全等于first的*/
      /*a[class='first']{
        background: green;
      }*/
    /* 这个能选到 */
    /*a[class='links item first']{
      background: green;
    }*/
    /*3.选择class属性值包含first的 *= */
    a[class*='first']{
      background: darkorange;
    }
    /*4.选择href属性以http开头的 ^= */
    a[href^='http']{
      background: brown;
    }
    /*5.选择href属性以.pdf结尾的 $= */
    a[href$='.pdf']{
      background: darkorchid;
    }
  </style>
</head>
<body>
  <p class="test">
    <a class="links item first">1</a>
    <a href="#" class="links item" id="second">2</a>
    <a href="http://www.cnblog.com" class="links item">3</a>
    <a href="https://www.baidu.com" class="links item">4</a>
    <a href="test.doc" class="links item">5</a>
    <a href="test.pdf" class="links item">6</a>
    <a href="test.jpg" class="links item">7</a>
    <a href="practice.pdf" class="links item">8</a>
    <a href="study.txt" class="links item">9</a>
    <a href="http://test.org" class="links item">10</a>
  </p>
</body>
</html>

 2024-06-27

1.span标签及文字样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .span-big{
        /* font-weight粗细。bold加粗 */
        font-weight: bold;
        /* font-family字体 */
        /* 逗号分隔的，
        Centaur是英文字体则用于英文，
         楷体则应用于中文 */
        font-family: Centaur,'楷体';
        /* font-size大小 */
        font-size: 50px;
        /* color颜色 */
        /*color: red;*/
        /* rgb 红绿蓝 */
        /*color: #00ff00;*/
        /*color: rgb(0, 255, 0);*/
        /* rgba a:透明度，取值0~1，由浅变深 */
        color: rgba(0, 255, 0, 0.5);
      }
    </style>
</head>
<body>
<!-- span通用标签，类似于div这种 -->
欢迎学习<span class="span-big">CSS课程</span>。
</body>
</html>

2024-06-28

1.文本样式：对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /* 文本样式：
       对齐方式：text-align */
      .first-p{
        text-align: center;
        /*text-align: left;*/
        /*text-align: right;*/
        font-size: 50px;
      }
    </style>
</head>
<body>
  <!--对齐方式-->
  <h1>CSS基础</h1>
  <div>
    <p class="first-p">在Vue中，当你在模板中监听一个自定义事件时，通常你不需要在事件处理函数后面加上括号()，除非你想要在触发事件时立即执行某个方法并传递额外的参数（这通常不是从子组件传递的参数）。</p>
  </div>
</body>
</html>

2024-06-29

1.文本样式：首行缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /* 首行缩进：text-indent
       1em为（当前样式下）一个字的大小 */
      .practice-text-indent{
          text-indent: 2em;
          font-size: 50px;
      }
    </style>
</head>
<body>
  <h1>CSS基础</h1>
  <div>
    <p class="practice-text-indent">Tomcat使用这个目录来编译JSP页面和存放临时文件。删除work目录会清除所有编译的JSP页面和临时文件，这通常有助于解决一些运行时问题，尤其是与JSP相关的问题。</p>
  </div>
</body>
</html>

2024-06-30

1.文本样式：设置行高等于区域高度从而竖直方向居中、修饰（上中下划线）、两元素保持在水平方向上对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /* 文本样式：
       对齐方式：text-align */
      .first-p{
        text-align: center;
        /*text-align: left;*/
        /*text-align: right;*/
        font-size: 50px;
      }
      /* 首行缩进：text-indent
       1em为（当前样式下）一个字的大小 */
      .practice-text-indent{
          text-indent: 2em;
          font-size: 50px;
      }
      /* 文本竖直方向上居中：
       通过设置
       行高line-height等于当前区域高度
       来实现*/
      .practice-line-height{
          background: chartreuse;
          height: 500px;
          line-height: 500px;
          font-size: 50px;
      }
      /* 修饰：下、中、上划线
      text-decoration
      text-decoration: underline:下划线
      text-decoration: line-through:中划线
      text-decoration: overline:上划线
       */
      .text-decoration-underline{
          text-decoration: underline;
          font-size: 50px;
      }
      .text-decoration-line-through{
          text-decoration: line-through;
          font-size: 50px;
      }
      .text-decoration-overline{
          text-decoration: overline;
          font-size: 50px;
      }
      /* 实现两元素在水平方向上对齐
      img,span 要对齐的两个元素
      vertical-align: middle;
      */
      img,span{
          vertical-align: middle;
      }
    </style>
</head>
<body>
  <h1>CSS基础</h1>
  <div>
    <p class="first-p">在Vue中，当你在模板中监听一个自定义事件时，通常你不需要在事件处理函数后面加上括号()，除非你想要在触发事件时立即执行某个方法并传递额外的参数（这通常不是从子组件传递的参数）。</p>
    <p class="practice-text-indent">Tomcat使用这个目录来编译JSP页面和存放临时文件。删除work目录会清除所有编译的JSP页面和临时文件，这通常有助于解决一些运行时问题，尤其是与JSP相关的问题。</p>
    <p class="practice-line-height">从您提供的代码片段来看，您确实在第一次调用 this.$f7router.navigate 方法时遗漏了将 props 选项作为路由导航的第二个参数传递。在Framework7中（或类似的路由系统中），props 选项通常用于将自定义属性传递给路由的目标组件。</p>
    <p class="text-decoration-underline">修饰-下划线</p>
    <p class="text-decoration-line-through">修饰-中划线</p>
    <p class="text-decoration-overline">修饰-上划线</p>
    <p>
        <img src="images/sea.png" style="width: 100px; height: 100px;"/>
        <span>您错误地将 props 对象放在了字符串拼接的末尾，而不是作为 navigate 方法的第二个参数。这导致了 props 对象没有被正确地传递到路由中。</span>
    </p>
  </div>
</body>
</html>

2024-07-01

1.超链接伪类

a:hovor 当鼠标悬停时的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .book-img{
        width: 200px;
        height: 300px;
      }
      /* 去掉超链接下划线
      text-decoration: none;*/
      a{
        text-decoration: none;
        color: #000000;
      }
      /* 超链接伪类，
      当鼠标悬停时的样式
      a:hover */
      a:hover{
        color: orange;
        font-size: 50px;
      }
    </style>
</head>
<body>
  <a href="#">
    <img class="book-img" src="images/sea.png"/>
  </a>
  <p>
    <a href="#">码出高效</a>
  </p>
  <p>
    <a href="#">作者：孤尽老师</a>
  </p>
  <p>
    ￥99
  </p>
</body>
</html>

2024-07-02

1.文本阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /* 文本阴影
      text-shadow
      参数(h-shadow, v-shadow, blur, color)
      h-shadow x轴偏移
      v-shadow y轴偏移
      blur 模糊距离（模糊半径）
        模糊半径越小越清楚
        越大越模糊
      color 阴影颜色
      备注：
      偏移，方向定义：
      以窗口左上角为原点，
      原点水平向右为x轴正向，
      原点竖直向下为y轴正向 */
      #price{
          text-shadow: 50px 10px 3px red;
      }
    </style>
</head>
<body>
  <p id="price">
    ￥99
  </p>
</body>
</html>

2024-07-03

1.列表样式

页面：index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>
            <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
            <li><a href="#">服装鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a>
            <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
            <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a>
            <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
        </ul>
    </div>
</body>
</html>

样式：css/style.css：

/* 通用规范是样式从最外层到内层写，
 外层样式写在上方，
 内层样式写在下方 */
#nav{
    width: 300px;
    background: darkgray;
}

.title{
    font-size: 18px;
    /* 加粗 */
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}

/*ul{*/
/*    background: darkgray;*/
/*}*/

/* 选中所有ul下的li
 层次选择器里
 的后代选择器ul li{}

 列表项前‘.’的样式
 list-style: none;不展示
 list-style: circle;空心圆
 list-style: decimal;（有序）数字
 list-style: square;正方形*/
ul li{
    /* height给个列表项之间的间距 */
    height: 25px;
    list-style: none;
    font-size: 14px;
    text-indent: 1em;
}

a{
    color: #000;
    /* 去下划线 */
    text-decoration: none;
}

a:hover{
    color: orange;
    text-decoration: underline;
}

2024-07-04

1.背景（图片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /* border
      设置边框
      参数分别为：
      边框粗细、边框样式、边框颜色
      solid:实线*/
      /* background-image
       设置背景图片*/
      div{
        width: 1200px;
        height: 800px;
        border: 1px solid red;
        background-image: url("images/touXiang.png");
        /* 默认是平铺，平铺满整个区域 */
        /*background-repeat: repeat;*/
      }
      .div1{
        /* 水平平铺 */
        background-repeat: repeat-x;
      }
      .div2{
        /* 竖直平铺 */
        background-repeat: repeat-y;
      }
      .div3{
        /* 不平铺（只显示一个） */
        background-repeat: no-repeat;
      }
    </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</body>
</html>

2024-07-05

1.接昨天代码，背景（图片），向菜单列表嵌入向下向右箭头图片，补充偏移相关内容：

style.css：

/* 菜单列表分别加向下和向右的箭头*/
.title{
    font-size: 18px;
    /* 加粗 */
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /* css中都是用空格，而不是逗号分隔
    直接合起来写background：
     参数顺序：
     background-color
     background-image
        url里../ 取上一层目录
     background-position
        即position-x、position-y
        相对于（左上角）原点的
        水平（x）、竖直（y）偏移量
     background-repeat
     repeat意思是重复*/
    background: red url("../images/down.png") 260px 4px no-repeat;
}

ul li{
    /* height给个列表项之间的间距 */
    height: 25px;
    list-style: none;
    font-size: 14px;
    text-indent: 1em;
    /* 分开写background：
    url里../ 取上一层目录
     background-position
     相对于（左上角）原点的偏移量*/
    background-image: url("../images/right.png");
    background-position: 221px 2px;
    background-repeat: no-repeat;
}

2024-07-06

1.border边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 盒子模型
        border设置边框
        参数顺序：
        粗细、样式、颜色
        粗细，例如2px;
        样式，例如solid实线，
        dashed，类似于带间隔的线样式*/
        #box{
            width: 300px;
            border: 1px solid red;
            /*border: 1px dashed red;*/
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>用户登录</h2>
        <form action="#">
            <div>
                <span>用户名：</span>
                <input type="text" id="username"/>
            </div>
            <div>
                <span>密码：</span>
                <input type="text" id="pwd"/>
            </div>
            <div>
                <span>邮箱：</span>
                <input type="text" id="email"/>
            </div>
        </form>
    </div>
</body>
</html>

2024-07-07

1.接昨天的border边框，及新内容：margin外边距、padding内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 去掉body默认的
        8px的外边距 */
        body{
            margin: 0;
        }
        h2{
            font-size: 16px;
            background: cadetblue;
            margin: 0;
        }
        /* 盒子模型
        border设置边框
        参数顺序：
        粗细、样式、颜色
        粗细，例如2px;
        样式，例如solid实线，
        dashed，类似于带间隔的线样式

        margin的一个妙用：
        用于居中对齐
        margin: 0 auto;

         margin和padding都是：
         两个参数则：上下 左右
         四个参数则：
         顺时针 上右下左 */
        #box{
            width: 300px;
            border: 1px solid red;
            /*border: 1px dashed red;*/
            margin: 0 auto;
        }
        form{
            background: cadetblue;
        }
        /* 层次选择器：后代选择器 */
        .username-div input{
            border: 2px dashed black;
        }
        .pwd-div input{
            border: 2px solid darkorchid;
        }
        .email-div input{
            border: 2px solid darkorange;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>用户登录</h2>
        <form action="#">
            <div class="username-div">
                <span>用户名：</span>
                <input type="text" id="username"/>
            </div>
            <div class="pwd-div">
                <span>密码：</span>
                <input type="text" id="pwd"/>
            </div>
            <div class="email-div">
                <span>邮箱：</span>
                <input type="text" id="email"/>
            </div>
        </form>
    </div>
</body>
</html>

2024-07-08

1.圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .circle{
      width: 500px;
      height: 500px;
      border: 10px solid red;
      /* border-radius
       圆角边框
       参数 顺时针
       4个：左上 右上 右下 左下
       2个：左上（及右下） 右上（及左下）
       1个：所有
       border-radius值
       设置的是圆角的半径
       当父级是正方形，
       且border-radius等于
       父级长宽一半时，就是个圆
       border-radius: 250px;圆*/
      /*border-radius: 30px 60px 40px 80px;*/
      /*border-radius: 30px 80px;*/
      border-radius: 250px;
    }
    /* （上）半圆 */
    .banYuan{
      width: 500px;
      height: 250px;
      border: 5px solid blue;
      border-radius: 250px 250px 0 0;
    }
    /* （右下）四分之一圆 */
    .siFenZhiYiYuan{
      width: 250px;
      height: 250px;
      border: 5px solid green;
      border-radius: 0 0 250px 0;
    }
  </style>
</head>
<body>
  <div class="circle"></div>
  <div class="banYuan"></div>
  <div class="siFenZhiYiYuan"></div>
</body>
</html>

2024-07-09

1.盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        width: 800px;
        height: 500px;
        border: 5px solid red;
        /* 盒子阴影box-shadow
        参数：水平偏移 垂直偏移 模糊半径 阴影颜色
        模糊半径越大，阴影越模糊 */
        box-shadow: 80px 30px 2px yellow;
      }
    </style>
</head>
<body>
  <div></div>
</body>
</html>

2024-07-10

1.display 块级元素 行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /* 块级元素：独占一行：
      h1~h6 div p ul li

      行内元素：不独占一行：
      span a input

      块级元素内可以
      嵌套行内元素，
      但行内元素不能
      嵌套行内元素。

      display: block;
        设置为块级元素
      display: inline;
        设置为行内元素
      display: inline-block;
        设置为
          保持块级元素（的高度等）
          且不独占一行
      display: none;
        设置为不显示*/
      div{
        width: 500px;
        height: 400px;
        border: 2px solid red;
        /*display: block;*/
        display: inline-block;
      }
      span{
        width: 500px;
        height: 400px;
        border: 2px dashed blue;
        /*display: block;*/
        display: inline-block;
      }
    </style>
</head>
<body>
  <div>div内容</div>
  <span>span内容</span>
</body>
</html>

2024-07-11

1.float浮动

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <div id="father">
        <div class="div1">
            <img src="images/car2.png"/>
        </div>
        <div class="div2">
            <img id="sea" src="images/sea.png"/>
        </div>
        <div class="div3">
            <img src="images/touXiang.png"/>
        </div>
        <div class="div4">
            <span>handleName()，Vue会尝试在渲染时就执行它，而不是在事件被触发时</span>
        </div>
    </div>
</body>
</html>

style.css：

div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px solid black;
}

/* float:浮动
left向左浮动
right向右浮动

clear: both;
清除浮动：
保持浮动的同时，
使其有块元素的效果。*/
.div1{
    border: 1px dashed red;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

.div2{
    border: 1px dashed blue;
    /*display: inline-block;*/
    float: right;
    clear: both;
}

.div3{
    border: 1px dashed green;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

.div4{
    border: 1px dashed darkmagenta;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

#sea{
    width: 200px;
    height: 400px;
}

2024-07-12

1.float浮动：浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止

2.解决父级边框塌陷（共四种方法，这里先列出前两种）

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <div id="father">
        <div class="div1">
            <img src="images/car2.png"/>
        </div>
        <div class="div2">
            <img id="sea" src="images/sea.png"/>
        </div>
        <div class="div3">
            <img src="images/touXiang.png"/>
        </div>
        <div class="div4">
            <span>浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止</span>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

style.css：

div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px solid black;
    /*height: 1000px;*/
}

/* float:浮动
left向左浮动
right向右浮动

浮动的盒子可以
向左浮动，也可以
向右浮动，
直到它的外边缘碰到
包含框或
另一个浮动盒子为止

clear: both;
清除浮动：
保持浮动的同时，
使其有块元素的效果。*/

/* 解决父级边框塌陷的方法：
1.给父级边框足够的高度
#father{
    border: 1px solid black;
    height: 1000px;
}
2.设置空的div，
且div设置如下3点：
（1）左右清除浮动，
（2）margin为0，
（3）padding为0

备注：
clear: left;清除左侧浮动
clear: right;清除右侧浮动
clear: both;清除两侧浮动
clear: none;不清除浮动
常用的是clear: both;
*/
.div1{
    border: 1px dashed red;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

.div2{
    border: 1px dashed blue;
    /*display: inline-block;*/
    float: right;
    clear: both;
}

.div3{
    border: 1px dashed green;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

.div4{
    border: 1px dashed darkmagenta;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

#sea{
    width: 200px;
    height: 400px;
}

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

2024-07-13

1.解决父级边框塌陷的第三种方式：设置父级元素overflow: hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      img{
        /*float: left;*/
      }
      #content{
        border: 1px solid black;
        width: 200px;
        height: 100px;
        /* 解决父级边框塌陷的第三种方式：设置父级元素overflow: hidden */
        overflow: hidden;
        /* overflow: scroll; 滚动*/
        /*overflow: scroll;*/
      }
    </style>
</head>
<body>
  <div id="content">
    <img src="images/car2.png"/>
    <div>哈哈，指一个人发出的笑声，高兴开心欢乐时的状态，抒发快乐的心情，表现一个人很开心快乐的状态。也指人通常用来开玩笑。一种很逗的心情。</div>
  </div>
</body>
</html>

2024-07-14

1.解决父级边框塌陷的第四种方式，也是最推荐的方式：对父级元素设置伪类

#father:after{
    content: '';
    display: block;
    clear: both;
}

解决父级边框塌陷四种方式完整代码：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <div id="father">
        <div class="div1">
            <img src="images/car2.png"/>
        </div>
        <div class="div2">
            <img id="sea" src="images/sea.png"/>
        </div>
        <div class="div3">
            <img src="images/touXiang.png"/>
        </div>
        <div class="div4">
            <span>浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止</span>
        </div>
<!--        <div class="clear"></div>-->
    </div>
</body>
</html>

style.css：

div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px solid black;
    /*height: 1000px;*/
    /*overflow: hidden;*/
}



/* float:浮动
left向左浮动
right向右浮动

浮动的盒子可以
向左浮动，也可以
向右浮动，
直到它的外边缘碰到
包含框或
另一个浮动盒子为止

clear: both;
清除浮动：
保持浮动的同时，
使其有块元素的效果。*/

/* 解决父级边框塌陷的方法：
1.给父级边框足够的高度
#father{
    border: 1px solid black;
    height: 1000px;
}
2.设置空的div，
且div设置如下3点：
（1）左右清除浮动，
clear: both;
（2）margin为0，
（3）padding为0

备注：
clear: left;清除左侧浮动
clear: right;清除右侧浮动
clear: both;清除两侧浮动
clear: none;不清除浮动
常用的是clear: both;

3.设置父级元素overflow: hidden

4.对父元素设置伪类
这是最好的方式
#father:after{
    content: '';
    display: block;
    clear: both;
}
*/
.div1{
    border: 1px dashed red;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

.div2{
    border: 1px dashed blue;
    /*display: inline-block;*/
    float: right;
    clear: both;
}

.div3{
    border: 1px dashed green;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

.div4{
    border: 1px dashed darkmagenta;
    /*display: inline-block;*/
    float: left;
    clear: both;
}

#sea{
    width: 200px;
    height: 400px;
}

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

#father:after{
    content: '';
    display: block;
    clear: both;
}

2024-07-15

1.开始学习定位：相对定位、绝对定位、z-index

今天先是最开始的默认情况：index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        margin: 10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
      }
      #father{
        border: 1px solid black;
        padding: 0;
      }
      #first{
        background-color: cadetblue;
        border: 1px dashed blue;
      }
      #second{
        background-color: yellow;
        border: 1px dashed darkorange;
      }
      #third{
        background-color: burlywood;
        border: 1px dashed brown;
      }
    </style>
</head>
<body>
  <div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
  </div>
</body>
</html>

2024-07-16

1.相对定位：

相对定位：相对于该元素原来的位置进行偏移
position: relative;
元素仍在文档流中，其原始位置仍被保留。
（所以示例中div3已经向下偏移出父级div了。但因为其原始位置仍被保留了，所以没出现父级边框塌陷
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      padding: 50px;
    }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px solid black;
      padding: 0;
    }
    /* 相对定位：相对于该元素原来的位置进行偏移
    position: relative;
    元素仍在文档流中，其原始位置仍被保留。
    （所以示例中div3已经向下偏移出父级div了。但因为其原始位置仍被保留了，所以没出现父级边框塌陷）
    top right bottom left*/
    #first{
      background-color: cadetblue;
      border: 1px dashed blue;
      position: relative;
      top: -60px;
      left: 20px;
    }
    #second{
      background-color: yellow;
      border: 1px dashed darkorange;
    }
    #third{
      background-color: burlywood;
      border: 1px dashed brown;
      position: relative;
      right: 30px;
      bottom: -60px;
    }
  </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

示例中div3已经向下偏移出父级div了。但因为其原始位置仍被保留了，所以没出现父级边框塌陷。效果：

2024-07-17

1.相对定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #father{
        text-align: center;
      }
      #sequar{
        border: 1px solid red;
        width: 300px;
        margin: 0 auto;
        padding: 10px;
        /* 直接设置父级边框高度，来解决父级边框塌陷 */
        height: 300px;
      }
      /* 父级正方形设置伪类，解决父级边框塌陷。但这里测试不好使。
      改为直接设置父级边框高度，来解决父级边框塌陷 */
      /*#sequar:after{
          content: '';
          display: block;
          clear: both;
      }*/
      a{
        width: 100px;
        height: 100px;
        background-color: hotpink;
        color: white;
        /*display: inline-block;解决原默认inline设置width、height失效问题。
        同时又因为通过设置父级高度解决了父级边框塌陷问题，
        所以就不用担心我一开始练习时用block导致整体5行，不会解决父级塌陷的问题了。
        而inline-block，左右会有间距。所以这里就用block。*/
        display: block;
        line-height: 100px;
        text-decoration: none;
      }
      a:hover{
        background-color: blue;
      }
      #a2{
          position: relative;
          top: -100px;
          left: 200px;
      }
      #a4{
          position: relative;
          top: -100px;
          left: 200px;
      }
      #a5{
          position: relative;
          top: -300px;
          left: 100px;
      }
    </style>
</head>
<body>
  <div id="father">
    <div id="sequar">
      <!-- a标签一定要写上href=""，才能有超链接（小手）效果 -->
      <a id="a1" href="#">链接1</a>
      <a id="a2" href="#">链接2</a>
      <a id="a3" href="#">链接3</a>
      <a id="a4" href="#">链接4</a>
      <a id="a5" href="#">链接5</a>
    </div>
  </div>
</body>
</html>

效果：

2024-07-18

1.绝对定位：position: absolute;

1.1相对于已定位的父级元素位置进行定位，如果没有已定位的父级元素，则相对于浏览器定位。

1.2脱离标准文档流，其在文档流中的原始位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px solid black;
      padding: 0;
      position: relative;
    }
    #first{
      background-color: cadetblue;
      border: 1px dashed blue;
    }
    /* 绝对定位：position: absolute;
    1.相对于已定位的父级元素位置进行定位，如果没有已定位的父级元素，则相对于浏览器定位。
    2.脱离标准文档流，其在文档流中的原始位置不会被保留。*/
    #second{
      background-color: yellow;
      border: 1px dashed darkorange;
      position: absolute;
      /*left: 100px;*/
      /*top: 300px;*/
      right: 300px;
    }
    #third{
      background-color: burlywood;
      border: 1px dashed brown;
    }
  </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

2024-07-19

1.positon: fixed;固定定位。

1.1这里div1绝对定位因为所有父级都没有定位，所以根据浏览器定位，但浏览器有滚动效果，基于浏览器定位的绝对定位是受滚动条影响的。 随着页面滚动，该div1的位置也会动。

1.2position: fixed;固定定位。根据之前上网查，我的理解是可以认为是相对于浏览器的（可视）窗口进行定位。其不受页面是否有滚动影响。div2都会固定在浏览器可视窗口的最右下角。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /* 这里将body高度设为高于屏幕实际高度，目的是测试滚动条对绝对定位、固定定位的影响。从而更好的理解两种定位。 */
      body{
        height: 1000px;
      }
      /* 这里div1绝对定位因为所有父级都没有定位，所以根据浏览器定位，但浏览器有滚动效果，基于浏览器定位的绝对定位是受滚动条影响的。
       随着页面滚动，该div1的位置也会动。*/
      div:nth-of-type(1){
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      /* position: fixed;固定定位。根据之前上网查，我的理解是可以认为是相对于浏览器的（可视）窗口进行定位
      其不受页面是否有滚动影响。div2都会固定在浏览器可视窗口的最右下角。*/
      div:nth-of-type(2){
        width: 50px;
        height: 50px;
        background-color: orange;
        position: fixed;
        right: 0;
        bottom: 0;
      }
    </style>
</head>
<body>
  <div>div1</div>
  <div>div2</div>
</body>
</html>

效果：

2024-07-20

1.z-index设置图层高度，opacity设置透明度，取值在0~1之间

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <div id="content">
    <ul>
      <li><img src="images/SpringBootBackground.jpg"/></li>
      <li class="tipBackground"></li>
      <li class="tipText">学SpringBoot，找狂神说</li>
      <li>时间：2099-01-01</li>
      <li>地点：火星基地</li>
    </ul>
  </div>
</body>
</html>

style.css：

#content{
    margin: 0;
    padding: 0;
    font-size: 12px; /* 字体12px，行高25px是常用的一个选择组合 */
    line-height: 25px;
    border: 1px solid #000000;
    width: 140px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none; /* 去掉列表项前符号 */
    position: relative; /* 给url一个定位，用于子元素li“学SpringBoot，找狂神说"可以绝对定位 */
}
img{
    width: 141px;
    height: 117px;
}
.tipText, .tipBackground{
    position: absolute;
    top: 90px;
    width: 140px;
    height: 25px;
}
.tipText{
    z-index: 999; /* z-index设置图层高度 */
    color: white;
}
.tipBackground{
    background: #000000;
    opacity: 1; /* 透明度，取值在0~1之间 */
}

至此狂神说CSS教程已学完。



来源：https://www.cnblogs.com/pingfanliliang/p/18250159
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|琼殿技术论坛 |nimba_sitemap:appname

相关侵权、举报、投诉及建议等，请发 E-mail：qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部