导航案例（内边距撑开盒子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       ul {
          /* 默认的内边距  清除 */
          padding: 0;
          width: 100%;
          height: 80px;
          background-color: #242424;

       }
       ul li {
           /* 内容可能溢出 */
           /* width: 150px; */

           display: inline-block;
           line-height: 80px;
           text-align: center;
           /* 内边距撑开盒子  好事  */
           padding: 0px 15px;
       }
       ul li a {
           text-decoration: none;
           color: #fff;
       }
       .bg0 {
           background-color: palegoldenrod;
       }
       ul li:hover {
           background-color: palegoldenrod;
       }
    </style>
</head>
<body>

    <!-- ul > li > a  -->
    <ul>
        <li class="bg0"><a href="#">发现音乐</a></li>
        <li><a href="#">我的音乐</a></li>
        <li><a href="#">朋友</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">音乐人</a></li>
        <li><a href="#">下载客户端</a></li>
    </ul>
</body>
</html>

原文地址：https://www.cnblogs.com/xuixui/p/12254897.html

时间： 2024-10-15 07:59:13

导航案例（内边距撑开盒子）的相关文章

CSS之盒模型边框，内边距，外边距，阴影，圆角

盒子模型盒子模型盒子模型有元素内容.边框(border).内边距(padding).外边距(margin)组成: 盒子里面的文字和图片等元素是内容区域: 盒子的厚度我们称为盒子的边框: 盒子内容与盒子之间的距离是内边距: 盒子与盒子之间的距离是外边距: 标准盒子模型盒子边框(border) border: border-width || border-style || border-color 属性作用 border-width 定义边框粗细,单位是 px border-style

css属性操作2（外边距与内边距<盒子模型>）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>外边距与内边距</title>

css内边距与外边距的区别

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性

固定布局（为栏设定内边距和边框）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" type="text/css" href="./normalize.css"> <script> (function() { if (!

行内元素内边距对左右下起作用，外边距只对左右起作用

*{margin:0;padding:0;} .s1{background:#f00;margin:20px;} .s3{background:#ff0;padding:20px;} .s4{background:#00f;padding:0 20px;} <span class="s1">03月26日</span><span class="s2"></span><span class="relatv

(转)CSS3全局实现所有元素的内边距和边框不增加

全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减它还有一个关键作用--让有边框的盒子正常使用百分比宽度.但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决. 推荐写法是 1 html { 2 box-sizing: border-box; 3 } 4 *, *:before, *:after { 5 bo

盒模型——内边距

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>postion</title> <style> .box1{ /* *使用width来设置盒子内容的宽度 * height来

关于盒模型的外边距padding和内边距margin

边框border属性值 solid实线 dashed虚线 dotted点线 double双实线 /* 内边距 */padding:20px 30px 30px 30px;若有四个值代表上/右/下/左 padding: 10px 20px 30ox;三个值代表上.左右.下 padding: 10px 20px;两个值代表上下/左右 padding: 10px;一个值代表四个方向一致 /* 外边距 */ margin:20px 30px 30px 30px;若有四个值代表

8 清除浮动方式/小米导航案例

清除浮动方式之伪元素清除法: <style type="text/css"> .top_bar{ height: 200px; border:1px solid red; } .child1{ width:200px; height:200px; background-color: green; float: left; } .child2{ width: 200px; height:200px; background-color: orange; float: right