HTML+CSS做一个漂亮的网页

刺骨的言语ヽ痛彻心扉 2022-05-20 23:49 162阅读 0赞

![70][]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>test9-11</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="test9-11.css" />
    </head>
    
    <body>
        <header>
            <div>
                <div id="title">Hello World</div>
                <div id="titlebottom">
                    China is speeding up strategic plan, standards, traffic rules, laws and regulations on accident-incurred liabilities for
                    its smart car industry, Economic Information Daily reported Thursday.
                </div>
                <div id="login">
                    <div>CREATE YOUR ACCOUNT</div>
                    <div>IT IS ABSOLUTELY FREE</div>
                    <div>
                        <input type="text" placeholder="denis@getcraftwork.com">
                        <input type="password" placeholder="Create your password">
                        <input type="submit" value="SIGN UP">
                    </div>
                </div>
            </div>
        </header>
    
        <section>
            <div id="landingpage">
                <div>BOATLOADS OF AWESOME</div>
                <div>Ready-made, customizable, HTML
                    <br>landing page sections</div>
                <div id="moblie">
                    <div>
                        <img src="image9-11/image_0001s_0001s_0000s_0000_Iphone-Icon.png" />
                        <h1>Mobile First</h1>
                        <p>This scenario might have seemed more likely in the universe imagined by Aristotle and Ptolemy.</p>
                    </div>
                    <div>
                        <img src="image9-11/image_0001s_0001s_0002s_0001_Check-Icon.png" />
                        <h1>Accessibility</h1>
                        <p>Today they estimate as many as 500 billion billion sunlike stars, with 100 billion billion Earthlike
                            planets.
                        </p>
                    </div>
                    <div>
                        <img src="image9-11/image_0001s_0001s_0001s_0000_Pencil-Icon.png" />
                        <h1>Fluid Typography</h1>
                        <p>The more we learn about the universe, the more absurd it would seem if all but one of those bodies were
                            bereft of life.</p>
                    </div>
                    <div>
                        <img src="image9-11/image_0001s_0001s_0003s_0000_Settings-Icon.png" />
                        <h1>Customization</h1>
                        <p>Maybe humanity is still so basic and primitive that advanced civilizations don’t think we’re worth talking
                            to.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    
        <section id="third">
            <div id="supportive">
                <div>Supportive policies for China's smart car</div>
                <div>
                    Fermi wasn’t the first person to ask a variant of this question about alien intelligence. But he owns it. The query is known
                    around the world as the Fermi paradox. It’s typically summarized like this: If the universe is unfathomably
                    large, the probability of intelligent alien life seems almost certain.
                </div>
                <button>CHECK OUR FEATURES</button>
                <button>TRY PRODUCT FOR FREE</button>
            </div>
            <div id="picture">
                <img src="image9-11/image_0002s_0002s_0002_Screen.png" />
            </div>
            <div style="clear: both;"></div>
        </section>
    
        <section>
            <div id="products">
                <div>Try Our Awesome Products</div>
                <div id="prointroduction">
                    <div>
                        <img src="image9-11/image_0003s_0001s_0000s_0000_Singleton.png" />
                        <p>One of the most important steps in maintaining your personal brand is to stay consistent. Anytime you
                            do anything online, you should consider how it contributes to your personal brand, said Matt Brady,
                            founder and former CEO of career consultancy Path2Hired. </p>
                    </div>
                    <div>
                        <img src="image9-11/image_0003s_0001s_0001s_0000_Hero.png" />
                        <p>This means that every time you write an article, post an update on social media or interact with your
                            audience, you should think about the overall message you're trying to convey. Keeping your brand
                            consistent helps you build a strong brand that others will begin to recognize, Brady said.</p>
                    </div>
                    <div>
                        <img src="image9-11/image_0003s_0001s_0002s_0000_Portland.png" />
                        <p>This means that you should identify whether your personal brand will include facets of your personal
                            life — which can further humanize your brand voice — or if you should keep your personal and professional
                            worlds separate, Jones said.</p>
                    </div>
                </div>
            </div>
        </section>
    
        <section>
            <div id="learn">
                <div>
                    <img src="image9-11/image_0004s_0000s_0000s_0000_图层-3.png" />
                    <div>
                        <p>Learn How To Improve Your Personal Business</p>
                        <p>A strong brand is essential if you want to succeed in business, but it's also important to have a polished
                            personal brand. Your personal brand should be a genuine, honest culmination of who you are. </p>
                    </div>
                </div>
                <div style="clear: both;"></div>
                <div>
                    <div>
                        <p>Choose Between Two Beautifully Designed Color Schemes</p>
                        <p>You're likely on several different social media platforms for both personal and professional uses. But
                            because you use different platforms for different things, it's important for you to be aware of your
                            privacy settings.</p>
                    </div>
                    <img src="image9-11/image_0004s_0001s_0000s_0000_图层-4.png" />
                </div>
            </div>
        </section>
    
        <section>
            <div id="crew">
                <div>Our Awesome Crew</div>
                <div>Our unique online teaching style makes learning easy for everyone.Whether you are trying to land a new job, brush
                    up on your skills.</div>
                <div id="crewphoto">
                    <img src="image9-11/image_0005s_0001s_0000s_0002_张思远大.png" />
                    <img src="image9-11/image_0005s_0001s_0001s_0000_2.png" />
                    <img src="image9-11/image_0005s_0001s_0002s_0000_3.png" />
                    <img src="image9-11/image_0005s_0001s_0003s_0000_沈大师大_meitu_3.png" />
                </div>
            </div>
        </section>
    
        <section id="contacts">
            <div>
                <div>
                    <div id="fell">FELL FREE TO WRITE US</div>
                    <input type="email" id="email" placeholder="E-mail" />
                    <input type="text" id="subject" placeholder="Subject" />
                    <input type="text" id="message" placeholder="Message" />
                    <input type="submit" id="send" value="SEND" />
                </div>
                <div>
                    <div id="con">
                        <p>Contacts</p>
                        <p>Make any design your own using the Style
                            <br/>Editor.Personalize fonts, colors, and layouts to
                            <br/>create the custom look you want.</p>
                        <p>
                            <img src="image9-11/image_0006s_0001s_0002s_0000_Map-Icon.png" />360 King Street
                            <br/>Feastrvale Trevose, PA 19057</p>
                        <p>
                            <img src="image9-11/image_0006s_0001s_0001s_0000_Phone-Icon.png" />(755)564-84-12</p>
                        <p>
                            <img src="image9-11/image_0006s_0001s_0000s_0000_Mail-Icon.png" />yourname@mail.com</p>
                    </div>
                </div>
            </div>
        </section>
    
        <footer>
            <div>
                <div>
                    <p>LEARN MORE</p>
                    <p>How it works?</p>
                    <p>Meeting tools</p>
                    <p>Live streaming</p>
                    <p>Contact Method</p>
                </div>
                <div>
                    <p>ABOUT US</p>
                    <P>About us</P>
                    <p>Features</p>
                    <p>Privacy police</p>
                    <p>Terms & Conditions</p>
                </div>
                <div>
                    <p>SUPPORT</p>
                    <p>FAQ</p>
                    <p>Contact us</p>
                    <p>Live chat</p>
                    <p>Phone call</p>
                </div>
                <div>
                    <p>ENJOY YOUR LIFE</p>
                    <p>Create web UI kit for designers,
                        <br/>freelancers or business.</p>
                    <p></p>
                    <p id="icon">
                        <img src="image9-11/image_0007s_0001s_0000s_0000_Twitter-Icon.png" />  
                        <img src="image9-11/image_0007s_0001s_0000s_0001_Facebook-Icon.png" />  
                        <img src="image9-11/image_0007s_0001s_0000s_0002_Google-Icon.png" />  
                        <img src="image9-11/image_0007s_0001s_0000s_0003_Tumbler-Icon.png" />  
                        <img src="image9-11/image_0007s_0001s_0000s_0004_Pinterest-Icon.png" />  
                        <img src="image9-11/image_0007s_0001s_0000s_0005_LinkedIn-Icon.png" />
                    </p>
                </div>
            </div>
        </footer>
    
    </body>
    
    </html>

body {
        font-family: "Microsoft Yahei", sans-serif;
        font-weight: lighter;
    }
    
    header {
        background-image: url(image9-11/image_0000s_0002s_0002_图层-1.png);
        color: white;
        width: 1600px;
        height: 990px;
        text-align: center;
        margin: 0 auto;
    }
    
    #title {
        display: inline-block;
        font-size: 64px;
        padding-top: 200px;
        width: 960px;
    }
    
    #titlebottom {
        display: inline-block;
        box-sizing: border-box;
        width: 960px;
        font-size: 24px;
        padding: 70px 70px 100px 70px;
    }
    
    #login {
        display: inline-block;
        border: 1px solid white;
        width: 960px;
        height: 240px;
    }
    
    #login div:first-child {
        font-size: 20px;
        transform: scale(1.2, 1);
        padding-top: 60px;
        padding-bottom: 15px;
    }
    
    #login div:nth-child(2) {
        font-size: 1em;
        transform: scale(1.2, 1);
        color: rgb(90, 90, 90);
    }
    
    #login div input:first-child {
        width: 300px;
        height: 50px;
        border: none;
    }
    
    #login div input:nth-child(2) {
        width: 300px;
        height: 50px;
        border: none;
    }
    
    #login div input:nth-child(3) {
        width: 120px;
        height: 50px;
        background-color: #000000;
        color: #ffffff;
        border: none;
    }
    
    section {
        width: 1600px;
        margin: 0 auto;
        border-bottom: 1px solid rgb(200, 200, 200);
    }
    
    #landingpage {
        width: 1170px;
        height: 700px;
        margin: 0 auto;
        text-align: center;
    }
    
    #landingpage div {
        display: inline-block;
    }
    
    #landingpage>div:first-child {
        width: 1170px;
        height: 15px;
        font-size: 15px;
        margin-top: 85px;
    }
    
    #landingpage>div:nth-child(2) {
        width: 1170px;
        height: 170px;
        font-size: 48px;
        margin-top: 40px;
    }
    
    #landingpage>div:nth-child(3) {
        width: 1170px;
        height: 450px;
    }
    
    #moblie div {
        width: 420px;
        height: 120px;
    }
    
    #moblie div img {
        float: left;
    }
    
    #third {
        background-image: url(image9-11/image_0000s_0002s_0002_图层-1.png);
    }
    
    #supportive {
        width: 500px;
        height: 430px;
        margin: 180px 0 180px 320px;
        float: left;
        color: #ffffff;
    }
    
    #supportive div:first-child {
        font-size: 32px;
        width: 370px;
    }
    
    #supportive div:nth-child(2) {
        width: 370px;
        margin-top: 40px;
    }
    
    #supportive button:nth-child(3) {
        width: 240px;
        height: 50px;
        font-size: 12px;
        margin-top: 60px;
        background-color: #ffffff;
        color: #000;
        border: none;
    }
    
    #picture {
        width: 650px;
        height: 600px;
        float: right;
        display: table-cell;
        vertical-align: middle;
        margin-top: 100px;
        border-top: 1px solid rgb(200, 200, 200);
        border-bottom: 1px solid rgb(200, 200, 200);
        border-left: 1px solid rgb(200, 200, 200);
    }
    
    #picture img {
        width: 600px;
        height: 550px;
    }
    
    #supportive button:nth-child(4) {
        width: 240px;
        height: 50px;
        font-size: 12px;
        margin-top: 60px;
        background-color: #000000;
        color: #ffffff;
        border: none;
    }
    
    #products {
        width: 960px;
        height: 580px;
        margin: 0 auto;
    }
    
    #products>div:first-child {
        font-size: 48px;
        text-align: center;
        margin: 90px auto 80px auto;
    }
    
    #prointroduction {
        display: flex;
        justify-content: space-between;
    }
    
    #prointroduction div {
        width: 260px;
        height: 280px;
    }
    
    #prointroduction img {
        display: table-cell;
        text-align: center;
    }
    
    #learn {
        width: 960px;
        height: 1000px;
        margin: 0 auto;
    }
    
    #learn div div:first-child {
        float: left;
        width: 320px;
        height: 240px;
        margin-top: 150px;
    }
    
    #learn div div:nth-child(2) {
        float: right;
        width: 320px;
        height: 240px;
        margin-top: 180px;
    }
    
    #learn img {
        width: 570px;
        height: 350px;
    }
    
    #learn img:first-child {
        float: left;
        margin-top: 110px;
    }
    
    #learn img:nth-child(2) {
        float: right;
        margin-top: 80px;
    }
    
    #learn p:first-child {
        font: 24px bold;
    }
    
    #crew {
        width: 960px;
        height: 1080px;
        margin: 0 auto;
        text-align: center;
    }
    
    #crew div:first-child {
        font-size: 48px;
        margin-top: 100px;
    }
    
    #crew div:nth-child(2) {
        margin-top: 30px;
        width: 700px;
        margin: 0 auto;
    }
    
    #crewphoto {
        width: 960px;
        height: 710px;
        margin-top: 70px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
    }
    
    #crewphoto img {
        width: 470px;
        height: 350px;
    }
    
    #contacts {
        width: 1600px;
        height: 700px;
        margin: 0 auto;
    }
    
    #contacts>div {
        width: 960px;
        height: 700px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    
    #contacts>div>div {
        width: 470px;
        height: 560px;
        margin-top: 70px;
    }
    
    #contacts>div>div:first-child {
        border: 1px solid rgb(200, 200, 200);
        border-radius: 10px;
    }
    
    #contacts input {
        width: 370px;
        border-radius: 5px;
        border: 1px solid rgb(200, 200, 200);
    }
    
    #fell {
        text-align: center;
        vertical-align: middle;
        width: 370px;
        height: 110px;
        line-height: 110px;
        margin: 0 auto;
        font-weight: 400;
    }
    
    #email {
        height: 50px;
        margin-left: 50px;
    }
    
    #subject {
        height: 50px;
        margin-top: 30px;
        margin-left: 50px;
    }
    
    #message {
        margin-top: 30px;
        margin-left: 50px;
        height: 140px;
    }
    
    #send {
        height: 50px;
        margin-top: 30px;
        margin-left: 50px;
        background-color: #000000;
        color: #ffffff;
    }
    
    #con {
        text-align: left;
        width: 360px;
        height: 370px;
        margin-top: 80px;
        margin-left: 90px;
    }
    
    #con p:first-child {
        font-size: 48px;
    }
    
    footer {
        width: 1600px;
        height: 400px;
        background-color: black;
        margin: 0 auto;
        color: rgb(90, 90, 90);
        font-size: 15px;
    }
    
    footer>div {
        width: 1200px;
        height: 310px;
        display: flex;
        justify-content: space-around;
        margin: 0 auto;
        padding-top: 90px;
    }
    
    footer div div {
        width: 150px;
        height: 200px;
    }
    
    footer div div:last-child {
        width: 270px;
        height: 200px;
    }
    
    footer div div p:first-child {
        color: #ffffff;
    }

[70]: /images/20220521/fc0bbb8842334d479c47c8fff1915283.png