Html CSS Javascript实现星巴克网站的Demo-传统网页布局(一)

本文主要是介绍Html CSS Javascript实现星巴克网站的Demo-传统网页布局(一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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 eiusmodtempor 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的特性。
下一步 变成响应式布局响应式布局<点击即可

这篇关于Html CSS Javascript实现星巴克网站的Demo-传统网页布局(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/319800

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

SpringBoot+Docker+Graylog 如何让错误自动报警

《SpringBoot+Docker+Graylog如何让错误自动报警》SpringBoot默认使用SLF4J与Logback,支持多日志级别和配置方式,可输出到控制台、文件及远程服务器,集成ELK... 目录01 Spring Boot 默认日志框架解析02 Spring Boot 日志级别详解03 Sp

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断