Day19 网页的页首header

今天我们就要着手开始实作拉!而造顺序来的话我们最上方都会有个logo跟导览列，接下来就让我们把学过的东西结合开始制作吧!

通常，我们要先用Html把结构建造出来，会有一张图片logo，以及很多的超连结被包覆在导览列里。

<body>
    <div class="header">
        <a class="logo" href="#">
            <img src="1200x630wa.png" alt="">
        </a>
        <nav>
            <a href="">关於我们</a>
            <a href="">活动办法</a>
            <a href="">下载</a>
            <a href="">产品介绍</a>
            <a href="">客服中心</a>
        </nav>
        
    </div>
</body>


有了这些元素後，我们就可以开始排版罗，设定CSS!

.header img{
            width: 80px;
            height: 100%;
        }

一开始的图片太大了，我们先设定他的宽度像素，高度就设定100%或是你要的高度。

我们想让文字与图片在同一行，就使用display:flex来排版(记得要在外容器设定)，并设定背景颜色。

.header{
            display: flex;
            background-color: rgb(184, 176, 176);
        }

把超连结的底线去掉。

.header a{
            text-decoration: none;
        }

我们想让导览列的文字置中，并且在最後面。

.header nav{
            display: flex;
            width: 100%;
            justify-content: flex-end;
            line-height: 25px;
            font-size: 0px;
        }

一样在外容器nav设定排版flex，flex-end是水平排列放在最後的属性，垂直置中line-height: 25px(设定高度的一半);

这样子就置中并排版在最後了!但文字间是不是有点挤呢，让我们来设定padding，顺便将文字设定成蓝色。

.header nav a{
            display: inline-block;
            padding: 10px;
            color: blue;
            font-size: 16px;
        }

这样简单的一个导览列就完成了!我们还可以做点变化。滑鼠触碰到时变色!

:hover属性，碰到时就会改变CSS成hover所设定的内容里。

我们可以添加当触碰到超连结时，背景图片变成黑色!

.header nav a:hover{
            background-color: black;
        }

赶快设定看看吧，增加网页的趣味性!


<<:  Day18 - [丰收款] 提供信用卡付款以及取得PayToken流程

>>:  Angular ViewChild 与 ViewChildren 介绍

Day 27 测试 React 元件：测试 react-router

mock react-router 的 <Redirect /> 元件是可行的，但这个做...

赌桌上的技术分析 - RSI

身为一个韭菜，进来赌场还是要了解一下牌局的游戏规则，比如说股票每分每秒都可以交易，有分成内盘成交与外...

@Day15 | C# WixToolset + WPF 帅到不行的安装包 [安装包上的图片]

今天 我们来看一下预设的打包档图片要怎麽调整 想要好看的话，基本上应该都是需要做更换的， 官方有提供...

[Day_26]函式与递回_(5)

函式的回传值 函式回传值可以使用tuple回传多个资料，例如:以下ymd函式使用tuple回传时间的...

终端执行py.ipynb档

这里用来纪录最近的发现 在终端(window+R -> cmd)执行jupyter noteb...