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

继续学习
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交重置代码
图片放大关闭