Article Catalog
Works
HTML page mainly consists of: login, registration jump page, rotating image, hometown profile, popular attractions, special food and so on. Through Div + CSS, mouse over effects, get the current time, jump page, the basic knowledge required to cover all the points.
Tip: Below is the body of this post, with the following examples for reference
I. Code Demonstration
1. Login, register, get the current time
HTML section: this section is divided into two parts, the top and bottom of the two big boxes, the first contains login, registration, get time. The following is mainly composed of LOGO, navigation bar. Through the a tag hyperlink composition, the mouse over will have color changes, navigation bar with an unordered list ul more convenient and concise. Click login, register to jump to another page respectively.
<div class="box"> <! --- A big box -->
<div class="box-b">
<div class="box-b-d" id="deng">
<a id="dengl" href="javascript:;" > Login </a> <! -- Login -->
<i>|</i>
<a id="zc" href="javascript:;">Register</a> <! --Register -->
</div>
<div class="box-b-s">
<p id="shij"></p> <! --- Get current time -->
</div>
</div>
<div class="box-k">
<div class='box-k-t'>
<img src="img/b.jpg"/> <!--logo-->
</div>
<ul class="box-k-b"> <! -- Navigation bar -->
<li>
<a>Home</a>
</li>
<li>
<a>Introduction to Scenic Spots</a>
</li>
<li>
<a>Specialties</a>
</li>
<li>
<a>Online Travel</a>
</li>
<li>
<a>Benefits of Tourism</a>
</li>
<li>
<a>Reservation services</a>
</li>
</ul>
</div>Register:
<div id="formContainer" class="dwo">
<div class="formRight">
<!-- Register form -->
<form id="register" class="otherForm">
<header>
<h1>User registration</h1>
<p>Register for more services</p>
</header>
<section>
<label>
<p>Username</p>
<input type="text" id="userName" />
<div class="border"></div>
</label>
<label>
<p>E-mail</p>
<input type="email" id="email" />
<div class="border"></div>
</label>
<label>
<p>Password</p>
<input type="password" id="pwd" />
<div class="border"></div>
</label>
<label>
<p>Repeat Password</p
<input type="password" id="repwd" />
<div class="border"></div>
</label>
<button id="btn" type="button"> Note book </button>
</section>
<footer>
<a href="login.html"> Back to </a>
</footer>
</form>
</div>
</div>Log in:
<div id="formContainer" class="dwo">
<div class="formRight">
<!-- Login form -->
<form id="login">
<header>
<h1>Welcome Back</h1>
<p>Please log in first</p>
</header>
<section>
<label>
<p>Username</p>
<input type="text" id="userName" />
<div class="border"></div>
</label>
<label>
<p>Password</p>
<input type="password" id="pwd" />
<div class="border"></div>
</label>
<button type="button" id="loginButton"> Log in </button>
</section>
<footer>
<a href="#">Forgot password</a>
<a href="register.html" id="registerBtn">Register New User</a>
</footer>
</form>
</div>
</div>CSS part: by using the global selector, clear the style of the outer and inner margins, list-style: none; to list clear style. Set a series of styles such as background color, font size, color, width and so on.
*{ /* global selector */
margin:0; /*outside margin**/
padding: 0; /* Inside margin */
}
li{
list-style: none; /* clear list style */
}
.box{
margin:auto; /*center the page*/
width:1000px;
height:1650px;
}
.box a:hover{
text-decoration: none; /* Remove the a label underline */
color:paleturquoise;
}
.box-b{
height: 35px;
background: #6e9a3b; /*background color**/
}
.box-b-d{
font-size:15px; /* font-size**/
padding-top:8px; /* 8 on inner margin distance */
margin-left:10px;
}
.box-b-d a{
color: #fff; /* Text color */
}
.box-b-d i{
color:#fff;
}
.box-b-s{
color:#fff;
font-size:15px;
float:right; /* Right float */
margin-top: -19px;
margin-right:10px;
}
.box-k{
height:72px;
background: #fff;
}
.box-k-t img{
height:50px;
margin-left:200px;
display: block; /*Display image*/
}
.box-k-b{
margin-top:-25px;
margin-left:350px;
}
.box-k-b li{
float:left; /*left float**/
margin-right:40px;
}
.box-k-b li a{
color:#6e9a3b;
font-size:13px;
}JS section:
Login, register – first get the element, respectively add a click event, Window.open jump to a new page
var oA = document.getElementById('dengl'); /*Get login, register element, click to jump to another page */
oA.onclick = function() {
window.open("register.html","");
}
var oZ = document.getElementById('zc');
oZ.onclick = function() {
window.open("register.html","");
}Registration page – get the registration button, add a click event, determine if the two password inputs are the same, convert userInfo to a string, and store it permanently on the page. Register successfully, jump to login page in 1000 milliseconds.
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var userName = document.getElementById('userName').value;
var email = document.getElementById('email').value;
var passwor = document.getElementById('pwd').value;
var repasswor = document.getElementById('repwd').value;
if (passwor != repasswor) {
alert('Two passwords don't match!) ;
return false;
}
var userInfo = {
username:userName,
passwor: passwor,
email:email,
};
localStorage.setItem('userInfo',JSON.stringify(userInfo));
alert('Registration successful, jump to login page!) ;
setTimeout('location.href = "login.html"', 1000); //location location (1 second jump to login item after successful registration)
};
}Login page – get the login button, add a click event, if to determine whether the stored user password and the current input is the same, if the error, then return false the following code is not executed. Successful login directly jump to the main page.
window.onload = function() {
var oLogin = document.getElementById('loginButton');
oLogin.onclick = function() {
var userName = document.getElementById('userName').value;
var passwor = document.getElementById('pwd').value;
var userInfo = JSON.parse(localStorage.getItem('userInfo')); //take the userInfo object out Long-term storage to local
if (userName != userInfo.username && passwor != userInfo.Passwor ) {
alert('You entered the wrong username and password!) ;
return false;
}
var session = sessionStorage.getItem('userInfo');
if (session) {
alert(userInfo.username + 'logged in ');
} else {
sessionStorage.getItem('userInfo');
alert('Login Successful');;
location.href = 'page.html ';
}
}
}2. Rotating charts
HTML part: The rotator is mainly composed of left and right arrows, five sequential buttons, and five images.
<div id="box-t"> <! --- Rotogram -->
<div id="left">
<span><</span> <! --Left Arrow -->
</div>
<div id="right"> <! -- Right arrow -->
<span>></span>
</div>
<img class="tup" src="img/3.jpg"/> <! --- Get the image -->
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<div class="box-t-y"> <! -- Button -->
<p class="box-y-x"></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>CSS section:
img{
display: none; /*hide image*/
}
#box-t{
position: relative; /* set relative positioning */
}
#box-t img{
width:1000px;
height:400px;
}
#left{
font-size:45px;
color:#fff;
position: absolute; /* set absolute positioning */
top:45%;
cursor: pointer; /* set mouse to small hand state */
}
#right{
font-size:45px;
color:#fff;
position: absolute;
top:45%;
right:0;
cursor: pointer;
}
.tup{
display: block;
}
.box-t-y{
position: absolute; /* add absolute positioning to the button */
right:45%;
bottom:0; /* bottom margin is 0 */
}
.box-t-y p{
width:20px;
height:20px;
display: inline-block; /* block-level elements that do not occupy a single line */
opacity: 0.7; /* set transparency */
border:1px solid #fff; /* border is 1 pixel white solid line */
border-radius:10px; /*realize ellipse effect */
margin-right:10px;
cursor: pointer;
}
.box-y-x{
background: #6e9a3b;
}JS section:
function lunb() {
for (var i = 0; i < aDp.length; i++) {
aDp[i].className = "";
aImg[i].className = "";
}
aDp[now].className = "box-y-x";
aImg[now].className ="tup";
}
var aBoxt = document.getElementById('box-t'); // Get the element
var aImg = aBoxt.getElementsByTagName('img');
var aDp = aBoxt.getElementsByTagName('p');
var aLeft = document.getElementById('left');
var aRight = document.getElementById('right');
var now = 0;
var dings = 'null';
for (var i = 0; i < aDp.length; i++) { // add events to the buttons via a for loop
aDp[i].index = i;
aDp[i].onmousemove = function () {
now = this.index;
lunb();
}
}
aLeft.onclick = function() {// Left arrow
now--;
if (now < 0) {
now = 4;
}
lunb();
}
aRight.onclick = function() {// Right arrow
now++;
if (now == 5) {
now = 0;
}
lunb();
}
dings = setInterval(function () {// Add a timer
now++;
if (now == 5) {
now = 0;
}
lunb();
},1500);
aBoxt.onmouseout = function() { //mouse out, trigger on timer event
dings = setInterval( function () {
now++;
if (now == 5) {
now = 0;
}
lunb();
},1500);
}3. Hometown Profile
HTML code:
<div class="box-h"> <! --Hometown profile section -->
<div class="box-h-j">
<p>--Introduction to Handan--</p>
</div>
<div class="box-h-x">
<img src="img/h2.jpg">
<div class="box-h-x-y">
<div class="y-nei">
<p>Beautiful Handan</p>
</div>
<div class="y-nei-w">
<p> The name "Handan" first appeared in the ancient book "Bamboo Book Ji Nian". The origin of the place name of Handan is generally based on the annotation of Zhang Yan, a man of the State of Wei in The Three Kingdoms Period in the Book of Han · Geography: "Handan Mountain, under the East city, single, do also, the city is from the city, so add the city cloud." This means that the place name of Handan comes from Handan Hill, and under the eastern part of Handan was a hill named Handan Shan, which was the end of the mountain range and ended here; hence it was named Handan, because the city was from a city, so Handan was called a city (阝). Handan
Two words as a place name, three thousand years along the use of unchanged, is a special case of Chinese culture of place names. </p>
</div>
<div class="y-nei y-nei-x">
<p>Show more</p>
</div>
</div>
</div>
</div>CSS code:
.box-h{
height:310px;
display: block;
}
.box-h-j p{
font-size:26px;
font-family: "Chinese official script "; /* Set the font style */
color:#6e9a3b;
text-align: center; /* Text centered */
padding-top:30px;
}
.box-h-x{
width:600px;
height:200px;
background: #fff;
margin-left:180px;
box-shadow: 6px 15px 30px #5E5E5E;
}
.box-h-x img{
display: block;
width:160px;
}
.box-h-x-y{
width:440px;
height:200px;
float:right;
margin-top:-200px;
}
.y-nei{
width:70px;
height:30px;
background: #6e9a3b;
opacity: 0.5;
margin-top:20px;
}
.y-nei p{
font-size:13px;
color:#fff;
text-align: center;
line-height: 2;
}
.y-nei-w p{
font-size:12px;
margin-top:10px;
color:#000000;
margin-left:10px;
}
.y-nei-x{
width:70px;
height:25px;
margin-left:370px;
margin-top:-15px;
}4.Popular Attractions
HTML section:
<div class="box-j"> <! ---Popular Attractions section -->
<div class="box-h-j">
<p>--Popular Attractions--</p>
</div>
<ul class="box-j-x">
<li class="box-x-1">
<img src="img/j2.jpg">
<span>Chishuiwan Ancient Town</span>
<p>Chishuiwan Ancient Town, located in the eastern foot of the Taihang Mountains, Shibi County, Zhongyuan Village, Qing River, deep in the Taihang Mountains, "the city that never sleeps". </p
</li>
<li class="box-x-1 box-x-2">
<img src="img/j1.jpg">
<span class="wenz"> Wa Imperial Palace </span>
<p class="wenz2">Nuwa Huanggong is located about 45 kilometers southwest of Xingtai City, the main peak elevation of 1,089 meters above sea level, the lone peak of the sky, towering into the clouds, there is a "thunder".
It is said that "the sun is singing and the rain is rising halfway up the mountain". </p
</li>
<li class="box-x-1">
<img src="img/j3.jpg">
<span>King Niang Lake</span>
<p>Jingniang Lake is located in the north of Koushang Village in the northwestern mountainous area of Wuan City, Handan City, Hebei Province, also known as the
The mouth of the reservoir, known as the "Three Gorges of Taihang". </p>
</li>
</ul>
</div>CSS section:
.box-j{
height:350px;
}
.box-j-x{
width:750px;
height:245px;
margin: auto;
}
.box-x-1{
width: 240px;
height:245px;
background:#f0f3f4;
float:left;
margin-left:10px;
}
.box-x-1 img{
display: block;
width: 240px;
height:160px;
}
.box-x-1 span{
font-size:20px;
font-family: "Times New Roman ";
font-weight: bold; /* Text in bold */
margin-top:5px;
}
.box-x-1 p{
font-size:13px;
}
.box-x-2{
background: #cdddb9;
}
.wenz{
font-size:20px;
color:#fff;
font-family: "Times New Roman ";
font-weight: bold;
margin-top:5px;
}
.wenz2{
font-size:13px;
color:#fff;
}5. Specialty Food
HTML section:
<div class="box-m"> <! ---Specialties section -->
<div class="box-h-j">
<p>--Specialties--</p>
</div>
<ul class="box-m-x">
<li class="box-m-1">
<img src="img/m1.jpg" />
<div class="box-m-wz">
<span class="activ"> Cixian smoked chicken </span>
<p>Magnesian fat Ni smoked chicken originated in Magnesian Magnesian Zhou Busan Street Jiao family, Jiao Ming old man began to create, has a history of more than 100 years, so far it has been five generations of passers-by. Less moisture, skin shrinkage cracks, meat exposed, strong flavor, tender meat, known as the storage of a year does not deteriorate. As a result, fat Ni smoked chicken reputation, known as the Magnetic Island one of the best. </p
</div>
</li>
<li class="box-m-1">
<img src="img/m2.jpg" />
<div class="box-m-wz">
<span class="activ"> Old locust tree pancake </span>
<p>Jinjinle old acacia tree baklava is Handan City Catering Corporation operated for half a century of flavorful food, due to the operation of the site next to an old acacia tree and got its name. With fine powder, pepper salt, small oven baking, even fire. Nearly baked before. Then use a thin blade around the cake cover to pull a circle of mouth, color charred, crispy taste. </p>
</div>
</li>
<li class="box-m-1">
<img src="img/m3.jpg" />
<div class="box-m-wz">
<span class="activ"> Donkey meat sausage </span>
<p>Yongnian County donkey sausage from the end of the Qing Dynasty, has nearly a hundred years of history, is a traditional snacks have been handed down to date, is Yongnian County, Hebei Province, the local flavor special, donkey meat is honored as a superior product with its high quality and beautiful taste. To Yongnian "Ma Liansheng, East of the donkey, the hotel building" three first, popular with consumers. </p
</div>
</li>
</ul>
</div>CSS section:
.box-m{
height:410px;
}
.box-m-x{
width:630px;
height:280px;
margin:auto;
}
.box-m-1{
margin-left:15px;
float:left;
width:195px;
height:280px;
}
.box-m-1 img{
display: block;
width:195px;
height:127px;
}
.box-m-wz{
margin-top:5px;
text-align: center;
}
.box-m-wz span{
font-size:18px;
}
.box-m-wz p{
margin-top:8px;
font-size:6px;
}6. Footer
HTML section: click on the return to top text to go directly to the beginning of the page.
<div class="box-w"> <! -- End of page -->
<div class="box-w-1">
<img src="img/b.jpg"/>
<div class="w-x"> <! -- tail text -->
<span>Beautiful Handan</span>
<p>Customer Service Hotline: 0312 8675555</p>
</div>
</div>
<div class="w-z">
<img src="img/two.jpg" /> <! --- QR code image -->
<a href="">Back to <br>Top</a> <! --Click to go directly back to the top -->
</div>
</div>CSS section:
.box-w{
height:155px;
background: #6e9a3b;
}
.box-w img{
display: block;
}
.box-w-1{
margin-left:220px;
padding-top:40px;
}
.box-w-1 img{
width:100px;
height: 40px;
}
.w-x{
margin-top: 5px;
}
.w-x span{
font-size:16px;
font-family: "round ";
color:#fff;
}
.w-x p{
color:#fff;
font-size:12px;
}
.w-z img{
margin-top:-90px;
margin-right:120px;
float: right;
}
.w-z a{
color: #fff;
margin-top:-70px;
margin-right:80px;
float: right;
}
a{
cursor: pointer;
}II. Effects
Displays pages for login, registration, current time, rotating images, and more.
registration page
login page
Hometown Profile
Hot Spots
Specialty Food
footer
Overall page
summarize
The overall page, most of which are written in div, each piece is wrapped in a large div, reflecting the specification of the code, hometown profile, popular attractions, specialties, which are very simple to write a successful part of the following code directly copy. Rotating picture of this piece is also very simple, first of all, you have to understand the relationship between the button and the picture, absolute positioning and relative positioning, is the need for everyone to master, in the process of writing code in the future, will be often used. The bottom, return to the top button, is through the use of a tag to achieve the effect.
JavaScript, together with HTML and CSS, makes up the web pages we see.
1. HTML is used to define the content of a web page, such as headings, body text, images, etc;
2. CSS is used to control the appearance of a web page, such as colors, fonts, and backgrounds;
3.JavaScript is used to update the contents of a web page in real time, such as getting data from the server and updating it to the web page, modifying the style of certain tags or the contents therein, etc., which can make the web page more vivid.