The website is divided into front-end and back-end. The front-end mainly displays the back-end information to users. All the content you see online is displayed at the front end.
If you want to make a slightly more beautiful web page, you have to know some HTML, CSS and JS. Once upon a time, I spent a lot of time adjusting the color of the website and making various decorations.
Try a variety of HTML tags and CSS style attributes, and do a lot of cool effects.
In retrospect, I still wasted a lot of unnecessary time, because I just wanted to show the content on the web page, but I fell into a lot of details.
If you, like me, just want to use the web page to display an information, there is no need to spend a lot of time learning the front-end knowledge. As long as you understand the principle and function of HTML, CSS and JS, you can directly go to the target;
Make two small demo s and basically know what's going on. Check the manual while using others, because apart from JS, HTML and CSS in the front end are some factual knowledge and have no logic.
In the past two days, I instructed a classmate to build a website with django. I probably talked to him before the web page and made several small demo s. Basically, even if I understand it, at least the general web page source code can be understood, or I can understand it by looking up the manual.
(secretly tell you that the above web page demo code has been shared before.)
But before, it was realized by handwritten all the native code, which was still troublesome. Now, it is not necessary to write all the websites. After all, we have understood the principle. Since python has many libraries that can be used, the front-end web pages can also use the libraries. Making web pages is like building blocks. You can find code segments and splice them together.
For example, the following two pages will be completed in more than ten minutes.
I use the bootstrap front-end framework, which provides various components. I just need to find the components, copy the code and change the color.
For example, I found a menu navigation bar in which I thought it was good. I directly copied the code and put it in my web page, so as to make a navigation bar.
My article list, I want the picture on the left and the text on the right,
Find the corresponding code and copy it.
It's just like building blocks. It's very fast. The core time is spent on the logic functions of the back end. The front end builds a framework first, and the color will be adjusted slowly after seeing the good ones.
My web code is basically a reference (plagiarism), very fragrant. Those interested can see for themselves: https://v4.bootcss.com/docs/getting-started/introduction/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="fontawesome/css/all.css"> <script src="jquery/jquery-3.6.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <style> /* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; } </style> </head> <body> <!-- Menu bar navigation --> <nav style="padding:0px 50px"> <a href="#"> <img src="images/logo.jpg" alt="logo" style="width:40px;"> </a> <button type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span></span> </button> <div id="collapsibleNavbar"> <ul> <li> <a href="#"> < I class =" Fas FA home "> < / I > Home Page</a> </li> <li> <a href="#"> < I class =" FAS, FA weather ALT "> < / I > blog</a> </li> <li> <a href="#"> < I class =" Fas FA book "> < / I > tutorial</a> </li> <li> <a href="#"> < I class =" Fas FA anchor "> < / I > resources</a> </li> <li> <a href="#"> < I class =" Fas FA user circle "> < / I > about</a> </li> </ul> <form> <input type="search" placeholder="Search" aria-label="Search"> <button type="submit">Search</button> </form> </div> </nav> <!-- Article list --> <div style="margin:20px 0 100px 0"> <div> <div> <a href="#">newest</a>/<a href="#"Class =" "> hottest</a> </div> </div> <div> <div> <img src="images/logo.jpg" alt="John Doe" style="width:80px;"> <div> <h4>First blog</h4> <p>Hello World，Create an article.</p> <a href="#"Class =" BTN BTN primary text right "> Review memorials > ></a> </div> </div> </div> <div> <div> <img src="images/logo.jpg" alt="John Doe" style="width:80px;"> <div> <h4>First blog</h4> <p>Hello World，Create an article.</p> <a href="#"Class =" BTN BTN primary text right "> Review memorials > ></a> </div> </div> </div> <div> <div> <img src="images/logo.jpg" alt="John Doe" style="width:80px;"> <div> <h4>First blog</h4> <p>Hello World，Create an article.</p> <a href="#"Class =" BTN BTN primary text right "> Review memorials > ></a> </div> </div> </div> <div> <div> <img src="images/logo.jpg" alt="John Doe" style="width:80px;"> <div> <h4>First blog</h4> <p>Hello World，Create an article.</p> <a href="#"Class =" BTN BTN primary text right "> Review memorials > ></a> </div> </div> </div> <div> <div> <img src="images/logo.jpg" alt="John Doe" style="width:80px;"> <div> <h4>First blog</h4> <p>Hello World，Create an article.</p> <a href="#"Class =" BTN BTN primary text right "> Review memorials > ></a> </div> </div> </div> <div> <div> <img src="images/logo.jpg" alt="John Doe" style="width:80px;"> <div> <h4>First blog</h4> <p>Hello World，Create an article.</p> <a href="#"Class =" BTN BTN primary text right "> Review memorials > ></a> </div> </div> </div> </div> <!-- Bottom of page--> <footer> <div > <p>Copyright © Leaf 2021</p> </div> </footer> </body> </html>