Introduction of CSS files
Create a new file reg.html file
First we analyze the web page layout
This is the effect of our page after completion.
The web page is divided into three parts
Header We start writing the part, body, and bottom in this order.
Writing of the head navigation bar
<!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>
Create a div box, nest divs in the box, and create it using an unordered list Navigation, introduce logo images.
Create css file
@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;
}First initialize the global, make two id tags for the div, top and menu, and set the width and height of the head respectively. , and the width and height of the overall page layout. In this way, we will get the page as shown below
Then modify the style of the page
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}Modify the height of the img and remove the format from the ul sequence.
#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}Set the li tag, perform floating operations, adjust the height and spacing, and use display: inline-block; to make the navigation bar a fast element. Remove the underline. and change the label click style. The effect is as shown in the figure below, and our head navigation bar is completed.
