APP
1.美化網頁元素
1.1 為什么要美化網頁
-
-
有效的傳遞頁面信息
-
美化頁面，頁面漂亮，才能吸引用戶
-
凸顯頁面的主題
-
提高用戶的體驗
-
span標簽：重點要突出的字，使用span套起來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span</title>
<style>
#one{
font-family: 華文楷體;
font-size: 50px;
color: aqua;
}
</style>
</head>
<body>
<h1>努力學習<span id="one">Java</span></h1>
</body>
</html>
1.2 字體樣式
-
-
font-family:? ?字體
-
font-size:? ? ?字體大小
-
font-weight:? ?字體粗細
-
color:? ? ? ? ?字體顏色
-
1.3 文本樣式
-
-
顏色? ? ? ?color? 單詞 RGB 0~F? RGBA A:0~1
-
文本對齊的方式? ?text-align:center 排版，居中
-
首行縮進? ? ?text-indent:2em 段落首行縮進
-
行高? ?line-height:300px? 行高，和塊的高度一致，就可以上下居中
-
裝飾? ?text-decoration:none 去掉下劃線
-
文本圖片水平對齊： vertical:align:middle
-
1.4超鏈接偽類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: black;
font-size: 20px;
}
/*鼠標懸浮的狀態*/
a:hover{
color: orange;
}
/*鼠標按住未釋放的狀態*/
a:active{
color: green;
}
p{
text-align: center;
}
</style>
</head>
<body>
<p>
<a href="#">
<img src="img/R-C.jpg" alt="">
</a>
</p>
<p>
<a href="#">窮民飽食</a>
</p>
<p>
<a href="#">齋藤茂男</a>
</p>
<p>
￥25
</p>
</body>
</html>
1.6列表
/*
ul li
none:去掉原點
circle 空心圓
decimal 數字
*/
ul{
background: #a0a0a0;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
1.7 背景
背景顏色
背景圖片
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默認是全鋪的*/
background-image: url("imgs/OIP-C.jpg");
background-repeat: no-repeat;
}
背景圖片位置
/* 顏色 ，圖片，圖片位置，平鋪方式 */
background: red url("../images/d.gif") 270px 10px no-repeat
background-position:236px 2px
1.8漸變 Grabient
body{
background-color: #FBDA61;
background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}
?
本文摘自 ：https://www.cnblogs.com/
