使用html与css实现一个漂亮的网页

最新推荐文章于 2024-10-08 14:42:29 发布

hhhhhhe！

最新推荐文章于 2024-10-08 14:42:29 发布

阅读量6.4k

点赞数 18

文章标签： html css

本文链接：https://blog.csdn.net/lsl30522/article/details/104988767

版权

效果图：

实现的代码：

html代码：

<!DOCTYPE >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个精美的网页</title>
    <link rel="stylesheet" href="./css/index.css">
    <style type="text/css">
    .first{
        background: url(./img/前端学院设计图_02.png);
        background-size: 100% 100%;
    }
    .three{
        background: url(./img/前端学院设计图_20.png);
        background-size: 100% 100%;
    }
    </style>
</head>
<body >
    <div class="first" >
    
        <div class="first_header">
            <h1>Hello World</h1>
        </div>
        <div class="first_word">
            <p>China is speeding up strategic plan. standards, traffic rules. laws and regulations<br>
                on accident-incurred liabilities for its smart car industry, Economic Information <br>
                Daily reported Thursday.</p>
        </div>
       
            <div class="f_in_table">
                <form action="#">
                   <div  class="f_e"><input type="email" name="" value="denis@getcraftworkcom"/></div> 
                   <div class="f_p"><input  type="password" name="" value="Create your password"/></div>
                   <div class="f_s"><input type="submit" value="Submit form" /></div> 
                </form>
            </div>
        </div>
    </div>
    <div class="second">
        <div class="pic"><img src="./img/前端学院设计图_05.png" alt=""></div>
        <div class="s_in">
            <div class="s_in_d">
                <img src="./img/前端学院设计图_09.png" alt="">
                <div class="s_in_id_w">
                    <h3>Mobile First</h3>
                    <p>All modulz are built mobile-first for maximum
                        device compatibility</p>
                </div>
               
            </div>
            <div class="s_in_d in2">
                <img src="./img/前端学院设计图_12.png" alt="">
                <div class="s_in_id_w">
                <h3>Accessibility</h3>
                <p>Support for IEB, mobile and tablet devices.
                    screen readers and color blind</p>
                    </div>
            </div>
            <div class="s_in_d"> <img src="./img/前端学院设计图_16.png" alt="">
                <div class="s_in_id_w">
                <h3>Fluid Typography</h3>
                <p>On different screen sizes. fonts automagically
                    scale with the viewport</p>
                </div>
                </div>
            <div class="s_in_d in2" > <img src="./img/前端学院设计图_17.png" alt="">
                <div class="s_in_id_w">
                <h3>Customization</h3>
                <p>Make any design your own using the Style
                    Editor. Personalize fonts. colors. and layouts to
                    create the custom look you want.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="three">
        <div class="three_l">
            <div class="three_l_w">
                <h3>
                 Supportive policies for China's smart car
                </h3>
                <p>China will come up with its own smart car
                    standards, traffic rules. laws and regulations
                    relating to safety, according to the China
                    Industry Innovation Alliance for the Intelli-
                    gent and Connected Vehicles.</p>
            </div>
            <div class="three_l_f">
                <button class="btn" value="">
                    CHECK OUT FEATURES
                </button>
                <button class="btn" value="">
                    TRY PRODUCT FOR FREE
                </button>
            </div>

        </div>
        <div class="three_r">
           <img src="./img/第三页右_03.png" alt="">
        </div>

    </div>
    <div class="fouth">
        <div class="f_top">
            <h1>Try Our Awesome Products</h1>
        </div>
        <div class="f_word">
            <div class="w1">
                <img src="./img/前端学院设计图_27.png" alt="">
                <p>Li Jun. a China Academy of Engi-
                    neering academician and also
                    director of the alliances experts'
                    committee. said that China will
                    also launch design guidance for
                    smart cars. smart map architec-
                    ture and standards for test
                    grounds</p>
            </div>
            <div class="w1">
                <img src="./img/前端学院设计图_29.png" alt="">
                <p>Li said the smart car industry is
                    able to enlarge the current car
                    industry by 1 trillion yuan ($158.15
                    billion) and also able to boost fast
                    development in SC. internet of
                    cars, big data. artificial intelligence
                    and new-energy vehicles
                    </p>
            </div>
            <div class="w1">
                <img src="./img/前端学院设计图_31.png" alt="">
                <p>Zhang Junyi. a partner with NIO
                    Capital. said that the smart car is
                    the trend for the car industry and
                    China's auto sector will usher in a
                    new key development stage with
                    the improvement of infrastructure,
                    technology. policies and laws.
                    Learn How to Improve Your
                    Personal Business</p>
            </div>
        </div>
        <div class="f_c1">
            <img src="./img/前端学院设计图_37.png" alt="">
            <div class="f_c1_w1">
                <h1>Learn How to Improve Your
                    Personal Business</h1>
                <p>Li Jun. a China Academy of Engineering
                    academician and also director of the
                    alliance's expertS committee. said that
                    China will also launch design guidance
                    for smart cars. smart map architecture
                    and standards for test grounds.</p>
            </div>
        </div>
        <div class="f_c2">
            <img src="./img/前端学院设计图_41.png" alt="">
            <div  class="f_c1_w2">
                <h1>Choose Between Two Beautifully
                    Designed Color Schemes.
                   </h1>
                   <p> China will come up with its own smart
                    car standards. traffic rules, laws and reg-
                    ulations relating to safety. according to
                    the China Industry Innovation Alliance
                    for the Intelligent and Connected
                    Vehicles.</p>
            </div>
        </div>

    </div>
    <div class="fifth">
        <div class="fifth_word">
            <h1 class="">Our Awesome Crew</h1>
            <p>our unique online teaching style makes learning easy for everyone. Whether you<br>
                are trying to land a new job. brush up on your skills.</p>
        </div>
        <div class="fifth_pep">
            <div class="fifth_pep_pic"><img src="./img/赵思远_45.png" alt=""></div>
            <div class="fifth_pep_pic"><img src="./img/前端学院设计图_45.png" alt=""></div>
            <div class="fifth_pep_pic"><img src="./img/前端学院设计图_49.png" alt=""></div>
            <div class="fifth_pep_pic"><img src="./img/前端学院设计图_51.png" alt=""></div>
        </div>
    </div>
    <div class="fix">
        <div class="fix_l">
            <h1>FELL FREE TO WRITE US</h1>
            <form action="#">
                <input type="email" value="E-mail" >
                <input type="text" value="subject" >
                <input type="text" value="Message" >
                <input type="submit" value="SEND" >
            </form>
        </div>
        <div class="fix_r">
            <h1>Contacts</h1>
            <p>Make any design your own using the Style
                Editor. Personalize fonts, colors. and layouts to
                create the custom look you want</p>
                <ul>
                    <li><img src="./img/最后_06.png" alt=""><a href="">360 King Street Feastrvale<br> Trevose. PA 19057</a></li>
                    <li><img src="./img/最后_09.png" alt=""><a href=""> Q, (755) 564-84-12</a></li>
                    <li><img src="./img/最后_11.png" alt=""><a href="">youname@mail.com</a></li>
                </ul>
        </div>
    </div>
    <div class="last">
            <div class="last_in">
            <h3>LEARN MORE</h3>
            <ul>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
            </ul>
        </div>
            <div class="last_in">
                <h3>About us</h3>
                <ul>
                    <li><a href="">About us</a></li>
                    <li><a href="">About us</a></li>
                    <li><a href="">About us</a></li>
                    <li><a href="">About us</a></li>
                </ul>
            </div>
            <div class="last_in">
                <h3>SUPPORT</h3>
                <ul>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
            </ul></div>
            <div class="last_in">
                <h3>ENJOY YOUR LIFE</h3>
                <ul>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
                <li><a href="">About us</a></li>
            </ul></div>
    </div>
</body>
</html>

实现的css

/* first */
*{
    margin: 0;
    padding: 0;
}
.first{
    margin: 0 auto;
    padding: 0;
    height: 890px;
    width: 1600px;
    border: 1px transparent solid;
    border-bottom: 1px gray solid;
    background: url(./img/1.jpg);
}
.first_header{
    margin-top: 206px;
    margin-left: 634px;
    width: 335px;
    height: 72px;
    /* border: 1px blue solid; */
}
.first_header h1{
    font-style: none;
    position: relative;
    line-height: 72px;
    font-size: 62px;
    font-style: initial;
    font-weight: 60;
    font-family: sans-serif;
    color: rgb(255, 255, 255);
}
.first_word{
   width: 770px;
   height: 85px;
   margin-top: 75px;
   margin-left: 412px;
   /* border: 1px blue solid; */
   text-align: center;
}
.first_word p{
    position: relative;
    line-height: 32px;
    font-size: 20px;
    font-style: initial;
    font-family: sans-serif;
    font-weight: 60;
    color:#fff;
}
.frist_incontent .f_in_title{
    margin-top: 145px;
    margin-left: 665px;
    width: 245px;
    height: 62px;
    /* border: 1px blue solid; */
}
.f_in_table {
    float: left;
    width: 770px;
    height: 45px;
    margin-top: 169px;
    margin-left: 414px;
    /* border: 1px blue solid; */
}
.f_in_table .f_e{
    position: absolute;
    display: block;
    width: 290px;
    height: 45px;
    margin-left: 2px;
    /* border: 1px blue solid; */
    background-color: transparent;

}
.f_in_table .f_p{
    position: absolute;
    display: block;
    width: 290px;
    height: 45px;
    margin-left: 322px;
    /* border: 1px red solid; */
    background-color: transparent;
}
.f_in_table .f_s{
    position: absolute;
    display: block;
    float: right;
    width: 125px;
    height: 45px;
    margin-left: 644px;
    /* border: 1px yellow solid; */
    background-color: transparent;
}
.f_in_table input{
    font-size: 14px;
    line-height: 24px;
    color: rgb(100, 100, 100);
    margin-top: 2px;
    width: 290px;
    height: 43px;
    border: 0;  
    outline: none; 
    background-color: rgba(0, 0, 0, 0);
}
.f_in_table input:hover{
    border:1px solid white; 
}
.f_in_table .f_s input{
    margin: 2px;
    font-size: 14px;
    line-height: 24px;
    color: rgb(100, 100, 100);
    width: 125px;
    height: 45px;
    border: 0;  
    outline: none; 
    background-color: rgba(0, 0, 0, 0);
}
.f_in_table .f_s input:hover{
    margin-top:4px;  
    margin-bottom:0px; 
}
/* second */
.second{
    margin: 0 auto;
    padding: 0;
    height: 710px;
    width: 1600px;
    background-color:#f2f2f2;
    border: 1px transparent solid;
    border-bottom: 1px gray solid;
}
.second .pic{
    margin-top: 80px;
    margin-left: 470px;
    width: 680px;
    height: 110px;
    /* border: 1px yellow solid; */
}
.second .pic img{
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;

}
.second .s_in{
    position: absolute;
    height: 300px;
    width: 1045px;
    margin-top: 50px;
    left:50%;
    margin-left: -540px;
    /* border: 1px red solid; */
    
}

.second .s_in .s_in_d{
    float: left;
    width: 468Px;
    height: 142px;
    margin: 5px 20px;
    /* border: 1px palevioletred solid; */
}
.second .s_in .s_in_d img{
    width: 49px;
    height: 49px;
    float: left;
    margin-top: 0px;
    float: left;
}

.second .s_in .s_in_d .s_in_id_w{
    width: 370px;
    height: 100px;
    float: left;
    margin-left: 30px;
}
.second .s_in .s_in_d h3{
    display: block;
    float: left;
    margin-bottom: 25px;
    margin-left: 30px;
    font-weight: 60;
    line-height: 32px;
    font-size: 20px;
    
}
.second .s_in .s_in_d p{
    display: block;
    float: left;
    margin-left: 30px;
    font-weight: 60;
    line-height: 26px;
    font-size: 16px;
}
/* three */
.three{
    margin: 0 auto;
    padding: 0;
    height: 800px;
    width: 1600px;
    /* background:url(./img/前端学院设计图_20.png); */
    border: 1px transparent solid;
    border-bottom: 1px gray solid;
}
.three .three_l{
    float: left;
    width: 530px;
    height: 460px;
    margin-top: 175px;
    margin-left: 314px;
    /* border: 1px yellow solid; */
}
.three .three_l .three_l_w{
    position: relative;
    width: 360px;
    height: 335px;
    /* border: 1px yellow solid; */

}
.three .three_l .three_l_w h3{
    display: block;
    line-height: 52px;
    font-size: 42px;
    color:#ffffff;
    font-weight: 80;

}
.three .three_l .three_l_w p{
    display: block;
    margin-top: 30px;
    line-height: 28px;
    font-size: 18px;
    color:#b6b8b4;
    font-weight: 60;
}
.three .three_l .three_l_f {
    position: absolute;
    width: 515px;
    height: 65px;
    /* border: 1px yellow solid; */
    margin-top: 45px;
}
.three .three_l .three_l_f .btn{
    position: relative;
    width: 240px;
    height: 60px;
    /* border: 1px yellow solid; */
    border-radius: 3px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0);
    border: 1px transparent solid;
}
.three .three_l .three_l_f :last-child{
    position: relative;
    float: right;
    margin-right: 12px
}
.three .three_l .three_l_f .btn:hover {
    color: rgb(20, 17, 17);
    background-color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);
   
}
.three .three_l .three_l_f .btn:focus{
    outline: none;
}
.three_r{
    width: 585px;
    height: 537px;
    position: absolute;
    margin-top: 135px;
    margin-left: 1015px;
    /* border: 1px yellow solid; */
    background-color: #fff;
}
.three_r img{
    max-width: 100%;
    max-height: 100%;

}
/* fouth */
.fouth{
    width: 1600px;
    height: 1605px;
    margin: 0 auto;
    padding: 0;
    border: 1px transparent solid;
    border-bottom: 1px gray solid;
}
.fouth .f_top{
    margin-left: 315px;
    margin-top: 100px;
    width: 970px;
    height: 45px;
    /* border: 1px yellow solid; */
    text-align: center;
}
.fouth .f_top h1{
    line-height: 52px;
    font-size: 42px;
    font-weight: 60;
}
.fouth .f_word{
    margin-top: 75px;
    margin-left: 315px;
    width: 970px;
    height: 520px;
    /* border: 1px yellow solid; */
    display: flex;
    display: -webkit-flex;
}
.w1{
    width: 270px;
    height: 315px;
    /* border: 1px red solid; */
    text-align: center;

}
.w1 img{
    margin-bottom: 20px;
}
.w1:nth-child(2),.w1:first-child {
    margin-right: 80px;
}

.w1 p{
    font-weight: 40;
    line-height: 26px;
    font-size: 16px;
}
.f_c1 ,.f_c2{
    margin-left: 315px;
    width: 970px;
    height: 365px;
    /* border: 1px red solid; */
    text-align: center;
}
.f_c2{
    margin-top: 65px;
}
.f_c1 img ,.f_c2 img{
    width: 570px;
    height: 350px;
}
.f_c1 img {
    float: left;
}
.f_c2 img {
    float: right;
}
.f_c1_w1{
    width: 320px;
    height: 350px;
    float: right;
    /* border: 1px red solid; */
}
.f_c1_w2{
    width: 320px;
    height: 350px;
    float: left;
    /* border: 1px red solid; */
}
.f_c1_w1 h1 ,.f_c1_w2 h1{
    line-height: 32px;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    display: block;
    margin-top: 80px;
    margin-bottom: 27px;
}
.f_c1_w1 p ,.f_c1_w2 p{
    line-height: 28px;
    font-size: 16px;
    font-weight: 100;
    text-align: left;
    display: block;
}
/* fifth */
.fifth{
    width: 1600px;
    height: 1088px;
    margin: 0 auto;
    padding: 0;
    border: 1px transparent solid;
    border-bottom: 1px gray solid;
}
.fifth .fifth_word{
    height: 160px;
    width: 100%;
    text-align: center; 
}
.fifth .fifth_word h1{
    display: block;
    margin-top: 75px;
    line-height: 52px;
    font-size: 42px;
    font-weight: 60;
}
.fifth .fifth_word p{
    line-height: 28px;
    font-size: 18px;
    font-weight: 100;
    display: block;
    margin-top: 45px;
}
.fifth_pep{
    float: left;
    margin-left: 315px;
    margin-top: 40px;
    width: 970px;
    height: 735px;
    /* border:1px yellow solid; */
   display: flex;
   flex-wrap: wrap;
   
}
.fifth_pep .fifth_pep_pic{
    width: 472px;
    height: 336px;
    background-color: #000000;
}
.fifth_pep .fifth_pep_pic:nth-child(1),.fifth_pep .fifth_pep_pic:nth-child(3){
    margin-right: 20px;
}
.fifth_pep img{
    width: 100%;
    height: 100%;
}
.fifth_pep img:hover{
    opacity: 0.5;
    box-shadow: 10px 10px 5px #888888;
}
/* fix */
.fix{
    width: 1600px;
    height: 706px;
    margin: 0 auto;
    padding: 0;
    border: 1px transparent solid;
}
.fix .fix_l{
    width: 470px;
    height: 560px;
    margin-top: 72px;
    margin-left: 315px;
    border: 1px gray solid;
    border-radius: 10px;
    text-align: center;
    float: left;
}
.fix .fix_l h1{
    line-height: 31px;
    font-size: 16px;
    font-weight: 80;
    display: block;
    margin-top: 47px;
}
.fix .fix_l form input{
    width: 370px;
    height: 52px;
    margin-top: 30px;
    /* text-align: center; */
    color: gray;
    border-radius: 5px;
    border: 1px gray solid;
    text-indent: 2px;
}
.fix .fix_l form input:focus{
    outline: none;
}
.fix .fix_l form input:hover{
    border: 2px gray solid;
}
.fix .fix_l form input:nth-child(3){
    width: 370px;
    height: 145px;
}
.fix .fix_l form input:last-child{
    background: #141414;
    color: honeydew;
    text-align: center;
}

.fix .fix_r{
    float: right;
    width: 470px;
    height: 560px;
    margin-top: 72px;
   margin-right: 315px;
    border: 1px gray solid;
    border-radius: 10px;
    text-align: center;
}
.fix .fix_r h1{
    text-align: left;
    display: block;
    margin-top: 100px;
    line-height: 52px;
    font-size: 42px;
    font-weight: 40;
    margin-left: 85px;
}
.fix .fix_r p{
    display: block;
    margin-top: 32px;
    line-height: 26px;
    font-size: 16px;
    font-weight: 40;
    text-align: left;
    margin-left: 85px;
}
.fix .fix_r ul{
    list-style-image: url(./img/最后_06.png);
    display: block;
    margin-top: 40px;
    width: 380px;
    height: 170px;
    float: right;
    /* margin-left: 85px; */
    /* border: 1px yellow solid; */
    list-style: none;
    text-align: left;
}
.fix .fix_r ul li{
    line-height: 55px;
    width: 300px;
}
.fix .fix_r ul li img{
    display: inline-block;
    vertical-align: middle;
}
.fix .fix_r ul li a{
    display: inline-block;
    margin-left: 20px;
    line-height: 26px;
    font-size: 16px;
    text-align: left;
    text-decoration:none;
    color:gray; 
}
.fix .fix_r ul li a:first-child{
    margin-top: 10px;
}
/* last */
.last{
    margin: 0 auto;
    display: flex;
    width: 1600px;
    height: 410px;
    background-color: #000000;
    border: 1px transparent solid;
}
.last_in{
    width: 300px;
    height:230px;
    /* border: 1px red solid; */
    margin-top: 80px;
}
.last_in:first-child{
    margin-left: 215px;
}
.last_in h3{
    color: white;
    line-height: 28px;
    font-size: 14px;
    margin-bottom: 30px;
}
.last_in ul li{
    /* color: white;
    line-height: 46px;
    font-size: 12px;
    font-weight: 40; */
    list-style: none;
  
}
.last_in ul li a{
    color: white;
    line-height: 46px;
    font-size: 12px;
    font-weight: 20;
    text-decoration:none;
}
.last_in ul li a:hover{
    text-decoration: blink;
}

图片与代码下载链接：

https://download.csdn.net/download/lsl30522/12257980