1.css属性_背景/文本/字体/边框/浮动/展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* body{
background-color: #a3d1dd;
background-image: url("../img/girl2.jpg");
background-repeat: no-repeat;
background-position: 50px 10px; /*横着是x轴*/
}*/
body{
color: green; /*文本属性*/
direction: ltr; /*文本方向*/
line-height: 30px; /*行高*/
letter-spacing: 20px; /*字符间距*/
text-decoration: overline; /* 下划线underline */
text-indent: 2em; /* 首行缩进*/
font-size: 25px; /*字体属性*/
font-family: 楷体; /*相当于html中face属性*/
font-weight: bold; /* 加粗*/
font-style: italic; /* 斜体*/
}
</style>
</head>
<body>
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1. 边框: border: 1px green solid; solid : 实线(固体)
2. float : 浮动 clear: 清除浮动效果
*/
div{
border: 1px green solid;
width: 150px;
height: 150px;
float: left;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div style="clear: left">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
display : 1. inline : 内联 不换行
2. block : 块级
3. none : 隐藏
*/
div{
display: none; /*将div隐藏*/
}
span{
display: block; /*将span换行*/
}
</style>
</head>
<body>
<div>1</div> <!-- 换行 -->
<div>2</div>
<div>3</div>
<span>span1</span> <!-- 不换行 -->
<span>span2</span>
<span>span3</span>
</body>
</html>
2.盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
每个标签都可以看成一个盒子(box)。5大要素: width height border padding margin
1/2. width/height：指的是内容的宽高(边框里面: 内容 + 内间距)
3. border : 边框，有线宽
4. padding : 内间距 (边框 和 内容之间的距离)
5. margin : 外间距 (当前标签与其他标签的距离)
*/
div{
border: 1px green solid;
width: 100px;
height:100px;
padding: 10px;
padding-left: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
3.注册案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
big的内容: 750px(包含3个小div)
2个side的div大小= 200 * 2 + 4 = 404
1个middle的div大小= 750-404-2 = 344
*/
#big{
border: 1px red solid;
height: 450px;
width: 750px;
margin: auto;
}
.side{
border: 1px green dashed;
width: 200px;
height: 450px;
float: left; /* 流式布局 */
}
#middle{
border: 1px blue dashed;
float: left;
height: 450px;
width: 344px;
}
</style>
</head>
<body>
<div id="big">
<div class="side">1</div>
<div id="middle">2</div>
<div class="side">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#big{
border: 10px lightgrey solid;
height: 450px;
width: 750px;
margin: auto;
}
.side{
width: 200px;
height: 450px;
float: left;
}
#middle{
float: left;
height: 450px;
width: 344px;
}
</style>
</head>
<body>
<div id="big">
<div class="side">
<span style="color: orange;font-size: 20px;margin: 30px">新用户注册</span> <br>
<span style="color: grey;font-size: 20px">USER REGISTER</span> <br>
</div>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<div id="middle">
<form action="#"> <!--4行3列的表-->
<table>
<tr>
<td>用户名</td> <!--第一列-->
<td colspan="2"> <!--跨两列-->
<input type="text" placeholder="请输入账号" size="30" style="border-radius: 5px">
</td>
</tr>
<tr>
<td>密码</td>
<td colspan="2">
<input type="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text">
</td>
<td>
<img src="../img/btn.jpg" alt="">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
</td>
<td></td>
</tr>
</table>
</form>
</div>
<!-- 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<div class="side">
已有账号?
<a href="#" style="color: hotpink;text-decoration: none">立即登录</a>
</div>
</div>
</body>
</html>
B站/知乎/微信公众号：码农编程录
