网页布局模板

最新推荐文章于 2023-12-26 10:45:52 发布

柠檬不萌香蕉不娇

最新推荐文章于 2023-12-26 10:45:52 发布

阅读量7.1k

点赞数 19

文章标签： css html

本文链接：https://blog.csdn.net/EMPRESS456/article/details/105397684

版权

网页布局模板

·css部分


<style>
        .header{
     	    width: 970px;
     	    height: 80px;
     	    margin: 0 auto;
     	    margin-bottom: 10px;/*要写在margin后面*/
        }
        .header .logo{
     	    float: left;
     	    width: 270px;
     	    height: 80px;
     	    background-color: #ffefd5;
        }
        .header .language{
     	    float: right;
     	    width: 137px;
     	    height: 30px;
     	    background-color: #ffdab9;
     	    margin-bottom: 8px;
        }
        .header .nav{
     	    float: right;
     	    width: 680px;
     	    height: 42px;
     	    background-color: #fff8dc;
        }
        .content{
     	    width: 970px;
     	    height: 435px;
     	    margin: 0 auto; 
        }
        .content .ad{
        	float: left;
        	width: 310px;
        	height: 435px;
        	background-color: #eed5b7;
        }
        .content .rightpart{
     	    float: left;
     	    width: 650px;
     	    height: 435px;
     	    margin-left:10px; 
        }
        .content .rightpart .up{
     	    width: 650px;
     	    height: 400px;
     	}
        .content .rightpart .link{
     	    width: 650px;
     	    height: 25px;
     	    margin-top:10px; 
     	    background-color: #fffacd;
        }
        .content .rightpart .up .up_1{
     	    float: left;
     	    width: 450px;
     	    height: 400px;
     	    margin-right: 10px;
        }
        .content .rightpart .up .gallary{
            float: left;
     	    width: 190px;
     	    height: 400px;
     	    background-color: #ffe4e1;
        }
        .content .rightpart .up .up_1 .news{
        	width: 450px;
        	height: 240px;
        	background-color: #ffc1c1;
        	margin-bottom: 10px;
        }
        .content .rightpart .up .up_1 .info{
        	width: 450px;
        	height: 110px;
        	background-color: #fff0f5;
        	margin-bottom: 10px;
        }
        .content .rightpart .up .up_1 .hot{
        	width: 450px;
        	height: 30px;
        	background-color: #eeb4b4;
        }
        .footer{
        	width: 970px;
        	height: 35px;
        	background-color: #eecfa1;
        	margin: 0 auto;
        	margin-top:10px;
        }
	</style>

·div部分


<body>
	<div class="header">
	    <div class="logo"></div>
	    <div class="language"></div>
	    <div class="nav"></div>
	</div> 
	<div class="content">
	    <div class="ad"></div>
	    <div class="rightpart">
	        <div class="up">
	            <div class="up_1">
	                <div class="news"></div>
	                <div class="info"></div>
	                <div class="hot"></div>
	            </div>
	            <div class="gallary"></div>
	        </div>
	        <div class="link"></div>
	    </div>
	</div>   
    <div class="footer"></div>
</body>

·布局成品

在这里插入图片描述

柠檬不萌香蕉不娇

关注

19
点赞
踩
185

收藏

觉得还不错? 一键收藏
3
评论
网页布局模板

网页布局模板·css部分<style> .header{ width: 970px; height: 80px; margin: 0 auto; margin-bottom: 10px;/*要写在margin后面*/ } .header .logo{ ...
复制链接

扫一扫