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:?1px?solid?#bbbbbb;

}

#menu{

width:?1000px;

overflow:?hidden;

margin:?0?auto;

}

首先對全局初始化，對div做兩個id標簽，top和menu,分別設定頭部的寬高，和頁面整體布局的寬高。這樣我們就得到如下圖所示的頁面

接著對頁面進行樣式的修改#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;使導航欄成為快元素。去掉下劃線。并更改標簽點擊樣式。效果如下圖所示，我們的頭部導航欄就完成了。

總結

以上是生活随笔為你收集整理的php网页的注册界面设计,HTML开发博客之注册页面设计（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。