🌩️ Wonderful column recommendation👇🏻👇🏻👇🏻
💂 Author homepage: [Enter the homepage—🚀Get more source code]
🎓 web front-end final homework: [📚HTML5 webpage final assignment (1000 sets) ]
🧡 Interesting confessions for programmers: [💌HTML Tanabata Valentine's Day Confession Web Page Production (110 Sets) ]
2. 📚 website introduction
📔 Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has a stable display effect.
📓Website programming: It is planned to use the latest web programming language HTML5+CSS3+JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers on the market, and the effect of seeing the website immediately after opening it has been achieved.
📘Website materials: We plan to collect good-looking picture materials from various platforms, and carefully select pictures that are suitable for the style of the web page, and then use PS to make pictures suitable for the size of the web page.
📒Website files: The types of website system files include: html web page structure file, css web page style file, js web page special effect file, images web page picture file;
📙Webpage editing: The code of the webpage works is simple, and any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++, etc.) can be used to run, modify and edit.
in:
(1) The 📜html file contains: index.html is the home page, and other html are secondary pages;
(2) 📑 css files include: css all page styles, text scrolling, image enlargement, etc.;
(3) 📄 js files include: js implements dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).
3. 🔗 website effect
▶️1. Video demonstration
W04JP-Love Music Lyrics Rolling Download Form (6 pages)
🧩 2. Picture demo
4. 💒 website code
🧱HTML structure code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>front page</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="web"> <div class="top"> <div class="logo"><img src="images/logo.jpg" /></div> <div class="nav"> <ul> <li><a href="index.html">Home page</a></li> <li><a href="fenlei.html">Playlist classification</a></li> <li><a href="denglu.html">member sign in</a></li> <li><a href="zhuce.html">Sign Up</a></li> </ul> </div> <div class="sous"> <form> <input class="inut" /> <button class="btn"></button> </form> </div> </div> <div class="banner"> <img src="images/banner.jpg" /> </div> <div class="box1"> <div class="bx"> <img src="images/img1.jpg" /> <p>30 songs per day</p> </div> <div class="bx"> <img src="images/img2.jpg" /> <p>you may also like</p> </div> <div class="bx"> <img src="images/img3.jpg" /> <p>hear the difference</p> </div> <div class="bx"> <img src="images/img4.jpg" /> <p>private radio</p> </div> </div> <div class="tit">Popular Artist</div> <div class="box2"> <div class="bx2"> <img src="images/img5.jpg" /> Mayday </div> <div class="bx2"> <img src="images/img6.jpg" /> Eason Chan </div> <div class="bx2"> <img src="images/img7.jpg" /> Mayday </div> <div class="bx2"> <img src="images/img8.jpg" /> Mayday </div> <div class="bx2"> <img src="images/img9.jpg" /> Mayday </div> </div> <div class="tit">popular MV</div> <div class="box3"> <div class="bx3"> <img src="images/img10.jpg" /> <p>CLASS</p> <p>Eason Chan</p> </div> <div class="bx3"> <img src="images/img11.jpg" /> <p>little love</p> <p>Liang Jingru</p> </div> <div class="bx3"> <img src="images/img12.jpg" /> <p>old turntable</p> <p>S.H.E/Hong Jingyao</p> </div> </div> <div class="tit">genre</div> <div class="box4"> <div class="bx4"> <img src="images/img13.jpg" /> </div> <div class="bx4"> <img src="images/img14.jpg" /> </div> <div class="bx4"> <img src="images/img15.jpg" /> </div> </div> <div class="foot"> <p>Copyright@1998-2020 music.All Rights Reserved.</p> <p>All rights reserved by iTingMusic.com</p> </div> </div> </body> </html>
🏠CSS style code
.web{
width:1140px;
height:auto;
overflow:hidden;
margin:0 auto;
background:#FFF;
padding:0px 30px;
}
.top{
height:55px;
padding-top:15px;
}
.logo{
width:116px;
height:39px;
float:left;
margin-right:50px;
}
.nav{
width:720px;
height:39px;
float:left;
}
.nav ul{
padding:0px;
margin:0;
}
.nav ul li{
height:39px;
line-height:39px;
float:left;
margin:0px 20px;
}
.nav ul li a{
font-size:18px;
color: #000;
}
.sous{
width:140px;
height:39px;
float:right;
}
.inut{
width:110px;
height:39px;
border:none;
border-bottom: 1px solid #000;
float:left;
}
.btn{
width:30px;
height:30px;
background:url(../images/btn.jpg) no-repeat;
border:none;
margin-top:10px;
}
.banner{
width:1140px;
height:364px;
margin-bottom:25px;
}
.box1{
width:910px;
height:90px;
margin:0 auto;
margin-bottom:40px;
}
.box1 .bx{
width:88px;
height:90px;
float:left;
margin:0px 60px;
text-align:center;
font-size:14px;
}
.box1 .bx img{
margin-bottom:10px;
}
.tit{
height:60px;
line-height:60px;
padding-left:20px;
font-size:26px;
margin-bottom:15px;
color:#464543;
}
5. 🎁More source code
1. If my blog is helpful to you, please "👍Like" "✍️Comment" "💙Favorite" one click and three links!
2. 💗[👇🏻👇🏻👇🏻🉑Follow me | Get more source code] Take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, as well as website templates, college graduate HTML templates, etc.!
📣Technical issues related to the above content💌Welcome to exchange and learn together👇🏻👇🏻👇🏻