1. 👨🎓 website title
💗 Design and production of web pages for charity, caring for the elderly, campus safety for public welfare, anti-criminal for public welfare, and other websites.
2. ✍️ Website description
🏷️HTML my class 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 second and third level pages, which are composed of multiple 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.
- Optional JS special effects, such as timed 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 not the same. .
- 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>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="main" >
<div class="content12">
<div class="daohang">
<ul>
<li class="active"><a href="index.html">front page</a>
</li>
<li ><a href="xingdongjieshi.html">Action explanation</a></li>
<li ><a href="jianglibanfa.html">Incentives</a></li>
<li ><a href="dianxinganli.html">Typical Case</a></li>
<li ><a href="gongzuodongtai.html">Work dynamics</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content12">
<div class="guanggaotupian">
<div class="img">
<img src="images/1.jpg"></div>
</div>
</div>
<div class="clear"></div>
<div class="content4">
<div class="taitou">
<div class="title">
<div class="stitle">Typical Case</div> <a href="#" class="more"></a>
</div>
</div>
<div class="dxal">
<ul>
<li>
<div class="desc">
2018 On May 28, 2019, the Intermediate People's Court of Wuhan City, Hubei Province publicly pronounced the second-instance public verdict in the case of Liu Yang and other 16 people organizing and leading a triad organization, and Xie Jing and other five people's forced transaction case.</div>
<div class="img"><img src="images/2.jpg"></div>
</li>
<li>
<div class="desc">
Shijiazhuang police destroyed Li Mouhua's gang-related organization in Zanhuang County. From 2007 to 2013, Li Mouhua, a local villager in Beiqinghe Village, Qinghe Township, along with his wife Wang Mou, Qin Mouliang and others, grabbed the "first pot of gold" by participating in or independently opening gambling games and lending usury.</div>
<div class="img"><img src="images/3.jpg"></div>
</li>
</ul>
</div>
</div>
<div class="content8">
<div class="taitou">
<div class="title">
<div class="stitle">Incentives</div> <a href="#" class="more"></a>
</div>
</div>
<div class="jlbf">
<ul>
<li>
<div class="img"><img src="images/4.jpg"></div>
<div class="desc">
2018 On September 16, 2009, I learned from the Hubei Provincial Public Security Department that the "Guiding Opinions of the Hubei Provincial Public Security Department on Rewards for Reporting Clues Involving Gangs and Evils" has been officially released.</div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
<div class="desc">
2019 On the morning of April 12, 2018, the Hangzhou Public Security Bureau held a press conference on the special struggle against gangsters and evil, reporting the practices and achievements of the special struggle against gangsters and evil in Hangzhou.</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content12">
<div class="taitou">
<div class="title">
<div class="stitle">Action explanation</div> <a href="#" class="more"></a>
</div>
</div>
<div class="xdjs">
<div class="desc">
<br><br>
Sweeping black and evil has been translated as gang crackdown，crush gangs，crackdown on the triad gangs，cracking down on evil forces，war on triads and other gangs etc., where evil forces means evil, war Means war, which may lead to misunderstanding or disgust.</div>
<div class="list">
<img src="images/5.jpg" class="simg">
<img src="images/2.jpg" class="simg">
</div>
<div class="clear"></div>
<div class="desc">
</div>
<div class="clear"></div>
<div class="img">
<img src="images/6.jpg">
</div>
</div>
</div>
<div class="clear"></div>
<div class="content12">
<div class="dibu">
<div class="desc">
Eliminate evil
</div>
</div>
</div>
<div class="clear"></div></div></body></html>
💒CSS style code
@charset "utf-8";
*{margin:0;padding:0;}
body{margin:0 auto}
.clear{ clear:both;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
li{list-style-type:none;}
img{width:auto;max-width:100%;}
.main{width:1200px;margin:0 auto;overflow:visible;}
.content12{width:1200px;margin:0 auto;}
.daohang ul{
width:1200px;background:#228B22;float:left;
}
.daohang ul li{float:left;
width:100px;padding:10px 0px; text-align:center;height:40px;line-height:40px;color:#ffffff;position: relative; }
.daohang ul li a{
color:#fff;}
.daohang li:hover a{
color:#fff;}
.daohang ul li.active{
}
.guanggaotupian
{
text-align:center;
}
.guanggaotupian img
{
width:1200px;
}
.content4{width:400px;float:left;}
.taitou .title{
border-bottom-color:#228B22;border-bottom-style:solid;border-bottom-width:1px;
overflow:hidden
}
.shuomingneirong .title{
margin:10px 0px;
padding:15px;
border-radius:15px;
text-align:center;
font-size:20px;
font-weight:bold;
}
.shuomingneirong .desc{
}
.shuomingneirong .img{
text-align:center;
}
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 my blog content, please "👍 Like" "✍️ Comment" "💙 Favorites" with one click!
two 💗 [ 👇🏻👇🏻👇🏻 Follow me| 💬 Get more source code | quality articles] take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, as well as the whole station template, college students' Graduation HTML template, final homework template, and so on! "There are many front-end developers here to discuss front-end Node knowledge and learn from each other!"!
3.
!
💂[How to get]
gitee code cloud source code warehouse - welcome to Star: https://gitee.com/zhanyuqiu2022/my-app