目录
1.边框样式
border-style属性用于设置边框样式
- none 没有边框
- solid 边框为实线
- dashed 边框为虚线
- dotted 边框为点线
- double 边框为双实线
案例：制作一个边框为实线的正方形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个边框为实线的正方形</title> <style> div{ width: 200px; height: 200px; border-style: solid; } </style> </head> <body> <div></div> </body> </html>
2）效果
案例：制作一个边框为虚线的正方形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个边框为虚线的正方形</title> <style> div{ width: 200px; height: 200px; border: 1px dashed #000; } </style> </head> <body> <div></div> </body> </html>
2）效果
案例：制作一个边框为点线的正方形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个边框为点线的正方形</title> <style> div{ width: 200px; height: 200px; border-style: dotted; } </style> </head> <body> <div></div> </body> </html>
2）效果
案例：制作一个边框为双实现的正方形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个边框为双实现的正方形</title> <style> div{ width: 200px; height: 200px; border-style: double; } </style> </head> <body> <div></div> </body> </html>
2）效果
案例：制作一个四个边框样式都不同的正方形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个四个边框样式都不同的正方形</title> <style> div{ width: 200px; height: 200px; border-top-style: solid; border-right-style: dashed; border-bottom-style: dotted; border-left-style: double; } </style> </head> <body> <div></div> </body> </html>
2）实现
2.边框宽度
border-width定义边框的宽度
案例定义一个四个边框宽度都不同的正方形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个四个边框宽度都不同的正方形</title> <style> div{ width: 200px; height: 200px; border-top-width: 2px; border-right-width: 4px; border-bottom-width: 6px; border-left-width: 8px; } </style> </head> <body> <div></div> </body> </html>
2）效果
3.边框颜色
border-color属性定义边框的颜色
案例:制作四个边框的颜色都不同的实线边框
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作四个边框的颜色都不同的实线边框</title> <style> .myDiv{ width: 200px; height: 200px; border-style: solid; border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; } </style> </head> <body> <div class="myDiv"></div> </body> </html>
2）效果
案例:制作四个边框颜色都一样的双实线边框
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作四个边框颜色都一样的双实线边框</title> <style> .myDiv{ width: 200px; height: 200px; border-style: double; border-color: #2ff340; } </style> </head> <body> <div class="myDiv"> </div> </body> </html>
2）效果
4.内边距属性
padding属性设置内边距
案例：制作一个四个内边距都不一样的图片框
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个四个内边距都不一样的图片框</title> <style> .myDiv{ width: 200px; height: 200px; padding-top: 50px; padding-right: 100px; padding-bottom: 150px; padding-left: 200px; border: 2px solid #000; } </style> </head> <body> <img class="myDiv" src="./aImg.png"> </body> </html>
2）效果
案例：制作一个四个内边距都一样的图片框
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个四个内边距都一样的图片框</title> <style> .myDiv{ width: 200px; height: 200px; border: 1px solid #000; padding: 20px; } </style> </head> <body> <img class="myDiv" src="./aImg.png" > </body> </html>
2）效果
5.外边距属性
margin属性是设置外边框距离，距离与距离之间不同
案例：制作一个四个外边框距离都不一样的盒子
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个四个外边框距离都不一样的盒子</title> <style> .outDiv{ width: 260px; height: 260px; border: solid 1px #cc1717; padding: 0px; } .inDiv{ width: 200px; height: 200px; border: solid 1px #8383c9; margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px; } </style> </head> <body> <div class="outDiv"> <img class="inDiv" src="./aMouse.png"> </div> </body> </html>
2）效果
案例：制作一个四个外边框距离都一样的盒子
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个四个外边距都一样的盒子</title> <style> .outDiv{ width: 200px; height: 200px; border: 2px solid #000; margin: 50px; } .inDiv{ width: 180px; height: 180px; border: 2px solid #000; margin: 8px; } </style> </head> <body> <div class="outDiv"> <img class="inDiv" src="./aMouse.png"/> </div> </body> </html>
2）效果
6.设置背景色
background-color用于设置标签的背景颜色
案例：制作一个红色的div盒子和一个蓝色的div盒子
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个红色的div盒子和一个蓝色的div盒子</title> <style> .redDiv{ width: 200px; height: 200px; background-color: red; } .blueDiv{ width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="redDiv"></div> <div class="blueDiv"></div> </body> </html>
2）效果
7.设置背景图像
background-image属性设置盒子的背景图
案例:为一个div盒子设置背景图
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>为一个div盒子设置背景图</title> <style> .myClassStyle{ width: 512px; height: 512px; background-image: url("./aImg.png"); border-radius: 50%; } </style> </head> <body> <div class="myClassStyle"></div> </body> </html>
2）效果
8.设置图像平铺
通过background-repeat设置图像平铺
repeat图像重复
no-repeat图像不重复
案例：设置图像平铺
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>设置图像平铺</title> <style> .myClassStyle{ background-image: url("./aMouse.png"); background-repeat: repeat; background-position: center; width: 4000px; height: 3000px; } </style> </head> <body> <div class="myClassStyle"></div> </body> </html>
2）效果
9.设置背景图像的位置
background-postition用于设置图像的位置
案例：图像在盒子的左边
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图像在盒子的左边</title> <style> .onediv{ width: 800px; height: 800px; border: 1px solid #000; padding: 20px; background-image: url(./aImg.png); background-repeat: no-repeat; background-position: left; } </style> </head> <body> <div class="onediv"></div> </body> </html>
2）效果
案例：图像在盒子的右边
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片在盒子的右边</title> <style> .myDiv{ width: 800px; height: 800px; border: 1px solid #000; background-image: url("./aImg.png"); background-position: right; background-repeat: no-repeat; } </style> </head> <body> <div class="myDiv"></div> </body> </html>
2）效果
案例：图像在盒子的上边
1）代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像在盒子的上面</title>
<style>
.myDiv{
width: 1000px;
height: 1000px;
border: 1px solid #000;
background-repeat: no-repeat;
background-image: url("./aImg.png");
background-position: top ;
}
</style>
</head>
<body>
<div class="myDiv">
</div>
</body>
</html> 
2）效果
案例：图像在盒子的下边
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图像在盒子的下边</title> <style> .mydiv{ width: 800px; height: 800px; border: 1px solid #000; padding-bottom: 150px; background-image: url("./aMouse.png"); background-repeat: no-repeat; background-position: bottom; } </style> </head> <body> <div class="mydiv"></div> </body> </html>
2）效果
案例：图像在盒子的中间
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图像在盒子的中间</title> <style> .mydiv{ width: 800px; height: 800px; background-color: #ccc; background-image: url(./aImg.png); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="mydiv"></div> </body> </html>
2）效果
10.设置背景图像固定
通过background-position和background-attachment:fixed属性固定图像位置
案例：固定图像到盒子的指定位置
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定图像到指定的位置</title> <style> .myDivStyle { width: 800px; height: 800px; background-image: url("./aImg.png"); background-repeat: no-repeat; background-position: 50px 50px; background-attachment: fixed; border: 2px solid salmon; } </style> </head> <body> <div class="myDivStyle"></div> </body> </html>
2）效果
11.盒子的宽和高
width属性指定盒子的宽度
height属性指定盒子的高度
案例制作一个长方形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个长方形</title> <style> .mydiv{ width: 200px; height: 100px; border: 1px solid #000; } </style> </head> <body> <div class="mydiv"></div> </body> </html>
2）效果
案例制作一个正方形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作一个正方形</title> <style> .myDiv{ width: 200px; height: 200px; border: 1px solid #000; } </style> </head> <body> <div class="myDiv"></div> </body> </html>
2）效果
附录:
所用素材下载
扫一扫
3010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
