0
点赞
收藏
分享

微信扫一扫

使用CSS 排版网页布局

诗尚凝寒 2022-03-31 阅读 58


代码如下:



<html>

<head>

<style type="text/css">

<!--

body {

    margin:0px;

    font-size:13px;

    font-family:Arial;

#container{

    position:relative;

    width:100%;

}

#banner{

    height:80px;

    border:1px solid #000000;

    text-align:center;

    background-color:#a2d9ff;

    padding:10px;

    margin-bottom:2px;

}

#content{

    float:left;

    text-align:center;

    padding-right:200px;    /* 内容往回挤200px */

}

#links{

    float:right;

    width:200px;

    border:1px solid #000000;

    margin-left:-200px;        /* 强行往左拉回200px */

    text-align:center;

}

#footer{

    clear:both;                /* 不受float影响 */

    text-align:center;

    height:30px;

    border:1px solid #000000;

}

-->

</style>

<title>CSS排版</title><body>

<div id="container">

    <div id="banner">banner</div>

    <div id="content">

        <div class="blog">

            <div class="date">date</div>

            <div class="blogcontent">

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

content content content content content content content content content content<br>

            </div>

        </div>

        <div class="others">others</div>

    </div>

    <div id="links">

        <div class="calendarhead">links<br>links<br>links<br>links</div>

        <div class="calendartable">links<br>links<br>links<br>links</div>

        <div class="side">links<br>links<br>links<br>links</div>

        <div class="syndicate">links<br>links<br>links<br>links</div>

        <div class="friends">links<br>links<br>links<br>links</div>

    </div>

    <div id="footer">footer</div>

</div>

</body>

</html>



运行效果如下:

<html> <head> <style type="text/css"> <!-- body { margin:0px; font-size:13px; font-family:Arial; } #container{ position:relative; width:100%; } #banner{ height:80px; border:1px solid #000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; } #content{ float:left; text-align:center; padding-right:200px; /* 内容往回挤200px */ } #links{ float:right; width:200px; border:1px solid #000000; margin-left:-200px; /* 强行往左拉回200px */ text-align:center; } #footer{ clear:both; /* 不受float影响 */ text-align:center; height:30px; border:1px solid #000000; } --> </style> <title>CSS排版</title><body> <div id="container"> <div id="banner">banner</div> <div id="content"> <div class="blog"> <div class="date">date</div> <div class="blogcontent"> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> </div> </div> <div class="others">others</div> </div> <div id="links"> <div class="calendarhead">links<br>links<br>links<br>links</div> <div class="calendartable">links<br>links<br>links<br>links</div> <div class="side">links<br>links<br>links<br>links</div> <div class="syndicate">links<br>links<br>links<br>links</div> <div class="friends">links<br>links<br>links<br>links</div> </div> <div id="footer">footer</div> </div> </body> </html>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


举报

相关推荐

0 条评论