终於跳脱 header 的部分来到了下面文章列表啦,总觉得光是上半部就做了好久,不知道完赛前能不能把整个画面刻完XDD
// Post.js
import React from "react";
export default function Article() {
return <div>Article Content</div>;
}
-----------------------------------------
// App.js
import "../src/assets/sass/main.sass";
import Header from "./components/Header";
import Article from "./components/Article";
function App() {
return (
<div className="container">
<Header />
<Article />
</div>
);
}
export default App;
然後也在 sass 的部分也新增一个 partial,现在用起来也挺习惯这种模组化的方式了!
// main.sass
@import "variable"
@import "basic"
@import "typography"
@import "header"
@import "dropdown"
@import "modal"
@import "article"
第一位挑战选手是——广告版位!这个感觉不难,一起来动手玩创意吧!(????
//article.sass
.ads
padding: 24px
text-align: center
background-color: $gray
img
max-height: 150px
// Post.js
import React from "react";
export default function Article() {
return (
<div>
<div className="ads">
<a href="/">
<img
alt="ads"
src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
/>
</a>
</div>
</div>
);
}
恩⋯⋯对,广告的部分大概就是这样,应该用看的就蛮懂了XD,图片的部分就直接抓官网上的 link来实作~
首页头条文章的部分!第一篇文章带的图会是最大张的,而图片的效果会有 hover 红色的样式
首先我们把内容都先摆上去,来慢慢修它~~
// Post.js
import React from "react";
export default function Article() {
return (
<div>
<div className="ads">
<a href="/">
<img
alt="ads"
src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
/>
</a>
</div>
<div className="post">
<div className="post-headline">hot now</div>
<div className="post-img-wrapper">
<img
className="post-img"
alt="post-img"
src="https://media.vogue.com.tw/photos/60b9a4fcf37df9e2f39b0216/2:3/w_2880%2cc_limit/29711-1_V.jpg"
/>
</div>
<div className="post-body">
ENTERTAINMENT
<div className="post-title">
宝藏男孩持修:「对我来说男子气概无关外表,而是要负责任。」
</div>
BY NICOLE LEE 2021年6月7日
</div>
</div>
</div>
);
}
针对每个要修改的内容,也都加上 className 并且顺便排版~
// article.sass
.ads
// ...
.post
padding: 0 5vw
border-top: 1px solid $primary-color
@extend %link-font
font-weight: 100
&-headline
width: 17vw
border-top: 10px solid $primary-color
margin: 0
margin-right: auto
padding: 0
font-family: $logo-font
font-size: 64px
font-weight: 200
text-transform: capitalize
&-img-wrapper
width: 90vw
height: 700px
overflow: hidden
margin-top: 64px
&-img
max-width: 90vw
&-body
margin: 0 0 0 240px
border-left: 1px solid $primary-color
padding: 32px 200px 0 64px
&-title
@extend %logo-font
font-size: 48px
padding: 16px 0
排玩版後的 class 样式大概是这样,这边可以看到有 @extend 去快速套用了字型!之前我们已经设定好的就不用重复编写罗~
这个我真的找超久才找到解法,就是 vogue 上图片 hover 的样式,原本想说应该简单套上 overlay 就可以了吧,但结果不是,overlay 虽然可以使用 opacity 让图片淡化来显示背景色,但这样就不是红色滤镜的感觉,会有粉白色的样式,所以搜寻了很久,才发现原来要使用 svg filter 的做法来改变图片的 RGB 颜色
作法如下:
首先在 html 的地方新增 svg, filter 以及 feColorMatrix 的 tag,feColorMatrix 就是滤镜本身,透过矩阵计算过图片颜色後来套用新的滤镜颜色,可以在这个网站上来练习看看用法
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="red-filter">
<feColorMatrix
type="matrix"
values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"
></feColorMatrix>
</filter>
</svg>
之後我们先把红色的 svg filter 放入 html 中
// article.sass
// ...
.post
padding: 0 5vw
border-top: 1px solid $primary-color
@extend %link-font
font-weight: 100
// ...
&-img
max-width: 90vw
&:hover
color: $dark-gray
cursor: pointer
transition: .1s ease
filter: url(#red-filter)
hover 的部分在指定 filter 的 id 来套用,就大功告成啦!没想到短短几行花了我好久在找做法⋯⋯
大概就是酱!我们的 banner 也差不多了~总觉得後面几篇都在飙车XD
明天见啦~~~
除此之外,也欢迎大家走走逛逛关於我们团队夥伴的文章
juck30808 - Python - 数位行销分析与 Youtube API 教学
SiQing47 - 前端?後端?你早晚都要全端的,何不从现在开始?
<<: Day26 X Memory Management In JavaScript
>>: 【Day30】[演算法]-线性搜寻法Linear Search
今天要来介绍网页常用的元素border,边框的意思。 border 我们今天要建立一个简单的栏位版型...
index=mft_log sourcetype="mft:xferlog" ...
今天稍微提一下 design patterns 的分类, 也看看设计模式:Prototype, S...
大家好~ 我是五岁~ 今天要来画可爱的殭屍女孩~ 风格类似是中国殭屍,她外观上有两个巨大的手手可以跟...
从Android 3.0(API11) 起,Google 支援Fragment。今天稍微说说什麽是F...