网站首页的布局设计,网站查询入口,宁德市古田县,个人网站建设流程 域名注册的选择这一篇文章中#xff0c;我会教你如何做一个AirBnb Experiences的克隆网站。主要涵盖React中Props的使用。
克隆网站最终呈现的效果#xff1a;
1. 使用vite构建基础框架
npm create vitelatestcd airbnb-project
npm install
npm run dev2. 构建网站的3个部分
网站从上…这一篇文章中我会教你如何做一个AirBnb Experiences的克隆网站。主要涵盖React中Props的使用。
克隆网站最终呈现的效果
1. 使用vite构建基础框架
npm create vitelatestcd airbnb-project
npm install
npm run dev
2. 构建网站的3个部分
网站从上至下主要分为导航栏、简介和活动栏三个部分。 我们在public文件夹之下建立components文件夹然后分别建立Navbar.jsxHero.jsx和Card.jsx这三个文件分别对应网站的三个部分。 另外在public文件夹之下建立images文件夹包含网站要用的所有图片。 photo-grid.png wedding-photography.png mountain-bike.png airbnb-logo.png katie-zaferes.png star.png
3. 删除index.css中的所有内容
index.css
* {box-sizing: border-box;
}body {margin: 0;font-family: Poppins, sans-serif;
}4. 导航栏
Navbar.jsx
export default function Navbar() {return (navimg src/images/airbnb-logo.png classNamenav--logo//nav)
}对应的index.css中的内容。
nav {height: 70px;display: flex;padding: 20px 36px;box-shadow: 0px 2.98256px 7.4564px rgba(0, 0, 0, 0.1);
}.nav--logo {max-width: 100px;
}5. 简介栏
Hero.jsx
export default function Hero() {return (section classNameheroimg src/images/photo-grid.png classNamehero-photo /h1 classNamehero-headerOnline Experiences/h1p classNamehero--textJoin unique interactive activities led by one-of-a-kind hosts-all without leaving home./p/section)
}对应的index.css中的内容。
section {padding: 20px;
}.hero {display: flex;flex-direction: column;
}.hero--photo {max-width: 400px;align-self: center;
}.hero--header {margin-bottom: 16px;
}.hero--text {margin-top: 0;
}6. 活动栏
Card.jsx
export default function Card(props) {let badgeTextif (props.item.openSpots 0){badgeText SOLD OUT} else if (props.item.location Online){badgeText ONLINE}return (div classNamecard{badgeText div classNamecard--badge{badgeText}/div}img src{/images/${props.item.coverImg} }classNamecard--imagealtImage of Katie Zaferes./div classNamecard--statsimg src/images/star.png classNamecard--staraltStar icon. /span{props.item.stats.rating}/spanspan classNamegray({props.item.stats.reviewCount}) · /spanspan classNamegray{props.item.location}/span/divh2{props.item.title}/h2pspan classNameboldFrom ${props.item.price}/span / person/p/div)
}对应的index.css中的内容。
.card {width: 175px;font-size: 0.75rem;flex: 0 0 auto;display: flex;flex-direction: column;position: relative
}.card--image {width: 100%;border-radius: 9px;margin-bottom: 9px;
}.card--title {overflow: hidden;text-overflow: ellipsis;
}.card--stats {display: flex;align-items: center;
}.card--star {height: 14px;
}.card--price {margin-top: auto;
}.card--badge{position: absolute;top: 6px;left: 6px;background-color: white;padding: 5px 7px;border-radius: 2px;font-weight: bold;
}h2 {font-size: 0.75rem;font-weight: normal;
}.gray {color: #918E9B;
}.bold {font-weight: bold;
}7. 删除App.css中的所有内容
8. 准备需要的数据
在src文件夹之下建立data.jsx文件准备在活动栏中需要呈现的内容。 data.jsx
export default [{id: 1,title: Life Lessons with Katie Zaferes,description: I will share with you what I call \Positively Impactful Moments of Disappointment.\ Throughout my career, many of my highest moments only came after setbacks and losses. But learning from those difficult moments is what gave me the ability to rise above them and reach my goals.,price: 136,coverImg: katie-zaferes.png,stats: {rating: 5.0,reviewCount: 6},location: Online,openSpots: 0,},{id: 2,title: Learn Wedding Photography,description: Interested in becoming a wedding photographer? For beginner and experienced photographers alike, join us in learning techniques required to leave the happy couple with memories thatll last a lifetime.,price: 125,coverImg: wedding-photography.png,stats: {rating: 5.0,reviewCount: 30},location: Online,openSpots: 27,},{id: 3,title: Group Mountain Biking,description: Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!),price: 50,coverImg: mountain-bike.png,stats: {rating: 4.8,reviewCount: 2},location: Norway,openSpots: 3,}
]9. 更新App.jsx中的内容
App.jsx
import Navbar from ../public/components/Navbar
import Hero from ../public/components/Hero
import Card from ../public/components/Card
import data from ./dataexport default function App() {const cards data.map(item {return (Cardkey {item.id}item {item}/)})return (divNavbar /Hero /section classNamecards--list{cards}/section/div)
}对应的index.css中的内容。
.cards--list {display: flex;flex-wrap: nowrap;gap: 20px;overflow-x: auto;
}10. 完整的index.css
* {box-sizing: border-box;
}body {margin: 0;font-family: Poppins, sans-serif;
}nav {height: 70px;display: flex;padding: 20px 36px;box-shadow: 0px 2.98256px 7.4564px rgba(0, 0, 0, 0.1);
}h2 {font-size: 0.75rem;font-weight: normal;
}.gray {color: #918E9B;
}.bold {font-weight: bold;
}.nav--logo {max-width: 100px;
}section {padding: 20px;
}.hero {display: flex;flex-direction: column;
}.hero--photo {max-width: 400px;align-self: center;
}.hero--header {margin-bottom: 16px;
}.hero--text {margin-top: 0;
}.cards--list {display: flex;flex-wrap: nowrap;gap: 20px;overflow-x: auto;
}.card {width: 175px;font-size: 0.75rem;flex: 0 0 auto;display: flex;flex-direction: column;position: relative
}.card--image {width: 100%;border-radius: 9px;margin-bottom: 9px;
}.card--title {overflow: hidden;text-overflow: ellipsis;
}.card--stats {display: flex;align-items: center;
}.card--star {height: 14px;
}.card--price {margin-top: auto;
}.card--badge{position: absolute;top: 6px;left: 6px;background-color: white;padding: 5px 7px;border-radius: 2px;font-weight: bold;
}11. 上传到github
12. 上传到netlify
