Reka bentuk halaman pendaftaran untuk blog pembangunan HTML (1)
Pengenalan fail CSS
Buat fail reg.html baharu
Mula-mula kita menganalisis reka letak halaman web
Ini adalah kesan halaman kami selepas selesai,
Laman web dibahagikan kepada tiga bahagian
Pengepala Kami mula menulis bahagian, badan dan bahagian bawah dalam susunan ini.
Menulis bar navigasi kepala
<!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>
Buat kotak div, sarang div dalam kotak dan ciptanya menggunakan senarai tidak teratur Navigasi, memperkenalkan imej logo.
Buat fail 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;
}Mula-mula, mulakan global, buat dua tag id untuk div, atas dan menu, dan tetapkan lebar dan tinggi pengepala masing-masing , dan lebar dan tinggi susun atur halaman keseluruhan. Dengan cara ini, kita akan mendapat halaman seperti yang ditunjukkan di bawah
Kemudian ubah suai gaya halaman
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}Ubah suai ketinggian img dan alih keluar format daripada urutan 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}Tetapkan teg li, lakukan operasi terapung, laraskan ketinggian dan jarak serta gunakan paparan: blok sebaris untuk menjadikan bar navigasi sebagai elemen pantas. Keluarkan garis bawah. dan tukar gaya klik label. Kesannya adalah seperti yang ditunjukkan dalam rajah di bawah, dan bar navigasi kepala kami selesai.
