CSS（三）網頁美化與盒子模型
阿新 • • 發佈：2022-01-17
3.美化網頁
3.1、為什麼要美化網頁
1.有效傳遞頁面資訊
2.美化網頁，頁面漂亮，才能吸引使用者
3.凸顯頁面的主題
4.提高使用者的體驗
span標籤：重點要突出的字使用span標籤套起來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title1{ font-size: 50px; } </style> </head> <body> 歡迎學習<span id="title1">java</span> </body> </html>
3.2、字型樣式
<!--
font-family：字型
font-size：字型大小
font-weight：字型粗細
color：字型顏色
-->
<style>
body{
font-family: "Arial Black,楷體";
color:#a13d30
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
3.3、文字樣式
1.顏色 color rgb rgba
2.文字對齊的方式 text-align = center
3.首行縮排 text-indent
4.行高 line-height 單行文字上下居中！
5.裝飾 text-decoration
6.文字圖片水平對齊 vertical-align: middle;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 顏色； 單詞 RGB：0~F RGBA A：0~1 text-align:排版，居中 text-indent:2em;段落首行縮排 height:300px ; line-height: 300px; 行高，和塊的高度一致，就可以上下居中 --> <style> h1{ color: rgba(0,255,255,0.9); text-align: center; } .p1{ text-indent: 2em; } .p3{ background: purple; height:300px ; text-decoration: ; line-height: 300px; } /*下劃線*/ .l1{ text-decoration: underline; } /*中劃線*/ .l2{ text-decoration: line-through; } /*上劃線*/ .l3{ text-decoration: overline; } /*a標籤去下劃線*/ a{ text-decoration: none; } </style> </head> <body> <a href="">123123</a> <p class="l1">123123123</p> <p class="l2">123123123</p> <p class="l3">123123123</p> <h1>故事介紹</h1> <p class="p1"> 平靜安詳的元泱境界，每隔333年，總會有一個神祕而恐怖的異常生物重生，它就是魁拔！魁拔的每一次出現，都會給元泱境界帶來巨大的災難！即便是天界的神族，也在劫難逃。在天地兩界各種力量的全力打擊下，魁拔一次次被消滅，但又總是按333年的週期重新出現。魁拔紀元1664年，天神經過精確測算後，在魁拔甦醒前一刻對其進行毀滅性打擊。但誰都沒有想到，由於一個差錯導致新一代魁拔成功地逃脫了致命一擊。很快，天界魁拔司和地界神聖聯盟均探測到了魁拔依然生還的跡象。因此，找到魁拔，徹底消滅魁拔，再一次成了各地熱血勇士的終極目標。 </p> <p class="p3"> 在偏遠的獸國窩窩鄉，蠻大人和蠻吉每天為取得象徵成功和光榮的妖俠紋耀而刻苦修煉，卻把他們生活的村莊攪得雞犬不寧。村民們絞盡腦汁把他們趕走。一天，消滅魁拔的徵兵令突然傳到窩窩鄉，村長趁機慫恿蠻大人和蠻吉從軍參戰。然而，在這個一切都憑紋耀說話的世界，僅憑蠻大人現有的一塊冒牌紋耀，不要說參軍，就連住店的資格都沒有。受盡歧視的蠻吉和蠻大人決定，混上那艘即將啟程去消滅魁拔的巨型戰艦，直接挑戰魁拔，用熱血換取至高的榮譽。 [1] </p> <p> She walks in beauty, like the night Of cloudless climes and starry skies; And all that’s best of dark and bright Meet in her aspect and her eyes: Thus mellowed to that tender light Which heaven to gaudy day denies. </p> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 水平對齊~參照物， a，b -->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/李光洙.png" alt="">
<span>dasdsadasdas</span>
</p>
</body>
</html>
3.4陰影
/*text-shadow 陰影顏色，水平偏移，垂直偏移，陰影半徑*/
#price{
text-shadow: blue 10px 10px 10px;
}
3.5超連結偽類
正常情況下，a，a:hover
/*預設的顏色*/
a{
text-decoration: none;
color: black;
}
/*滑鼠懸浮的狀態(只需要記住)*/
a:hover{
color: orange;
font-size: 50px;
}
3.6列表
/* ul li*/
/*
list-style：
noon 去掉原點
circle 空心圓
decimal 數字
square 正方形
*/
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
3.7背景
背景顏色
背景圖片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/1.jpg");
/* 預設是全部平鋪的*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat ;
}
</style>
練習：
3.8、漸變
background-color: #4158D0;
background-image: linear-gradient(167deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4.盒子模型
4.1.什麼是盒子模型
margin：外邊距
padding：內邊距
border：邊框
4.2、邊框
1.邊框的粗細
2.邊框的樣式
3.邊框的顏色
4.3內外邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外邊距的妙用 居中元素
margin: 0 auto ;
-->
<style>
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto ;
}
/*
順時針旋轉
margin: 0 上下左右
margin: 0 1px 上下 左右
margin: 0 1px 2px 3px 上 下 左 右
*/
h2{
font-size: 16px;
background-color: #3cbda6 ;
color: white;
margin: 0;
}
form{
background: green;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>會員登入</h2>
<form action="#">
<div>
<span>使用者名稱：</span>
<input type="test">
</div>
<div>
<span>密碼：</span>
<input type="test">
</div>
<div>
<span>郵箱：</span>
<input type="test">
</div>
</form>
</div>
</body>
</html>
盒子的計算方式：你這個元素到底多大？
margin+border+padding+內容寬度
4.4圓角邊框
4個角
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 20px 10px 5px;
}
</style>
4.5盒子陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
margin: 0 auto;居中
要求：塊元素有固定的寬度
-->
<style>
/*div{*/
/* width: 100px;*/
/* height: 100px;*/
/* margin: 10px;*/
/* border: 10px solid red;*/
/* box-shadow: 10px 10px 100px yellow;*/
/*}*/
img{
/*margin: 0 auto;*/
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<!--<div style="width: 500px;display: block;text-align: center">-->
<!-- <div style="margin: 0 auto">-->
<!-- <img src="images/1.jpg" alt="" >-->
<!-- </div>-->
<!--</div>-->
<div style="margin: 0 auto">
<img src="images/1.jpg" alt="" >
</div>
</body>
</html>
5.浮動
5.1標準文件流
塊級元素：獨佔一行
h1~h6 p div 列表...
行內元素：不獨佔一行
span a img strong...
行內元素 可以被包含咋愛塊級元素種 反之不可以
5.2display
<!---
block 塊元素
inline 行內元素
inline-block 是塊元素，但是可以內聯 ，在一行！
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: none;
}
span{
width: 100px;
height: 100px;
border: 1px dashed red;
display: inline-block;
}
</style>
1.這個也是一種實現行內元素排列的方式，但是我們很多情況下都是用的float
5.3float
1、左右浮動 float
div{
margin:10px;
padding:5px;
}
#father{
border:1px #000 solid;
}
.layer01{
border:1px #F00 dashed;
display:inline-block;
float:right;
}
.layer02{
border:1px #00F dashed;
display:inline-block;
float:right;
}
5.4父級邊框塌陷的問題
clear
/*
clear: right;右側不允許有浮動元素
clear: left;左側不允許有浮動元素
clear： both; 兩側不允許有浮動元素
clear： none; 兩側不允許有浮動元素
*/
解決方案：
1.增加父級元素的高度~
#father{
border: 1px #000 solid;
height: 800px;
}
2.增加一個空的div標籤，清楚浮動
<div class="clear"> </div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3.overflow
在父級元素種增加一個 overflow: hidden;
4.新增一個偽類：after
#father:after{
content: '';
display: block;
clear: both;
}
小結：
-
浮動元素後面增加空的div
簡單，空的div是不好的，程式碼中精良避免空div
-
設定父元素的高度
簡單，於是怒假設有了固定的高度，就會被限制
-
overflow
簡單，下拉的一些場景儘量避免使用
-
新增一個偽類：after（推薦）
寫法稍微複雜一點，但是沒有副作用，推薦使用