2021_CSS学习笔记第5天: 4.2.8 设计博客首页效果

网站建设 · 2021-01-06
坚持戒烟、坚持学习、坚持运动uzkIT米工网
4.2.8 设计博客首页效果
uzkIT米工网
CSS首先统一页面基本属性,清除页边距,网页距中对齐,配合容器margin属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    body{
        margin:0px;
        padding:0px;
        text-align:center;
    }
    .container{
        width:800px;
        margin:0 auto
    }
    .header{
        widht:800px;
        height:200px;
        background:url(images/bg.jpg)
    }
    .menu{
        width:100%;
        font-size:16px;
        background-color#90bcff;
        text-align:center;
        font-weithg:bold;
    }
    .leftbar{
        width:199px;
        height:650px;
        background-color:#d4d7c6;
        text-align:center;
        vertical-align:top;
        border-right:1px #FFFFFF solid;
        float:left;
    }
    .pic1{
        border:3px solid #f393a5;
    }
    .leftbar p{
        font-size:20px;
    }
    h2{
        font-weight:bold;
        color:#c223c8;
        font-size:18px;
        padding:0;
        width:199px;
    }
    .favlinks{
        margin:0;
        padding:0;
        width:199px;
    }
    .favlinks li{
        padding-left:12px;
        line-height:25px;
        font-size:14px;
        list-style-typenone;       
    }
    .favlinks a:link{
        color:#A5FFFFB;
        text-decoration:none;
        border-bottom:1px dotted #A003B;
    }
    .content{
        width:600px;
        height:650px;
        background:#e5e5e3;
        vertical-align:top;
        font-size:12px;
        text-align:center;
        float:left;
    }
    h4{
        text-decoration:underline;
        color:#0078aa;
        padding-top:15px;
        font-size:16px;
    }
    .content p{
        line-height:2em;
        font-size:13px;
    }
 
    </style>
</head>
<body>
    <div class="container">
        <div class="header"></div>
        <table class="menu">
            <tr>
                <td>首页</td>
                <td>我的博文</td>
                <td>班级故事</td>
                <td>我的收藏</td>
                <td>成长心得</td>
                <td>我爱挑战</td>
                <td>友情链接</td>
            </tr>
        </table>
        <div class="main">
            <div class="leftbar">
                <p><img src="images/1.jpg" class="pic1"><br>我的博文</p>            
                <p><img src="images/2.jpg" class="pic1"><br>班级故事</p>  
                <hr style="border:1px solid;"/>
                <h2>My Favorite sites</h2>
                <ul class="favlinks">
                    <li><a href="#">妈妈的博客</a></li>
                    <li><a href="#">好友的博客</a></li>
                    <li><a href="#">班级的博客</a></li>
                    <li><a href="#">我们的天空</a></li>
                </ul>          
            </div>
        </div>
        <div class="content">
            <h4>用一段话激励自己</h4>
            <p>
                我们最深的恐惧并非是我们力不能及。</br>
                我们最深的恐惧是我们的力量无可限量。</br>
                令我们恐惧的是我们的光芒,</br>
                而不是我们的黑暗。</br>
                我们都会扪心自问</br>
                我是谁,怎样才能灿烂夺目,才华横溢?</br>
                其实,你要问,你怎么能不是谁?你就是神之子。</br>
                你的碌碌无为无益于世界。</br>
                退缩并非明智之举,</br>
                以为这样就不会让人们不安。</br>
                我们注定要光彩照人,就像孩子一样。</br>
                我们生来就是为了展现我们心中上帝的荣耀。</br>
                它并非只是少数人拥有;而是藏在每个人的心中。</br>
                当我们让自己的光芒闪耀,</br>
                我们就在无意中默许他人去做同样的事。</br>
                当我们从自己的恐惧中解放,</br>
                我们就自然而然地解放他人!
            </p>
            <p><img src="images/hua.gif" alt=""></p>
        </div>
    </div>        
</body>
</html>