HTML+CSS复习第二天

admin • • 5G

小米商城的案例，使用伪元素在图片周围加上边框线

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            background-color: #5F5750;
            width: 234px;
            height: 170px;
            padding: 3px;
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
        }

        li {
            width: 76px;
            height: 82px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            position: relative;
            opacity: .7;
            transition: all .3s linear;
        }

        li:hover {
            opacity: 1;
        }

        /* 横线 */

        li::after {
            content: '';
            position: absolute;
            width: 64px;
            height: 1px;
            background-color: #665e57;
            top: 1px;
            left: 6px;
        }

        /* 竖线 */

        li::before {
            content: '';
            position: absolute;
            width: 1px;
            height: 70px;
            background-color: #665e57;
            top: 6px;
            left: 1px;
        }

        img {
            width: 24px;
            height: 24px;
        }

        div {
            padding-top: 4px;
            font-size: 12px;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>

    </ul>
</body>

</html>

css边框设置

border是设置边框的
	border:1px solid #ccc --->这一种是复合写法
我们也可以分开写
border-style:线条 里面包含solid(实线)、dotted(点状)、dashed(虚线)、dobule(双实线)
border-color:设置边框的颜色
border-width:设置边框的大小

内边距和外边距

内边距使用：padding
存在四个值：代表的是上、右、下、左
存在三个值：代表的是 上 左右 下
存在两个值 ： 代表的是 上下 左右
外边距使用margin:
使用的形式同上

css-背景

background0-color:背景颜色
background-image:背景图片
background-repeat:背景图是否平铺
background-size:背景图大小
background-position:背景图的位置

浮动

浮动的使用:使用float:left或者float:right
浮动产生的问题：
	脱离文档流
清除浮动的方法：
	使用伪元素
	给父盒子添加overflow:hidden
	在最后创建一个盒子使用clear:both
	给父盒子添加高度

定位

position:relative 相对定位 相对于自己
position:absolute 绝对定位  脱离文档流
position:fiexd:固定定位        脱离文档流
position:static静态定位

盒子的显示与隐藏

三种方式：
	display:none/block  不占位置
	opacity:透明度 在0~1之间 占位置
	visibility:hidden 占位置

清除图片缝隙问题

1.给父盒子添加font-size:0
2.使用dispaly:block
3.使用vertical-align:middle

em和rem的使用

两者都是单位
em是相对于父元素来说的
rem是相对根元素（html）来说的

定位案例–制作瑞士国旗

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            position: relative;
            background-color: red;
        }
        
        .box div {
            background-color: #fff;
        }
        /* 横 */
        /*         
        .box div:first-child {
            width: 500px;
            height: 300px;
            position: absolute;
            top: 100px;
            left: 0;
        }
        
        .box div:last-child {
            width: 300px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 100px;
        } */
        
        .box div:first-child {
            width: 300px;
            height: 80px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .box div:last-child {
            width: 80px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

</html>

z-index的使用

他是配合定位一起使用的，可以提高层级 默认值是0，可以是正负值

form表单的使用

表单类型包括
	textarea:文本域
	input:输入框
	select:下拉框
	按钮：button
	复选框按钮：input:checkbox
	input:file上传文件 等等。。。。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>