HTML静态网页成品作业(HTML+CSS)—— 兰蔻化妆品网页(1个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="t"><div class="logo"><img src="./images/logo.png" alt=""></div><ul class="nav"><li><a href="">首页</a></li><li><a href="">护肤</a></li><li><a href="">彩妆</a></li><li><a href="">香水</a></li></ul></div><div class="banner"><img src="./images/banner_01.png" width="100%" alt=""></div><div class="content"><div class="c-i"><div class="c-tit">热销产品</div><div class="pro-list"><div class="pro-one"><img src="./images/p1.webp" alt=""><div class="pro-name">「小黑瓶」</div><div class="pro-s-name">¥780/30ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p2.webp" alt=""><div class="pro-name">「大眼精华」</div><div class="pro-s-name">¥790/20ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p3.webp" alt=""><div class="pro-name">「发光眼霜」</div><div class="pro-s-name">¥600/15ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p4.webp" alt=""><div class="pro-name">「安神精华」</div><div class="pro-s-name">¥860/50ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p5.webp" alt=""><div class="pro-name">菁纯气垫</div><div class="pro-s-name">¥750</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p6.webp" alt=""><div class="pro-name">菁纯面霜</div><div class="pro-s-name">¥1580/30ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p7.webp" alt=""><div class="pro-name">菁纯眼霜</div><div class="pro-s-name">¥1200/20ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p8.webp" alt=""><div class="pro-name">菁纯面霜</div><div class="pro-s-name">¥1580/30ml</div><div class="pro-s-buy"><button>立即选购</button></div></div></div></div><div class="c-i"><div class="c-tit">尊享服务</div><div class="w-img"><img src="./images/fw.png" alt=""></div></div></div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/26019.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue阶段复习基础知识以及简单的按钮绑定相关的知识!

vue阶段复习 理论练习 请简述Vue、Node.js、Vscode是什么&#xff0c;以及有什么关系 1.vue是一个轻量级、比较灵活的且支持组件开发的网络框架 2.node.js是让JavaScript运行在服务器上的一种环境 3.Vscode是一款有着丰富插件的代码编辑器 4.vscode就如同画布&#xff0c;node…

排查Spring条件注解未能生效的常见原因

在撰写关于排查Spring条件注解未能生效的文章时&#xff0c;可以按照以下结构进行组织&#xff1a; 标题&#xff1a; 解决Spring条件注解不生效的问题&#xff1a;常见原因与解决方案 引言&#xff1a; 简要介绍Spring条件注解&#xff08;如Conditional&#xff09;的用途&…

网卡聚合链路配置

创建名为mybond0的绑定&#xff0c;使用示例如下&#xff1a; # nmcli con add type bond con-name mybond0 ifname mybond0 mode active-backup添加从属接口&#xff0c;使用示例如下&#xff1a; # nmcli con add type bond-slave ifname enp3s0 master mybond0要添加其他从…

反射...

一、反射的定义 二、获取Class对象三种方式 全类名&#xff1a;包名类名。 public class test {public static void main(String [] args) throws ClassNotFoundException {//第一种方式Class class1Class.forName("test02.Student");//第二种方法Class class2Stud…

【区块链】深入解析Proof of Work (PoW): 区块链技术的核心驱动力

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 深入解析 Proof of Work (PoW): 区块链技术的核心驱动力引言一、PoW基本概念1.1…

C++ 虚函数表 vtable

目录 1.测试代码2.查看虚函数表Widget 虚函数表虚函数表 参考 本篇文章通过小实验来了解了解虚函数表&#xff0c;测试环境 ubuntu16 gcc 5.4.0 1.测试代码 测试代码中定义了两个类&#xff0c;后面将会查看这两个类的虚函数表 #include <iostream> using namespace s…

C++ 判断目标文件是否被占用(独占)(附源码)

在IM软件中发起文件发送时,如果要发送的是某word文件,并且该word文件被office打开,则会提示文件正在被占用无法发送,如下所示: 那文件被占用到底是如何判断出来的呢?其实很简单,调用系统API函数CreateFile,打开该文件(OPEN_EXISTING),传入FILE_SHARE_READ共享读标记…

探索Chrome DevTools的高级技巧与隐藏功能

Chrome DevTools是网页开发者不可或缺的调试工具&#xff0c;它提供了丰富的功能&#xff0c;帮助开发者快速诊断和解决问题。然而&#xff0c;除了常见的功能&#xff0c;如元素检查、网络监控和JavaScript调试之外&#xff0c;DevTools还有许多不为人知的强大功能和技巧。本文…

SAP乘云而上

上周四参加了SAP原厂组织的“SAP乘云而上私享会”&#xff0c;由德勤赞助。活动主要的内容是介绍了RISE with SAP的上云服务包并且参观了SAP Labs。 现阶段对于大中型企业客户&#xff0c;SAP力推的是S/4HANA PCE(Private Cloud Edition)私有云版本&#xff0c;这个版本我在之…

Windows Docker Desktop 安装 postgres

Docker Desktop安装 postgres 12.6 数据库 step docker pull postgres:12.6提前创建F:/D-dockerData/postgres-12.6/data 文件夹用于bind mountdocker run docker run --name postgres-12.6 \-e POSTGRES_PASSWORD123456 \-p 5432:5432 \-v F:/D-dockerData/postgres-12.6/d…

react 0至1 【jsx】

1.函数调用 // 项目的根组件 // App -> index.js -> public/index.html(root)const count 100function getName () {return test }function App () {return (<div className"App">this is App{/* 使用引号传递字符串 */}{this is message}{/* 识别js变…

Androidstudio项目加载不出来,显示Connect timed out

Android studio加载不出来所需要的环境依赖,99%的问题都是网络原因 解决办法有两个: 1.科学上网 2.使用国内的镜像 方法一自行解决,下面重点介绍方法二 在项目目录下找到gradle->wrapper->gradle-wrapper.properties 将项目的distributionUrl改为https://mirrors.cl…

http网络服务器

wwwroot(目录)/index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>比特就业课</title>…

从零到发布:npm插件包终极指南

在JavaScript和Node.js的生态系统中&#xff0c;npm&#xff08;Node Package Manager&#xff09;是最重要的包管理工具之一。通过npm&#xff0c;开发者可以共享代码、复用他人的工作成果以及协作开发。本指南将详细介绍如何通过npm发布自己的插件包&#xff0c;以便其他开发…

平安养老险陕西分公司荣获“2021-2023年乡村振兴‘三村工程’先进机构”

5月27日&#xff0c;中国平安成立36周年司庆暨三省推广启动大会顺利召开。会上&#xff0c;平安养老险陕西分公司获“2021-2023年乡村振兴‘三村工程’先进机构”荣誉表彰。 过去三年间&#xff0c;平安养老险陕西分公司始终坚持金融为民&#xff0c;在平安集团、平安养老险的指…

注解 - @CookieValue

注解简介 在今天的每日一注解中&#xff0c;我们将探讨CookieValue注解。CookieValue是Spring框架中的一个注解&#xff0c;用于将HTTP请求中的Cookie值绑定到控制器方法的参数上。 注解定义 CookieValue注解用于从HTTP请求中的Cookie提取值&#xff0c;并将其绑定到控制器方…

Linux系统sort排序与uniq去重

Linux系统sort排序与uniq去重 工作中数据太多太杂&#xff0c;不便于查看分析。这时是可以采用sort将数据排序&#xff0c;同时可以配合uniq命令进行去重。 场景&#xff1a;云平台中&#xff0c;日常工作包含巡检工作&#xff0c;是通过事先编写好的巡检脚本去检测云平台的和…

阿赵UE引擎C++编程学习笔记——查找和控制Actor

大家好&#xff0c;我是阿赵。   在使用Unity引擎的时候&#xff0c;经常会用到的一个功能是通过GameObject.Find去查找场景里面的对象。这次变成在UE引擎里面做同样的事情&#xff0c;这篇文章主要做的事情有2个&#xff0c;第一是从场景里面找到特定的Actor&#xff0c;第二…

MFC上下文菜单与定时器学习笔记

本博文简单介绍了上下文菜单以及定时器的知识内容&#xff0c;作为笔记发表在csdn上面。 在这里插入图片描述 菜单资源的使用 添加菜单资源加载菜单资源&#xff1a; 注册窗口类时设置菜单创建窗口传参设置菜单在主窗口WM_CREATE消息中利用SetMenu函数设置 加载菜单资…

Python编写和管理装饰器库之wrapt使用详解

概要 在 Python 编程中,装饰器(decorator)是一个非常强大的工具,可以在不修改原函数代码的情况下,增强函数的功能。然而,编写装饰器有时会遇到一些复杂的问题,比如保持被装饰函数的元信息、正确传递参数等。wrapt 库提供了一组工具,帮助开发者更容易地编写和管理装饰器…