web前端综合案例——小兔鲜首页(html+css)

news2024/11/18 2:41:22

前言:我这里只使用了html和css,js没有使用

项目源代码:https://pan.baidu.com/s/1alnekYEu5F9XwHTW7dO5RA?pwd=qjhd

页面效果:

 

项目准备阶段:

1.准备项目相应的图片素材,设计稿。

2.创建项目:

2.1 项目名字为:xtx-pc-client

2.2 css里面创建了三个分别为

        base.css 这个是全局设置的元素

        common.css 这个是有公用部分的元素

        index.css这个是首页要用到的元素

2.3 images这个里面放网站设计需要固定的图片 网站logo、精灵图等.......

2.4 uploads整个里面放网站设计那些变动的图片 网站商品图片、广告等......

2.5 favicon整个放网页标题图标

2.6 index.html整个就是我们网站的首页

3.准备ndex.html的dead部分

        

 准备好这些之后我们就开始写body部分

body部分:

首相我们要写base.css里面的全局公共部分:

 然后观察设计图发现:快捷菜单和版权部分是每一个页面都需要的所以我们在 common.css写样式

 然后首页中其他的部分都是index.html中独有的我们就写在index.css中:

这个是整个页面的简单框架 :

 这里是一个简单的小兔鲜儿首页的页面,适合刚学完html+css的同学来练练手,上面的项目源代码在连接里面 是免费的哦 有兴趣的可以去看看。

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

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

相关文章

用反射设计通用的实例化对象方案

需求 对象的相关信息存储在javabean.properties文件中,通过读取properties文件中的信息,实例化对象,要求程序不能硬编码,即程序可以通用,针对不同的对象,都可以实例化。仅需修改配置文件,不需要…

网络基础初识

目录 网络发展 时代背景 计算机内部 协议 协议的创立 什么是协议? 网络协议 OSI七层模型 TCP/IP五层(或四层)模型 硬件方面 -- 补充 路由器 协议的分层 网络传输基本流程 1.协议报头 2.局域网 查询自己的MAC地址 局域网通信的原理 跨路由器传递数…

以太网协议详解

文章目录 前言一、MAC地址二、以太网协议1. 以太网数据格式2. MAC地址表 前言 假设有这样一张网络拓扑图: 在拓扑图中有A、B、C三台计算机,并且它们三个是通过中间的路由器连接的。这时候计算机A要向计算机C发送一条数据,那么数据是怎么样到…

nvm教程

介绍 这个东西,是nodejs官网有个链接里面有很多列表,这是其中一个 下载 https://github.com/coreybutler/nvm-windows/releases 安装 安装前,将.npmrc文件删除;文件位置: C:\Users{User}\AppData\Roaming\npm C:\…

chatgpt赋能python:Python单行for:如何简化你的代码

Python单行for:如何简化你的代码 在Python编程中,for循环是必不可少的一部分,它可以用于遍历列表、元组和字典等各种数据类型。而Python单行for则是一种更加简单、更加紧凑的语法形式,可以让你更加高效地遍历和处理数据。 什么是…

STL--mapset(手撕AVL树,红黑树)

1. 关联式容器 在初阶阶段,我们已经接触过STL中的部分容器,比如:vector、list、deque、 forward_list(C11)等,这些容器统称为序列式容器,因为其底层为线性序列的数据结构,里面 存储的是元素本身。那什么是关…

Yolov5涨点神器:注意力机制---多头上下文集成(Context Aggregation)的广义构建模块,助力小目标检测,暴力涨点

1.数据集性能验证 在crack道路缺陷检测任务中,多头上下文集成(Context Aggregation)的广义构建模块实现暴力涨点mAP50从0.954提升至0.992 🏆🏆🏆🏆🏆🏆Yolov5/Yolov7魔术师🏆🏆🏆🏆🏆🏆 ✨✨✨魔改网络、复现前沿论文,组合优化创新 🚀🚀🚀…

内网渗透(八十三)之安装ADCS证书服务

安装ADCS证书服务 本编文章,我们来讲解安装ADCS证书服务,这里注意一下,因为证书服务特性(不能更改计算机名称、网络参数),因此在部署证书服务器时建议独立部署,ADCS证书服务不能和域控是同一台服务器,这里我用的一台加入域的Server2016搭建 1、以 Enterprise Admins …

chatgpt赋能python:Python内置变量的重要性及常用变量介绍

Python内置变量的重要性及常用变量介绍 Python是一种简单易学的脚本语言,其特点是直观、易读、代码简单且易维护。Python内置变量是开发人员在Python编程中必不可少的一部分,它们在程序中扮演着重要的角色。接下来我们来介绍一些常用的Python内置变量。…

chatgpt赋能python:Python的内部类:优雅的封装性与灵活的应用

Python的内部类:优雅的封装性与灵活的应用 Python的内部类是面向对象编程中强大的封装性工具,它在类的内部定义其他类来辅助实现某些功能,可以有效避免类命名冲突、提高代码灵活性等。本文将详细介绍Python内部类的特点及应用场景&#xff0…

chatgpt赋能python:Python单行判断:提高代码效率的利器

Python单行判断:提高代码效率的利器 在Python编程中,单行判断是常用的一种技巧。相比使用if语句,单行判断可以让代码更加简洁、优美,提高代码的效率和可读性。本文将介绍Python单行判断的用法及其优势,帮助读者更好地…

【2023年第三届长三角高校数学建模竞赛】A 题 快递包裹装箱优化问题 20页完整论文及代码

相关链接 【2023年第三届长三角高校数学建模竞赛】A 题 快递包裹装箱优化问题 详细数学建模过程 1 题目 2022 年,中国一年的包裹已经超过 1000 亿件,占据了全球快递事务量的一半以上。近几年,中国每年新增包裹数量相当于美国整个国家一年的…

基于SpringBoot的留守儿童爱心网站的设计与实现

背景 随着留守儿童爱心管理的不断发展,留守儿童爱心网站在现实生活中的使用和普及,留守儿童爱心管理成为近年内出现的一个热门话题,并且能够成为大众广为认可和接受的行为和选择。设计留守儿童爱心网站的目的就是借助计算机让复杂的管理操作…

如何从Ubuntu Linux中删除Firefox Snap?

Ubuntu Linux是一款广受欢迎的开源操作系统,拥有强大的功能和广泛的应用程序选择。默认情况下,Ubuntu提供了一种称为Snap的软件打包格式,用于安装和管理应用程序。Firefox是一款流行的开源网络浏览器,而Firefox Snap是Firefox的Sn…

<Linux开发>驱动开发 -之-基于pinctrl/gpio子系统的LED驱动

<Linux开发>驱动开发 -之-基于pinctrl/gpio子系统的LED驱动 交叉编译环境搭建: <Linux开发> linux开发工具-之-交叉编译环境搭建 uboot移植可参考以下: <Linux开发> -之-系统移植 u…

chatgpt赋能python:Python二维码解码-从介绍到结论

Python 二维码解码 - 从介绍到结论 二维码在现代数字化时代的应用越来越普及,它能够快速、准确地扫描并解码大量的信息。Python作为一种流行的通用编程语言,已经成为开发人员首选的工具之一,为我们解码二维码提供了强大的支持。本篇SEO文章将…

chatgpt赋能python:Python主模块:入门指南

Python主模块:入门指南 什么是Python主模块? Python主模块指的是一组基本模块,通常在Python程序中使用最为广泛的模块。这些模块包含了各种功能,如文件操作、系统库、数据类型、数学运算等。通过使用这些模块,Python…

Carla自动驾驶仿真五:opencv绘制运动车辆的boudingbox(代码详解)

文章目录 一、安装opencv二、opencv绘制车辆的boudingbox1、构造相机投影矩阵函数2、定义将Carla世界坐标转换成相机坐标的函数3、设置Carla并生成主车和相机4、使用队列接收相机的数据5、计算相机投影矩阵6、定义顶点创建边的列表7、通过opencv显示相机的画面8、通过opencv绘制…

知识点梳理:ATTO 647N NHS ester,ATTO 647N 琥珀酰亚胺酯,荧光标记用于红色光谱区

ATTO 647N NHS ester,ATTO 647N SE,ATTO 647N 琥珀酰亚胺酯,ATTO 647N NHS酯 激发波长(nm):646 发射波长(nm):664 反应图像: 产品规格: 1.CAS号:N/A 2.分子式:N/A 3.分…

Sentinel降级规则

1.降级规则简介 官方文档 熔断降级概述 除了流量控制以外,对调用链路中不稳定的资源进行熔断降级也是保障高可用的重要措施之一。一个服务常常会调用别的模块,可能是另外的一个远程服务、数据库,或者第三方 API 等。例如,支付的…