2017年5月22號課堂筆記
阿新 • • 發佈：2017-05-24
photo img hot linear 浮動 cti strong 文檔 課堂
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;
}
三、老師辛苦了!
2017年5月22號課堂筆記