背景
背景其实不是很多,能够想到的也就只有背景颜色,和背景图片
背景颜色
<div>
background-color="red";
</div>
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
/*边框border:边框的粗细,边框的样式,边框的颜色*/
border: 1px solid red;
/*默认是全部平铺的 就是repeat*/
background-image: url("images/abc.jpg");
}
.div1{
/*水平平铺background-repeat: repeat-x;
竖直平铺background-repeat: repeat-y;
*/
background-repeat: repeat-x;
}
.div2{
/*
不平铺background-repeat: no-repeat;
环绕background-repeat: round;
...
*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
背景总结:
div{
/*颜色,图片,图片显示的位置(x,Y) 平铺方式*/
background:red url("../images/abc.png") 270px 10px no-repeat;
}
/*相当于*/
div{
background-image:url("../images/abc.png");
background-repeat:no-repeat;
background-position:270px 10px;
}
渐变界面
盒子模型
margin:外边距
border:边框
padding:内边距
边框(border)
- 边框的粗细
- 边框的样式
- 边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 ul li a body{
/*body总有一个默认的外边距为margin:0;*/
margin: 0;
padding: 0;
text-decoration: none;
}
#box{
width: 300px;
/*粗细,样式,颜色*/
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #221362;
line-height: 30px;
margin: 0;
}
form{
background-color: #41d7b9;
}
div:nth-of-type(1) input{
/*solid 实线*/
border: 3px solid black;
}
div:nth-of-type(2) input{
/*dashed 虚线*/
border: 3px dashed black;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名</span>
<input type="text">
</div>
<div>
<span>密码</span>
<input type="password">
</div>
</form>
</div>
</body>
</html>