2月20日
今日學習內容：
1，css：Cascading Style Sheets層疊樣式表
2，css三大選擇器：
標籤選擇器：p，tr，td等標籤
id選擇器：id屬性（唯一屬性）
類選擇器：class屬性
3， css屬性：
font-family:定義字體的類型
font-size：字體的大小
font-style:字體的樣式
text-align:字體對齊
color：字體顏色
font-weight：字體粗細
background-color:設置背景顏色
background-image:背景圖像，none（沒有）或者run（圖像路徑以及圖像名）
background-position:背景圖像位置（top,center,bottom）、水平位置：（left，center，right）
background-repeat:背景圖像重複的方式：no-repeat不重複，repeat重複，repeat-x水平方向重複，y的話是垂直方向重複
background-size：背景的大小
background：綜合應用：background-color，background-image，background-repeat，background-position
padding：內邊距
margin：外邊距，兩者結合是消除所有編劇，都爲0
list-style：none 默認去掉小點和lo的序號
display：none 隱藏不佔位置，block顯示子菜單
text-decoration：none 取消a標籤的下劃線
line-height：行高，垂直居中
hover鼠標
4，作業代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wcx's homework'</title>
<h1>我的家庭作業2月20日</h1>
<style type="text/css">
ul{
padding: 0px;
margin: 0px;/*死亡組合，實現清楚所有的邊框*/
background-color: #CC99CC;
width: 150px;
text-align: center;/*文字居中*/
font-family: "微軟雅黑";
font-size: 25px;/*字體大小*/
font-weight: bold;/*字體加粗*/
}
.hide{
display: none;/*列表隱藏*/
background-color: blanchedalmond;
}
li:hover ul
{
display: block;/*鼠標經過懸浮*/
}
a
{
text-decoration: none;/*去掉下劃線*/
}
</style>
</head>
<body>
<ul id="menu">
<li>
美女1
<ul class="hide">
<li><a href="">性別</a></li>
<li><a href="">愛好</a></li>
<li><a href="">地址</a></li>
</ul>
</li>
<li>
美女2
<ul class="hide">
<li><a href="">性別</a></li>
<li><a href="">愛好</a></li>
<li><a href="">地址</a></li>
</ul>
</li>
<li>
美女3
<ul class="hide">
<li><a href="">性別</a></li>
<li><a href="">愛好</a></li>
<li><a href="">地址</a></li>
</ul>
</li>
</ul>
</body>
</html>
5，效果展示：
