Website design source code production material finished product (landscape 6 pages)___embedded

⛵ Source code acquisition Contact at the end of the article ✈

Web front-end development technology
Description Web design theme, DIV+CSS layout production, HTML+CSS web design final course assignment | Tourist attractions introduction | Tourist scenic spots | Hometown introduction | Design and production of other websites |

  1. HTML: structure

  2. CSS: styles
    In terms of operation, html5 and css3 are used,
    Basic knowledge such as div+css structure, form, hyperlink, floating, absolute positioning, relative positioning, font style, and reference video are adopted

  3. JavaScript: do interactive behavior with the user

Front-end learning route

(1) html file: where index.html is the home page, and other html is the second-level page;
(2) css file: all css page styles, text scrolling, image zooming, etc.;
(3) js file: js realizes dynamic carousel effects, form submission, click events, etc. (js code is used in web pages)

Basic structure of web page

(1) Homepage: The first page you see when you enter the webpage (LOGO, company name, navigation, banner, news, related information, bottom information, and banner are generally 5.
(2) Secondary page: the page after clicking from the home page is called the secondary page
(3) Third-level page: the page clicked from the second-level page

Web page html: A web page is the basic element of a website and a platform for carrying various website applications. In layman's terms, a website is made up of web pages
Homepage website: The homepage is the entry page of a website, so it is often edited to make it easy to understand. Most of the file names used as the homepage of the website are index plus extension
Navigation menu: refers to the area at the top or side of the page, also known as the navigation bar, which acts as a link to various pages in the site or software.
Web page footer: is the area at the bottom of each page in a web page. Often used to display additional information. Such as author, record number, etc.

web demo

HTML structure code

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
            margin: 0;
            padding: 0;
            width: 1200px;
            margin: auto;
            text-align: center;
            height: 60px;
            line-height: 60px;
            width: 1200px;
            margin: 40px auto;
            margin-bottom: 30px;
            width: 1200px;
            margin: auto;
            padding: 40px 0;
            text-align: center;
        .footer p{
            margin: 12px 0;
    <div class="nav">
        <a style="padding: 20px;color: #000;" href="">Homepage</a>
        <a style="padding: 20px;color: #000;" href="list.html">Scenic spots</a>
        <a style="padding: 20px;color: #000;" href="gl.html">Strategy</a>
        <a style="padding: 20px;color: #000;" href="know.html">Know the scenic spot</a>
        <a style="padding: 20px;color: #000;" href="form.html">Cognitive Survey</a>
        <a style="padding: 20px;color: #000;" href="table.html">My</a>
    <img style="margin-bottom: 40px;" width="100%" height="490" src="picture/ban2.jpg" alt="">
    <div class="ban">
                <td width="400">
                    <img width="380" height="600" src="picture/i.jpg" alt="">
                    <h2>beauty of nature</h2>
                <td width="400">
                    <img width="380" height="600" src="picture/i3.jpg" alt="">
                    <h2>autumn poetry</h2>
                <td width="400">
                    <img width="380" height="600" src="picture/i5.jpg" alt="">
                    <h2>Greece—Facing the sea, spring is warm and flowers are blooming</h2>
    <div class="ban">
        <h2>Landscape picture appreciation</h2>
        <img width="1200px" height="400" src="picture/ban3.jpg" alt="">
        <img width="1200px" height="400" src="picture/ban4.jpg" alt="">
        <img width="1200px" height="400" src="picture/ban5.jpg" alt="">
        <img width="1200px" height="400" src="picture/ban6.jpg" alt="">
        <img width="1200px" height="400" src="picture/ban8.jpg" alt="">

    <div class="footer">
        <p>landscape network &nbsp;&nbsp;tour&nbsp;&nbsp;contact us&nbsp;&nbsp;about us&nbsp;&nbsp;Recruitment&nbsp;&nbsp;Sitemap&nbsp;&nbsp;disclaimer</p>
        <p>Copyright attribution</p>

The more you learn, the more confused you become

It's normal to feel this way, because you haven't really been in the company, and you don't know how much you need to learn to be competent for the work assigned to you in the company. I can see from your statement that your foundation should still be very solid. There is definitely no problem following the full set of video tutorials on the Internet.

When you actually enter the company in the future and find that the difficulty and amount of work are only about 20% of your study period, you may sigh: So the work is nothing more than that.

This is normal, because most companies recruit you to work and write business, not to let you be a newcomer to develop the company structure. They are all ready-made things, what you have to do is to add bricks and tiles under the guidance of others and direct them hand in hand. At that time, I am afraid you will exclaim: This is it?

So just relax and enjoy college

learn more

Follow me | Like blog post | Take you to increase knowledge every day

Tags: html Front-end Javascript css

Posted by Marchingknight11 on Mon, 12 Dec 2022 12:48:30 +1030