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.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
