华子目录
什么是div
div本身是没有任何含义的，它一般是作为划分区域的标签，是一个很单纯的标签，可塑性很强，一般用来做容器，所以称为盒子。把对应的内容放在div盒子里面（分割区域，div本身没有宽高、颜色属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
*{
margin: 0;//清除外边距
padding: 0;//清除内边距
}
.box{
width:200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">我最喜欢麦当了，他很帅，很有担当</div>
</body>
</html>
div盒子模型
盒子组成：
内容区（content）
内边距（padding）：盒子里的内容距离盒子边框的距离
边框（border）
外边框（margin）：盒子距离整个网页边界的距离
注：
- 如果把盒子的宽高写死，在设置padding，会把盒子撑大
- 如果盒子没有设定宽高，就会随内容变化而变化
- 有时候盒子为了扩展性，只会设置宽度，不会设置高度，让盒子随着内容增长
盒子的核心属性：
width：宽度，默认为浏览器100%
height：高度，默认为盒子内容
overflow：溢出处理（盒子装不下怎么办）（常常与img标签使用）
:auto让浏览器看着办（一般按照scroll执行）
:scroll通过滚轮条显示溢出部分
:visible照常显示溢出部分（默认）（整体显示）
:hidden隐藏溢出部分
盒模型标签属性：
margin设置外边距
padding设置内边距
margin和padding里面4个不同写法：
padding:10px;距离上下左右10px
padding:10px 15px;上下10px，左右15px
padding:10px 15px 10px;上10px，左右15px，下10px
padding:10px 15px 20px 25px;上，右，下，左
margin（同上）
单独设置方向：
margin-top设置上外边距
margin-right设置右外边距
margin-bottom设置下外边距
margin-left设置左外边距
padding-top设置上内边距
padding-right设置右内边距
padding-bottom设置下内边距
padding-left设置左内边距
margin设置左右居中:
margin:任何px auto;
边框（border）
边框就是盒子边缘
border-width设置边框粗细（默认与border一样）
border-color设置边框颜色（默认为黑色）
border-style设置边框样式（div默认没有边框样式，只有设置了边框样式，再设置border-width和border-color时才有效，否则不生效）
none空
solid实线
double双实线
dashed虚线
dotted点线
border-radius设置边框圆角
border-top设置上边框
border-right设置右边框
border-bottom设置下边框
border-left设置左边框
边框的符合写法：
border:10px solid #096
粗细 样式 颜色
怪异盒与标准盒模型
怪异盒模型和标准模型区别在于 width height所包含的部分不同，标准盒模型width height只表示内容区， 而怪异盒模型的width height包含内容、内边距、边框部分
所以我们可以使用 box-sizing 属性来指定盒模型的类型
box-sizing: border-box;/*开启怪异盒模型*/
元素类型
常见的元素类型有：块级元素，行内元素，行内块元素（这里所说的元素就是指 标签）
块级元素基础特性（block）
相当于地主，有一块自己的地盘，自动换行
常见的块级元素：
div p h1-h6 ol ul li dl dt dd
特性：
1.块元素总是独占一行，不和其他的元素并排
2.块元素有宽高，边距属性，这些都可以自己设置
3.块元素的宽度默认是浏览器的100%，高度为内容高度
4.块元素可以包含行内元素（但是p标签不能放块元素中，也就是p标签里不能嵌套div，p，h等块级元素）
行内元素基础特性（inline）
相当于打工人，没有属于自己的一块地（元素与元素之间上下左右默认都存在空格）
常用的行内元素：
span a b strong i u img
特性：
1.行内的默认宽高是自身的属性
2.行内元素设置宽高没有意义 不具备结构能力
3.行内元素不会独占一行 默认都是放在一起的
4.行内元素不能放块元素 只能放其他行内元素（但是a标签可以放块级元素）（a标签里面可以放div和img）
行内块元素（inline-block）
元素与元素之间上下左右默认都存在空格
行内块元素是行内和块元素结合体(融合技) 同时具有两者特征(主块 辅行)
1.相邻的行内元素(行内块)在一行的 末尾会有一个空格
2.默认宽度是内容的宽度
3.宽高 内外边距都可以设置
元素类型转换
display:类型转换样式
display:none;元素不显示 浏览器也不渲染
display:inline-block;把标签转为行内块元素
display:inline;把标签转为行内元素
display:block;把标签转为块元素
清除样式
最省事的方法，但不推荐
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
}
最推荐的写法，但是相对繁琐
body,dl,dd,p,h1,h2{
margin: 0;
}
ol,ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
border: none;
}
作业
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
td {
padding: 8px; /* 单元格内边距 */
text-align: left; /* 文本对齐 */
background-color: #eaeaea;
}
th {
background-color: #cbcbcb;
}
}
</style>
</head>
<body>
<form action="#" method="get">
<table>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="woman">女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input name="like" type="checkbox" value="write"> 写作
<input name="like" type="checkbox" value="music"> 听音乐
<input name="like" type="checkbox" value="sport"> 体育
</td>
</tr>
<tr>
<td>省份</td>
<td>
<select name="province">
<option value="shaanxi" selected>陕西省</option>
<option value="shanxi">山西</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea name="Intro" cols="23" rows="5"></textarea></td>
</tr>
<tr>
<th colspan="2">
<input type="submit">
<input type="reset">
</th>
</tr>
</table>
</form>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
td {
padding: 5px;
text-align: left;
}
#free {
text-align: right;
}
.text {
font-size: 12px;
color: #9b9b9b;
}
.text2 {
height: 30px;
}
#log {
font-size: 25px;
color: #ffffff;
background: #2A91D8;
text-align: center;
}
#title1 {
font-size: 25px;
}
#title2 {
font-size: 20px;
}
#input {
width: 150px;
}
</style>
</head>
<body>
<form action="#" method="get">
<table>
<tr>
<td rowspan="9"><img src="./img/1.jpg" alt="QQ" width="180"></td>
<td width="200px" rowspan="9"></td>
<td height="100px"></td>
<td width="180px"></td>
</tr>
<tr>
<td colspan="2" height="25px"><span id="title1"><b>欢迎注册QQ</b></span></td>
</tr>
<tr>
<td><span id="title2"><b>每一天，乐在沟通。</b></span></td>
<td id="free"><a href="#">免费靓号</a></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="username" placeholder="昵称" size="50px" class="text2"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="password" placeholder="密码" size="50px" class="text2"></td>
</tr>
<tr>
<td>
<select name="tele" id="input" class="text2">
<option value="+86" selected>+86</option>
<option value="+1">+1</option>
</select>
</td>
<td>
<input type="number" name="telephone" placeholder="手机号码" class="text2">
</td>
</tr>
<tr>
<td class="text" colspan="2">可通过手机号找回密码</td>
</tr>
<tr>
<td colspan="2"><input type="image" src="./img/2.jpg" width="350px"></td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="check" value="check"><span class="text">我已阅读并同意相关服务条款和隐私政策</span></td>
</tr>
</table>
</form>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>QQ登录</title>
<style>
th, td {
border: 0px solid black; /* 1px边框，实线，黑色 */
padding: 10px; /* 单元格内边距 */
text-align: left; /* 文本对齐 */
}
.text {
border: 0px solid black; /* 1px边框，实线，黑色 */
padding: 8px; /* 单元格内边距 */
text-align: center; /* 文本对齐 */
}
#head1 {
background-color: #79c9ff;
width: 600px;
}
#head2 {
background-color: #79c9ff;
width: 350px;
}
.link {
font-size: 15px;
color: #efefef;
}
.link2 {
font-size: 15px;
color: #505050;
}
#title {
font-size: 25px;
}
#title2 {
font-size: 20px;
}
.input {
height: 35px;
}
#submit {
width: 375px;
}
.text-right {
font-size: 15px;
}
</style>
</head>
<body>
<form method="get" action="#">
<table>
<tr>
<td id="head1" height="50px"></td>
<td id="head2" style="text-align: right">
<a href="#" class="link">QQ登录 |</a>
<a href="#" class="link">授权管理 |</a>
<a href="#" class="link">申请接入</a>
</td>
</tr>
<tr>
<td class="text"><b><span id="title">账号密码登录</span></b></td>
<td rowspan="7">
<table>
<tr><td style="height: 20px"></td></tr>
<tr>
<span class="text-right"><td><a href="#"><hr>腾讯网</a>将获得以下权限：<hr></td></span>
</tr>
<tr>
<span class="text-right"><td><input type="checkbox" name="check" value="all" checked>全选<hr></td></span>
</tr>
<tr>
<span class="text-right"><td><input type="checkbox" name="check" value="all" checked disabled>获得您的昵称、头像、性别及会员信息</td></span>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<span class="text-right"><td>授权后表名你已同意<a href="#">QQ登录服务协议</a></td></span>
</tr>
<tr><td style="height: 70px"></td></tr>
</table>
</td>
</tr>
<tr>
<td class="text"><span id="title2">推荐使用<a href="#">快速安全登录</a>,防止盗号</span></td>
</tr>
<tr>
<td class="text"><input type="text" name="username" placeholder="支持QQ号/邮箱/手机号登录" size="50px" class="input"></td>
</tr>
<tr>
<td class="text"><input type="text" name="password" placeholder="密码" size="50px" class="input"></td>
</tr>
<tr>
<td class="text"><input type="image" src="./img/3.jpg" id="submit"></td>
</tr>
<tr>
<td style="height: 30px"></td>
</tr>
<tr>
<td style="text-align: right">
<a href="#" class="link2">忘了密码? |</a>
<a href="#" class="link2">注册新账号 |</a>
<a href="#" class="link2">意见反馈</a>
</td>
</tr>
</table>
</form>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新浪网</title>
<style>
#index {
background-color: #d9d9d9;
}
th, td {
padding: 8px;
text-align: left;
}
.list {
padding: 8px;
text-align: right;
width: 150px;
}
.input {
padding: 8px;
text-align: left;
width: 300px;
}
body {
background-color: #f8f8f8;
}
.star {
color: #ff3232;
}
.comment {
font-size: 12px;
color: #43b7ff;
text-decoration: none;
}
.comment2 {
font-size: 15px;
color: #1a8fd7;
text-decoration: none;
}
.login {
color: #43b7ff;
text-decoration: none;
}
</style>
</head>
<body>
<form action="#" method="get">
<table>
<tr>
<td rowspan="2"><img src="./img/4.jpg" width="50px"></td>
<td class="list"><span class="star">*</span>手机号码：</td>
<td class="input"><input type="text" name="tele" size="40px" style="height: 30px"></td>
<td style="width: 150px" rowspan="9"></td>
<td style="width: 300px"></td>
</tr>
<tr>
<td></td>
<td>使用微博账号直接<a href="#">登录</a></td>
<td>已有账号，<a href="#" class="login">直接登录 >></a></td>
</tr>
<tr>
<td rowspan="7"></td>
<td class="list"><span class="star">*</span>设置密码：</td>
<td class="input"><input type="text" name="tele" size="40px" style="height: 30px"></td>
<td style="width: 300px" rowspan="7"></td>
</tr>
<tr>
<td class="list"><span class="star">*</span>兴趣标签：</td>
<td>
<input type="checkbox" value="1" name="check">新闻
<input type="checkbox" value="2" name="check">娱乐
<input type="checkbox" value="3" name="check">文化
<input type="checkbox" value="4" name="check">体育
<input type="checkbox" value="5" name="check">IT
<input type="checkbox" value="6" name="check">财经
<input type="checkbox" value="7" name="check">时尚
<input type="checkbox" value="8" name="check">汽车
<input type="checkbox" value="9" name="check">房产
<input type="checkbox" value="0" name="check">生活
</td>
</tr>
<tr>
<td class="list"><span class="star">*</span>上发短信手机：</td>
<td><button style="height: 35px">我要使用注册手机发送短信</button></td>
</tr>
<tr>
<td rowspan="4"></td>
<td style="height: 40px"></td>
</tr>
<tr>
<td><a href="#" class="comment">《新浪网络服务使用协议》</a></td>
</tr>
<tr>
<td><a href="#" class="comment">《新浪个人信息保护政策》</a></td>
</tr>
<tr>
<td style="height: 150px"></td>
</tr>
</table>
</form>
<hr/>
<div>
<a href="#" class="comment2">新浪简介 </a>
<a href="#" class="comment2">About Sina</a>
<a href="#" class="comment2">广告服务 </a>
<a href="#" class="comment2">联系我们 </a>
<a href="#" class="comment2">招聘信息 </a>
<a href="#" class="comment2">网站律师 </a>
<a href="#" class="comment2">SINA English </a>
<a href="#" class="comment2">注册 </a>
<a href="#" class="comment2">产品答疑</a>
</div>
<div>
<span style="color: #6c6c6c">客户服务电话 400-052-0066 欢迎批评指正</span>
</div>
<div>
<span style="color: #6c6c6c">新浪公司 <a href="#" class="comment2">版权所有</a></span>
</div>
</body>
</html>
扫一扫
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
