5-1 练习css 总结
2024-09-04 10:34:05
1.
边框
border:3px dotted;
border: 2px solid yellow; 背景颜色
background-color: red; 外攘
margin:20px 0 20px 0; 内推
padding-left: 20px; 宽高
width:128px;
height: 64px;
#背景图案
background: url('images/rose.png');
background-size:contain;
background-size: 150px 150px; #自定义 #盒子模型
box-sizing: border-box; #相对定位
position: relative;
left:64px;
top:64px; #绝对定位
父级必须是定位：
.bg{
position: absolute;
} .yellow-flower{
position: absolute;
left:128px;
top:128px;
} #居中
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%); 准星修改
transform: translate(-50%,-50%);
2.练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css总结</title>
<link rel="stylesheet" href="css/semantics.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css.css" media="screen" title="no title" charset="utf-8">
</head>
<body> <div class="block-1">
1111
</div> <div class="block-2">
222
</div> <div class="block-3">
333
</div>
</body>
</html>
.block-1{
border: 2px solid yellow;
background-color: pink;
margin:20px 0 20px 0;
padding-left: 20px;
width:64px;
height: 64px;
}
.block-2{
border:3px dotted;
border: 2px solid yellow;
background-color: red;
margin:20px 0 20px 0;
padding-left: 20px;
width:128px;
height: 64px;
}
.block-3{
border: 2px solid ;
background-color: rgb(57, 241, 160);
margin:20px 0 20px 0;
padding-left: 20px;
width:256px;
height: 64px;
}
3.box-sizing: border-box;的作用
.block-1{
box-sizing: border-box;
}
4.最终版本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css总结</title>
<link rel="stylesheet" href="css/semantics.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css.css" media="screen" title="no title" charset="utf-8">
</head>
<body > <div class="bg"> <div class="flower">
<div class="point"> </div>
</div> <div class="block-1">
1111
</div> <div class="block-2">
222
</div> <div class="yellow-flower">
<div class="point"> </div>
</div> <div class="block-3">
333
</div> </div> </body>
</html>
body{
margin: 0;
background: url('images/brick.jpg');
background-size: 150px 150px;
}
.bg{
border: 8px solid rgb(77, 217, 27);
background-color: blue;
width: 300px;
height: 300px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.block-1{
box-sizing: border-box;
padding-left: 20px;
width: 64px;
height: 64px;
background: url('images/grass.png');
background-size: contain;
}
.block-2{
box-sizing: border-box;
padding-left: 20px;
width:128px;
height: 64px;
background: url('images/grass.png');
background-size: contain;
}
.block-3{
box-sizing: border-box;
padding-left: 20px;
width:256px;
height: 64px;
background: url('images/grass.png');
background-size: contain;
}
.yellow-flower{
width: 64px;
height: 64px;
background: url('images/flower.png');
background-size:contain;
position: absolute;
left:128px;
top:128px;
}
.flower{
width: 64px;
height: 64px;
background: url('images/rose.png');
background-size:contain;
position: relative;
left:64px;
top:64px;
}
.point{
width: 8px;
height: 8px;
background-color: rgb(240, 120, 22);
}
最新文章
- git安装及命令使用和github网站
- commonjs AMD,CMD
- 为七牛云存储开发的PHP PEAR 包：Services_Qiniu
- git tag之后如何修改
- Python调试工具-Spyder
- python时间函数
- js 与 ios Android交互
- JAVA_SE基础——54.异常
- jna调用c++的dll
- java Calendar 入门【转】
- From传值
- sql server 游标的简单用法
- hdfs fsimage namenode 应该设置多少堆内存合适
- [译] Go 并发编程基础
- python __setattr__和__getattr__
- Material Design系列第二篇——Getting Started
- JavaScript 累加求和练习
- jQuery选择器this通过onclick传入方法以及Jquery中的this与$(this)初探，this传处变量等
- mysql常用函数示例
- mongoDB GUI客户端工具大全