我的博客网页设计

最新推荐文章于 2024-05-21 11:29:06 发布

Double_路

最新推荐文章于 2024-05-21 11:29:06 发布

阅读量791

点赞数 1

分类专栏：我的网页文章标签： css html

本文链接：https://blog.csdn.net/qq_44606245/article/details/109631893

版权

我的网页专栏收录该内容

9 篇文章 0 订阅

订阅专栏

我的博客网页设计

css文档

body {
    width: 787px;
    height: 550px;
    border: 5px solid #CBCBCB;
    margin: 100px auto;
}
.title {
    height: 46px;
    width: 787px;
    font-size: 34px;
    text-align: center;
    color: #656467;
    font-weight: bold;
    margin-top: 13px;
}

.list {
    height: 34px;
    background-color: #0099FF;
    border-bottom: 2px solid #788A95;
}
.list p{
    height: 9px;
    background-color: #0099FF;
}

.list li a {
    color: #F5DFEA;
    font-weight: bold;
    text-decoration: none;
    margin-left:34px;
    font-size: 19px;
}

.list li{
    list-style-type: none;
    display: inline;
}

.section{
    float: left;
    height: 387px;
}
.bl{
    height: 387px;
    border-bottom: 2px solid #60BFFF;
}

.section header{
    text-align: center;
    height: 34px;
    width: 543px;
    font-size: 19px;
    font-weight: bolder;
    border-bottom: #60BFFF dashed 2px;
    margin: 18px 11px;
    color: #585858;
}

.section article{
    width: 568px;
    height: 174px;
    border: solid 2px #69C3FF;
    margin: 13px 13px 13px 19px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.article1 main{
    height: 59px;
    margin-left: 13px;
    color: #5a5a5a;
}
.section footer{
    width: 543px;
    height: 45px;
    border-top: #60BFFF solid 2px ;
    padding-top: 10px;
    margin: 0px 11px;
    color: #8C888D;
}
.aside{
    margin-left: 605px;
    width: 165px;
    height: 350px;
    background-color: #E4E4E4;
}
.aside h1{
    font-size: 25px;
    display: block;
    color: #72757E;
    margin: 23px 0px 20px 17px;
}

.aside .div1{
    height: 12px;
    background-color: white;
} 

.aside .blue{
    color: #58B5F2;
    padding: 3px 15px;
    font-size: 17px;
}
.aside .p1{
    font-size: 17px;
    line-height: 25px;
    color: #ADA09A;
}
.aside .p1{
    display: block;
    padding: 3px 11px;
    margin-left: 3px;
}
footer{
    text-align: center;
    color: #8C888D;
    padding-top: 7px;
}
.list a:hover{
    background-color: #cecaca;
    color: rgb(172, 108, 108);
}

HTML文档

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS+DIV页面布局</title>
    <link rel="stylesheet" href="../Lyout/reset.css">
    <link rel="stylesheet" href="../CSS/CSS+DIV页面布局-1815-邢璐璐-2018006068.css">
</head>

<body>
    <header class="title">xinglulu的博客</header>
    <nav class="list">
        <p></p>
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">博文</a>
        </li>
        <li>
            <a href="#">相册</a>
        </li>
        <li>
            <a href="#">个人档案</a>
        </li>
    </nav>
    <div class="bl">
        <section class="section">
            <article class="article1">
                <header>JAVA</header>
                <main>
                    Java是James Gosling发明并由Sun Microsystems开发的一种流行的计算机软件编程语言。它是1995年创建的通用高级编程语言。
                </main>
                <footer>编辑于2020.11</footer>
            </article>

            <article class="article1">
                <header>JavaScript</header>
                <main>
                    JavaScript是HTML和Web的轻量级编程语言，用于使网页具有交互性。作为一种多范式语言，它支持事件驱动，功能，命令和编程样式。
                </main>
                <footer>编辑于2020.11
                    </footer>
            </article>
        </section>
        <aside class="aside">
            <div class="div1"></div>
            <h1>区别</h1>
            <div class="blue">Java和JavaScript</div>
            <p class="p1">都是不同的语言，除了语法相似外没有其他相似之处。在对Java和JavaScript进行以上比较之后，您将非常了解它们之间的区别和相似之处。</p>
        </aside>
    </div>
    <footer>版权所有2020  @xinglulu的博客</footer>
</body>

</html>

效果图
在这里插入图片描述

Double_路

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
我的博客网页设计

我的博客网页设计css文档body { width: 787px; height: 550px; border: 5px solid #CBCBCB; margin: 100px auto;}.title { height: 46px; width: 787px; font-size: 34px; text-align: center; color: #656467; font-weight: bold; mar
复制链接

扫一扫

专栏目录