✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* body 总有一个默认的外边距 */
/* 常见操作 */
body{
margin: 0;
padding: 0;
text-decoration: none;
}
/* border 粗细 样式 颜色 */
#box{
300px;
border: 1px solid red;
padding: 0 0 0 0;
}
h2{
/* 去外边距 */
margin: 0;
font-size: 16px;
background-color: gold;
line-height: 30px;
color: white;
}
form{
background: gold;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed purple;
}
div:nth-of-type(3) input{
border: 2px dashed red;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>账户：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 盒子计算方法
margin + border + padding + 内容宽度 -->
<!-- 外边距妙用：居中元素 -->
<style>
/* 顺时针旋转 上右下左 */
/* margin:0 全0 */
/* margin:0 1px 上下0 左右1 */
/* margin:0 1px 2px 3px 上右下左*/
#box{
300px;
border: 1px solid red;
/* 上下为0 左右居中 */
margin: 0 auto;
}
h2{
margin: 0;
font-size: 16px;
background-color: gold;
line-height: 30px;
color: white;
}
form{
background: gold;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>账户：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
圆角边框
边框圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 左上 右上 右下 左下 顺时针 -->
<!-- 圆 圆角 = 半径 + 边框 -->
<style>
div{
100px;
height: 100px;
border: 10px solid red;
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}
img{
border-radius: 37px;
}
</style>
</head>
<body>
<div></div>
<img src="images/demo.png" alt="">
</body>
</html>
阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- margin: auto; 居中
要求 块元素 块元素有固定的宽度-->
<style>
img{
margin: auto;
border-radius: 37px;
box-shadow: 10px 10px 50px yellow;
}
</style>
</head>
<body>
<div style=" 1000px; height: 500px; display: block; text-align: center">
<img src="images/demo.png" alt="">
</div>
</body>
</html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14980267.html
版权所有，如需转载请注明出处。