练习一

最新推荐文章于 2022-09-01 14:16:39 发布

如雨随行2020

最新推荐文章于 2022-09-01 14:16:39 发布

阅读量146

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_22038259/article/details/82657864

版权

前端专栏收录该内容

32 篇文章 4 订阅

订阅专栏

实现右侧效果这里写图片描述

提示：用h1 h2标签，颜色border-color:#cccccc;background-color:#f4f4f4;
整个放在一个div中

div.html

<html>
    <head>
        <title>div</title>
        <link rel = "stylesheet" type="text/css" href = "layout.css">
    </head>
    <body>
        <div id="category">
            <h1>CSS</h1>
                <h2>CSS入门</h2>
                <h2>CSS进阶</h2>
                <h2>CSS高级技巧</h2>

            <h1>WebUI</h1>
                <h2>理论知识</h2>
                <h2>实战应用</h2>
                <h2>高级技巧</h2>

            <h1>DOM</h1>
                <h2>DOM入门</h2>
                <h2>DOM应用</h2>
                <h2>DOM与浏览器</h2>

            <h1>XHTML</h1>
                <h2>XHTML参考手册</h2>
                <h2>XHTML论坛</h2>

        </div>
    </body>
</html>

layout.css

#category {
    width:100px;
    border-color:#cccccc;
    border-style:solid;
    border-width:0px 1px 1px 1px;
    margin:0 auto;
}

#category h1,#category h2 {
    margin:0px;
    padding:4px;
    font-size:12px;
}

#category h1{
    border-top:1px solid#cccccc;
    background-color:#f4f4f4;
}
#category h2{
    font-weight:normal;
}