0
点赞
收藏
分享

微信扫一扫

css:分类和导航

秀妮_5519 2022-04-17 阅读 65
css

文章目录


一.分类

1.代码

代码如下(示例):

<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
  li p{
        background-color:rgb(246, 247, 248) ;
        color: rgb(126, 130, 135);
        float: left;
        height: 30px; 
        line-height: 30px;
        width:54px ;
        border-radius: 4px;
        margin-top: 15px;
        margin-left: 15px;
        text-align: center;
        
    }
    li{
        height: 50px;
    }
</style>
</head>
<body>
    <ul>
        <li>
            <p>番剧</p>
            <p>国创</p>
            <p>综艺</p>
            <p>动画</p>
            <p>鬼畜</p>
            <p>舞蹈</p>
            <p>娱乐</p>
            <p>科技</p>
        </li>
        <li>
            <p>电影</p>
            <p>电视剧</p>
            <p>纪录片</p>
            <p>游戏</p>
            <p>影视</p>
            <p>知识</p>
            <p>音乐</p>
            <p>咨询</p>
        </li>
    </ul>
</body>

2.图片示例

在这里插入图片描述

导航

1.代码

代码如下(示例)


```css
<style>
    *{
        margin:0;
        padding: 0;   
     }
  .a{
      background-color:rgb(255, 255, 255) ;
      height: 50px;
  }
    .a a{
        height: 50px;
        float: right;
        line-height: 50px;
        margin-right: 60px;
        text-decoration: none;
        color: black;
        font-weight: 700;
    }
    .c{
        margin-left: 29px;
        margin-top: 15px;
        height: 30px;
    
    }
</style>
</head>
<body>
    <div class="a">
        <img src="./jinshan_logo.png" class="c">
        <a href="666">合作伙伴</a>
        <a href="666">教育版</a>
        <a href="666">价格</a>
        <a href="666">客户案例</a>
        <a href="666">模板库</a>
        <a href="666">首页</a>
    </div>
</body>

2.图片示例

在这里插入图片描述

举报

相关推荐

0 条评论