第五章 盒子模型和表单 ② 代码
课堂案例代码：
1.浮动塌陷 四种解决方式
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
.d1{
width:100px;
height:100px;
background-color:red;
float:left;
}
.d2{
width:150px;
height:150px;
background-color:blue;
float:left;
}
.d3{
width:200px;
height:120px;
background-color:green;
float:left;
}
/*解决塌陷方式三:在父容器中添加一个新的空元素,设置该元素的clear属性，清除浮动影响*/
/*.d4{
clear:both;
}*/
.dd{
width:120px;
height:200px;
background-color:orange;
float:left;
}
#con{
border:5px solid black;
/*width:600px;*/
/*解决塌陷方式一:设置父容器高度
height:500px;*/
/*解决塌陷方式二:设置父容器的overflow属性,常用的解决方案*/
overflow:hidden;
}
/*解决塌陷方式四:设置容器的after伪类,动态添加内容，清除塌陷
#con:after{
content:"";
display:block;
clear:both;
}*/
#bottom{
width:500px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="con">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="dd"></div>
</div>
<div id="bottom"></div>
</body>
</html>
运行结果如下：
2.浮动塌陷 第四种解决方式
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
#con{
width:100px;
height:100px;
border:1px solid red;
overflow:auto;
}
#d1{
width:200px;
height:200px;
border:2px solid red;
float:right;
}
#d2{
height:300px;
border:3px solid black;
clear:both;
}
#mydiv{
width:200px;
height:200px;
border:2px solid red;
}
#mydiv:after{
content:"这是动态添加的内容"
}
</style>
</head>
<body>
<div id="mydiv">今天天气不错</div>
<!--
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
-->
<!--
<div id="con">
这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容
</div>
-->
</body>
</html>
运行结果如下：
3.外边框 margin 内填充 padding
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0px;
}
div{
border:2px solid red;
/*外边距
margin-left:10px;
margin-top:20px;
margin-right:30px;
margin-bottom:40px;
*/
/*复合写法对应四个方向外边距
margin:10px 20px 30px 40px; *//*一个值: 上右下左
两个值: 上下 左右
三个值: 上 左右 下
四个值：上 右 下 左
*/
/*容器页面居中:上下50px 左右自适应*/
margin:50px auto;
/*内填充
padding-left:10px;
padding-top:20px;
padding-right:30px;
padding-bottom:40px;*/
/*复合写法:一个值,两个值，三个值，四个值*/
padding:10px 20px 30px 40px;
/*内容的宽和高*/
width:500px;
height:400px;
}
</style>
</head>
<body>
<div>
这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容
</div>
</body>
</html>
运行结果如下：
4.margin-top/bottom 动画效果
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
.s1{
border:2px solid red;
margin-right:50px;
}
.s2{
border:2px solid blue;
margin-left:100px;
}
.d1{
width:100px;
height:100px;
border:2px solid red;
margin-bottom:50px;
}
.d2{
width:100px;
height:100px;
border:2px solid blue;
margin-top:0px;
background-color:black;
opacity:0.5
}
.d2:hover{
margin-top:-2px;
opacity:0.8;
}
</style>
</head>
<body>
<!--
<span class="s1">SPAN1</span><span class="s2">SPAN2</span>
-->
<div class="d1">
</div>
<div class="d2">
</div>
</body>
</html>
运行结果如下：（运行结果具有动态效果）
5.IE盒子模型 W3C盒子模型
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
#d1{
width:200px;
height:200px;
background-color:red;
/*调整盒子模型:ie盒子*/
box-sizing:border-box;
border:5px solid black;
padding:20px;
margin:50px;
}
#d2{
width:200px;
height:200px;
background-color:blue;
/*调整盒子模型:wc3盒子*/
box-sizing:content-box;
border:5px solid orange;
padding:20px;
margin:50px;
}
</style>
</head>
<body>
<!--盒子模型:ie盒子,wc3标准盒子-->
<div id="d1">这是一个内容</div>
<div id="d2">这是一个内容</div>
</body>
</html>
运行结果如下：
6.相对定位
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Description" content="">
<style type="text/css">
div{
border:2px solid red;
height:100px;
}
.d2{
/*相对定位:受文档流的影响，本身位置不会被占用*/
position:relative;
/*设置位置偏移*/
left:10px; /*距离左边20*/
top:20px; /*距离上边20*/
/*right:20px; 距离右边20*/
/*bottom:50px; 距离下边50*/
}
</style>
</head>
<body>
<div class="d1">DIV1</div>
<div class="d2">DIV2</div>
<div class="d3">DIV3</div>
</body>
</html>
运行结果如下：
7.绝对定位:
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
#d1{
width:100px;
height:100px;
background-color:red;
/*绝对定位:完全脱离文档流，跑到另外一个层次上.不在文档中占据位置*/
/*position:absolute;
通过偏移设置位置
right:100px;
top:100px;*/
}
#d2{
width:200px;
height:200px;
background-color:blue;
position:absolute;
left:10px;
top:20px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">这是一些内容，右很多东西</div>
</body>
</html>
运行结果如下：
8.固定定位
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
p{
text-align:center;
}
.login{
border:5px solid gray;
width:300px;
height:200px;
padding:10px;
text-align:center;
background-color:blue;
/*设置固定定位:固定到浏览器窗口的指定位置*/
position:fixed;
left:30%;
top:50px;
}
</style>
</head>
<body>
<div class="login">
用户名:<input type="text"/><br/>
密码:<input type="password"/><br/>
<input type="submit" value="登陆"/>
</div>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>这是一些内容这是一些内容这是一些内容这是一些内容</p>
<p>......</p>
</body>
</html>
运行结果如下：
9.布局原则 包含块
布局原则:外宽内高，外相内绝
外部设置宽度 内部设置高度 外部设置相对位置 内部设置绝对位置
容器设置了定位(相对,绝对,固定)之后，该容器被称为 包含块: 包含块中的元素进行绝对定位偏移的时候会以包含块为基准
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
/*布局原则:外宽内高，外相内绝*/
#fu{
width:300px;
height:300px;
background-color:red;
margin:50px auto;
/*容器设置了定位(相对,绝对,固定)之后，该容器被称为包含块:
包含块中的元素进行绝对定位偏移的时候会以包含块为基准
*/
position:relative;
}
#zi{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
left:30px;
top:50px;
}
</style>
</head>
<body>
<div id="fu">
<div id="zi"></div>
</div>
</body>
</html>
运行结果如下：
网页项目代码：
10.祝福墙 Happy Wall
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
#wall{
width:600px;
height:500px;
border:2px solid orange;
/*页面居中*/
margin:0px auto;
/*相对定位:变为包含块*/
position:relative;
/*背景图片*/
background-image: linear-gradient(15deg,blue,green,white,yellow,pink,purple);
}
#wall h1{
text-align:center;
}
#wall div{
width:150px;
height:200px;
position:absolute;
transition:transform 1s;
}
#wall div.card1{
border:1px dashed blue;
background-color:#ff66cc;
left:50px;
top:50px;
/*元素变形:旋转30度*/
transform:rotate(30deg);
}
#wall div.card2{
border:1px dashed red;
background-color:#cc3333;
left:100px;
top:120px;
transform:rotate(-10deg);
}
#wall div.card3{
border:1px dashed green;
background-color:#ffff33;
left:30px;
top:220px;
transform:rotate(15deg);
}
#wall div.card4{
border:1px dashed black;
background-color:#ccff00;
right:50px;
top:120px;
transform:rotate(-15deg);
}
#wall div.card5{
border:1px dashed orange;
background-color:#ccccff;
right:30px;
top:220px;
transform:rotate(30deg);
}
/*鼠标悬浮到某个卡片上，让z-index变为最大*/
#wall div:hover{
/*设置z轴次序*/
z-index:9;
/*角度回复*/
transform:rotate(0deg) scale(1.1,1.3);
}
</style>
</head>
<body>
<div id="wall">
<h1>Happy Wall</h1>
<div class="card1">
<h4>祝 小明:</h4>
<p>天天学习，好好向上,天天学习，好好向上天天学习，好好向上天天学习，好好向上天天学习，好好向上</p>
</div>
<div class="card2">
<h4>祝 小明:</h4>
<p>天天学习，好好向上,天天学习，好好向上天天学习，好好向上天天学习，好好向上天天学习，好好向上</p>
</div>
<div class="card3">
<h4>祝 小明:</h4>
<p>天天学习，好好向上,天天学习，好好向上天天学习，好好向上天天学习，好好向上天天学习，好好向上</p>
</div>
<div class="card4">
<h4>祝 小明:</h4>
<p>天天学习，好好向上,天天学习，好好向上天天学习，好好向上天天学习，好好向上天天学习，好好向上</p>
</div>
<div class="card5">
<h4>祝 小明:</h4>
<p>天天学习，好好向上,天天学习，好好向上天天学习，好好向上天天学习，好好向上天天学习，好好向上</p>
</div>
</div>
</body>
</html>
运行结果如下：
11.小米商城 基础页面布局
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.wrapper{
width:1226px;
margin:0px auto;
}
#topbar{
height:40px;
background-color:#333333;
}
#topbar .menu{
height:40px;
line-height:40px;
}
#topbar .menu a{
color:white;
font-size:12px;
}
#nav{
height:100px;
background-color:orange;
}
#ad{
height:460px;
background-color:gray;
position:relative;
}
#ad .ad-menu{
width:234px;
height:440px;
background-color:#0C0C13;
list-style:none;
padding:20px 0px 0px 0px;
text-align:center;
}
#ad .ad-menu li:hover{
background-color:orange;
}
#ad .ad-menu li:hover .pop{
display:block;
}
#ad .ad-menu .pop{
width:990px;
height:460px;
border:1px solid blue;
background-color:#ccff66;
display:none;
position:absolute;
left:234px;
top:0px
}
</style>
</head>
<body>
<div id="topbar">
<div class="menu wrapper">
<a href="#">菜单1</a>
<a href="#">菜单2</a>
<a href="#">菜单3</a>
</div>
</div>
<div id="nav" class="wrapper">
</div>
<div id="ad" class="wrapper">
<ul class="ad-menu">
<li><a href="#">手机</a>
<div class="pop">1111111</div>
</li>
<li><a href="#">手机</a>
<div class="pop">22222222</div>
</li>
<li><a href="#">手机</a></li>
<li><a href="#">手机</a></li>
</ul>
</div>
</body>
</html>
运行结果如下：
12.学生注册表
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<!--
form:表单跟标签
action:设置提交的目标地址
method:提交方式 get(地址栏可以看到数据) post(地址栏看不到数据)
-->
<form action="接收数据的目标地址(指向web服务器)" method="get">
<input type="date" />
<input type="number" />
<input type="color" />
<table border="1" align="center">
<caption>学生注册</caption>
<tr>
<td>姓名</td>
<td>
<input type="text" name="xm" value="123" disabled/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="mm" value="324"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<!--radio:单选-->
<input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<!--checkbox:复选-->
<input type="checkbox" name="hobby" value="打球"/>打球
<input type="checkbox" name="hobby" value="听歌"/>打球
<input type="checkbox" name="hobby" value="弹钢琴"/>打球
</td>
</tr>
<tr>
<td>省份</td>
<td>
<!--select:下拉框-->
<select name="pro">
<option value="">请选择</option>
<option value="hn">河南</option>
<option value="hb">河北</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<!--textarea:文本域-->
<textarea cols="10" rows="3">你好,</textarea>
</td>
</tr>
<tr>
<td>照片</td>
<td>
<!--type:file 文件框-->
<input type="file" name="zp"/>
</td>
</tr>
<tr>
<td></td>
<td>
<!--四个按钮-->
<input type="button" value="普通按钮" onclick="alert(123)"/>
<input type="submit" value="提交"/>
<input type="image" src="28-1.gif"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
运行结果如下：
13.博客页面
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
#con
{
width:800px;
height:600px;
border:0px solid black;
margin:0px auto;
}
#con #top ul
{
list-style:none;
margin:0px;
padding:0px;
overflow:auto;
}
#con #top ul li
{
float:left;
}
#con #top ul li a
{
height:30px;
width:158px;
border:1px solid black;
display:block;
text-align:center;
line-height:30px;
text-decoration:none;
font-weight:bold;
color:black;
}
#con #top ul li a:hover
{
color:white;
background-color:black;
}
#main
{
/*height:400px;*/
margin-top:10px;
overflow:auto;
/*background-color:green;*/
}
#main #left
{
width:198px;
height:200px;
border:1px solid black;
float:left;
}
#main #right
{
width:588px;
height:500px;
border:1px solid black;
float:right;
}
#left ul
{
list-style:none;
margin:20px auto;
padding:0px;
width:138px;
border:0px solid black;
}
#left ul li a
{
display:block;
height:30px;
line-height:30px;
text-align:center;
color:black;
text-decoration:none;
border-bottom:1px dashed black;
}
#right h3
{
text-align:center;
}
#right p
{
margin:10px;
text-indent:2em;
}
</style>
</head>
<body>
<div id="con">
<div id="top">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
</div>
<div id="main">
<div id="left">
<ul>
<li><a href="#">我的日记1</a></li>
<li><a href="#">我的日记2</a></li>
<li><a href="#">我的日记3</a></li>
<li><a href="#">我的日记4</a></li>
</ul>
</div>
<div id="right">
<h3>这是标题</h3>
<p>
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是
内容这是内容这是内容这是内容
这是内容这是内容这是内容这是
内容这是内容这是内容这是内容这
是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内
容这是内容这是内容这是内容这是
内容这是内容这是内容这是内容这
</p>
</div>
</div>
</body>
</html>
运行结果如下：
14.ifram 内联框架元素
内联框架元素 () 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。
index代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
iframe{
width:800px;
height:500px;
border:none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="mywin">页面1</a>
<a href="http://www.bilibili.com" target="mywin">页面2</a>
<a href="http://www.jd.com" target="mywin">页面3</a>
<hr/>
<iframe name="mywin" src=""></iframe>
</body>
</html>
页面1 代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<h1>页面1</h1>
</body>
</html>
页面2 代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<h1>page2</h1>
</body>
</html>
页面3 代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<h1>页面1</h1>
</body>
</html>
运行结果如下：
扫一扫
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
