Html，Css，JavaScript實作星巴克網站的Demo-傳統網頁布局（一）
本文實作了星巴克網站的傳統布局方法，
圖片素材放在百度網盤
鏈接：https://pan.baidu.com/s/1kzjzY3NNlOEH1qWMgVEzZw
提取碼：lpq1
現提供完整代碼
文章目錄
- Html，Css，JavaScript實作星巴克網站的Demo-傳統網頁布局（一）
- 前言
- 一、HTML，JS部分
- 二、CSS部分
- 總結
前言
文章是照著油管up在線教程撰寫
提示：以下是本篇文章正文內容，下面案例可供參考
一、HTML，JS部分
檔案的說明已經寫在注釋當中
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starbuks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<a href="#"><img src="images/logo.png" class="logo"></a>
<ul>
<li>
<a href="#">Home</a>
<a href="#">Menu</a>
<a href="#">What's New</a>
<a href="#">Contact</a>
</li>
</ul>
</header>
<div class="content">
<div class="textBox">
<h2>It's not just Coffee <br>It's <span>Starbucks</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. </p>
<a href="#">Learn More</a>
</div>
<div class="imgBox">
<!-- 默認為img1，通過點擊小圖示會使得圖片地址變化 -->
<img src="images/img1.png" class="starkbucks">
</div>
</div>
<ul class="thumb">
<li><img src="images/thumb1.png" onclick="imgSlider('images/img1.png');changeCircleColor('#017143')"></li>
<li><img src="images/thumb2.png" onclick="imgSlider('images/img2.png');changeCircleColor('#eb7495')"></li>
<li><img src="images/thumb3.png" onclick="imgSlider('images/img3.png');changeCircleColor('#d752b1')"></li>
</ul>
<ul class="sci">
<li><a href="#"><img src="images/facebook.png"></a></li>
<li><a href="#"><img src="images/twitter.png"></a></li>
<li><a href="#"><img src="images/instagram.png"></a></li>
</ul>
</section>
<script type="text/javascript">
// 更換星巴克飲品種類
function imgSlider(anything) {
document.querySelector('.starkbucks').src = anything;
}
//使得更換半圓的顏色
function changeCircleColor(color) {
const circle = document.querySelector('.circle')
circle.style.background = color;
}
</script>
</body>
</html>
二、CSS部分
代碼如下（示例）：
/* 匯入谷歌字體 */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins' ,sans-serif;
}
section{
position: relative;
width: 100%;
min-height: 100vh;
padding: 0 100px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
}
header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
/* 頭部logo與 ul 在倆端 */
justify-content: space-between;
align-items: center;
}
header .logo{
position: relative;
max-width: 80px;
}
header ul{
position: relative;
display: flex;
}
header ul li {
/* 取消圓點 */
list-style: none;
}
header ul li a {
display: inline-block;
color: #333;
font-weight: 400;
margin-left: 40px;
text-decoration: none;
}
.content{
position: relative;
width: 100%;
display: flex;
/* 文字與圖片左右分布 */
justify-content:space-between;
align-items: center;
}
.content .textBox{
position: relative;
max-width: 600px;
}
.content .textBox h2{
color: #333;
/* em為相對單位 */
font-size: 4em;
line-height: 1.4em;
font-weight: 500;
}
.content .textBox h2 span{
color: #017143;
/* 這里em相對于h2而言 */
font-size: 1.2em;
font-weight: 900;
}
.content .textBox a{
display: inline-block;
margin-top: 20px;
padding: 8px 20px;
background-color: #017143;
color: #fff;
border-radius: 40px;
font-weight: 500;
letter-spacing: 1px;
text-decoration: none;
}
.content .imgBox{
width: 600px;
display: flex;
/* 貼在右邊 */
justify-content: flex-end;
padding-right: 50px;
margin-top: 100px;
}
.content .imgBox img{
max-width: 340px;
}
.thumb{
position: absolute;
left: 50%;
bottom: 20px;
/* 通過left：50% ,tanslate（-50%）起到居中的效果 */
transform: translateX(-50%);
display: flex;
}
.thumb li{
list-style: none;
display: inline-block;
margin: 0 20px;
cursor: pointer;
transition: 0.5s;
}
.thumb li:hover{
/* 經過li后 向上平移15像素點 */
transform: translateY(-15px);
}
.thumb li img{
max-width: 60px;
}
.sci{
position: absolute;
/* 起到垂直方向的居中 */
top: 50%;
right: 30px;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sci li{
list-style: none;
}
.sci li a {
display: inline-block;
margin: 5px 0;
transform: scale(0.6);
/* 顏色反轉 */
filter: invert(1);
}
.circle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #017143;
/* 畫右下角的圓 */
clip-path: circle(600px at right 800px);
}
總結
提示：這里對文章進行總結：
該demo主要利用了flex布局，加深了flex布局的應用，以及應用了一些css3的特性，
下一步 變成回應式布局回應式布局<點擊即可
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294730.html
標籤：其他