整个画面中最先看到的是 header 的 nav bar ,就让我们从这里开始刻吧!
首先在 App.js 中放入 html 的内容,并且加上相应的 class 待会去做设定 style。
import "../src/assets/sass/main.sass";
function App() {
return (
<div className="container">
<nav className="header">
<div className="top">
<label className="logo">VOGUE</label>
<label className="menu">
<label className="menu-item">
<div className="dropdown">
<a href="/" className="select">
taiwan
</a>
</div>
<a href="/">membership</a> ---
</label>
</label>{" "}
</div>
<div className="sub-menu">
<a href="/">FASHION</a>
<a href="/">BEAUTY</a>
<a href="/">ENTERTAINMENT</a>
<a href="/">LIFESTYLE</a>
<a href="/">LUXURY</a>
<a href="/">VIDEO</a>
<a href="/">VOGUE有意识</a>
</div>
</nav>
</div>
);
}
export default App;
接着我们来新增 _header.sass 这个 partial ,并且将它引入在 main.sass 中。
sass 中的阶层,从最大的 class → header 来开始做 style 的设定,依照 VOGUE 官网的样式去模仿,整个 header 底下会有 一个 box shadow,而这个属性就可以在 header 整个区块上去做设定了,依样画葫芦的去把剩下的内容设定完,而 padding 以及 margin 的部分则是先抓个大概值。
可以看到我的其他 class 设定是在 header 底下的,这麽做可以避免去渲染到其他相同名称的 class ,因为目前的设定只有在 header 下的 class 名称或是 tag 才会生效。
.header
box-shadow: -2px 2px 5px #0000001a
border-top: 12px solid $primary-color
.top
padding: 24px
.logo
font-size: 100px
font-family: $logo-font
.menu
padding: 16px
position: absolute
right: 0px
.dropdown
position: relative
display: inline-block
.sub-menu
border-top: 1px solid #caccce
padding: 20px
a
letter-spacing: 0.2em
padding: 8px
font-size: 12px
font-weight: 900
今天就先把基本的内容摆好,接下来会来针对每个细项去做 style 的调整,感谢今天的收看~
除此之外,也欢迎大家走走逛逛关於我们团队夥伴的文章
juck30808 - Python - 数位行销分析与 Youtube API 教学
SiQing47 - 前端?後端?你早晚都要全端的,何不从现在开始?
>>: 2021-Day26. Serverless(十 四):AWS - SSL / TLS 凭证
尾声 最後一天想回归到第一天时对自己说的话「看完这些文章的读者能够对 Next.js 有更多的了解,...
暂定为手机游戏,那就让基本子弹自动射击(手机操控不意,让玩家只做简易核心的操作就好) ,先把上一篇制...
要渲染 Livewire 元件也非常简单,主要会分成两种常用的方法,以下会分别对照 官方文件 来做示...
如果不懂甲方或者乙方在专案中的意思,我猜你大概一开始就是待在做自己产品的公司吧。不过就算都是在做产品...
前言 用了前面的范例,尤其是历史资料,会发现有可能重复输入的状况,或是重复资料输入不进去。这是我故意...