【前端基础 二】CSS

原创 已于 2022-11-06 20:06:52 修改 · 378 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
学习笔记

当前文章被收录于：

学习笔记
38 篇文章 2 人学习

学习笔记

订阅专栏 查看详情
于 2022-07-16 22:16:21 首次发布

文章目录

二、CSS

基础

语法

选择器{
    属性名:属性值;
}

选择器

选择器主要分3种
元素选择器element

id选择器#id
类选择器.class

.class.intro选择 class=“intro” 的所有元素。
.class1.class2.name1.name2选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2.name1 .name2选择作为类名 name1 元素后代的所有类名 name2 元素。
#id#firstname选择 id=“firstname” 的元素。
**选择所有元素。
elementp选择所有

元素。

element.classp.intro选择 class=“intro” 的所有

元素。

element,elementdiv, p选择所有
元素和所有

元素。

element elementdiv p选择
元素内的所有

元素。

element>elementdiv > p选择父元素是
的所有

元素。

element+elementdiv + p选择紧跟
元素的首个

元素（非父子）。

element1~element2p ~ ul选择前面有

元素的每个

  • 元素。

[attribute][target]选择带有 target 属性的所有元素。
[attribute=value][target=_blank]选择带有 target=“_blank” 属性的所有元素。
[attribute~=value][title~=flower]选择 title 属性包含单词 “flower” 的所有元素。
[attribute|=value][lang|=en]选择 lang 属性值以 “en” 开头的所有元素。
[attribute^=value]a[href^=“https”]选择其 src 属性值以 “https” 开头的每个 元素。
[attribute$=value]a[href$=“.pdf”]选择其 src 属性以 “.pdf” 结尾的所有 元素。
[attribute*=value]a[href*=“abc”]选择其 href 属性值中包含 “abc” 子串的每个 元素。
:activea:active选择活动链接。
::afterp::after在每个

的内容之后插入内容。

::beforep::before在每个

的内容之前插入内容。

:checkedinput:checked选择每个被选中的 元素。
:defaultinput:default选择默认的 元素。
:disabledinput:disabled选择每个被禁用的 元素。
:emptyp:empty选择没有子元素的每个

元素（包括文本节点）。

:enabledinput:enabled选择每个启用的 元素。
:first-childp:first-child选择

元素并且是子元素并且是第一个位置。

::first-letterp::first-letter选择每个

元素的首字母。

::first-linep::first-line选择每个

元素的首行。

:first-of-typep:first-of-type选择

元素并且是子元素并且是第一次出现（并非第一位置） 。

:focusinput:focus选择获得焦点的 input 元素。
:fullscreen:fullscreen选择处于全屏模式的元素。
:hovera:hover选择鼠标指针位于其上的链接。
:in-rangeinput:in-range选择值在指定范围内的 input 元素，属性设置max和min。
:indeterminateinput:indeterminate选择处于不确定状态的 input 元素(选择框没有选择时)。
:invalidinput:invalid选择具有无效值的所有 input 元素。
:lang(language)p:lang(it)选择 lang 属性等于 “it”（意大利）的每个

元素。

:last-childp:last-child选择

元素并且是子元素并且是最后一个位置。

:last-of-typep:last-of-type选择

元素并且是子元素并且是最后一次出现（并非最后位置） 。

:linka:link选择所有未访问过的链接。
:not(selector):not§选择非

元素的每个元素。

:nth-child(n)p:nth-child(2)选择

元素并且是子元素并且是第二个位置

:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。
:nth-of-type(n)p:nth-of-type(2)选择

元素并且是子元素并且是第二次出现

:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。
:only-of-typep:only-of-type选择p元素并且只有唯一一个子元素。
:only-childp:only-child选择p元素并且只有唯一一个子元素且子元素在第一位置。
:optionalinput:optional选择不带 “required” 属性的 input 元素。
:out-of-rangeinput:out-of-range选择值超出指定范围的 input 元素。
::placeholderinput::placeholder选择已规定 “placeholder” 属性的 input 元素。
:read-onlyinput:read-only选择已规定 “readonly” 属性的 input 元素。
:read-writeinput:read-write选择未规定 “readonly” 属性的 input 元素。
:requiredinput:required选择已规定 “required” 属性的 input 元素。
:root:root选择文档的根元素。
::selection::selection选择用户已选取的元素部分。
:target#news:target选择当前活动的 #news 元素。
:validinput:valid选择带有有效值的所有 input 元素。
:visiteda:visited选择所有已访问的链接。

注释

注释，以/* 开始，以*/结束

尺寸

属性：width 值：可以是百分比或者像素

背景

​ 1、背景颜色

​ 默认为透明背景background-color: transparent

​ 颜色的值可以采用3种方式

​ 预定义的颜色名字，比如red,gray,white,black,pink

​ rgb格式，分别代表红绿蓝的比例 rgb(250,0,255)

​ 16进制的表示，#00ff00 等同于 rgb(0,255,0)

​ 2、背景图片

​ background-image:url(https://blog.csdn.net/%E2%80%9C%E5%9B%BE%E7%89%87url%E2%80%99%E2%80%9D);

​ 3、背景重复

​ background-repeat属性

​ repeat; 水平垂直方向都重复
​ repeat-x; 只有水平方向重复
​ repeat-y; 只有垂直方向重复
​ no-repeat; 无重复

​ 4、背景平铺

​ background-size: contain;

​ 背景平铺，通过拉伸实现，会有失真

文本

span{
    color: pink;/*文本颜色*/
    text-align: center;/*元素内的文字，在该元素中的对齐位置。元素正好包含文字，则看不出效果*/
    text-decoration: none;/*文字的各种划线*/
    line-height: 20px;/*行间距，行间距和该元素高度一致，则文字垂直居中*/
    letter-spacing: 10px;/*字符间距*/
    word-spacing: 10px;/*单词间距*/
    text-indent: 2em;/*首行缩进两个字符*/
    text-transform: lowercase;/*大小写*/
    white-space: normal;/*空白格*/
    /*normal 默认。多个空白格或者换行符会被合并成一个空白格*/
    /*pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。*/
    /*pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。*/
    /*nowrap 一直不换行，直到使用br*/
}

字体

span{
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    font-family:Arial,serif;
    
    font:  italic bold 30px "Times New Roman";
    /*合并写法的顺序，当然其中有可以颠倒的，但是不建议
    font-style font-weight font-size line-height font-family*/
}

鼠标样式

cursor:crosshair;其他样式可以文档查询

表格样式

属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
注：只对连续的英文字母起作用，如果使用中文就看不到效果

属性：border-collapse
值：
separate:边框分隔
collapse:边框合并

边框

#box{
    height:300px;
    width:300px;
    background-color: pink;
    /*solid: 实线；dotted:点状；dashed:虚线；double:双线*/
    /*border-style: dashed;*/
    /*border-color: blue;*/
    /*border-width: 2px;*/
    border:5px solid red ;/*合并写法顺序*/
    border-top: 30px solid blue;/*只有一个方向有边框*/
    border-left: 30px solid red;/*只有一个方向有边框*/
}

块级元素和内联元素的区别

​ 块级元素div默认是占用100%的宽度

​ 内联元素span的宽度由其内容的宽度决定

内边距

​ 属性：padding
​ 值：如果只写一个，即四个方向的值
​ 值：如果写四个，即四个方向的值
​ 上 右 下 左,依顺时针的方向依次赋值

外边距

​ 像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。

​ 非要在内联元素使用上下外边距则可以display: inline-block;

​ 为了观察上下外边距的效果，可以采用块级元素，比如div.

垂直外边距合并问题

1、子父类边框合并

​ 比如在父级中有一子级，父级上外边距为100px，子级外边距为0，但是当子级外边距设置为200px时，打开浏览器发现子级外边距并没变化，而是父级外边距变化了子级外边距的数值（变成200）

解决方法：
1.给父级元素设置外边框
2.将子级元素改变的外边框距离转换成父级元素的内边框距离
3.使用overflow：hidden；来隐藏父级超出定义的边框
4.使用行级元素跟块级元素的属性问题display：inline-block；来使其同时获得行级跟块级属性
5.利用浮动float来进行调节
6.使用绝对定位 类似于浮动 position：absolute；来进行改变

2、兄弟盒子外边距合并

​ 比如在两个div依次从上到下排列，上面的div给个下外边距为100px，下面的div给个上外边距为100px，此时发现他们之间的间距还是100px而不是我们想象的200px

解决办法：将原本设置给两个元素的属性设置给一个元素
计算的标准：
1.两个元素外边距均为正数时，选择大的去使用
2.两个元素的外边距相同时随便选择其中一个去使用
3.如果两个元素的外边距为一正一负，加和去计算
4.如果都是负数跟都是正数类似 ，选择绝对值大的去使用

参考：http://www.javashuo.com/article/p-odmqfqfs-nb.html

​ https://baijiahao.baidu.com/s?id=1728886703729513261&wfr=spider&for=pc

超链接状态

超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候

使用 text-decoration: none来去除下划线

隐藏元素

使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了

使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

优先级

如果style.css中，

!important >内联样式 >外部样式

布局

绝对定位

属性：position
值： absolute
设置了绝对定位的元素，相当于该元素被从原文档中删除了

绝对定位是基于最近的一个定位了的父容器

如果没有定位了的父容器， 所以”最近的一个定位了的父容器” 即body

重叠元素的层次，z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面

副作用：

​ 元素不会占用100%的宽度

​ margin: 0 auto失效

相对定位

属性：position
值：relative

与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离

浮动

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

属性：float
值： left,right

1、文字向右浮动，浮动后，原来的“坑”就让出来了并且是在原来的高度的基础上，向右浮动

2、文字向左浮动，向左浮动后，会把“坑”让出来，这个时候其他元素 就会过来试图占这个坑，但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了

3、不允许出现浮动元素
属性:clear
值: left right both none
如果p左边出现了浮动的元素，如此例，则设置clear:left 即达到不允许浮动元素出现在左边的效果

display显示方式

元素的display显示方式有多种，隐藏、块级、内联、内联-块级

内联是不换行，不能指定大小
块级是可换行，能指定大大小

有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block

水平居中

内容居中：

​ 设置标签属性align=“center” ，通过设置样式text-align:center

​ 父级div应用了绝对定位，要让子元素居中使用left: 0px;right: 0px;text-align: center;

元素居中：

​ 默认情况下div会占用100%的宽度,所以无法观察元素是否居中，设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中

​ span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中，span的居中可以通过放置在div 中，然后让div text-align实现居中

垂直居中

​ line-height方式

​ 借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上，设置了行高就不起作用

​ 首先通过display: table-cell; 或display: inline-block;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。这样对图片也可以居中

参考：https://blog.csdn.net/qq_36464859/article/details/90179774

左侧固定右侧自动填满

.left{
    width:200px;
    float:left;
    background-color:pink
}
.right{
    overflow:hidden;
    background-color:lightskyblue;
}

左右固定

.left{
    width:200px;
    float:left;
    background-color:pink
}
.right{
    width:200px;
    float:right;
    background-color:pink
}
.center {
    margin:0 200px;   
    background-color:lightblue
}

span之间空格问题

<!-- 这样写span之间是没有空格的-->
<span>我是span一个</span><span>我是span一个</span><span>我是span一个</span>
<br>
<!-- 这样写span之间是有空格的-->
<span>我是span一个</span>
<span>我是span一个</span>
<span>我是span一个</span>

​ 解决方法：

​ 使用float:left来解决。float使用完毕之后，记得在下面加上

用于使得后续的元素，不会和这些span重复在一起，似乎用br也可以

雪碧图的使用

使用背景的方式获取一部分图片

​ background:transparent url(https://blog.csdn.net/study/wangwang.gif) no-repeat scroll -83px -0px ;

​ 设置scroll -83px -0px 把图片向左滚动83个像素，向上滚动0个像素。
​ 再把div大小设置为和小图片大小一样，即可大小只显示部分图片的效果

借助裁剪的方式只显示部分图片：

​ clip:rect(top, right, bottom, left)

​ 绝对定位或固定定位元素才可以使用clip属性

img{
    position:absolute;
    left:-83px;
    clip:rect(0px 108px 25px 83px);
}

练习

1）练习-表格斑马线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 300px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td{
            border-bottom: 1px solid lightgray;
            text-align: center;
        }
        .head td{
            border-bottom-width: 2px;
        }

        tr:nth-child(even){
            background-color: #f8f8f8;
        }
    </style>
</head>
<body>
    <table>
        <tr class="head">
            <td>id</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr class="hang">
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>25</td>
        </tr>
        <tr class="hang">
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>12</td>
        </tr>
        <tr class="hang">
            <td>3</td>
            <td>王五</td>
            <td>男</td>
            <td>56</td>
        </tr>
        <tr class="hang">
            <td>4</td>
            <td>韩六</td>
            <td>女</td>
            <td>44</td>
        </tr>
        <tr class="hang">
            <td>5</td>
            <td>李七</td>
            <td>男</td>
            <td>88</td>
        </tr>
    </table>
</body>
</html>

2）练习-美人尖（其实就是倒三角）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 0px;
            background-color: red;
            border-top: 300px solid red;
            border-left: 300px solid white;
            border-right: 300px solid white;
        }

    </style>
</head>
<body>
    <div>

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

3）练习-断线下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            padding: 0 100px 2px 100px;
            border-bottom: 3px solid #b2d1ff;
        }
    </style>
</head>
<body>
    <span>商品</span>
    <span>数量</span>
    <span>价格</span>
    <span>小计</span>
</body>
</html>

4）练习-下拉菜单风格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            text-align: center;
            border: 2px solid lightgray;
        }
        a{
            display: block;
            padding: 10px 0;
        }
        a:hover{
            background-color: lightgray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        <a>新建</a>
        <a>打开</a>
        <a>保存</a>
        <a>退出</a>
    </div>

</body>
</html>

5）练习-相对定位，但是又不占用位置

原理：相对定位位置还在，给相对定位元素套一个父级div，父级绝对定位时，位置就会消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*去除所有外边距，加上下外边距，因为上下都有外边距时，会发生垂直外边距合并的问题*/
        *{
            margin: 0;
        }
        p{
            width: 150px;
            height: 50px;
            background-color: rosybrown;
            margin-bottom: 10px;
        }
        div{
            position: absolute;
        }
        .relative{
            position: relative;
            left: 180px;
            top: 0px;
        }

    </style>
</head>
<body>
    <p>我是文字一</p>
    <p>我是文字二</p>
    <div>
        <p class="relative">相对定位的文字</p>
    </div>
    <p>我是文字三</p>
    <p>我是文字四</p>
</body>
</html>

6）排版练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box clear">
        <div class="header">
            <img class="" src="img/img/1.png" alt="">
            <span>最新动态</span>
            <img class="header-margin" src="img/img/2.png" alt="">
            <span class="">设置</span>
        </div>
        <hr>
        <div class="clear padding">
            <div class="left">
                <div>
                    <img src="img/img/4.png" alt="">
                </div>
                <div>
                    <img src="img/img/5.png" alt="">
                    <div class="ral-position">6551</div>
                </div>
            </div>
            <div class="over">
                <img class="right" src="img/img/3.png" alt="">
                <p>热门回答，来自 机械 <a href="">关注的话题</a></p>
                <p class="up-down-margin"><a href="">人类史上令人叹为观止的极限精度制造成果有哪些？</a></p>
                <p>Vincent Fu,Materials Science,PhD</p>
                <div class=" clear content">
                    <img class="left" src="img/img/6.png" alt="">
                    <p class="over duan">
                        说到精度，就不得不提在材料学中最重要的一个方面：表征。
                        要项研究一种材料性能，握在手里把玩时远远不够的，就算你
                        拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了
                        知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍）
                        ，如果要获得更深...
                        <a href="">显示全部</a>
                    </p>
                </div>
                <div>
                    <img src="img/img/7.png" alt="">
                    <span>关注问题</span>
                    <img src="img/img/8.png" alt="">
                    <span>867条评论</span>
                    <img src="img/img/9.png" alt="">
                    <span>作者保留权力</span>
                </div>
            </div>
        </div>
        <hr>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    font: 12px "宋体";
}
a{
    text-decoration: none;
}
.box {
    padding-top: 20px;
    width: 600px;
    margin: 0 auto;
}
.content{
    padding: 15px 0px;
}
.clear:after{
    content:"";
    display:block;
    clear:both;
}
.over{
    overflow: hidden;

}
.duan{
    line-height: 23px;
}
.right{
    float: right;
}
.left{
    float: left;
    margin-right: 15px;
}
.ral-position{
    position: relative;
    top: -21px;
    left: 6px;
}
.display-block{
    display: inline-block;
    vertical-align: middle;
}
.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.header-margin{
    margin-left: 480px;
}
.padding{
    padding: 15px 0px;
}
.up-down-margin{
    margin: 8px 0px 15px 0px;
}

7）练习效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <div class="box1">
            <h3 class="type">英雄资料</h3>
            <div class="inline">
                <input type="checkbox">
                <span class="type">坦克</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">法师</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">刺客</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">辅助</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">新手</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">近战</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">远程</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">推进</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">打野</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">后期</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">潜行</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">战士</span>
            </div>
            <p class="price">英雄价格:</p>
            <div class="inline">
                <input type="checkbox">
                <span class="type">6300</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">4800</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">3150</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">1350</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">450</span>
            </div>
            <h3 class="type">物品资料</h3>
            <div class="inline">
                <input type="checkbox">
                <span class="type">生命值</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">攻击速度</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">护甲穿透</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">暴击</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">法术穿透</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">魔法抗性</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">法术伤害</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">物理伤害</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">消耗品</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">任性</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">法力值</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">生命偷取</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">冷却缩减</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">生命恢复</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">附魔</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">法力恢复</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">法术吸血</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">移动速度</span>
            </div>
            <div class="inline">
                <input type="checkbox">
                <span class="type">护甲值</span>
            </div>
        </div>
        <div class="box2">
            <div class="inline">
                <img src="img/imgs/0.jpg" alt="">
                <p>沙漠死神</p>
                <p>内瑟斯</p>
            </div>
            <div class="inline">
                <img src="img/imgs/1.jpg" alt="">
                <p>冰霜女巫</p>
                <p>丽桑卓</p>
            </div>
            <div class="inline">
                <img src="img/imgs/2.jpg" alt="">
                <p>酒桶</p>
                <p>古拉加斯</p>
            </div>
            <div class="inline">
                <img src="img/imgs/3.jpg" alt="">
                <p>众星之子</p>
                <p>索拉卡</p>
            </div>
            <div class="inline">
                <img src="img/imgs/4.jpg" alt="">
                <p>无双剑魔</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/5.jpg" alt="">
                <p>盲僧</p>
                <p>李青</p>
            </div>
            <div class="inline">
                <img src="img/imgs/6.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/7.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/8.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/9.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/10.jpg" alt="">
                <p>虚空先知</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/11.jpg" alt="">
                <p>神圣天使</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/12.jpg" alt="">
                <p>蜘蛛女皇</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/13.jpg" alt="">
                <p>虚空恶魔</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/14.jpg" alt="">
                <p>诡术妖姬</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/15.jpg" alt="">
                <p>龙血武姬</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/16.jpg" alt="">
                <p>德玛西亚</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/17.jpg" alt="">
                <p>刀锋意志</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/18.jpg" alt="">
                <p>复仇火焰</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/19.jpg" alt="">
                <p>豹女</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/20.jpg" alt="">
                <p>布里茨</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/21.jpg" alt="">
                <p>疾风剑豪</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/22.jpg" alt="">
                <p>死亡唱诵</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/23.jpg" alt="">
                <p>不详之刃</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/24.jpg" alt="">
                <p>惩戒之箭</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/25.jpg" alt="">
                <p>炼金术士</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/26.jpg" alt="">
                <p>精灵女巫</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/27.jpg" alt="">
                <p>沙漠之神</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/28.jpg" alt="">
                <p>深渊巨口</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/29.jpg" alt="">
                <p>皮城女警</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/30.jpg" alt="">
                <p>未来守护</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/31.jpg" alt="">
                <p>光辉女郎</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/32.jpg" alt="">
                <p>战争之影</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/33.jpg" alt="">
                <p>费雷尔卓</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/34.jpg" alt="">
                <p>战争之女</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/35.jpg" alt="">
                <p>狂暴之心</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/36.jpg" alt="">
                <p>蛮族之王</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/37.jpg" alt="">
                <p>皎月女神</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/38.jpg" alt="">
                <p>海洋之灾</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/39.jpg" alt="">
                <p>麦林炮手</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/40.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/41.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/42.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/43.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/44.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/45.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/46.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/47.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/48.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/49.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/50.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/51.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/52.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
            <div class="inline">
                <img src="img/imgs/53.jpg" alt="">
                <p>名字</p>
                <p>昵称</p>
            </div>
        </div>
    </div>

</body>
</html>

*{
    margin: 0;
    padding: 0;
}
img{
    height: 60px;
    width:60px;
    border: 1px solid gray;
}
img:hover{
    border-color: yellow;
    cursor: pointer;
}
.box2 p{
    color: chocolate;
}
.box2 .inline{
    display: inline-block;
    text-align: center;
    margin: 8px 15px;
    font-size: 14px;
}
.box1 .inline{
    display: inline-block;
    font-size: 14px;
    margin: 10px 0px;
    width: 75px;
}
h3{
    text-align: center;
}
.box2{
    background-color: #000000;
    width: 580px;
}
.box1{
    background-color: black;
    width: 235px;
    padding: 10px 25px;
    /*text-align: center;*/
}
.box{
    padding: 10px 20px;
    display: flex;
    width: 890px;
    background-color: #686767;
    margin: 0 auto;
    justify-content: space-between;
}
.type{
    color: white;
}
.price{
    padding: 15px 0px;
    color: #d78307;
    font: 15px "宋体";
    border-bottom: 1px dashed #8b8b8b;
}

8）练习效果图2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="tt">
        <p class="red_text">请注意：带有“*”的项目必须填写</p>
        <form action="">
            <p class="blue_text">请填写您的用户名：</p>
            <div class="flex-box">
                <div>
                    <p class="name"><span class="red">*</span>通行证用户名：</p>
                </div>
                <div>
                    <input type="text">
                    <p><a href="">查看用户名是否被占用</a></p>
                </div>
                <div>
                    <p class="info">用户名由a~z的英文字母（不区分大小写）、0~9的数字、
                        <b>点</b>、<b>减号</b>或<b>下划线</b>组成，
                        长度为3~18个字符，只能以数字或者字母开头和结尾，
                        例如:kyzy_001.
                    </p>
                </div>

            </div>
            <p class="blue_text">请填写安全设置：<span style="font-size: 12px">（安全设置用于验证账号和找回密码）</span></p>
            <p class="red_text">以下信息对保障您的账号安全及其重要，请您务必认真填写</p>
            <div class="flex-box">
                <div>
                    <p class="name"><span class="red">*</span>输入登录密码：</p>
                    <p class="name"><span class="red">*</span>登录密码确认：</p>
                </div>
                <div>
                    <input class="margin-bottom"  type="text">
                    <br>
                    <input type="text">
                </div>
                <div>
                    <p class="info">密码长度为6~16位，区分字母大小写，
                        登陆密码可以由字母、数字、特殊字符组成.
                        【<a href="#">更多说明</a>】
                    </p>
                </div>

            </div>
            <div class="flex-box">
                <div>
                    <p class="name"><span class="red">*</span>密码提示问题：</p>
                    <p class="name"><span class="red">*</span>密码提示答案：</p>
                </div>
                <div>
                    <input class="margin-bottom" type="text">
                    <br>
                    <input type="text">
                </div>
                <div>
                    <p class="info">当您忘记密码时可以由此找回密码. 例如，问题是“我的哥哥是谁？”，
                        答案为“peter2”. 问题长度<b>不大于36</b>个字符，
                        一个汉字占两个字符. 答案长度在6~30位之间，区分大小写.
                        【<a href="#">更多说明</a>】
                    </p>
                </div>

            </div>
            <div class="flex-box">
                <div>
                    <p class="name"><span class="red">*</span>输入安全码：</p>
                    <p class="name"><span class="red">*</span>安全码确认：</p>
                </div>
                <div>
                    <input class="margin-bottom" type="text">
                    <br>
                    <input type="text">
                </div>
                <div>
                    <p class="info">安全码是您找回密码的重要途径，
                        安全码长度为6~16位，区分字母大小写，
                        由字母、数字、特殊字符组成。
                        <span class="red">特别提醒：安全码一旦设定，将不可自行修改.</span>
                        【<a href="#">更多说明</a>】
                    </p>
                </div>
            </div>
            <div class="btn">
                <input type="submit" value="提交表单">
            </div>

        </form>
    </div>

</body>
</html>

*{
    margin: 0;
    padding: 0;
}
form{
    width: 628px;
    height: 560px;
    border: 1px solid #32ada6;
    padding: 10px;
    margin: 0 auto;
}
.tt{
    width: 650px;
    margin: 0 auto;

}
.flex-box{
    display: flex;
    align-items: center;
    height: 120px;
    border-bottom: 2px solid #dde6f9;
}
.name {
    width: 120px;
    margin-bottom: 10px;
}
.red_text{
    font: 14px "宋体";
    color: red;
}
.blue_text{
    color: blue;
    background-color: #ecf1fb;
    font-weight: bold;
}
.info{
    font: 13px "宋体";
    line-height: 19px;
    background-color: #f4f4f4;
    width: 300px;
    padding: 10px;
    margin-left: 10px;
}
.btn{
    width: 100px;
    margin: 0 auto;
}
.margin-bottom{
    margin-bottom: 10px;
}
input{
    height: 20px;
    background-color: #f4f4f4;
    border: 1px solid black;
}
.red{
    color: red;
}
标签
#前端 #css #服务器
html标签中 lang="en-US"和lang="zh-CN"的区别，你知道吗？
alalasheep的博客
01-09 3万+
我们在初学html时，可能会发现编辑器默认生成的格式是<html lang="en"></html>,其实这也是有原因的，lang是language的缩写，代表该网页属于哪一个国家或是地区的网页。下面列举几个常用lang： en-US 英国(美国) zh-CN 中文(简体，中国大陆) zh-SG 中文(简体，新加坡) zh-HK 中文(繁体，香港) zh-MO ...
JAVA编程——Throwable常见异常及源码详解
RamProg的博客
08-16 2061
Throwable
ubuntu 中文显示乱码问题
mydsyc的专栏
01-30 456
ubuntu 中文显示乱码问题  分类： LINUX 添加中文字符编码： $sudo vim /var/lib/locales/supported.d/local #添加下面的中文字符集 zh_CN.GBK GBK zh_CN.GB2312GB2312 zh_CN.GB18030GB18030 使其生效： $sudo dpkg-reconfigure locale
bat命令大全
xyzroundo的专栏
06-15 382
来源：http://blog.csdn.net/annhf/archive/2007/10/24/1842362.aspx 一.简单批处理内部命令简介 1.Echo 命令 打开回显或关闭请求回显功能，或显示消息。如果没有任何参数，echo 命令将显示当前回显设置。   语法 echo [{on│off}] [message] Sample：@echo off / echo hello wo...
CSS的属性选择器lang使用说明
chenzhao635的专栏
02-22 803
CSS 2 引入了属性选择器，属性选择器可以根据元素的属性及属性值来选择元素，今天我们来学习特定属性选择器lang的使用方法。 css :lang选择器定义用法介绍 lang 向带有指定 lang 属性开始的元素添加样式。 注意: 值是整个单词，单独像lang=“en”，或者使用连字符(-)如lang =“en-us”。 语法： :lang { sty...
前端基础二之css篇
布小禅的博客
07-16 927
css的一些知识点
Web前端——CSS基础二
qq_52957637的博客
07-27 1157
Web前端——CSS基础二
【前端学习笔记二】CSS基础二
qq_46056318的博客
08-03 1030
使用。
『JavaWeb前端』二、CSS - 基础
努力的搬砖人
05-31 271
JavaWeb中的CSS知识总结-精炼
前端基础（二）：CSS
m0_61426204的博客
07-24 632
前端基础：css
前端基础入门二（CSS）
weixin_34054931的博客
06-01 348
为什么80%的码农都做不了架构师？>>> ...
前端学习（二）CSS基础1
whitefish520的博客
07-22 9493
什么是CSS CSS的引入： 由于HTML只关注内容的语义，导致单纯用HTML做出的网页很丑 在HTML中设置样式非常不方便，也非常繁琐 使用CSS能让网页更加美观 CSS让HTML从样式中脱离，HTML专门做结构，CSS专门做样式 CSS的定义：层叠样式表（Cascading Style Sheets），用来做网页的样式，CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式 CSS的作用：主要用于设置HTML页面中的文本内容（字体、大
前端开发基础（二）——CSS
Lyrelion的博客
03-02 3197
一.CSS初识（层叠样式表） 1.理想中的结果： 结构(html)与样式(css)相分离 2.作用：用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 3.引入CSS样式表 <!-- 行内式（内联式）：控制当前标签，没有实现样式和结构分离 --> <标签名 style="属性1:属性值1; ...
前端学习--CSS基础（二）
最新发布
Tang4901的博客
02-19 760
学习文档。
Web前端学习之 CSS基础二
程序员小白的博客
10-05 141
Web前端学习完整代码如下所示 完整代码如下所示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* */ * { font-size: 30px; text-align: center; color: pink; } /*
【前端知识点总结】CSS 基础二
jiang_ziY的博客
02-11 715
CSS3 盒模型 :box-sizing:border-box;` 内边距边框不会撑大盒子,盒子最终大小就是你设置的宽高。
CSS 基础篇 （二） web 前端基础
web 前端 基础记录
06-22 341
CSS 基础篇 （二）1. CSS 外观属性1.1 CSS 文本颜色1.2 行间距1.3 文字对齐方式1.4 首行缩进1.5 字间距1.6 单词间距1.7 文本装饰1.8 颜色半透明(css3)1.9 文字阴影2. 引入CSS样式表（书写位置）2.1 行内式（内联样式）2.2 内部样式表（内嵌式）2.3 外部样式表（外链式）2.4 标签显示模式2.5 块级元素2.6 行内元素2.7 块级元素和行内元素区别2.8 行内块元素33 CSS 背景(background)3.1 背景
前端基础CSS（二）
weixin_60406448的博客
03-13 438
padding：5px 10px 20px 30px 上5px，右10px，下20px，左30px（顺时针）padding：5px 10px 20px 上5px，左右10px，下20px。权重级别：继承或*通配符选择器(0,0,0,0)<元素选择器(0,0,0,1)<类选择器、伪类选择器（0,0,1,0）复合选择器会进行权重叠加：例 ul li{}权重为0,0,0,2 li权重为0,0,0,1。< id选择器(0,1,0,0) < 行内样式 style=""(1,0,0,0)
前端总结·基础篇·CSS（二）视觉
weixin_39037804的博客
09-13 219
前端总结系列 前端总结·基础篇·CSS（一）布局 前端总结·基础篇·CSS（二）视觉 前端总结·基础篇·CSS（三）补充 前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String） 前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值