HTML与CSS布局实践-优快云博客

本文介绍了一个使用HTML和CSS进行网页布局的例子，包括导航栏、文章主体和侧边栏等部分的设计与实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/styles.css" rel="stylesheet">
    <style>
        body{
            background: url("images/body-bg.jpg") #000 no-repeat top center;
        }
        .loge{
            margin-top: 34px;
            margin-bottom: 34px;
        }
        nav{
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #666666;
            border-radius: 5px;
        }
        nav ul{
            float: left;
        }
        nav ul li{
            float: left;
            padding: 0 14px;
        }
        nav ul li a{
            color: #fff;
        }
        .search{
            float: right;
            width: 137px;
            height: 26px;
            margin-top: 6px;
            margin-right: 6px;
            border-radius: 5px;
        }
        section{
            margin-top: 30px;
        }
        article{
            width: 674px;
            background: #ffffff;
            border-radius: 5px;
            float: left;
        }
        .left{
            padding: 36px;
        }
        time{
            display: block;
            font-size: 12px;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .left p{
            line-height: 20px;
            color: #666;
            margin: 15px 0;
        }
        aside{
            float: right;
            width: 240px;
        }
        aside dl{
            background: #fff;
            border-radius: 5px;
        }
        aside dl a{
            color: #000;
        }
        .sec{
            margin-top: 25px;
        }
        footer{
            text-align: center;
            color: #fff;
            margin: 30px 0;
        }
    </style>
</head>
<body>
<div class="wrap">
    <header>
        <img src="images/logo.png" class="loge">
    </header>
    <nav class="clear">
        <ul class="clear">
            <li><a href="#">home</a></li>
            <li><a href="#">home</a></li>
            <li><a href="#">home</a></li>
            <li><a href="#">home</a></li>
        </ul>
        <input placeholder="Search" class="search">
    </nav>

    <section class="clear">
        <article>
            <div class="left">
                <h2>Just a Post Title</h2>
                <time>May 8, 2014 in Categor</time>
                <img src="images/sample-image.jpg">
                <p>Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis
vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar
ac. Vestibulum congue nisl magna. Ut vulputate odio id dui convallis in adipiscing libero condimentum. Nunc et
pharetra enim. Praesent pharetra, neque et luctus tempor, leo sapien faucibus leo, a dignissim turpis ipsum sed libero.
Sed sed luctus purus. Aliquam faucibus turpis at libero consectetur euismod. Nam nunc lectus, congue non egestas quis,
condimentum ut arcu. Nulla placerat, tortor non egestas rutrum, mi turpis adipiscing dui, et mollis turpis tortor vel
orci. Cras a fringilla nunc. Suspendisse volutpat, eros congue scelerisque iaculis, magna odio sodales dui, vitae
vulputate elit metus ac arcu. Mauris consequat rhoncus dolor id sagittis. Cras tortor elit, aliquet quis tincidunt eget,
                    dignissim non tortor.
                </p>
                <video src="media/Compress.MP4" controls width="100%"></video>
            </div>
        </article>
        <aside>
            <dl>
                <dt>sidebar</dt>
                <dd><a href="#">WordPress (3)</a></dd>
                <dd><a href="#">WordPress (3)</a></dd>
                <dd><a href="#">WordPress (3)</a></dd>
            </dl>
            <dl class="sec">
                <dt>sidebar</dt>
            </dl>
        </aside>
    </section>
    <footer>
        <p>八维科技有限公司</p>
    </footer>
</div>
</body>
</html>


style文件


*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.clear:after{
    content: "\200B";
    display: block;
    width: 0;
    height:0;
    clear: both;
}
.wrap{
    width: 980px;
    margin: 0 auto;
}