一、业务网站展示
二、设计思路
交互性：简洁明了的展示商品页面，亮点在于：滑动切换商品，变换图片底部颜色，实现视觉冲击。
三、html规范
<!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>Starbucks Website Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<a href="#" class="logo"><img src="../very_cool_css-master//素材/星巴克/logo.png"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">what's New</a></li>
<li><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.Deserunt laboriosam molestias maiores ipsam eius. Accusantium debitis, esse, delectus voluptate nam atque cum distinctio a minima veritatis non facere et? Ullam.</P>
<a href="#">Learn More</a>
</div>
<div class="imgBox">
<img class="starbucksGreen" src="../very_cool_css-master/素材/星巴克/img1.png">
</div>
</div>
<ul class="thumb">
<li><img src="../very_cool_css-master/素材/星巴克/thumb1.png" Onmouseover="imgSilder('../very_cool_css-master/素材/星巴克/img1.png');changeCircleColor('#017143')"></li>
<li><img src="../very_cool_css-master/素材/星巴克/thumb2.png" Onmouseover="imgSilder('../very_cool_css-master/素材/星巴克/img2.png');changeCircleColor('#eb7495')"></li>
<li><img src="../very_cool_css-master/素材/星巴克/thumb3.png" Onmouseover="imgSilder('../very_cool_css-master/素材/星巴克/img3.png');changeCircleColor('#d752b1')"></li>
</ul>
<ul class="sci">
<li><a href=""><img src="../very_cool_css-master/素材/星巴克/facebook.png"></a></li>
<li><a href=""><img src="../very_cool_css-master/素材/星巴克/instagram.png" alt=""></a></li>
<li><a href=""><img src="../very_cool_css-master/素材/星巴克/twitter.png" alt=""></a></li>
</ul>
<script>
function imgSilder(anything){
document.querySelector('.starbucksGreen').src = anything
}
function changeCircleColor(color){
const circle = document.querySelector(".circle");
circle.style.background = color
}
</script>
</section>
</body>
</html>
三、CSS要点
1.规范通用符
box-sizing:border-box即使使用padding也不会撑开原有盒子，但是content-box可能会撑开原有盒子
2 section使用flex布局
详解css3 flex布局
min-height
CSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。
3.header栏目
header可以利用标签
绝对定位：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
相对定位：相对于自己的定位
4.侧边栏
flex-direction
flex-direction:row 容器的主轴被定义为与文本方向相同;如果是横状，则方向不改变
flex-direction:column flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同; 如果是横状则改变方向为竖状。
5.总体代码
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
section{
position: relative;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
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;
font-size: 4em;
line-height: 1.4em;
font-weight: 500;
}
.content .textBox h2 span{
color: #017143;
font-size: 1.2em;
font-weight: 900;
}
.content .textBox p{
color: #333;
font-family: sans-serif;
font-weight: 450;
}
.content .textBox a{
/* 先设置为行内样式再方便去调节margin值 */
display: inline-block;
margin-top: 20px;
padding:8px 20px;
background: #017143;
color: #fff;
border-radius: 40px;
font-weight: 400;
/* CSS 的 letter-spacing 属性用于设置文本字符的间距表现 */
letter-spacing: 1px;
text-decoration: none;
}
.content .imgBox{
width: 600px;
display: flex;
justify-content: flex-end;
padding-right: 50px;
margin-top: 50px;
}
.content .imgBox img{
max-width: 340px;
}
.thumb{
position:absolute;
display: flex;
left:50%;
bottom: 20px;
transform: translateX(-50%);
transition: 0.5s;
}
.thumb li{
list-style: none;
display:inline-block;
margin: 0 20px;
/* cursor : 网页浏览时用户鼠标指针的样式或图形形状。pointer是一只手 */
cursor: pointer;
}
.thumb li:hover{
transform: translateY(-15px);
}
.thumb li img{
max-width: 60px;
}
.sci{
position: absolute;
top:50%;
right:30px;
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()方法来实现元素的缩放效果。scale沿x轴和y轴方向缩放 */
transform: scale(0.6);
/* CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素 */
/*invert使倒转 */
filter: invert(1);
}
.circle{
position: absolute;
top: 0;
right: 0;
width:100%;
height: 100%;
background: #017143;
clip-path:circle(660px at right 800px)
}
四、js交互设计
鼠标滑动事件
οnmοuseοver=“imgSilder(‘.img1.png’);changeCircleColor(‘#017143’)”
利用事件驱动函数onmouseover完成图片与底部颜色切换
封装函数如下
function imgSlider(anything){
document.querySelector('.starbucksGreen').src = anything
}
function changeCircleColor(color){
const circle = document.querySelector('.circle')
circle.style.background = color
}