web第二次作业

最新推荐文章于 2024-09-28 19:02:04 发布

我有毓毓症

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量885

点赞数 15

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_81653282/article/details/140597211

版权

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="PWBJBL">
        <title>导航栏制作</title> 
        <style>
            #navigation1{margin: auto;text-align: center;}
            .RightBorder{
                /*text-decoration：none 去除文本多余的修饰*/
                text-decoration: none;
                color: black;
                border-right:solid 1px black;
                text-align: center;
                padding: 0 5px;
            }
          
        </style>
    </head>
    <body>
        <div id="navigation1">
            <a href=" " 
            target="_blank" class="RightBorder">首页</a >
            <a href="https://pindao.suning.com/?safp=d488778a.homepagev8.126605238663.6&safpn=10001" 
            target="_blank" class="RightBorder">商城</a >
            <a href="https://dianqi.suning.com/?safp=d488778a.homepagev8.126605238663.5&safpn=10001" 
            target="_blank" class="RightBorder">活动</a >
            <a href="https://redbaby.suning.com/?safp=d488778a.13701.0.78fd97a8e1&safpn=10007" 
            target="_blank" class="RightBorder">我的</a >
            <a href="https://qiang.suning.com/pc/brandBenefits.html?safp=d488778a.13701.0.d9e23bea58&safpn=10007"
            target="_blank" class="RightBorder">设置</a >
        </div>
    </body>
</html>

css盒子模型：

一.概念

盒子模型是网页制作中一个重要的知识点。在使用DIV+CSS制作网页过程中，都是基于盒子模型的。\n\n那到底什么是盒子模型？盒子模型其实就是CSS看待元素的一种方式，CSS将每个元素都看作有一个盒子表示。\n\n当我们在浏览网页时，我们看到网页中的内容，例如图片、文章、导航菜单等等。它们的在网页实际占据的空间，并不是我们看到的那样。而是，把内容看成了一个盒子模型，实际占据的就是盒子模型的大小。

二.组成

盒子模型的组成包括：内容(content)、内边距(padding)、边框(border)、外边距(margin)。\n\n盒子是矩形结构，所以边框、内外边距这些属性都分别对应上下左右4条边，可以对这4条边进行不同的设置。

三、盒子模型的成员

在盒子模型组成中已经简单的介绍了盒子模型的成员，在这个单个的去介绍下：边框、外边距、内边距。学习以二八定律为准，只说下常用的，如果要深入可以查阅W3C。

盒子模型是矩形结构，所以在设置边框、外边距、内边距的时候，是包含上下左右的，而且设置方法都是一样的，可以统一设置也可以局部设置，下面简单介绍下，以padding为例：

padding:3px; 上下左右统一设置

padding: 20px 2px; 上下20 左右2px

padding:5px 1px 6px; 上5px 左右1px 下6px

padding:3px 2px 5px 1px; 上3px 右2px 下5px 左1px，即为顺时针方向。

1.border边框

border-color：设置边框颜色。值可以是颜色值（red、green等）或十六进制颜色(#FFF0000)。

border-width：边框粗细。它的值有thin(细边框)、medium(默认值，中等边框)、thick(粗边框)。也可以设置像素值。