首页 > 代码库 > 网页的简单布局
网页的简单布局
<head><style type="text/css">#main{ text-align:center;}.d1{ border:1px solid blue; width:960px; margin:auto; }.d6{ height:100px; background-color:black; float:left; width:100%;}.dd{ height:100px; border:1px solid red; background-color:navy; float:left; width:100%;}.d2{ width:100%; height:300px; background-color:pink; float:left;}.d3{ width:100%; height:200px; background-color:#9FF; float:left;}.d4{ float:left; height:180px; background-color:#99C; width:307px; margin-right:10px; margin-top:10px; }.d5{ float:right; height:180px; background-color:#99C; width:306px; margin-right:10px; margin-top:10px;}#divleft{ margin-left:10px;}.dd h1{ font-size:52px; font-weight:bold; color:white; float:left; margin-left:20px; margin-top:20px;}.dlzc{ float:right; margin-right:10px; margin-top:20px;}.dlzc a{ color:white; font-weight:bold; text-decoration:none;}</style></head><body><div id="main"> <div class="d1"> <div class="dd"> <h1>真无奈网页教程</h1> <div class="dlzc"> <a href=http://www.mamicode.com/"#">登录</a> <a href=http://www.mamicode.com/"#">注册</a> </div> </div> <div class="d2"></div> <div class="d3"> <div id="divleft" class="d4"></div> <div class="d4"></div> <div class="d5"></div> </div> <div class="d6"></div> </div></div></body></html>
网页的简单布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。