首页 前端知识 html导航栏和Css盒子模型笔记

html导航栏和Css盒子模型笔记

2024-08-07 00:08:36 前端知识 前端哥 758 405 我要收藏
编译可选择路径的导航栏:

代码 

    <style>

        a{/*美化链接字体*/

            font-size: 60px;

            color: white;

            text-decoration: none;

        }

        .box1{

            color:yellow;

        }

        .box2{/*更改链接在容器的位置*/

            margin-left: 350px;

        }

        .box{/*容器Css编译*/

            width: 2500px;

            height: 100px;

            margin: auto;/*自适应居中*/

            background-color:darkslateblue;

            border: 1px solid black;

            box-shadow: 10px 10px 10px gray;/*阴影部分*/

            border-radius: 20%;

        }

        li{/*布置导航栏*/

            width: 300px;

            height: 100px;

            display:inline-block;/*改为行标签,但保留块级样式*/

            text-align: center;/*对齐方式*/

        }

        li:hover{

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="box">

        <li class="box2"><a class="box1" href="https://www.youku.com/">优酷:</a></li>

        <li><a href="https://v.youku.com/v_show/id_XNTkzNjcwOTkwOA==.html?s=badbb5792f934ddb82fd&scm=20140719.manual.15366.show_badbb5792f934ddb82fd&spm=a2hja.14919748_WEBHOME_NEW.drawer1.d_zj1_3&s=badbb5792f934ddb82fd">师兄啊师兄</a></li>

        <li><a class="box1" href="https://v.qq.com/">腾讯:</a></li>

        <li><a href="https://v.qq.com/x/cover/324olz7ilvo2j5f/i00350r6rf4.html?j_vid=i4100bexkss&j_cut_vid=x4100i5c3dx&j_is_win_vid=1&j_start=0">吞噬星空</a></li>

        <li><a class="box1" href="https://www.bilibili.com/">哔哩哔哩:</a></li>

        <li><a href="https://www.bilibili.com/bangumi/play/ep829106?spm_id_from=333.1007.0.0">怪兽8号</a></li>

    </div>

</body>

</html>

运行结果:

css盒子模型:

在CSS中,一个盒子由外到内可以分成四个部分:margin外边框),border(边框),padding内边框),content(内容)

盒子模型实际上是一个盒子,可封装html的元素,设计元素与边框的距离

padding:表示盒子内边距填充:

同样:padding-top(上)~padding-bottom(下)添加代码可以用来填充图片或颜色

外边距:margin     内边距:padding     

border(边框):border-width:边界宽度   border-style:边界样式   border-color:边界颜色

>.元素所占用空间为 外边距+边框+内边距+元素本身大小

>.margin:auto 自适应居中

>.*{margin:0px} 取消元素和导航栏的微小间距

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14932.html
标签
评论
发布的文章

前端-axios应用在html文件

2024-08-15 23:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!