600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > php网页的注册界面设计 HTML开发博客之注册页面设计(一)

php网页的注册界面设计 HTML开发博客之注册页面设计(一)

时间:2018-11-16 16:46:15

相关推荐

php网页的注册界面设计 HTML开发博客之注册页面设计(一)

CSS文件的引入

新建文件reg.html文件

首先我们来分析网页布局

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

网页分为三部分

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

头部导航栏的编写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:1pxsolid#bbbbbb;

}

#menu{

width:1000px;

overflow:hidden;

margin:0auto;

}

首先对全局初始化,对div做两个id标签,top和menu,分别设定头部的宽高,和页面整体布局的宽高。这样我们就得到如下图所示的页面

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

height:90px;

}

#menuul{

list-style-type:none;

}

修改img的高度,对ul序列去掉格式。#menuulli{

float:left;

height:90px;

line-height:90px;

margin-right:50px;

}

#menuullia{

color:black;text-decoration:none;

display:inline-block;

}

#menuullia:hover{color:#FFD700;text-decoration:none}

对li标签进行设置,做浮动操作,调整高度和间距,使用display: inline-block;使导航栏成为快元素。去掉下划线。并更改标签点击样式。效果如下图所示,我们的头部导航栏就完成了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。