1. 👨🎓 website title
🐕 Pet web design , 🐼 Animal protection web page, 🐋 Whale and dolphin theme, 🐘 Elephant protection, and other website design and production.
2. ✍️ Website description
🏷️HTML pet web design, using DIV+CSS layout, there are multiple pages, neat layout, rich content, bright theme, the home page uses CSS layout to be richer, the colors are bright and vibrant, and the navigation and text fonts are set to different font sizes. The navigation area has a background image set. Subpages include text-only pages and pages with pictures and texts.
🏅 A set of high-quality 💯 web design should include (specifically according to individual requirements)
- The page is divided into four parts: header, menu navigation bar (preferably drop-down), middle content section, and footer.
- All pages are hyperlinked to each other, and can go to the third-level page, which consists of 5-10 pages.
- The unified layout of page styles and styles is displayed normally, 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 rotation.
- There are multimedia elements in the page, such as gif, video, music, the use of form technology.
- The page is refreshing, beautiful, generous, and different. .
- It must not only be able to present the content required by users, but 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 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;
📙Web page editing: The code of web works is simple, and you can use any HTML editing software (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ and other html editing software to run, modify, edit, etc.).
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).
4. 💠 Website Demo
5. ⚙️ Website code
🧱HTML structure code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tiger</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div class="head clearfix"> <b class="fl"><img src="images/logo.jpg"></b>
<nav class="fr"> <a href="index.html">Home</a> <a href="about.html">Tiger introduction</a> <a href="pic.html">tiger pictures</a> <a href="news.html">news</a> <a href="reg.html">register</a> <a href="login.html">Log in</a></nav>
</div>
<div class="main clearfix">
<!-- Swiper -->
<div class="banner"><img src="images/timg.jpg" width="100%"></div>
<div class="div2 bg000 ">
<div class="bar">
<h3>Online message</h3>
</div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>Name</label>
<input type="text" class="mui-input-clear">
</div>
<div class="mui-input-row">
<label>Telephone</label>
<input type="text" class="mui-input-clear">
</div>
<div class="mui-input-row">
<label>message</label>
<textarea rows="" cols=""></textarea>
</div>
<div class="mui-input-row">
<label></label>
<input type="submit" class="mui-input-clear" value="submit">
</div>
</form>
</div>
<div class="div4 bg000 ">
<div class="bar">
<h3>news</h3>
</div>
<div class="">
<ul>
<li><a href="info.html">Protect the fading forest king</a></li>
<li><a href="info.html">tiger attacking man,Why must be killed?Can't you close it??What the experts say makes sense</a></li>
<li><a href="info.html">Tiger bit my dog,Is killing it "justifiable defense"??</a></li>
<li><a href="info.html">Two-faced character of wild tiger,do you know?[Tiger King Battle 16]</a></li>
<li><a href="info.html">Why did the king of beasts fall here?Scientists use satellite positioning system,Keep tigers off the road</a></li>
<li><a href="info.html">How to calculate the economic account of protecting Siberian tigers?Is it worth it?</a></li>
<li><a href="info.html">Why protect tigers?What it means to protect tigers,Will there be tiger plagues again??</a></li>
<li><a href="info.html">swaggering down the road,How to survive a tiger?</a></li>
<li><a href="info.html">Why are there more than 1,000 giant pandas still protecting the Siberian tiger, which is on the verge of extinction and no one cares about it??</a></li>
<li><a href="info.html">Protect Siberian tigers, protect this forest 3.0</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="div7 bg000 clearfix">
<div class="bar">
<h3>tiger pictures</h3>
</div>
<div class="">
<ul id="jSearchHeroDiv" class="imgtextlist">
<li><img src="images/a1.jpg">
<p>tiger pictures</p>
</li>
<li><img src="images/a2.jpg">
<p>tiger pictures</p>
</li>
<li><img src="images/a3.jpg">
<p>tiger pictures</p>
</li>
<li><img src="images/a4.jpg">
<p>tiger pictures</p>
</li>
</ul>
</div>
</div>
</div>
<footer class="end">bottom of page</footer>
</body>
</html>
💒CSS style code
/* CSS Document */
a {
font-size: 14px;
color: #333;
text-decoration:none
}
a:hover {
color:#FF9933
}
body {
margin: 0 auto;
padding: 0;
background-color: #f5f5f5;
width: 1000px;
background-size: cover;
color: #333;
line-height: 30px
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
.head {
background: rgba(255, 255, 255, .8);
height: 104px;
overflow: hidden
}
.head a {
color: #3366CC;
background: #FFFFFF;
padding: 0 10px;
border-radius: 10px
}
h1,
h2,
h3 {
margin: 0;
padding: 0
}
.head a {
font-size: 19px;
color: #333;
margin: 35px 10px;
display: inline-block;
padding-left: 30px;
box-sizing: border-box;
background: url(../images/nav.png) no-repeat left;
background-size: 30px auto;
}
.head a:hover{ color:#FF9966}
.fl {
float: left
}
.fr {
float: right
}
.head .fl {
background: #fff;
}
.head .fl img {
width: 180px;
padding-top: 10px;
}
.bg000 {
background: rgba(255, 255, 255, .8)
}
.bar {
background:#FFCC33;
color: #000;
font-size:14px;
padding:10px
}
.w40 {
width: 40%;
}
.w60 {
width: 60%
}
#jSearchHeroDiv li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
text-align: center;
width: 200px;
margin: 15px;
}
#jSearchHeroDiv img {
width: 200px;
height: 140px
}
.div2 .fr div {
margin: 5px 5px;
height: 332px
}
.div2 {
float: left;
margin-top: 20px;
width: 480px;
}
.div4 {
float: right;
margin-top: 20px;
width: 500px;
}
.swiper-container img{
height: 500px;
}
.end {
text-align: center;
padding:10px 0;
background:#FFCC33;
margin-top:20px;
}
.con {
padding: 20px
}
#latest_guide_list li:hover {
}
.title {
color: #FF0033;
text-align: center;
padding: 20px 0;
border-bottom: #333 dashed 1px;
margin-bottom: 20px
}
.div1 img {
float: left
}
.div7 {
margin-top: 20px
}
.form{ float:left}
form {
margin: 0;
padding: 35px 0 0 50px;
width: 488px;
}
.fr{ float:right; }
.rs{float:right;margin:40px 40px 0 50px}
.rs a{ display:inline-block; width:100px; font-size:24px; height:100px; background:#FFCC33; color:#000; padding:40px}
form label {
display: block;
margin: 0 0 20px;
overflow: hidden;
padding: 0;
}
form label span {
color: #7d7c7c;
display: block;
font-size: 13px;
float: left;
height: 31px;
margin: 0;
padding: 5px 14px 0 0;
text-align: right;
text-transform: uppercase;
width: 74px;
}
form label .inp {
border: 1px solid #d6d6d6;
background: #fff;
color: #7d7c7c;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height: 34px;
line-height: 34px;
margin: 0;
padding: 0 5px;
width: 388px;
}
form label textarea {
border: 1px solid #d6d6d6;
background: #fff;
color: #7d7c7c;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height: 205px;
margin: 0;
overflow: auto;
padding: 5px;
width: 388px;
}
form #submit2 {
border: 0;
background:#FFCC33;
color:#000;
display: block;
height: 37px;
margin: 0 0 0 88px;
padding: 0;
width: 101px;
}
.div2 form {
margin: 0 auto;
padding: 0 ;
width: 437px;
}
.div2 form label{
margin: 0;
padding: 0;
}
.div2 form input{
width: 100%;
height: 30px;
}
.div2 textarea{
width: 100%;
height: 100px;
}
.div2{
padding-bottom: 35px;
}
6. 🥇 How to make learning no longer blind
21 years of programmers summarize 16 pieces of advice for programming rookies
- Don't blindly read too many books during the entry period, find a textbook recommended by experienced programmers on the Internet or around you, and study systematically first.
- Read more help documents, help documents are like a game's gameplay instructions, customs clearance cheats, don't be too confident when you should read them.
- Rookies are easily confused by words such as objects, properties, methods, etc.? That means you haven't mastered even the most basic knowledge.
- Don't ignore any problem that seems inconspicuous, and often summarize it to infer other things.
- You cannot develop a complete project without accumulating enough knowledge and experience.
- Talking about the latest technology is better than keeping outdated technology in mind.
- Live to old age and learn old age, only one trick and a half will not be able to break through the rivers and lakes.
- Read books that you can understand, and read books that you don't understand.
- Read the book a hundred times and see for yourself, don't expect to read it once to master it.
- Please put the examples in the tutorial into practice, even if there is a complete source code in the case.
- Extend the meaningful examples you see in the tutorials; and practically apply them to your own work.
- Don't miss any of the exercises in the tutorial - please do them all and take notes.
- The level is perfected and developed through continuous practice, and the difference between you and Daniel is only the accumulation of experience.
- Every time you learn a difficult point, try to share your experience with friends or online, so that others can understand it, which means you really master it.
- Get into the habit of saving source files, these are your accumulated knowledge.
- Don't open your mouth to ask a question, learn to find the answer by yourself. For example, there are many programming-related materials on google, Baidu and w3cschool. You can find your answer just by entering a keyword.
7. 🎁More dry goods
1. If my blog is helpful to you, if you like the content of my blog, please "👍 Like" "✍️ Comment" "💙 Favorites" with one click!
2. 💗 [ 👇🏻👇🏻👇🏻 Focus on me| 💬 Get More Sources | Quality Articles] Take you to learn about various front-end plug-ins, 3D cool effects, picture display, text effects, as well as site-wide templates, college graduate HTML templates, final big job templates, and so on! "There are many front-end developers here who are exploring front-end Node knowledge and learning from each other."
3.
!
💂[How to get]
gitee code cloud source code warehouse - welcome to Star: https://gitee.com/zhanyuqiu2022/my-app