小米商城的案例,使用伪元素在图片周围加上边框线
<!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上传文件 等等。。。。
文章来源地址https://www.toymoban.com/news/detail-563822.html
文章来源:https://www.toymoban.com/news/detail-563822.html
到了这里,关于HTML+CSS复习第二天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!