HTML开发博客之注册页面设计(一)

CSS文件的引入

新建文件reg.html文件

首先我们来分析网页布局

QQ截图20161031151355.png

这是我们页面完成后的效果,

网页分为三部分

头部,主体,和底部我们按照这个顺序开始编写。

头部导航栏的编写

<!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,使用无序列表创建导航,引入logo图片。

创建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做两个id标签,top和menu,分别设定头部的宽高,和页面整体布局的宽高。这样我们就得到如下图所示的页面

2.png

接着对页面进行样式的修改

#menu img{
    height: 90px;
}
#menu ul{
    list-style-type: none;
}

修改img的高度,对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;使导航栏成为快元素。去掉下划线。并更改标签点击样式。效果如下图所示,我们的头部导航栏就完成了。

3.png

Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!