Excellent column recommendation?
About the author: A technical blogger who loves to turn logical thinking into code
Author’s homepage: [Homepage–? Get more high-quality source code]
Web front-end major homework: 【Practice cases of high-quality project projects (1000 sets) 】
Programmer’s interesting confession method: 【HTML Tanabata Valentine’s Day Confession Web Page Production (110 sets) 】
Super cool Echarts large-screen visualization source code: [ echarts large-screen display big data platform visualization (150 sets) 】
Free and practical WEB front-end learning guide: [web front-end zero basic to advanced learning video tutorial 120G dry goods sharing]
About the author: He has successively served as R&D engineer, technical team leader, and teaching director; he was awarded CSDN’s Top Ten Blog Stars twice in 2016 and 2020. Ten years of cold ice, it is difficult to cool the blood; many years have passed, and after changes, things have changed. However, the exploration and pursuit of technology never stops. Insist on originality, love to share, keep the original intention, carry on the past and open up the future!
Article directory
- 1. ?Website title
- 2. Website description
- 3. Introduction to the website
- 4. Website Demo
- 5. Website code
-
- HTML structure code
- CSS style code
- 6. How to make learning no longer blind
- 7. More dry goods
1. ?Website title
Personal web design, ?♂?CV production, ?simple static HTML personal webpage works,?personal introduction website templates, and other website design and production.
2. Website description
?The website template of personal web design is made with DIV CSS layout. The web works have multiple pages, such as: personal introduction (text page), my works (picture list), personal skills (graphic page), online message (form page) In terms of CSS style, the overall web page adopts a left-right layout structure, and a web page background image is made. Each navigation background color in the navigation area is different, and the navigation background color echoes the page background.
A set of A + web pages should contain (specifically can be determined according to individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably pull down), the middle content section, and the footer.
- All pages are hyperlinked to each other, leading to three-level pages, consisting of 5-10 pages.
- The unified layout of the page style is normal, not messy, using Div + Css technology.
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally.
- There must be JS special effects, such as timing switching and manual switching of picture carousels.
- There are multimedia elements in the page, such as gif, video, music, and the use of form technology. .
- The page is clean, beautiful, generous, and not the same. .
- Not only must it be able to present the content requested by users, but it must also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.
3. 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 stable display effects.
Web site program: 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 currently on the market, so that the website can be seen immediately after opening.
Website materials: plan to collect good-looking picture materials from various platforms, carefully select pictures suitable for the style of the webpage, and then use PS to make pictures suitable for the size of the webpage.
Website files: The types of website system files include: html web page structure files, css web page style files, js web page special effect files, images web page picture files;
Webpage editing: The code of the webpage works is simple, and any HTML editing software can be used (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad + + , etc. Any html editing software for operation, modification and editing).
in:
(1) The html file contains: index.html is the home page, and other html is the second-level page;
(2) The css file contains: all css page styles, text scrolling, image zooming, etc.;
(3) The js file includes: js to achieve dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).
4. Website demo
5. Website code
HTML structure code
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Blog</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="page"> <div class="nav"> <a href="index.html" class="logo fl">Homepage</a> <ul class="fr"> <a href="index.html"><li>Home page</li></a> <a href="sw.html"><li>my prose</li></a> <a href="jn.html"><li>my skills</li></a> <a href="zp.html"><li>My creation</li></a> <a href="ms.html"><li>love food</li></a> <a href="ly.html"><li>message exchange</li></a> \t\t\t\t</ul> </div> <div class="mid"> <div class="banner"><img src="images/banner.jpg" alt=""></div> <div class="left fl"> <p class="title">About Me</p> <div class="jj"> <img src="images/tx.jpg" alt=""> <p><b>Name:</b>XXX</p> <p><b>Mobile phone:</b>132****6547</p> <p><b>Email:</b>[email protected]</p> <p><b>Hobbies:</b> music, anime, games, sports</p> </div> <p class="title">Welcome to login</p> <form action="" class="login" method="post"> <input type="text" placeholder="Please enter user name" value="" /> <input type="password" placeholder="Please enter the password" name="" /> <button type="submit">Login</button> </form> </div> <div class="right fl"> <p class="title">Introduction</p> <div class="wz"> <img src="images/t1.jpg" alt=""> <p>I have a cheerful, stable, energetic personality, and treat people with enthusiasm and sincerity; work conscientiously and responsibly, take the initiative, be able to bear hardships and stand hard work, be able to withstand pressure, and be brave in innovation; have strong organizational skills and teamwork spirit, and have strong adaptability Ability; strong discipline, active cooperation in work; strong will, with a strong spirit of selfless dedication. Be serious and responsible for work, be good at communication and coordination, have strong organizational skills and team spirit; be lively, cheerful, optimistic, motivated, caring and good at teaching; be self-motivated, diligent in learning, and constantly improve one's ability and overall quality. In the future work, I will work hard with abundant energy and the spirit of assiduous study, steadily improve my working ability, and develop simultaneously with the enterprise.</p> </div> </div> </div> <div class="foot">Copyright: XXX & amp;emsp; personal webpage</div> </div> </body> </html>
CSS style code
@charset "utf-8";
*{<!-- -->
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
li{<!-- -->
list-style: none;
}
a{<!-- -->
color: #000;
text-decoration: none;
}
.fl{<!-- -->
float: left;
}
.fr{<!-- -->
float: right;
}
.clear20{<!-- -->
clear: both;
margin-bottom: 20px;
}
body{<!-- -->
font-size: 12px;
color: #000;
background: url(../images/bg.jpg) repeat-x;
background-size: 50% 100%;
background-attachment: fixed;
}
.page{<!-- -->
width: 960px;
margin: 0 auto;
background-color: #FFF;
overflow: hidden;
}
.nav{<!-- -->
width: 100%;
background-color: #53a3b9;
overflow: hidden;
}
.logo{<!-- -->
display: block;
white-space: nowrap;
text-indent: 999em;
width: 213px;
height: 50px;
background: url(../images/logo.png) no-repeat;
background-size: cover;
overflow: hidden;
margin: 5px 8px;
}
.nav ul{<!-- -->
width: 720px;
overflow: hidden;
margin: 5px 10px 5px 0;
}
.nav ul li{<!-- -->
width: 120px;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #FFF;
float: left;
}
.nav ul li:hover{<!-- -->
background-color: #4996a5;
}
.mid{<!-- -->
width: 100%;
box-sizing: border-box;
padding: 10px;
overflow: hidden;
}
.banner{<!-- -->
width: 100%;
height: 400px;
overflow: hidden;
margin-bottom: 15px;
}
.banner img{<!-- -->
width: 100%;
height: 100%;
object-fit: cover;
}
.left{<!-- -->
width: 300px;
margin-right: 20px;
}
.right{<!-- -->
width: 620px;
}
p.title{<!-- -->
width: 100%;
line-height: 38px;
text-indent: 1em;
background-color: #53A3B9;
color: #FFF;
font-size: 18px;
margin-bottom: 20px;
}
.jj{<!-- -->
width: 260px;
margin: 0 auto 20px;
}
.jj img{<!-- -->
display: block;
width: 220px;
height: 220px;
box-sizing: border-box;
border-radius: 50%;
border: 3px solid #53A3B9;
margin: 0 auto 20px;
}
.jj p{<!-- -->
line-height: 26px;
margin-bottom: 5px;
}
.login{<!-- -->
width: 260px;
margin: 0 auto 20px;
}
.login input{<!-- -->
width: 100%;
height: 35px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #000;
padding: 8px;
margin-bottom: 15px;
}
.login button{<!-- -->
text-align: center;
width: 100%;
height: 35px;
box-sizing: border-box;
border-radius: 5px;
background-color: #53A3B9;
font-size: 14px;
color: #FFF;
cursor: pointer;
}
.login button:hover{<!-- -->
background-color: #4996A5;
}
.wz{<!-- -->
width: 100%;
padding: 15px;
box-sizing: border-box;
overflow: hidden;
}
.wz b{<!-- -->
display: block;
margin-top: 10px;
margin-bottom: 20px;
font-size: 16px;
font-weight: normal;
}
.wz p{<!-- -->
text-indent: 2em;
line-height: 35px;
margin-bottom: 10px;
}
.wz>img{<!-- -->
display: block;
margin: 10px auto;
}
.wz p>img{<!-- -->
display: inline-block;
margin: 10px;
}
.foot{<!-- -->
width: 100%;
background-color: #53a3b9;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #FFF;
}
.jn{<!-- -->
width: 100%;
height: 500px;
position: relative;
}
.jn span{<!-- -->
position: absolute;
text-align: center;
color: #FFF;
cursor: pointer;
transition: transform 0.6s;
border-radius: 50%;
}
.jn span:hover{<!-- -->
transform: scale(1.1);
}
.jn span:nth-of-type(1){<!-- -->
width: 120px;
line-height: 120px;
font-size: 18px;
background-color: rgba(246,229,141,0.9);
top: 280px;
left: 120px;
z-index: 1;
}
.jn span:nth-of-type(2){<!-- -->
width: 160px;
line-height: 160px;
font-size: 20px;
background-color: rgba(255,190,118,0.7);
top: 90px;
left: 240px;
z-index: 3;
}
.jn span:nth-of-type(3){<!-- -->
width: 130px;
line-height: 130px;
font-size: 20px;
background-color: rgba(255,121,121,0.8);
top: 110px;
left: 120px;
z-index: 2;
}
.jn span:nth-of-type(4){<!-- -->
width: 240px;
line-height: 240px;
font-size: 24px;
background-color: rgba(186,220,88,0.7);
top: 280px;
left: 280px;
z-index: 4;
}
.jn span:nth-of-type(5){<!-- -->
width: 120px;
line-height: 120px;
font-size: 16px;
background-color: rgba(185, 251, 244, 1.0);
top: 60px;
left: 420px;
z-index: 1;
}
.zp {<!-- -->
width: 100%;
overflow: hidden;
}
.zp img{<!-- -->
width: 180px;
height: 280px;
box-sizing: border-box;
border-radius: 5px;
border: 2px solid #6ad4ee;
margin: 10px;
cursor: pointer;
}
.ly span{<!-- -->
display: block;
text-align: right;
line-height: 35px;
font-size: 16px;
margin-bottom: 10px;
}
.ly label{<!-- -->
margin-left: 4px;
margin-right: 10px;
font-size: 16px;
}
.ly input[type=text]{<!-- -->
width: 280px;
height: 30px;
box-sizing: border-box;
padding: 6px;
border-radius: 4px;
border: 1px solid #000;
}
.ly textarea{<!-- -->
width: 280px;
height: 200px;
box-sizing: border-box;
padding: 6px;
border-radius: 4px;
border: 1px solid #000;
}
.ly button{<!-- -->
display: block;
width: 100px;
height: 42px;
text-align: center;
box-sizing: border-box;
border-radius: 4px;
background-color: #53A3B9;
margin: 30px auto;
font-size: 16px;
color: #FFF;
}
6. How to make learning no longer blind
Many beginners who have just started programming have learned basic grammar, but they don’t know the purpose of grammar, how to deepen the image, and how to improve themselves. Go to Niuke.com’s introductory training for programming beginners. This topic is an introductory programming level, suitable for beginners who have just learned grammar. The topics involve basic programming grammar, basic structure, etc. Each question has a practice mode and an exam mode. You can restore the exam mode for simulation, or you can use the practice mode Practice.
7. More dry goods
1. If my blog is helpful to you, if you like my blog content, Please "Like" "Comment" "Favorite" One click and three links!
2. 【?Follow me | Get more source code | High-quality articles】 Take you to learn various front-end plug-ins, 3D cool effects, and picture display , text effects, and templates for the whole site, HTML templates for college graduates, final homework templates, etc.! “There are a lot of front-end developers here, discuss front-end Node knowledge and learn from each other”!
3.
Questions related to the above content technology? Welcome to exchange and learn together?
