Day3-作業(yè)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                
            }
            body,html{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .title{
                height: 5%;
                width: 100%;
                background-color: red;
                position: relative;
            }
            #img{
                height: 100%;
                width: 30%; 
                float: left;
                background-color: blue;     
            }
            #text{
                position: absolute;
                top: 30%;
                right: 10%;
                background-color: gray;
            }
            .list{
                height: 7%;
                width: 100%;
                background-color: black;
                position: relative;
                overflow: hidden;
            }
            .l_ul{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            .l_il{
                display: inline-block;
                color: white;
                font-size:20px ;
                width: 12.1%;
                height: 100%;
                text-align: center;
                border-right: 1px solid white;
                padding-top:10px ;
            }
            .img{
                height: 40%;
                width: 100%;
                background-color: green;
                position: relative;
                
            }
            .ind{
                width: 200px;
                height: 150px;
                background-color: red;
                position: absolute;
                bottom: 20%;
                left: 3%;
            }
            .img_left{
                width: 50px;
                height: 50px;
                background-color: white;
                text-align: center;
                font-size: 50px;
                position: absolute;
                bottom: 0%;
                right: 3%;
            }
            .img_ring{
                width: 50px;
                height: 50px;
                background-color: white;
                text-align: center;
                font-size: 50px;
                position: absolute;
                bottom: 0%;
                right: 6%;
            }
            .news_list{
                width: 100%;
                height: 15%;
                background-color: gray;
                position: relative;
            }
            .market{
                width: 100%;
                height: 15%;
                background-color: #8B4513;
                position: relative;
            }
            .bottom{
                width: 100%;
                height: 18%;
                background-color: gray;
                position: relative;
            }
            .c_l_d{
                height: 100%;
                width: 31%;
                position: absolute;
                
            }
            .c_l_d:nth-of-type(1){
                background-color: aquamarine;
            }
            .c_l_d:nth-of-type(2){
                background-color: aquamarine;
                right: 34%;
            }
            .c_l_d:nth-of-type(3){
                background-color: aquamarine;
                right: 0%;
            }
            .market_box{
                width: 20%;
                height: 80%;
                background-color: #000000;
                position: absolute;
            }
            .market_box:nth-of-type(1){
                left: 1%;
            }
            .market_box:nth-of-type(2){
                left: 26%;
            }
            .market_box:nth-of-type(3){
                right: 27%;
            }
            .market_box:nth-of-type(4){
                right: 3%;
            }
            .market_p{
                width: 90%;
                height: auto%;
                position: absolute;
                background-color: white;
                top: 80%;
                right: 5%;
                word-wrap:break-word;
                word-break:break-all;

            }
            .market_img{
                width: 100%;
                height: 77%;
                position: absolute;
                background-color: bisque;
                top: 0%;
            }
            .bottom_box{
                position: absolute;
            }
            .bottom_box:nth-of-type(1){
                width: 40%;
                height: 100%;
            
            }
            .bottom_box:nth-of-type(2){
                width: 26%;
                height: 100%;
                left: 44%;
            }
            .bottom_box:nth-of-type(3){
                width: 25%;
                height: 100%;
                right: 0%;
            }
        </style>
        
    </head>
    <body>
        <!--標(biāo)題搜索欄-->
        <div class="title">
            <div id="img">這里放logo</div>
            <input type="text" name="" id="text" value="" />
        </div>
        <!--菜單導(dǎo)航欄-->
        <div class="list">
            <ul class="l_ul">
                <li class="l_il">集團介紹</li>
                <li class="l_il">產(chǎn)品中心</li>
                <li class="l_il">臥龍市場</li>
                <li class="l_il">技術(shù)研發(fā)</li>
                <li class="l_il">國際合作</li>
                <li class="l_il">投資者關(guān)系</li>
                <li class="l_il">新聞資訊</li>
                <li class="l_il">人力資源</li>
            </ul>
        </div>
        <!--圖片輪播欄-->
        <div class="img">
            <div class="ind">介紹</div>
            <div class="img_left">></div>
            <div class="img_ring"><</div>
        </div>
        <!--新聞欄-->
        <div class="news_list">
            <div class="c_l_d">新聞資訊</div>
            <div class="c_l_d">臥龍介紹</div>
            <div class="c_l_d">人才招聘</div>
        </div>
        <!--市場欄-->
        <div class="market">
            <div class="market_title">臥龍市場</div>
            <div class="market_box">
                <img  class="market_img" src=""/>
                <p  class="market_p">圖片文字</p>
            </div>
            <div class="market_box">
                <img  class="market_img" src=""/>
                <p  class="market_p">圖片文字</p>
            </div>
            <div class="market_box">
                <img  class="market_img" src=""/>
                <p  class="market_p">圖片文字</p>
            </div>
            <div class="market_box">
                <img  class="market_img" src=""/>
                <p  class="market_p">圖片文字</p>
            </div>
        </div>
        <!--底部欄-->
        <div class="bottom">
            <div class="bottom_box">
                <p>產(chǎn)品中心</p>
                <ul>
                    <li>汽車電機</li>
                    <li>日用電機</li>
                    <li>特種電機</li>
                    <li>大功率電機</li>
                    <li>電工設(shè)備</li>
                </ul>
                <ul>
                    <li>工業(yè)驅(qū)動和自動化</li>
                    <li>系統(tǒng)繼承</li>
                    <li>攪拌機</li>
                    <li>電動車輛</li>
                </ul>
            </div>
            <div class="bottom_box">
                <p>技術(shù)研發(fā)</p>
            </div>
            <div class="bottom_box">
                <p>營銷網(wǎng)絡(luò)</p>
            </div>
        </div>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容