前端炒冷饭：02 测试布局

最新推荐文章于 2024-03-12 11:47:53 发布

lpZhouYi

最新推荐文章于 2024-03-12 11:47:53 发布

阅读量167

点赞数

分类专栏：前端学习文章标签：测试布局

本文链接：https://blog.csdn.net/lpZhouYi/article/details/84961166

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

测试布局

效果

代码目录：

代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <link rel="stylesheet" href="../CSSFile/index.css" type="text/css"/>
</head>
<body>

<div class="header">
    <h2>
        测试布局效果
    </h2>
</div>

<div class="link">
    <ul>
        <li>
            <a href="#" class="actvte">
                新博客
            </a>
        </li>
        <li>
            <a href="#">
                往期博客
            </a>
        </li>
        <li>
            <a href="#">
                日常吐槽
            </a>
        </li>
        <li>
            <a href="#">
                我的歌唱
            </a>
        </li>
    </ul>
</div>

<div class="main">
123
</div>

<div class="end">
    结尾
</div>

</body>
</html>

CSS代码

.header
{
    text-align: center;

    width: 100%;

    height: 20%;

    background-color: tan;
}

.header h2
{
    font-family: "Kaiti SC";

    font-size: 40px;

    color: #f8715f;
}

.link
{
    width: 20%;

    height: 500px;

    background-color: #e0ffa9;

    float: left;
}

.main
{
    width: 80%;

    height: 500px;

    background-color: #9861ff;

    float: left;
}

.end
{
    width: 100%;

    height: 10%;

    background-color: #c7d2ce;

    clear: both;
}

li a
{
    display: block;
    text-decoration: none;
    color: #276fd2;
}

li a:hover
{
    background-color: #7f40f8;
    color: #bcf1ff;
}

.actvte
{
    background-color: #d6ccf8;
    color: rgba(0, 0, 0, 0.98);
}

ul
{
    list-style-type: none;
    height: 25px;
    margin: 0;
    padding: 0;
    /*
    全屏高度
     */
    height: 100%;
    position: fixed;
    overflow: auto;/*如果导航栏多选项， 允许滚动*/

}

li
{
    /*
    li 内的元素居中
     */
    text-align: center;
}

JS代码

/**
 * 无
 */

lpZhouYi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端炒冷饭：02 测试布局

测试布局效果代码目录：代码HTML代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;布局&lt;/title&gt; &lt;link rel="st
复制链接

扫一扫

专栏目录