One 、 Mission requirements

Task a ： Build a static or dynamic website . Choose from the following requirements A or B, Requirements are as follows ：
A. Static website
Adopt pure CSS Or whatever you like CSS The frame is like Bootstrap、MDB、Tailwind Wait to build a theme of your choice and no less than 5 A page （Web Page） Website
B. Dynamic website
Use any front-end framework such as Angular Wait for an application （ Like a heroic journey 、 Agency matters 、 Library management, etc ） Development of , Need to have CRUD That is, the function of adding, deleting, modifying and checking has a certain style
Whether you choose static or dynamic websites , The website needs to be deployed to your favorite website hosting server, such as Gitpage etc.
Select task 1 , Adopt pure CSS frame

Two 、 Page effect display

• The main page

• Page one

• Page 2

• Page three

• Feedback page
  

3、 ... and 、 design process

1 . The main page

On the main page, I set a logo picture , On every other page , Click here logo Can jump to the main page

   <div class="side_header">
          <div class="side_header_logo">
            <a href="index.html">
            <img src="image/logo.jpg" width="150px" height="100px" alt=" Click to return to the home page "/>

At the top of the page , There are two hyperlinks , Click to jump to the page

  <span class="sep">|</span>
            <a href= "http://www.hnta.cn/"><ea>《 Development and application of communication software 》 Course completion report </ea></a>

2. Page one

Page one is mainly a box , There are also 4 Boxes , There are page themes , Click any one of them to switch

   <div class="box">
    	<div class="box1"> Jin Muyan </div>
    	<div class="box2"><a href="history-2.html" target="_self"> dior </a> </div>
    	<div class="box3"><a href="history-3.html" target="_self"> Payne </a></div>
    	<div class="box4"><a href="history-4.html" target="_self"> Allen </a></div>

3. Page 2

Page 2 is similar , But compared with page one , Used more CSS Definition

4. Page three

Page 3 is mainly the stacking of words and pictures

 <div class="normal_box">
		<img src="../image/eat/ Morant .jpeg" class="pic">
		<p class="font">[Ja Morant]&nbsp;&nbsp; Jia · Morant is a point guard with strong physical quality and full of creativity , His speed 、 Explosive power and speed change ability are excellent , This gives him enough ability to tear the opponent's defense , Create good offensive opportunities for yourself and your teammates . Excellent physical fitness gives Morant a certain advantage in defense , He can bite the attacker's footsteps , Cleverly send out steals and covers . But Morant's enthusiasm in defense is not high , He is not an aggressive defender , Just finishing my defensive work .</p>

5. Feedback page

The feedback page uses text、radio、check etc. type It forms a system that allows users to input 、 Selected page , also , Finally, there is one submit Submit button .

Four 、 Problems and solutions

• Question 1 ： The size cannot exceed 10M, The video cannot be directly inserted into the generated URL
  In the original page , There is a video inserted , But when trusteeship , The video size exceeds 10M Can't upload , As a result, I will delete the inserted video , Change the code to insert pictures . Now I don't know it can't be solved （ Compressing video will result in a significant reduction in sharpness ）

• Question two ： For the problem of page layout , If the picture setting is too large, it cannot be displayed
  When the picture is set with pixels px When it is too large , It is not displayed on the page , This problem has never been solved , As a result, I can only replace it with a small size picture

• Question 3 ： The following image in the code cannot be passed during hosting URL The way to show success
  resolvent ： Download the original picture , And change the image path in the code

5、 ... and 、 summary

After this course , First try to design a complete web page , Combine what you have learned CSS and HTML Design , Because I choose the direct design of pure CSS structure , There is no choice MDB Or other templates , So there are many problems in the design , And the layout of the page is also surprisingly ugly . For example, in CSS Color selection in 、 Representation of dimensions , It will affect the layout of your whole page , You must be familiar with these grammars , In order to make your page layout beautiful enough . In fact, it is the placement between text and pictures , It will also affect the user's appearance . To make a long story short , From the web design of this course , I finally realized my many shortcomings , But it's also cool to design your own web page through your own learning achievements , Maybe it's not beautiful enough now , But I believe in continuous polishing and Optimization in the future , I'm sure I can design a decent web page .