🌩️ 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
L21JP personal blog personal introduction 4 pages with js scrolling carousel
🧩 2. Picture demo
4. 💒 website code
🧱HTML structure code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>personal blog</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="bigbox">
<div id="title">
<img src="picture/bg.png" alt="">
<div>
<img src="picture/touxiang.png" alt="">
</div>
</div>
<div id="mian">
<div id="mian_left">
<a href="">my home page</a>
<a href="jiaixang.html">my hometown</a>
<a href="aihao.html">my hobby</a>
<a href="liuyan.html">leave me a message</a>
<div id="bg2">
<img src="picture/bg2.png" alt="">
</div>
</div>
<div id="mian_right">
<div class="content">
<ul class="wrapper">
<li><img src="picture/banner.png"></li>
<li><img src="picture/banner1.png"></li>
<li><img src="picture/banner2.png"></li>
<li><img src="picture/banner.png"></li>
</ul>
<ul class="radius">
</ul>
<div class="prev">
<span>
< </span>
</div>
<div class="next">
<span>></span>
</div>
</div>
</div>
</div>
<div id="main2">
<p class="title">
i have been
</p>
<div id="tupian">
<img src="picture/l1.png" alt="">
<p>Summer Palace</p>
</div>
<div id="tupian">
<img src="picture/l2.png" alt="">
<p>chongqing</p>
</div>
<div id="tupian">
<img src="picture/l3.png" alt="">
<p>Liaoning</p>
</div>
<div id="tupian">
<img src="picture/l4.png" alt="">
<p>Hainan</p>
</div>
</div>
<div id="main3">
<p>
<span>Name</span>: ******<br>
<span>Hobby</span>: boxing, playing, fitness, reading<br>
<span>character</span>: cheerful<br>
<span>Specialty</span>: playing basketball, boxing<br>
<span>hometown</span>: Xinjiang Hotan area
</p>
<p>
<span>Self-evaluation</span>
I am cheerful, down-to-earth, steady, energetic, warm and sincere towards others. I like to read books and listen to music in my spare time, so as to relieve the pressure brought by my usual study, and I can also learn the knowledge that cannot be learned in books. It is the principle of my work to broaden my horizons, to be active and to keep making progress. My advantages are that I know how to continuously improve and perfect myself from life and study, be honest, have good interpersonal skills, have relevant professional knowledge and certified and attentive attitude.
</p>
</div>
<footer>
<p>all rights reserved©: ******</p>
</footer>
</div>
</body>
<script src="js/js.js"></script>
</html>
🏠CSS style code
* {
margin: 0px;
padding: 0px;
list-style: none;
}
body {
background-color: #E5E5E5;
}
#bigbox {
width: 1000px;
margin: 0 auto;
-moz-box-shadow: 2px 2px 5px #333333;
-webkit-box-shadow: 2px 2px 5px #333333;
box-shadow: 2px 2px 5px #333333;
}
#title {
position: relative;
width: 1000px;
font-size: 0px;
}
#title>img {
width: 1000px;
height: 104px;
}
#title div img {
position: absolute;
width: 80px;
top: 12px;
left: 50px;
border-radius: 50%;
}
#mian {
background-color: #fff;
padding-top: 10px;
font-size: 0px;
}
#mian>div {
font-size: 16px;
}
#mian_left {
width: 180px;
display: inline-block;
height: 390px;
}
#mian_left a {
display: inline-block;
text-align: center;
width: 160px;
background: #525252;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 30px;
margin-left: 10px;
text-decoration: none;
color: #fff;
line-height: 30px;
border-radius: 4px;
margin-top: 10px;
font-size: 14px;
}
#mian_left a:hover {
color: #171717;
font-weight: bold;
}
#mian_right {
height: 370px;
width: 810px;
background-color: #171717;
display: inline-block;
border-radius: 4px;
overflow: hidden;
}
#bg2 {
margin-top: 10px;
width: 160px;
margin-left: 10px;
height: 210px;
background-color: #171717;
border-radius: 4px;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
.content {
width: 810px;
height: 370px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.wrapper {
width: 400%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
display: flex;
transition: none;
}
.wrapper li {
flex: 1;
list-style: none;
margin: 0;
padding: 0;
}
.wrapper li img {
width: 810px;
height: 370px;
}
.radius {
height: 12px;
margin: 0;
padding: 0;
position: absolute;
bottom: 10px;
left: 10px;
display: flex;
align-items: center;
}
.radius li {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
opacity: 0.6;
margin: 0 3px;
padding: 0;
list-style: none;
}
.radius-active {
opacity: 1 !important;
border: 2px solid rgb(255, 255, 255, 0.5);
background-clip: padding-box;
}
.prev {
width: 23px;
line-height: 34px;
text-align: center;
position: absolute;
left: 0;
top: 50%;
margin-top: -17px;
background-color: darkgray;
opacity: 0;
}
.next {
width: 23px;
line-height: 34px;
text-align: center;
position: absolute;
right: 0;
top: 50%;
margin-top: -17px;
background-color: darkgray;
opacity: 0;
}
.prev span,
.next span {
font-weight: bold;
color: white;
font-size: 18px;
}
#bg2 img {
width: 160px;
}
#main2 {
padding-top: 30px;
padding-bottom: 30px;
font-size: 0px;
width: 1000px;
background-color: #fff;
margin-top: 10px;
display: flex;
}
#tupian {
display: inline-block;
text-align: center;
margin-left: 24px;
line-height: 30px;
}
#tupian img {
height: 200px;
border-radius: 4px;
}
.title {
display: inline-block;
font-size: 24px !important;
width: 24px;
margin-left: 30px;
font-weight: bold;
color: #3F6EA9;
line-height: 50px;
margin-right: 40px;
}
#main2 p {
font-size: 16px;
}
#main3 {
position: relative;
width: 1000px;
height: 170px;
padding-top: 30px;
padding-bottom: 30px;
background-color: #F1F1F1;
margin-top: 10px;
margin-bottom: 20px;
}
#main3 p {
font-size: 14px;
line-height: 35px;
margin-left: 30px;
}
#main3 p:last-child {
position: absolute;
right: 30px;
top: 30px;
width: 500px;
}
#main3 span {
font-weight: bold;
}
footer {
width: 1000px;
text-align: center;
line-height: 60px;
background: #525252;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
font-size: 14px;
}
#main4 {
width: 1000px;
margin-top: 10px;
margin-bottom: 20px;
padding-top: 30px;
padding-bottom: 30px;
background-color: #F1F1F1;
}
#main4 p {
width: 980px;
margin-left: 10px;
text-indent: 28px;
font-size: 16px;
line-height: 30px;
}
#main4 span {
font-size: 30px;
font-weight: bold;
}
#main5 {
width: 1000px;
margin-top: 10px;
margin-bottom: 20px;
padding-top: 30px;
padding-bottom: 30px;
line-height: 50px;
background-color: #F1F1F1;
}
#main5 h3 {
text-align: center;
}
#main5 div {
margin: 0 auto;
width: 300px;
}
#main5 span {
display: inline-block;
width: 70px;
}
button {
width: 100px;
height: 30px;
margin-left: 80px;
}
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👇🏻👇🏻👇🏻