🎉 Brilliant Column Recommendation 💭 Get in touch at the end of the article
✍️ Author profile: A technology blogger who loves turning logical thinking into code
💂 Author Home Page: [Home page- 🚀 Get more quality source)
🎓 web Front End End Job: [ 📚 Finished Project Quality Actual Warfare Cases (1000 sets)
🧡 Interesting ways for programmers to tell: [ 💌 HTML Valentine's Day Web Page Creation (110 sets)
🌎 Stunning Echarts large screen visualization source: [ 🔰 echarts large screen display large data platform visualization (150 sets)
🎁 Free and practical WEB front-end learning guide: [ 📂 web Front End Zero Foundation to Advanced Learning Video Tutorial 120G Dry Goods Sharing)
🥇 About the author: 💬 Successful R&D engineer, technical group leader, teaching director; Has won the CSDN Top 10 Blog Stars twice in 2016 and 2020. Ten years of cold ice, cold and hot blood; Over the years, through changes, people have changed. However, the exploration and pursuit of technology never ceases. 💪 Persist in originality, share with others, keep going!
I. 👨🎓 Site Title
🏀 Campus basketball web page design, ⚽ Football, 🤽 Sports swimming, 🏓 Tennis, 🎾 Design and production of tennis and other websites.
2. ✍️ Site Description
🏷️ The static HTML web page design work of College Students'campus sports is made with DIV CSS layout, which includes: campus sports, sports skills, sports rules, technical rules, classical actions. The main content area of the page is 1200PX wide. The page as a whole uses CSS to set the background picture of the page. Pages are beautifully designed with multiple layout layouts and students'homework level.
🏅 A set of high quality 💯 Web design should include (depending on individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably drop-down), the middle content section, and the footer.
- All pages are hyperlinked to each other, reaching three-level pages, consisting of 5-10 pages.
- Page Style Unified Layout displays normal, not messy, using Div+Css technology.
- The menu is beautiful and striking, and the secondary menu can pop up and jump normally.
- To have JS effects, such as timer switching and manual switching of picture rotation.
- Pages contain multimedia elements such as gif, video, music, and the use of form technology.
- The page is refreshing, beautiful and generous.
- Not only should the content required by users be presented, but also the requirements of good layout, beautiful interface, elegant color matching and various forms of expression should be met.
3. 📚 Website Introduction
📔 Site layout: The plan uses the current mainstream, compatible with major mainstream browsers, stable display floating page layout structure.
📓 Programming aspects of the website: plan to use the latest web programming language HTML5+CSS3+JS program language to complete the functional design of the website. And make sure that the website code is compatible with all the major browsers on the market so that you can see the effect of the website immediately after opening it.
📘 Web site material: plan to collect good-looking picture material from various platforms, select pictures suitable for web page style, and then use PS to make pictures suitable for web page size.
📒 Web site files: Web site system file types include: html web page structure files, css web page style files, js web page special effects files, images web page picture files;
📙 Web page editing: Web page work code is simple, you can use any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad+, etc.) to run and modify editing operations.
Where:
(1) 📜 The HTML file contains: where index.html is the first page and the other html is the second-level page;
(2) 📑 The css file contains: css full page style, text scrolling, picture enlargement, etc.
(3) 📄 The JS file contains: JS for dynamic round-robin effects, form submission, click events, etc. (js code is used in individual web pages).
IV. 🌐 Site Demo
V. ⚙️ Site 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>Ball-game star C Ro</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-----Head Start------->
<div class="top">
<a href="index.html"><img style="float:left" src="images/logo.jpg" /></a>
</div>
<!---nav start---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">home page</a></li>
<li><a href="about.html">C Introduction to Luo</a></li>
<li><a href="jingdian.html">C Roche album</a></li>
<li><a href="minsu.html">Career</a></li>
<li><a href="techan.html">C Luo Xin</a></li>
<li><a href="liuyan.html">Guest Message</a></li>
</ul>
</div>
</div>
<!---nav End---->
<!-----banner------->
<div class="ban">
<img src="images/banner3.jpg" width="1000" height="335" border="0" />
</div>
<!-----End of Head------->
<!-----main start------->
<div class="main">
<div class="box1">
<div class="shang-left">
<div class="gk-title"><a href="about.html"><h1>C Introduction to Luo</h1></a></div>
<div class="gk">
<img src="images/gktu.jpg" />
<p> cristiano·Ronaldo for short C Roche, born in Fonshal, Madeira, Portugal on February 5, 1985, is a professional football player who can serve as a winger and also as a center. He is currently a member of the Italian Juventus Football Club and captain of the Portuguese national team. C Loudie is very fast, good at breaking through and shooting, has a strong physique, and is very technical. On January 4, 2019, he won the Best Player Award of the Global Football Award. June 9, with Team 1-0 Win the first European Union championship against the Netherlands and win the final golden boot.</p>
</div>
</div>
<div class="xz">
<a href="techan.html"><h1>C Luo Xin<span><i> More>></i></span></h1></a>
<a href="tc01.html"><img src="images/tc01.jpg" /></a>
<a href="tc02.html"><img src="images/tc02.jpg" /></a>
<a href="#"><img src="images/tc03.jpg" /></a>
<a href="#"><img src="images/tc04.jpg" /></a>
</div>
<div class="shang-right">
<div class="count-title"><a href="minsu.html"><h1>Career</h1></a></div>
<div class="count">
<br />
<p> C Roche was born in Lisbon, a famous Portuguese team. 2003-04 Manchester United officially announced a 12.24 million transfer fee this year C Ronald, replace Beckham who moved to Real Madrid"7"New owner of No. 1 jersey.</p>
<p> After joining Manchester United, C Luo played the main role of the right wing, but from time to time participated in the attack on the left. He impressed the fans with his gorgeous footwork and excellent dribbling ability.</p>
<p> 2009 On June 26, 2006, Kristiano was officially confirmed by Real Madrid·Ronaldo will join Real Madrid on July 1 with a transfer fee of 80 million and an annual salary of 12 million.</p>
<p> 2018 On August 19, 2001, in Juventus'match against Chievo, C Rollo's Serie A debut.</p>
</div>
</div>
</div>
<div class="meishi">
<div class="yy-title"><a href="jingdian.html"><h1>C Luo Feng-mei</h1></a></div>
<div class="ms">
<ul>
<li><img src="images/jd1.jpg" /><p>Fig.1</p></li>
<li><img src="images/jd2.jpg" /><p>Figure 2</p></li>
<li><img src="images/jd3.jpg" /><p>Figure 3</p></li>
<li><img src="images/jd4.jpg" /><p>Figure IV</p></li>
<li><img src="images/jd5.jpg" /><p>Fig.5</p></li>
</ul>
</div>
</div>
<!-----main End------->
<!-----bottom start------->
<div class="bottom">
<p>2020-2021@ Copyright All Stars C Ro </p>
</div>
<!-----bottom End------->
</body>
</html>
💒 CSS Style Code
body {
margin: 0 auto;
font-size: 12px;
font-family: "Song Style",arial;
line-height: 22px;
}
div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
height: auto;
margin: 0;
padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
img {
border: 0;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
a:link {
color: #333;
}
a:hover {
color: #629705;
text-decoration: none;
overflow: hidden;
}
.top {
height: 200px;
width: 1000px;
margin: 0 auto;
}
.daohang {
width: 1000px;
height: 47px;
background: url(../images/nav-bj.jpg);
margin: 0 auto;
}
#nav {
width: 1000px;
height: 47px;
line-height: 47px;
font-family: "Song Style";
font-weight: bolder;
font-size: 14px;
margin: 0 auto;
}
#nav ul {
margin: 0 auto;
}
#nav li {
float: left;
width: 165px;
text-align: center;
color: #FFF;
}
#nav a {
width: 165px;
height: 47px;
color: #FFF;
display: block;
font-family: "Song Style";
font-size: 14px;
font-weight: bold;
}
#nav a:hover {
color: #FFF;
text-decoration: none;
overflow: hidden;
background: #224200;
}
.ban {
height: 335px;
width: 1000px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 0 auto;
margin-top: 10px;
}
.box1 {
width: 1000px;
height: 311px;
margin: 0 auto;
}
.shang-left {
float: left;
}
.gk-title {
width: 308px;
height: 40px;
background: #3e8400;
}
.gk-title h1 {
height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "Bold";
}
.gk {
width: 296px;
height: 262px;
border-left: #8c8c8c 1px solid;
border-right: #8c8c8c 1px solid;
border-bottom: #8c8c8c 1px solid;
background: #FFF;
padding: 0px 5px;
padding-top: 10px;
}
.gk span {
color: #F00;
}
.gk img {
margin-right: 10px;
float: left;
}
.xz {
width: 347px;
height: 311px;
padding-left: 5px;
margin: 0px 15px;
border: #8c8c8c 1px solid;
background: #FFF;
float: left;
overflow: hidden;
}
.xz h1 {
height: 35px;
line-height: 35px;
font-size: 14px;
color: #333;
font-family: "Bold";
}
.xz span {
font-size: 12px;
color: #333;
color: #408602;
font-family: "Courier New", Courier, monospace
}
.xz img {
width: 160px;
height: 120px;
margin: 5px;
float: left;
}
.shang-right {
float: left;
}
.count-title {
width: 308px;
height: 40px;
background: #3e8400;
}
.count-title h1 {
height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "Bold";
}
.count {
width: 286px;
height: 272px;
border-left: #8c8c8c 1px solid;
border-right: #8c8c8c 1px solid;
border-bottom: #8c8c8c 1px solid;
background: #FFF;
padding: 0px 10px;
}
.count p {
line-height: 20px;
font-size: 12px;
}
.yy-title {
width: 1000px;
height: 40px;
background: #3e8400;
}
.ncontu ul {
}
.ncontu ul li {
width: 250px;
display: block;
float: left;
height: 220px;
overflow: hidden;
margin-bottom: 15px;
}
.danye {
color: #666;
font-size: 14px;
line-height: 25px;
}
.danye b {
font-size: 18px;
display: block;
text-align: center;
}
.danye img {
margin: 0 auto;
display: block;
}
.news {
width: 100%;
}
.news ul li {
line-height: 30px;
height: 30px;
background: url(../images/fenge.jpg) bottom repeat-x;
color: #3d2915;
}
.news ul li a {
float: left;
display: block;
line-height: 30px;
height: 30px;
background: url(../images/lvdian.jpg) left center no-repeat;
color: #3d2915;
padding-left: 20px;
}
.news ul li a:hover {
color: #000;
}
.news ul li span {
float: right;
color: #666;
line-height: 30px;
}
.biaoti {
color: #3d2915;
font-weight: bold;
font-size: 16px;
line-height: 40px;
background: url(../images/fenge.jpg) bottom repeat-x;
text-align: center;
margin-bottom: 10px;
_margin-bottom: 10px;
}
.inpt {
border: 1px #bbb solid;
width: 550px;
height: 20px;
}
.tare {
border: 1px #bbb solid;
width: 550px;
height: 200px;
}
.btn {
width: 60px;
height: 25px;
border: 1px #bbb solid;
background: #fff;
}
6. 🥇 How to Stop Learning Blindly
Many beginners learn basic grammar, but they do not know the purpose of grammar, how to deepen the image, how to improve themselves. At this time, it is very important to brush some questions independently every day (absolutely refined). You can go to the beginning training of programming on Niukee. This topic is an introductory level of programming, suitable for small white exercises just finished grammar. The topic involves basic grammar of programming, basic structure, etc. Each question has a practice mode and examination mode, which can restore the examination mode for simulation, and can also be practiced through practice mode.
7. 🎁 More dry goods
1. If my blog is helpful to you and if you like my blog content, please " 👍 Zan"" ✍️ Comments"" 💙 Collection "One button, three links!"
2. 💗 [ 👇🏻👇🏻👇🏻 Focus on me| 💬 Get More Sources | Quality Articles] Take you to learn a variety of front-end plug-ins, 3D cool effects, picture display, text effects, and site-wide templates, graduate HTML templates, end-of-term 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.
