2017年5月22号课堂笔记
2017年5月22号 星期一 大雨
内容：盒子模型，浮动
备注：5月24日补上
一、盒子模型
01.边框border
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>边框</title>
<style type="text/css">
div{
/* 上 top
右 right
下 bottom
左 left*/
height: 50px;
width: 50px;
border: 1px solid red; /*简写的方式：上右下左 顺时针 */
border-top-color: blue; /* 上边框的颜色*/
border-top-type:dashed;/*上边框的类型*/
border-top-width: thick;/*上边框的粗细*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
02.外边距margin
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
div{
width:150px;
height:150px;
border:3px solid red;
/* margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:50px;*/
margin:50px; /*上右下左全是50*/
margin:50px 30px; /*上下50，左右30*/
margin:50px 30px 40px; /*上50 左右30 下40 */
margin:0px auto;/*网页居中对齐*/
/*网页居中对齐的必要条件：
01.块元素 02.必须有宽度
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
03.内边距padding
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内边距padding</title>
<style type="text/css">
#main{
width:150px;
height:150px;
border:3px solid red;
box-sizing:border-box;
/*设置大盒子的内边距*/
padding-left:20px;
padding-top:20px;
/*padding: 50px; /!*上右下左全是50*!/
padding: 50px 30px; /!*上下50 左右30*!/
padding: 50px 30px 40px; /!*上50 左右30 下40*!/*/
}
#son{
width:50px;
height:50px;
border:3px solid blue;
box-sizing:inherit;
/*content-box:默认值,显示的宽度就是盒子的总尺寸！
border-box :盒子的宽度和高度等于元素的高度和宽度
inherit:继承父类的盒子模型样式！
*/
/*设置小盒子的外边距：*/
/*margin-top:20px;
margin-left:20px;*/
}
</style>
</head>
<body>
<div id="main">
<div id="son"></div>
</div>
</body>
</html>
04.圆角属性radius
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>圆角属性radius</title>
<style type="text/css">
div{
width:200px;
height:200px;
margin: 0px auto;
border:3px solid blue;
/*圆角属性 顺序 和 border margin padding 一致！
border-radius: 150px;
border-radius: 50%;
*/
border-radius: 50px 20px;/*左上角和右下角 弧度50 右上角和左下角弧度20*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
05.设置扇形和半圆
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置扇形和圆形</title>
<style type="text/css">
/* 给所有的div设置宽度和高度*/
div{
height: 50px;
width: 50px;
border: 3px solid red;
margin-top: 20px;
}
/*获取第1个div,左上扇形*/
div:nth-of-type(1){
border-radius: 50px 0px 0px 0px;
}
/*获取第2个div,右上扇形*/
div:nth-of-type(2){
border-radius: 0px 50px 0px 0px;
}
/*获取第3个div,右下扇形*/
div:nth-of-type(3){
border-radius: 0px 0px 50px 0px;
}
/*获取第4个div,左下扇形*/
div:nth-of-type(4){
border-radius: 0px 0px 0px 50px;
}
/*获取第5个div,下半圆*/
div:nth-of-type(5){
height:50px;
width:100px;
border-radius: 0px 0px 50px 50px;
}
/*获取第6个div,上半圆*/
div:nth-of-type(6){
height:50px;
width:100px;
border-radius: 50px 50px 0px 0px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
06.彩妆热卖
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>彩妆热卖</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:300px;
height:450px;
}
p{
background-color: #E9185A; /*背景颜色*/
font-size: 16px; /*字体大下*/
color: white;/*字体颜色*/
line-height: 35px;/*行高*/
height: 35px;/*文本高度*/
}
li{
list-style: none;/*去掉默认的符号*/
line-height: 30px;/*行高*/
height: 30px;/*文本高度*/
border-bottom: 1px #C3C1C1 dashed;
}
/*设置a的样式*/
a{
text-decoration: none;/*去掉下划线*/
color: #C3C1C1;
}
/*鼠标悬停在超链接上的样式*/
a:hover{
color: #E9185A;
}
/*给span设置样式*/
span{
color: white;
display: inline-block; /*变成一行显示的块元素*/
height: 20px;
width: 20px;
margin-left: 13px; /*左外边距*/
background-color:#373B3C; /*设置背景颜色*/
border-radius: 50%; /*设置背景为圆形*/
text-align: center;/*数字水平居中*/
line-height: 20px;
}
a:hover span{
background-color: #E9185A;
}
</style>
</head>
<body>
<div>
<p>大家都喜欢买的美容品</p>
<ul>
<li><a href="#"><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
<li><a href="#"><span>2</span>伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
<li><a href="#"><span>3</span>OLAY玉兰油多效修护霜 50g</a></li>
<li><a href="#"><span>4</span>巨型一号丝瓜水320ML</a></li>
<li><a href="#"><span>5</span>倩碧保湿洁肤水2号 200ml</a></li>
<li><a href="#"><span>6</span>比度克细肤淡印霜 30g</a></li>
<li><a href="#"><span>7</span>兰芝夜间修护锁水面膜 80ml</a></li>
<li><a href="#"><span>8</span>SK-II护肤精华露 215ml</a></li>
<li><a href="#"><span>9</span>欧莱雅青春密码活颜精华肌底液</a></li>
</div>
</body>
</html>
07.盒子阴影
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子阴影</title>
<style type="text/css">
div{
height: 150px;
width:150px;
border:1px solid blue;
/*box-shadow:15px 15px 15px pink;阴影在盒子的外部*/
box-shadow: inset 15px 15px 15px pink;/*内部阴影*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
08.小练习1（登录界面）
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
*{/*整个网页中的所有元素 去掉内边距和外边距*/
padding:0px;
margin:0px;
}
div{
width:300px;
border:solid 1px #3a6587; /*盒子的边框样式*/
margin:0 auto; /*水平居中*/
}
h2{
padding-left: 20px; /*左内边距*/
line-height: 50px; /*行高*/
height: 50px; /*高度*/
color: white; /*字体颜色*/
background-color:cornflowerblue ; /*背景颜色*/
}
form{
padding:30px 20px;/*上下边距30px 左右边距20px*/
}
td{
text-align: right; /*文本对齐方式*/
}
</style>
</head>
<body>
<div>
<h2>会员登录</h2>
<form action="" method="post">
<table>
<tr>
<td>姓名：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>联系电话：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td></td>
<td style="text-align: left"><input type="submit" value="登录"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
09.小练习2（京东快报）
自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东快报</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
margin:30px;
width:230px;
border:1px solid gray;
box-sizing:border-box;
}
h3{
background: linear-gradient(white, lightsteelblue);
height:40px;
line-height:40px;
margin:0px;
padding-left: 26px;
}
ul{
padding:0px;
}
li{
list-style-type:none;
height: 26px;
line-height:26px;
padding-left: 26px;
margin:0px;
font-size:10px;
}
li:hover{
color: #CC0000;
}
</style>
</head>
<body>
<div>
<h3>京东快报</h3>
<ul>
<li>【特惠】海飞丝去屑又去油</li>
<li>【公告】京东公益支持鲁甸新动作</li>
<li>【特惠】4688元抢iPhone7</li>
<li>【公告】小米电视携豪礼高调入驻京东</li>
</ul>
</div>
</body>
</html>
二、浮动
01.display属性
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*找到第3个span标签 变成块元素*/
span:nth-of-type(3){
display: block;
}
/*找到第3个div标签 变成内联元素*/
div:nth-of-type(3){
display: inline;
}
/*找到第2个span标签 变成行内块元素*/
span:nth-of-type(2){
display: inline-block;
}
/*找到第1个div标签 变成隐藏元素*/
div:nth-of-type(1){
display: none;
}
</style>
</head>
<body>
<div>这是隐藏的块元素</div>
<div>这是块元素</div>
<div>变成内联元素的块元素</div>
<span>这是内联元素</span>
<span>行内块元素</span>
<span>变成块元素的内联元素</span>
<span>内联元素</span>
<span>内联元素</span>
</body>
</html>
02.浮动
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
/*浮动的元素
01.脱离标准文档流
02.之前的位置 会被 没有浮动的元素占领
*/
/*给大盒子设置样式*/
#main{
height: 220px;
width: 180px;
border: 1px solid red;
}
/*设置小盒子的样式*/
#a,#b,#c{
height: 50px;
width: 50px;
border: 2px solid blue;
/*左浮动 float: left;*/
float: right; /*右浮动*/
}
/*无辜的小盒子*/
#d{
height: 50px;
width: 50px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="main">
<div id="a">这是第1个盒子</div>
<div id="b">这是第2个盒子</div>
<div id="c">这是第3个盒子</div>
<div id="d">无辜的小盒子</div>
</div>
</body>
</html>
03.溢出处理
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>溢出处理</title>
<style type="text/css">
/*给大盒子设置样式*/
#main{
height: 180px;
width: 140px;
border: 1px solid red;
/*内容溢出
overflow属性名
属性值：
01.visible：默认溢出部分显示
02.scroll：显示所有滚动条
03.auto：按照盒子中的内容自动显示滚动条
04.hidden ：溢出部分隐藏
*/
overflow: scroll;
}
/*设置小盒子的样式*/
#a,#b,#c{
height: 50px;
width: 50px;
border: 2px solid blue;
}
/*无辜的小盒子*/
#d{
height: 50px;
width: 50px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="main">
<div id="a">这是第1个盒子</div>
<div id="b">这是第2个盒子</div>
<div id="c">这是第3个盒子</div>
<div id="d">无辜的小盒子</div>
</div>
</body>
</html>
04.防止父级边框塌陷
仿写老师代码：
001. html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father" class="clear"><!--04.使用after-->
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。
这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
</div>
<!--方法一：空div防止父级边框塌陷
<div id="clear"></div>-->
</div>
</body>
</html>
002.css代码：
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
/*02.给父级设置高度
height: 350px;*/
/*03.overflow防止*/
overflow: hidden;
}
.layer01 {
border:1px #F00 dashed;
float: left;
}
.layer02 {
border:1px #00F dashed;
float: right;
}
.layer03 {
border:1px #060 dashed;
float: left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
width: 200px;
float: right;
}
/* 01.空div防止塌陷
#clear{
clear: both;
margin: 0px;
padding: 0px;
}*/
/*04.和01.类似 推荐使用*/
.clear:after{
content: '';
display: block;
clear: both;
}
三、老师辛苦了!
