Home > Article > Web Front-end > web page navigation exercises
When I was doing NavigationExercise, I looked at the source code of successful websites for practice. I hope that through these successful codes, I can learn the front-end behind the code. Engineers’ programming ideas.
While viewing the source code, I also learned a lot of details that I had ignored before, and I feel that I have benefited a lot.
When I open the css file of Lagou.com, the first part uses comments to mark the time of the document, the author, and certain elements within the style sheet that are easy to view. color, width and height.
The second part is some initialized element styles and initialized public classes.
The third part is the style of each part of the web page.
The first navigation exercise I did was the navigation of Lagou.com.
web page navigation exercises
Observation and thinking
1. How many levels of nesting do I need to write for this navigation?
2. Do you want to set the width or use 100%?
3. How to center?
4. How to realize the thin line between login and registration.
These are the problems I discovered, and there will definitely be problems as I go along.
Set the surrounding element style
#header{
background: #fafafa;
height: 60px;
min-width: 1024px;
border-top: 3px solid #00B38A;
}
#header .wrapper{
width: 1024px;
margin: 0 auto;
}
1. The outermost periphery#header sets the height of the navigation and the background color of the navigation. Added border-top style.
2. The internal .wrapper sets the width, and the external #header sets the minimum width. The attribute values of both are the same. Of course, the width of the display must be greater than 1024px, so by adding margin: 0 auto; in .wrapper, the content with a width of 1024 can be centered.
Carry out basic layout of navigation elements
web page navigation exercises
.wrapper .logo{
float: left;
margin-top: 7px;
width: 229px;
height: 43px;
background: url(image/logo.png) no-repeat;
}
.wrapper .navheader{
float: left;
margin-left: 30px;
}
.navheader li{
float: left;
}
.wrapper .loginTop{
float: right;
}
.loginTop li{
float: left;
}
1. Set logo At that time, the original size of Picture is 229×43, so this setting will not stretch the picture.
2. The logo and navigation menu are floating to the left, and the login and registration buttons are floating to the right.
Modify the basic style of the navigation menu
Note: When the mouse passes over a, there needs to be a 3px border-bottom, But this 3px cannot exceed #header. What needs to be done is to make the height of li 60px and the height of a to 57px, so that when the mouse passes by, it will be displayed The bottom edge will not protrude.
web page navigation exercises
.navheader li{
height: 60px;
padding: 0px 20px;
}
.navheader li a{
display: block;
line-height: 57px;
text-decoration: none;
color: #999;
font-size: 20px;
}
.navheader li a:hover{
color: #333;
border-bottom: 3px solid #00B38A;
}
.loginTop li{
height: 30px;
line-height: 30px;
color: #FFF;
background: #00B38A;
}
.loginTop li a{
display: block;
line-height: 30px;
padding: 0px 10px;
color: #fff;
text-decoration:none ;
}
.loginTop li a:hover{
color: #CCEAE3;
}
1, a is an inline element and needs to be converted to block level element so that the height can be set. If the inline element is not set to block level and the line height is set directly, although the height can be changed and occupy the document flow, the space occupied by the line height will not belong to a.
2. Those who are careful can find that I only set the row height for each a, and did not set the height, because in IE6 and 7 versions of the browser, I found that when the height was not set, I found a does not have the width that fills the parent element like a true block-level element. But after setting the height, I found that they suddenly had the characteristics of block-level elements. But we don't want him to do that, so I won't write the height. This effect is compatible. If you write it, it is very simple. Just add a float<a href="//m.sbmmt.com/wiki/974.html" target="_blank">:left</a>
3 for a. ie6 does not support images in png format. . . . .
In fact, at first glance, it seems to have the appearance, but I found that when my mouse passed through the menu, the change of the menu was gradual, not sudden.
.navheader a,.loginTop a{
transition: all .2s ease-in-out ;
-webkit-transition: all .2s ease-in-out ;
-moz-transition: all .2s ease-in-out ;
-o-transition: all .2s ease-in-out ;
}
transitionThis attribute can be set, and when a certain style of an element changes, the gradient can be changed. He can achieve more exciting pictures and needs to learn the relevant knowledge of html5. Will continue to learn.
*{<a href="//m.sbmmt.com/wiki/938.html" target="_blank">outline</a>:none;} Set the outline of all elements to none by default.
##body,p,a,span,ul,li{margin: 0;padding: 0;}Set the inner margins of all elementsOuter margin is 0.
ul.<a href="//m.sbmmt.com/wiki/1081.html" target="_blank">reset</a>{list-style:none;}去除掉列表的默认样式
首先分出body与footer两个部分。这里面还涉及相应的height与min-height设置，但是这些又涉及一些兼容的问题，所以我就先不写了，回头再另写一篇。
最外层嵌套使用id='header'标记，方便寻找里面子元素，里面就可以用class啦，.wrapper可以用作包围元素做公共类使用。class="navheader"与class="loginTop"可以作为查找元素使用。
ul>li>a，一般的导航基本上都是这样的结构。
ul前的a可以以背景为图片，做链接。
第一步：设计出html结构，并为元素设置相应的id与类
<p> </p><p> </p><p> <a></a> </p>
对网页进行全局的css设置。
我先写下做导航时我用到的
对导航进行css设置
The above is the detailed content of web page navigation exercises. For more information, please follow other related articles on the PHP Chinese website!