前端入门:HTML(列表和边框案例)

1.列表知识:

list-style-position有两个值,分别是inside,outside,分别表示在标签里面和在标签外面。

2.案例:

源代码:

html:

<body>

    <div class="bigBox">

        <div>在线解答问题</div>

    </div>

    <ul>

        <li>新手前端适合买什么笔记本?</li>

        <li>前端面试如何谈高薪?</li>

        <li>大厂前端招聘中的内幕</li>

        <li>28岁转前端来得及吗?</li>

        <li>女生前端好找工作吗?</li>

    </ul>

</body>

css:

* {

    padding:0;

    margin:0;

}

.bigBox {

    width: 500px;

    height: 310px;

    background-color:pink ;

    margin-top: 30px;

    margin-left: 30px;

}

.bigBox>div {

    height: 60px;

    font-size: 20px;

    color: #ff6347;

    border-top: 2px solid #4e6ef2;

    border-bottom: 1px solid #4e6ef2;

    line-height: 60px;

    font-weight: bold;

    text-indent: 1em;

}

ul {

    list-style: inside;

    font-size: 18px;

    line-height: 35px;

    margin-top: 30px;

}

ul>li:hover {

    color:blue;

    text-decoration: underline;

}

相关推荐

  1. HTML2:列表表格

    2024-04-22 23:06:01       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-22 23:06:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-22 23:06:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-22 23:06:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-22 23:06:01       20 阅读

热门阅读

  1. git 简单使用

    2024-04-22 23:06:01       12 阅读
  2. php ArrayAccess

    2024-04-22 23:06:01       13 阅读
  3. 乾坤微前端js沙箱机制

    2024-04-22 23:06:01       11 阅读
  4. 面试题:String,你学会了吗?

    2024-04-22 23:06:01       13 阅读
  5. 代码随想录三刷day44

    2024-04-22 23:06:01       12 阅读
  6. 损失函数汇总

    2024-04-22 23:06:01       11 阅读
  7. .NET/C#汇总 —— ASP.NET MVC

    2024-04-22 23:06:01       13 阅读
  8. 深度学习小白向-如何理解batchsize

    2024-04-22 23:06:01       13 阅读