前端学习记录

Gordon_Chao

已于 2022-05-09 15:18:04 修改

阅读量101

点赞数 2

分类专栏：前端学习文章标签：前端学习 html

于 2022-05-02 00:29:50 首次发布

本文链接：https://blog.csdn.net/m0_64645111/article/details/124535539

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天主要学习了元素的显示模式：块元素和行内元素。

简单做了一下小米官网的侧边栏；

效果图如下

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
     <style>
         a {
             background-color:#525656;
             color:#fcfdfc;
             display:block;
             width:230px;
             height:40px;
             text-decoration: none;
             text-indent: 2em;
             line-height:40px;


         }
         a:hover {
             background-color:#ff6e00
         }
     </style>
</head>
<body>
     <a href="#">手机 电话卡</a>
     <a href="#">电视 盒子</a>
     <a href="#">笔记本 平板</a>
     <a href="#">出行 穿戴</a>
     <a href="#">智能 路由器</a>
     <a href="#">健康 儿童</a>
     <a href="#">耳机 音响</a>

    
</body>
</html>