自学前端持续更新中

丶强风吹拂

已于 2022-02-22 10:54:49 修改

阅读量651

点赞数 2

分类专栏：我的前端之路文章标签： elementui vue.js javascript

于 2022-02-19 11:54:53 首次发布

本文链接：https://blog.csdn.net/p2060550880/article/details/123014618

版权

我的前端之路专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<span>

<span style="color: "></span> 独立修饰文本

有序列表：

<ol><li></li></ol>li里面可以随意放标签，但是ol里面只能防止li

        <!-- 1.li里面可以随意放标签，但是ol里面只能防止li
               2数字是自动生成的。
                3. type: 1,a,A,i,I ，选择自己的类型
                4. start:取值只能是一个数字，在第几位开始 -->

无序列表：

<ul><li></li></ul>

自定义列表：

<dl>

<dt>我是图片</dt>

<dd>我是文字</dd>

</dl>

图片标签：

<img src="">


<!--1. alt:如果发生错误·会提示

2.title:鼠标放在图片上显示显示你备注的信息

3.width:图片宽瘦

4.height:图片高低

-->

超链接标签：

  <!-- titlt：鼠标放上显示的信息
        target：规定在何处打开文档
        属性设置：
        target="_self“默认值
        target="_blank“新窗口打开 -->
   <a href="https://mp.csdn.net/mp_blog/creation/editor/123014618">前端连接</a>

   <!-- 图片图标 -->
   <a href="https://www.baidu.com/">
       <a href="https://www.baidu.com/">
           <img src="强风吹拂.jpg">
       </a>
   </a>

表格：

 <!-- border: 边框
        width：宽
        height:高
        align：水平对齐 
        bordercolor:外边框的颜色
        cellspacing:单元格与单元格之间的空隙
        cellpadding:单元格与内容之间的空隙-->
    <table border="1" width="500" height="500" align="center" bordercolor="red" bgcolor=""
    cellspacing="0" cellpadding="30">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    </table>

tr td标签：

  <!-- tr属性设置：
        可以设置高度，但是不可以设置宽
    bgcolor:设置行背景
    height:高度
    align=""内容的居中 靠右 
    valign=""上下-->

    <!-- td属性  
        width:宽
        height：高
        bgcolor：单元格背景颜色
        align=""内容的居中 靠右 
        valign=""内容上下
    td:如果一个单元格的设置宽度，影响的是这一整列的宽度
    td:如果个单元格的设置高令，影响的是这一整行的高度--> 
    <table border="1" width="300" height="300" bgcolor="yellow">
        <tr bgcolor="orange" align="" valign="">
            <td width="100">1</td>
            <td height="100" bgcolor="yellow">2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

合并列合并行：

 <table border="1" width="300" height="300">
        <!-- colspan 横着合并
             rowspan竖着合并-->
        <tr>
            <td>1</td>
            <td colspan="2" rowspan="2">2</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <!-- <td colspan="2">5</td> -->
            <!-- <td>6</td> -->
        </tr>
        <tr>
            <!-- <td>7</td> -->
            <td colspan="2">8</td>
            <!-- <td>9</td> -->
        </tr>
    </table>

表单form

 <form action="">
        用户信息<input type="text" placeholder="请输入">
        <br>
        密码<input type="password">
        <br>
        <input type="submit">
        <button>登录</button>
        <input type="reset">
    </form>

外部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>
        <!--外部css引入方式-->
     <!--1. <link rel="stylesheet" href="./css/index.css" type="text/css"> -->
    <!--2. <style>
        @import url(css/index.css);
         </style> -->
</head>
<body>
    <h1>11111</h1>
    
</body>
</html>

行内样式：


    <h2 style="color: blue;">2222</h2>

优先级：

注：

优先级显示：行内>内部>外部，如果想指定那个显示在标签后边加：!important

<!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>
    <link rel="stylesheet" href="./css/index.css">

    <style>
        h1{
            color: blue !important;
        }
    </style>
</head>
<body>
    <h1 style="color: brown;">1111111</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>Document</title>
    <style>
        div p{
           color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p>111111</p>
    </div>
    
</body>
</html>

伪类选择器：

顺序：

Link--visited--hover--active。

<!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>
        /* 初始化 */
       a:link{
           color: aqua;
       }
       /* 访问后 */
       a:visited{
        color: black;
       }
       /* 鼠标移上 */
       a:hover{
           color: brown;
       }
       /* 点击时 */
       a:active{
           color: blue;
       }

    </style>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
</body>
</html>

选择器的权重：

css文本属性:

css文本加粗倾斜 font-weight style

<!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>
        /* 100 细 ligter*/
        /* 400正常 normal */
        /* 700加粗 bold*/
        /* 900更加粗 bolder*/
        .aa{
           font-weight: 700;
        }
        
        /*   talici 倾斜
             oblique 更倾斜 
             normal  正常
             */
        .bb{
            font-style:normal;
        }
    </style>
</head>
<body>
    <p class="aa">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reprehenderit placeat facilis est recusandae impedit quaerat expedita neque quo fugit optio, 
        magnam distinctio, fugiat aut soluta obcaecati consequatur vero qui quam.

    </p>
    <p class="bb">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reprehenderit placeat facilis est recusandae impedit quaerat expedita neque quo fugit optio, 
        magnam distinctio, fugiat aut soluta obcaecati consequatur vero qui quam.

    </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">
    <title>Document</title>
    <style>
        .a{ 
            /* 设置背景颜色 */
            background:lawngreen;
            /* div高度 */
            height: 100px;
            /* div宽度 */
            width: 500px;
            /* 文本居中 */
            text-align: center;
            /* 设置文字高度 */
            line-height: 100px;
            /* 当div高度和文本高度相等时，在设置文本居中。就可以文字在中间了 */

        }

    </style>
</head>
<body>
    <div class="a">
        你好啊
    </div>
    
</body>
</html>

文字与单词之间的缩进：

文字用： letter-spacing

单词之间： word-spacing

<!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>
        .a{
            letter-spacing: 10px;
        }
        .b{
            word-spacing: 10px;
        }

    </style>

</head>
<body>
    <p class="a">发文助手会对标题提出优化建议，避免出现不恰当文字从而影响文章推荐。【标题规范】</p>
    <p class="b">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque in animi sequi rem totam,
         ducimus repudiandae vitae nam, dolores non reprehenderit,
         alias modi ipsa voluptas hic qui numquam pariatur debitis.</p>
</body>
</html>

首行缩进：

text-indent:2em;

解释一下：text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是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>Document</title>
   <style>
       .a{
           text-indent: 2em;
       }
   </style>
</head>
<body>
    <p class="a">首先是中央处理单元或CPU 。CPU可以被认为是您计算机的大脑。
        一个 CPU 内核，在这里被描绘成一个办公室的工作人员，
        可以在他们进来时一个一个地处理许多不同的任务。CPU可以处理从数学到艺术的所有事情
        ，同时知道如何回复客户的电话。过去，大多数 CPU 都是单芯片。内核就像另一个 CPU 生活在同一个芯片中。
        在现代硬件中，您通常会获得多个内核，从而为您的手机和笔记本电脑提供更多的算力。</p>
    
</body>
</html>

文字上中下划线

1.text-decoration: none; 取消划线，适用于超链接

2.text-decoration: overline; 上划线

3.text-decoration: underline; 下划线

4. text-decoration: line-through; 删除线

<!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>
        p{
            /* 取消划线，适用于超链接
            text-decoration: none; */
            /* 上划线
            text-decoration: overline; */
            /* 下划线 */
            /* text-decoration: underline; */
            text-decoration: line-through  underline overline;
        }

    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Quis asperiores architecto perferendis enim consequuntur.
          Consectetur aut necessitatibus, earum doloribus, 
          porro ad ducimus temporibus dolorum,
         ut veritatis quo voluptas atque animi!</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">
    <title>Document</title>
    <style>
        .a{
            height: 50px;
            width: 200px;
            background: #808080;
            color: #ffffff;
            line-height: 50px;
            text-align: center;
            font-size: 25px;
        }

        p{
            font-size: 20;
            text-indent: 2em;
            width: 500px;

        }
        .c{
            color: red;
        }
        .b{
            font-weight: 700;
        }

        

    </style>
</head>

<body>
    <div class="a">
        前锋简介
    </div>


    <p >
        <span class="b">北京千锋互联科技有限公司（简称千锋)</span>成立于2011年1月。公司总部位于北京，目前已在<span class="c">深圳、
        上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原</span>建
        立分公司。
    </p>
    <p>
        千锋旗下现有<span class="b">教育培训、人才服务、项目研发、创业孵化</span>等业务。教育培训业务主要为大学生、企
        业提供技术培训服务;人才服务业务主要为企业提供优秀的互联网研发人才;项目研发业务主要为企
        业提供APP解决方案及APP项目研发;创业孵化业务为有创业梦想的学员设立，为其提供创业辅导及
        天使投资等服务。

    </p>
    <p>
        千锋秉承着<spen class="c">“用良心做教育”</spen>的理念踏踏实实的做事，<spen class="c">创办9年，现已成为业内口碑好、规模大、教
        学强的移动互联网研发培训机构。</spen>目前累计与国内超过8200多家IT相关企业建立人才输送合作，
        与562所大学建立实训就业合作，每年为中国IT企业输送上万名移动开发工程师。计划未来5年内
        实现年营收过10亿，为中国教育行业贡献一份力量。
    </p>

</body>

</html>

字母大小写

text-transform: capitalize; 首字母大写

text-transform: lowercase; 全小写

text-transform: uppercase; 全大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 首字母大写 */
            /* text-transform: capitalize; */
            /* 全小写 */
            /* text-transform: lowercase; */
            /* 大写 */
            text-transform: uppercase;
        }

    </style>
</head>
<body>
    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Fugiat vero, optio tempore maxime amet quo ex.
         Architecto perferendis adipisci cum ex illo totam necessitatibus ipsum eligendi accusantium. 
         Alias, odit omnis?
    </p>
</body>
</html>

列表属性

默认属性实心圆 dise

空心圆：circle

方格：square

去掉： none

简便：

<!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>
        ul{
            /*默认属性实心圆  dise
              空心圆：circle
               方格：square
               去掉： none*/
            list-style-type:none ;
            list-style-image:url(./图片/1.png);
        }
        li{
            /* 图片设置在列表里 */
            list-style-position: inside;
        }
        .a{
            list-style: none url(./图片/1.png) inside;


        }


    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <ul class="a">
        <li>444</li>
        <li>555</li>
        <li>666</li>
    </ul>
    
</body>
</html>

背景属性：

背景图片：

background-position图片移动三种方式：

1. 20px 20px

2. 10% 10%

3. left center right x轴两种轴进行组合

top center bottom y轴

background-size 设置图片大小：

设置图片大小：

1. 百分比：100% 100%

2. px px

3. cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中。

4.4.contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子,留白

<!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>
        .a{
            height: 400px;
            width: 400px;
            background-color: aqua;
            background-image: url(../图片/1.png);
            /*repeat    默认平铺
              repeat-x  X轴平铺
              repeat-y  Y轴平铺
              no-repeat 不平铺 */
            background-repeat: no-repeat ;
            /* 图片移动：
                1. 20px 20px
                2. 10%  10%
                3. left center right
                   top center bottom*/
            background-position: center center;
        }
        .b{
            background-image: url(../强风吹拂.jpg);
            height: 300px;
            width: 300px;
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="a">

    </div>
    
    <div class="b">

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

背景复合写法：

重： background-size 不能复合使用，只能单独使用。

<!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>
        div{
            /* background-size不能复合使用 */
            width:600px;
            height:600px;
            /* background-color: yellow;
            background-image: url(./强风吹拂.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center; */

            background: yellow url(./强风吹拂.jpg) no-repeat center fixed;
        
        }
    </style>
</head>
<body>
    <div>
    </div>
    
</body>
</html>

浮动属性 float：

<!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>
        div{
            width: 300px;
            height: 300px;

        }
        .a{
            background-color: aqua;
            float: left;
        }
        .b{
            background-color: blue;
            float: left;
        }
        .c{
            background-color: brown;
            float: left;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    
</body>
</html>

清浮动 clear：

消除浮动的方法：

1.写固端高度

2. 清浮动 clear: both/left/right 注：在补充的盒子中设置

3. 在浮动元素后面补充一个盒子

4. overflow: hidden; 让浮动元素计算高度注：写在父盒子中

<!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>
        #a ,#b{
            height: 300px;
            width: 300px;
        }
        #a{
            background-color: blue;
            float: left;
        }
        #b{
            background-color: brown;
            float: left;
        }
        .c{
            height: 600px;
            width: 600px;
            background-color: blanchedalmond;
            /* clear: both; */
        }
        .a{
            overflow: hidden;
        }


    </style>
</head>
<body>
    <!--1. 写固端高度
        2. 清浮动 clear: both/left/right 注：在补充的盒子中设置
        3. 在浮动元素后面补充一个盒子
        4. overflow: hidden; 让浮动元素计算高度 注：写在父盒子中
            -->
    <div class="a">
        <div id="a"></div>
        <div id="b"></div>
        <div></div>
    </div>
    <div class="c">

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

内边距padding：

一个值:四个方向相同

两个值：上下相同左右相同

三个值：上左右相同下

四个值：上右下左

<!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>
        /* 一个值:四个方向相同
           两个值：上下相同 左右相同
           三个值：上 左右相同 下
           四个值：上 右 下 左  */
        div{
            width: 300px;
            height: 300px;
            background-color: bisque;
            text-align: center;
            padding: 10px 20px 30px 40px;
        }
    </style>

</head>
<body>
    <div >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Suscipit necessitatibus quaerat quas distinctio quisquam nesciunt dolorem dolore rerum consequatur.
         Excepturi doloribus eius impedit est corporis quisquam accusantium mollitia aut nobis!
    </div>
    
</body>
</html>

边框：

边框样式：

实线 solid 双实线 double 虚线 dashed 点状点 dotted

<!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>
        div {
            height: 300px;
            width: 300px;
            background-color: blanchedalmond;
            border: aquamarine 10px dotted;
            /* solid  double dashed  dotted */
        }
    </style>
</head>

<body>
    <div>

    </div>

</body>

</html>

丶强风吹拂

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
自学前端持续更新中

<span><span style="color: "></span> 独立修饰文本有序列表：<ol><li></li></ol>li里面可以随意放标签，但是ol里面只能防止li <!-- 1.li里面可以随意放标签，但是ol里面只能防止li 2数字是自动生成的。 3. type: 1,a,A,i,I ，选择自己的类型 ...
复制链接

扫一扫

专栏目录