🌩️ 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
I85JP - personal profile js with contact form (5 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>Ali's personal website</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/banner.js"></script>
</head>
<body>
<!----web page start------>
<div class="main">
<!----top start------>
<div class="top0">
<div class="daohang">
<div class="logo"><img src="images/logo.png" /></div>
<div id="nav">
<ul>
<li><a class="hot" href="index.html">front page</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="jingli.html">My experience</a></li>
<li><a href="rizhi.html">my log</a></li>
<li><a href="lianxi.html">contact me</a></li>
</ul>
</div>
</div>
</div>
<div id="playBox">
<div class="pre"></div>
<div class="next"></div>
<div class="smalltitle">
<ul>
<li class="thistitle"></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="oUlplay">
<li><a href="#" target="_blank"><img src="images/1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg"/></a></li>
</ul>
</div>
<!----box1 start------>
<div class="box01">
<h1>my hobby</h1>
<h2>My Hobby</h2>
</div>
<!----box2 start------>
<div class="box02">
<div class="bx1">
<h1>my favorite clothes</h1>
<h2>Lolita</h2>
<p>The pursuit is a new attitude towards clothing</p>
<p>Seek a different way of life</p>
<p>Sweet Classic Gothic</p>
</div>
<div class="bx1">
<h1>my favorite food</h1>
<h2>Delicious cake</h2>
<p>The cake is sweet, the cake is happy</p>
<p>keep us alive</p>
<p>sweet happiness sweet</p>
</div>
<div class="bx1">
<h1>my favorite pet</h1>
<h2>Small goldfish</h2>
<p>I like the free swimming of fish</p>
<p>Bring peace and quiet</p>
<p>full of infinite vitality</p>
</div>
</div>
<!----box3 start------>
<div class="box03">
<div class="bx1">
<img src="images/01.jpg" />
<div class="right">
<h1>this is me<span>sweet</span></h1>
<h2>Tiger and Tiger</h2>
<p>Is this glowing beauty real?<br /><p>
<p>Obviously can rely on appearance<br/></p>
<p>Depends on talent<br/></p>
<p>Existence is perfection itself<br/></p>
</div>
</div>
<div class="bx2">
<p>sweet</p>
<p class="padd0">cute</p>
</div>
<div class="bx1">
<div class="right marl60">
<h1>this is me<span>nice</span></h1>
<h2>Shimizu Hibiscus</h2>
<p>Double pupils cut water, fluttering back, sultry </p>
<p>Can be salty and sweet</p>
<p>Textbook-level beauty</p>
</div>
<img class="mar0" src="images/02.jpg" />
<div class="bx3">see more</div>
</div>
</div>
<!----box4 start------>
<div class="box04">
<h1>My creation</h1>
<h2>My work</h2>
<div class="box04-ner">
<ul>
<li>
<img src="images/04.jpg" />
<p>I like photography. Photography is such an art that connects time and space and records historical facts. What it conveys to the public is history, reality, time and space.
</p>
<img src="images/05.jpg" />
</li>
<li>
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<p>I like to use my computer to use my imagination to make posters with strong visual impact, giving people a different feeling and stimulating their visual nerves.</p>
</li>
<li class="mar0">
<img src="images/08.jpg" />
<p>I like to make handmade products, quietly enjoy the process of making, the process of starting from nothing, creating a work that is unique to myself, and has a great sense of accomplishment.
</p>
<img src="images/09.jpg" />
</li>
</ul>
</div>
</div>
<!----foot start------>
<div id="foot">
<img src="images/foot-logo.jpg" />
</div>
</div>
</body>
</html>
🏠CSS style code
@charset "utf-8";
/* CSS Document */
body{ margin:0 auto; font-size:14px; font-family: "Microsoft Yahei"; line-height:22px; background:#d7d5d5; }
div,p,input,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{ height:auto; margin:0;; padding:0; vertical-align:middle ;}
li{ list-style:none;}
a{ text-decoration:none;}
.ul{ list-style:none;}
.divclear{ clear:both;}
img{ border:0; margin:0; padding:0;}
a{color:#333;}
a:link{ color:#ffffff;}
a:hover {color:#629705;text-decoration:none;overflow:hidden;}
/*---Web page starts-----*/
.main{ width:1100px; height:auto; overflow:hidden; margin:0 auto; background:#FFF;}
/*---top start-----*/
.top0{ width:1100px; height:56px; background:#000;}
#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}
#playBox{ width:1000px; height:409px; margin:20px auto; background:#333; position:relative; overflow:hidden;}
#playBox .oUlplay { width:99999px; position:absolute; left:0; top:0;}
#playBox .oUlplay li{ float:left;}
#playBox .pre{ cursor:pointer; width:45px; height:45px; background:url(../images/l.png) no-repeat; position:absolute; top:190px; left:10px; z-index:10;}
#playBox .next{ cursor:pointer; width:45px; height:45px; background:url(../images/r.png) no-repeat; position:absolute; top:190px; right:10px; z-index:10;}
#playBox .smalltitle {width:1000px; height:10px; position:absolute; bottom:15px; z-index:10}
#playBox .smalltitle ul{ width:120px; margin:0 auto;}
#playBox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}
#playBox .smalltitle .thistitle{ background:#69aaec;}
.top{ width:1100px; height:390px; background:url(../images/banner1.jpg) no-repeat}
.daohang{ width:1100px; height:56px; background:#000;filter:alpha(Opacity=80);-moz-opacity:0.5;background: rgba(0,0,0,0.3);}
.logo{ width:170px; margin-left:130px; float:left; height:56px;}
#nav{width: 730px;
height: 56px;
margin: 0 auto;
margin-left: auto;
margin-left: 70px;
float: left;
}
#nav ul{ width:685px; height:56px; line-height:56px; font-size:14px; margin:0 auto;}
#nav ul li{ width: 90px; height:56px; margin:0px 10px; line-height:56px; color:#FFF; float:left; text-align:center;}
#nav li a {
color: #ffffff;
font-family: "Song Dynasty";
font-size: 16px;
margin-left: 2px;
display: block;
font-weight:bold;
}
#nav li a:hover, #nav li.hover a {
background: url(../images/nav.png) no-repeat 0px 15px;
color: #080808 !important;
}
.hot{ width: 90px;
height: 56px;
background: url(../images/nav.png) no-repeat 0px 15px;
color: #080808 !important;
}
/*-----box1 start-----*/
.box01{ width:1100px; height:125px; padding-top:30px; text-align:center}
.box01 h1{ font-size:16px; font-weight:normal}
.box01 h2{font-size:14px; font-weight:normal}
/*-----box2 start-----*/
.box02{ width:887px; height:380px; margin:0 auto; background:url(../images/box01.jpg) no-repeat;}
.box02 .bx1{width: 200px;
height: 240px;
position: relative;
left: 70px;
top: 10px;
float: left;
margin-right: 77px; text-align:center}
.box02 .bx1 h1{ height:30px; font-size:16px; line-height:30px; margin-top:10px; margin-top:20px;}
.box02 .bx1 h2{ height:25px; font-size:14px; line-height:25px; font-weight:normal}
.box02 .bx1 h3{ height:25px; font-size:14px; line-height:25px; }
.box02 .bx1 p{font-size:11px; }
.box02 .bx1 h3 span{ background:#070101; color:#FFF; padding:0px 5px; margin-right:5px;}
/*-----box3 start-----*/
.box03{ width:888px; height:823px; margin:0 auto; border:#c6c4c5 2px solid; border-top:none; border-bottom:#c6c4c5 10px solid;
margin-top:80px;}
.box03 .bx1{ width:886px; height:330px; margin-top:20px;}
.box03 .bx1 img{ width:445px; height:325px; float:left; margin-left:60px; margin-right:110px;}
.box03 .bx1 .right{ width:215px; height:330px; float:left; text-align:center}
.box03 .bx1 .right h1 {
font-size: 20px;
width: 30px;
height: 235px;
float: right;
line-height: 25px;
padding-left: 10px;
margin-top: -15px;
}
.box03 .bx1 .right h1 span{ background:#F00; padding:2px; font-size:12px; }
.box03 .bx1 .right h2 {
font-size: 20px;
width: 30px;
float: right;
line-height: 25px;
background: #F00;
padding: 10px 0px;
margin-left: 10px;
}
.box03 .bx1 .right p {
color: #5e5e5e;
width: 26px;
float: right;
font-size: 14px;
line-height: 15px;
border-right: #333 1px solid;
padding: 0px 2px;
}
.box03 .bx2{width: 50px;
height: 78px;
margin: 0 auto;
margin-left: auto;
background: url(../images/03.jpg) no-repeat;
margin-left: 470px;}
.box03 .bx2 p {
color: #5e5e5e;
width: 25px;
float: right;
font-size: 14px;
line-height: 15px;
padding: 0px 18px;
height: 50px;
}
.box03 .bx2 .padd0{ padding:0px !important;}
.marl60{margin-left: 60px;}
.mar0{margin-right: 0px!important;}
.box03 .bx3{ width: 25px;
height: 80px;
border: #e70012 1px solid;
float: left;
text-align: center;
line-height: 20px;
font-weight: bold;
margin-left: 20px;
margin-top: 260px;}
/*-----box4 start-----*/
.box04{ width:888px; height: 780px; margin-top:88px; margin:0 auto; border:#c6c4c5 2px solid; border-top:none; border-bottom:#c6c4c5 10px solid;
margin-top:80px;}
.box04 h1{ font-size:16px; font-weight:normal; text-align:center}
.box04 h2{font-size:14px; font-weight:normal; text-align:center; }
.box04-ner{ height:615px; width:888px;margin-top:40px;}
.box04-ner ul{ padding:0px}
.box04-ner ul li{width: 263px;
height: 615px;
float: left;
margin-right: 49px;
text-align: center;}
.box04-ner ul li p{ padding:0px 10px; font-size:14px;}
.box04-ner ul li img{ margin:30px 0px;}
/*-----foot start-----*/
#foot{ height:125px; width:100%; background:#140b0c; text-align:center; margin-top:120px;}
#foot img{ margin-top:24px;}
/*---foot Finish-----*/
/*---Join-----*/
.jm-top{ height:280px !important; background:url(../images/banner2.jpg) no-repeat;}
.jm-box01{ width:695px; height:182px; margin:0 auto;margin-top:40px;}
.jm-box01 h1{ font-size:18px; height:40px; line-height:40px; margin-bottom:10px;}
.jm-box01 .bx{ width:195px; height:35px; float:left;}
.jm-box01 .inpt{ width:133px; height:20px; border:#333 1px solid;}
.jm-box01 .bx2{ width:195px; height:35px; margin-left:288px; float:left;}
.jm-box01 .bx3{ width:695px; height:40px;margin-top:80px;}
.jm-box01 .bx3 .yxs{ width: 615px;height: 31px;border: #333 1px solid;margin-top: 10px; }
.jm-box01 span { margin-right:10px; line-height:35px;}
.jm-box01 p{ height:40px; line-height:40px; text-align:center;}
.jm-box02{ width:695px; height:160px; margin:0 auto;margin-top:40px;}
.jm-box02 ul{ padding:0 px;}
.jm-box02 ul li{width: 230px;
height: 42px;
line-height: 42px;
margin-bottom: 15px;
float: left;}
.jm-box02 ul li img{ margin-right:25px; float:left;}
.marl{ margin-left:200px;}
.jm-box02 ul li p{ text-align:center; line-height:18px;width: 180px;}
/*---about us-----*/
.ab-top{ height:351px !important; background:url(../images/banner3.jpg) no-repeat;}
.ab-box01{ width:1100px; height:40px; padding-top:30px; text-align:center}
.ab-box01 h1{ font-size:18px; }
.ab-box01 h2{font-size:16px; font-weight:normal;}
.ab-box02 {
width: 811px;
height: 748px;
margin: 0 auto;
margin-top: 0px;
border: #c6c4c5 2px solid;
border-top-color: rgb(198, 196, 197);
border-top-style: solid;
border-top-width: 2px;
border-bottom-color: rgb(198, 196, 197);
border-bottom-style: solid;
border-bottom-width: 2px;
border-top: none;
border-bottom: #c6c4c5 10px solid;
margin-top: 80px;
text-align:center;
margin-bottom:20px;
}
.ab-box03{ width:857px; height:648px; margin:0 auto; margin-top:40px;}
.ab-box03-left{ width:385px; height:628px; padding:10px; float:left;}
.ab-box03-left .bx1{ padding:0px 10px; height:28px; border:#333 1px solid; font-size:16px; margin-bottom:25px; float:right;}
.ab-box03-left .bx2{width:385px; height:auto; overflow:hidden; margin-bottom:20px;}
.ab-box03-left .bx2 p{ line-height:17px; font-size:14px; text-align:right;}
.ab-box03-left .bx3 {width: 385px;
height: 120px;
text-align: right;}
.ab-box03-left .bx3 img{ margin-top:10px; float:right;}
.ab-box03-right{ width:420px; height:648px; padding-left:30px; float:left; background:url(../images/18.jpg) no-repeat;}
.ab-box03-right .bx1{ padding:0px 10px; height:28px; border:#333 1px solid; font-size:16px; margin-bottom:25px; float:left;}
.ab-box03-right .bx2{width:385px; height:auto; overflow:hidden; margin-bottom:20px;}
.ab-box03-right .bx2 p{ line-height:17px; font-size:14px; text-align:left;}
.ab-box03-right .bx3 {width: 385px;
height: 120px;
text-align: left;}
.ab-box03-right .bx3 img{ margin-top:10px; float:left;}
/*---news-----*/
.news-top{ height:303px !important; background:url(../images/banner4.jpg) no-repeat;}
.news-box02 {
width: 850px;
height: 400px;
margin: 0 auto;
margin-top: 0px;
border: #c6c4c5 2px solid;
border-top-color: rgb(198, 196, 197);
border-top-style: solid;
border-top-width: 2px;
border-bottom-color: rgb(198, 196, 197);
border-bottom-style: solid;
border-bottom-width: 2px;
border-top: none;
border-bottom: #c6c4c5 10px solid;
margin-top: 80px;
margin-bottom:20px;
}
.zhaop{ width:320px; float:left; margin-left:20px;}
.news-box02 ul{ padding:0px; margin-bottom:50px; width:500px; float:left;}
.news-box02 ul li{ width: 850px; height:35px; line-height:30px; font-size:14px;}
.news-box02 ul li p{width: 690px; float:left; padding-left:40px;}
.news-box02 ul li span{ float:left; width:120px;}
.news-box03{ width: 160px; height:34px; margin:0 auto;}
.news-box03 a{ width:22px;text-align: center; height:20px; float:left; color:#333;}
.hots{ background:#140b0c; color:#FFF !important;}
/*---Member Centre-----*/
.huiyuan-top{ height:308px !important; background:url(../images/banner5.jpg) no-repeat;}
.huiyuan-center{ width:1000px; height:425px; margin:0 auto;}
.huiyuan-box01{ width:152px;text-align:center; height:402px; float:left; margin-top:30px; background:url(../images/25.jpg) no-repeat;margin-left:66px;}
.huiyuan-box01 h1{ margin-top:8px; font-size:16px; width:152px; height:33px; text-align:center;}
.huiyuan-box01 h2{ font-size:14px;text-align:center;}
.huiyuan-box01 p{ width:110px; margin:0 auto; border-top:#333 1px solid; font-size:12px;text-align:center;}
.huiyuan-box02{ width:740px; height:402px; float:left; margin-left:40px;margin-top:40px;}
.huiyuan-box02 .bx{ width:707px; margin-bottom:20px; padding:0px 15px; height:99px; background:url(../images/24.jpg); line-height:30px; text-align:center;}
.huiyuan-box02 .gengd{ width:125px; height:18px; line-height:18px; text-align:center; border:#333 1px solid; margin:0 auto;}
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👇🏻👇🏻👇🏻