HTML開発ブログの登録ページデザイン(1)
CSSファイルの紹介
新しいファイルreg.htmlファイルを作成します
まずWebページのレイアウトを分析します
これは完成後のページの効果です、
Webページは3つのパートに分かれています
頭、本文、下の順に書いていきます。
ヘッドナビゲーションバーの作成
<!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の2つのIDタグを作成して、それぞれヘッドの幅と高さ、ページ全体のレイアウトの幅と高さを設定します。このようにして、以下のようなページを取得します
次に、ページのスタイルを変更します
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}画像の高さを変更し、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; を使用してナビゲーション バーを高速要素にします。下線を削除します。そして、ラベルのクリックスタイルを変更します。効果は下図のようになり、ヘッドナビゲーションバーが完成しました。
<!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>
