masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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

QQ截图20161031151355.png

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

2.png

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.

3.png

Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册页面</title> <style> @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; } #menu img{ height: 90px; } #menu ul{ list-style-type: none; } #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} </style> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=https://img.php.cn/upload/course/000/000/004/5816f7b0056da728.png></li> <li><a href="index.html"> 首页</a></li> <li><a href="list.html">科技资讯</a></li> <li><a href="list.html">心情随笔</a></li> <li><a href="list.html">资源收藏</a></li> <li><a href="list.html">图文图片</a></li> <li><a href="list.html">留言板</a></li> <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li> </ul> </div> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492417 permainan