当前位置:网站首页>盒子模型小练习
盒子模型小练习
2022-08-05 05:25:00 【Y-琼眸】
上一篇文章已经讲了盒子模型的基本内容了,再简单总结一下
盒子模型分为:内容区、内边距、边框、外边框
1.内容区content 元素中所有子元素和文本内容都在内容区排列
width 设置宽
height 设置高
2.边框border 给元素设置边框,边框是盒子的边缘
边框里必须要指定三个样式:样式 大小 颜色
3.内边距padding 是内容区到边框的距离
4.外边框margin 是边框到页面边上的距离
接下来我们来做一个小练习。
大家看看下面这个图片
我相信大家一定可以做出来
那些下面附上我自己敲的内容,大家可以对照着看看,要是有什么问题也可以提出来一起研究研究,毕竟我写也不是最完美的。
<!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>美容chanp</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #686A6B;
}
main {
width: 600px;
height: 600px;
background-color: #EEE7E1;
}
.box {
margin-left: 120px;
width: 340px;
height: 376px;
background-color: white;
}
h2 {
color: white;
font-size: 18px;
text-indent: 10px;
width: 340px;
height: 50px;
line-height: 50px;
background-color: #E9185A;
}
li {
border-bottom: #B8B5B5 1.5px dashed;
line-height: 35px;
}
span {
vertical-align: middle;
color: white;
display: inline-block;
width: 25px;
height: 25px;
line-height: 25px;
background-color: black;
border-radius: 50%;
text-align: center;
}
a:hover{
color: #E9185A;
}
a:hover span{
background-color: #E9185A;
}
</style>
</head>
<body>
<main>
<div class="box">
<h2>
大家都喜欢买的美容产品
</h2>
<ul>
<li>
<a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a>
</li>
<li>
<a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a>
</li>
<li>
<a href="#"><span>3</span> OLAY玉兰油多效修护霜 50g</a>
</li>
<li>
<a href="#"><span>4</span> 巨型一号丝瓜水320ML</a>
</li>
<li>
<a href="#"><span>5</span> 倩碧保湿洁肤水2号 200ml</a>
</li>
<li>
<a href="#"><span>6</span> 比度克细肤淡印霜 30g</a>
</li>
<li>
<a href="#"><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a>
</li>
<li>
<a href="#"><span>8</span> SK-II护肤精华露 215ml</a>
</li>
<li>
<a href="#"><span>9</span> 欧莱雅青春密码活颜精华肌底液</a>
</li>
</ul>
</div>
</main>
</body>
</html>
这就是今天的小练习,大家一定要自己敲一敲。
边栏推荐
- Detailed explanation of ten solutions across domains (summary)
- el-progress implements different colors of the progress bar
- 媒体查询、rem移动端适配
- 大小屏适配
- 系统基础-学习笔记(一些命令记录)
- sql server duplicate values are counted after
- NB-IOT智能云家具项目系列实站
- May I ask how to read the binlog of the two tables of hologres through flink sql, and then how to join?
- js 使用雪花id生成随机id
- ALC experiment
猜你喜欢
随机推荐
Network Troubleshooting Basics - Study Notes
GetEnumerator method and MoveNext and Reset methods in Unity
多用户商城多商户B2B2C拼团砍价秒杀支持小程序H5+APP全开源
Nacos配置服务的源码解析(全)
花花省V5淘宝客APP源码无加密社交电商自营商城系统带抖音接口
Mina's long and short connections
Successful indie developers deal with failure & imposters
摆脱极域软件的限制
DevOps流程demo(实操记录)
Take you in-depth understanding of cookies
What is the website ICP record?
Media query, rem mobile terminal adaptation
【FAQ】什么是 Canon CCAPI
## 简讲protobuf-从原理到使用
Transformer详细解读与预测实例记录
人人AI(吴恩达系列)
Native JS takes you to understand the implementation and use of array methods
config.js相关配置汇总
LeetCode practice and self-comprehension record (1)
Introduction to Network Layer Protocols