HTML ?? ??? ?? ??? ??? (1)
CSS ?? ??
? ?? ??? reg.html ??
?? ? ??? ????? ?????
??? ?? ??? ?? ?? ?????.
? ???? ? ???? ???? ????
??, ??, ?? ??? ??? ?????.
?? ?? ?? ???
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用戶注冊頁面</title> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=/upload/course/000/000/004/5816f7b0056da728.png></li> <li><a href=""> 首頁</a></li> <li><a href="">科技資訊</a></li> <li><a href="">心情隨筆</a></li> <li><a href="">資源收藏</a></li> <li><a href="">圖文圖片</a></li> <li><a href="">留言板</a></li> <li class="mi" ><a href="">登陸</a>/<a href="">注冊</a></li> </ul> </div> </div> </body> </html>
div ??? ???, ??? div? ????, ???? ?? ??? ???? ??? ???, ?? ???? ?????.
CSS ?? ???
@charset "utf-8";
body{
background-color: #F0F0F0;
}
*{
border: 0px;
padding: 0px;
margin: 0px;
font-size: 14px;
}
#top{
width: 100%;
height: 90px;
background-color: white;
border-bottom: 1px solid #bbbbbb;
}
#menu{
width: 1000px;
overflow: hidden;
margin: 0 auto;
}?? ??? ????? div, top ? menu? ?? ? ?? id ??? ??? ??? ??? ??, ?? ??? ????? ??? ??? ?? ?????. . ?? ??? ??? ?? ???? ?? ???
?? ?? ??? ???? ?????
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}img? ??? ???? ul ????? ??? ?????.
#menu ul li{
float: left;
height: 90px;
line-height: 90px;
margin-right: 50px;
}
#menu ul li a{
color: black;text-decoration: none;
display: inline-block;
}
#menu ul li a:hover{color: #FFD700;text-decoration: none}li ??? ????, ?? ??? ????, ??? ??? ????, display: inline-block? ???? ?? ??? ?? ??? ????. ??? ?????. ?? ?? ???? ?????. ??? ?? ??? ??? ?? ????? ?? ???????.
