3.4 Login and Registration Buttons
The navigation bar is ready, so typically the login and registration buttons are at the far right of the title bar.
<div class='login'>
<span><a href="javascript:void(0)">Land</a></span>
<span>|</span>
<span><a href="javascript:void(0)">register</a></span>
</div>css style:
.header .login {
float: right ;
color: #fff ;
line-height: 72px ;
margin-right: 20px ;
}That's it.
By the way, we set a background color for the navigation buttons on the first page:
.header ul li.first {
margin-left: 30px ;
background:#74b0e2 ;
}3.6 Web page banner production
3.6.1 What is a banner?
Banner can be a banner ad on a website page, a flag for a procession, or a headline in a newspaper or magazine.Banner mainly reflects the central purpose, vividly expresses the main emotional thoughts or propaganda center.
The above is an explanation of the network. I personally feel that the so-called banner is some information that I want to highlight, either in the form of a broadcast map or some banners and advertisements.
Let's make room for it first.
<div class="banner">
</div>.banner {
height: 380px ;
overflow: hidden ;
background: #ccc;
}The gray area below the title bar is where we intend to place the banner.
3.6.2 Round-robin Map
Let's use the most basic way to make a round-robin map. In order to make it clear, we will open a separate page to illustrate it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul li {list-style: none;}
</style>
</head>
<body>
</body>
</html>
Add the banner region
<div class='banner'>
<div class='content'>
</div>
</div>css:
* {
padding: 0;
margin: 0;
}
ul li {list-style: none;}
.banner {
height: 380px;
background: #ccc;
margin-top: 20px;
position: relative;
}
.banner .content {
width: 1060px;
height: 450px;
margin: 20px auto;
position: relative;
}Effect
I have prepared five pictures, all from Baidu Search.
<div class='banner'>
<div class='content'>
<ul>
<li>
<a href="javascript:void(0)">
<img src="1.jpg "/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="2.jpg "/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="3.jpg "/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="4.jpg "/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="5.jpg "/>
</a>
</li>
</ul>
</div>
</div>Because it's a list of pictures, we're used to using ul li. Of course, you can use div, and the effect is similar, but that makes the code look unclear.
If I look at someone else's web page and find the p tag, my first reaction is that it should be a paragraph.When I find ul li, I know it's a list.
If you use div s all, you won't be able to do that.
We add a height and a width to each picture.
.banner ul li img {
width: 1024px ;
height: 380px ;
}3.6.3 css style optimization
In this way, all pictures will have a single line, so we add a float to each picture.
Did you find that float, margin css styles are used so often?
Yes, our css stylesheets are full of such duplicate code, so what can we do to improve it?
The answer is yes, that is, can I set up a generic class, such as float: left, I'll just write a class class, and whoever wants to float left, just add my class.
Do as you say:
.fl {float: left;}
.fr {float: right;}fl is short for float: left.
fr is short for float: right.
At the same time, in order to accommodate so many pictures on the same line, we need to add a very large width to ul:
.banner .content ul{
width: 10000px;
}Give it 10,000 px, it must be enough, after all, there are only 5 pictures.
Next question, the width is a little too wide. We don't need to show all the pictures.
Let's add an overflow: hidden to banner;
By the way, remove the background color.
.banner {
height: 380px;
margin-top: 20px;
position: relative;
overflow: hidden;
}overflow: hidden; represents overflow hiding.
3.6.4 left and right buttons
As for the left and right buttons, there happened to be this material in the previous project, so I took it directly.
Next, in the context area, under ul, we add two buttons to control the previous one and the next one.I'm going to go directly to the code:
<i class='btn_left'></i>
<i class='btn_right'></i>css
.btn_left,.btn_right{
display: inline-block;
width: 21px;
height: 150px;
background: url(banner_tb.png) no-repeat;
position: absolute;
left: -38px;
top: 90px;
}
.btn_right{
display: inline-block;
width: 21px;
height: 150px;
background: url(banner_tb.png) no-repeat;
background-position: -29px 0;
position: absolute;
left: 1041px;
top: 90px;
}Effect:
We find that the css style of the two buttons has many repetitions, so let's optimize it a little:
.btn_left ,.btn_right{
display: inline-block;
width: 21px;
height: 150px;
background: url(banner_tb.png) no-repeat;
position: absolute;
left: -38px;
top: 90px;
}
.btn_right{
background-position: -29px 0;
position: absolute;
left: 1041px;
top: 90px;
}3.6.5 Button Implicit Control
Next, do a show button when the mouse slides into the content area, otherwise the button hides.
First, set the transparency of the two buttons to zero, that is, hide.
opacity: 0;Next, set up the content's hover event.
.banner .content:hover .btn_left{
opacity: 1;
}
.banner .content:hover .btn_right{
opacity: 1;
}This may seem a bit abrupt, and we can use the transition style transition to make the transparency change have a transitional effect, with the time set by ourselves.
transition: all ease 0.s;What this means is that if all the css attributes change, we'll ease over in 0.6 seconds.
The screenshots weren't very good. I'll post demo online by then, so I won't take a screenshot here.
In this case, I plan to do a seamless rotation, so far, there are a few minor problems.
As you can see from the picture, there are no pictures on the left, so we need to manually move the picture list to the left to move the width of a single picture, that is, 1024px.
.banner .content ul{
width: 10000px;
margin-left: -1024px;
}It looks like the picture is a little too wide. Well, okay, I'll make the height of the picture and the height of the parent container bigger, just 400px.
Incidentally add cursor: pointer to both buttons.
3.6.5 How do I get to the next one?
Finally to js logic control, the immediate question is, how to achieve the next one?
We know that all the pictures have been loaded since the beginning of the typing. We need to move the pictures, to put it all in perspective, to change ul's margin-left.
So, if we want to see the next picture, can we just subtract ul's margin-left from the width of one?
Because we want to use animation effects, we introduced jQuery.
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>Get the left and right buttons and wrap them in a jQuery object:
var leftBtn = $('.btn_left').eq(0); //START TQVault
var rightBtn = $('.btn_right').eq(0);//Right ButtonAdd a click event to the button on the right:
rightBtn.on('click',function(){
alert();
});I suggest you don't rush to write down your first lesson. First click alert in the event to see if the code so far is correct?If alert doesn't show up, the code is already wrong.
After checking, it is OK, good, let's continue to write.
We also wrap ul as a jQuery object:
var ul = $('.banner .content ul').eq(0); Then, write a click event.
Because we've moved ul 1024 PX to the left, this time we'll give him a 2048 px.
rightBtn.on('click',function(){
ul.animate({marginLeft : -2048},1000);
});