HTML開発ブログの登録ページデザイン(1)

CSSファイルの紹介

新しいファイルreg.htmlファイルを作成します

まずWebページのレイアウトを分析します

QQ截图20161031151355.png

これは完成後のページの効果です、

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>

提出するリセットコード

自動運転