用CSS和HTML写一个水果库存静态页面

HTML代码:

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><header><h1>水果库存</h1></header><table><thead><tr><th>水果</th><th>数量</th><th>价格</th></tr></thead><tbody><tr><td>苹果</td><td>100</td><td>$0.50</td></tr><tr><td>香蕉</td><td>50</td><td>$0.25</td></tr><tr><td>橙子</td><td>75</td><td>$0.40</td></tr></tbody></table>
</body>
</html>

CSS代码(保存为styles.css):

/* Resetting default margin and padding */
body, h1, table {margin: 0;padding: 0;
}header {background-color: #f8f8f8;padding: 20px;
}table {width: 100%;border-collapse: collapse;
}thead {background-color: #ddd;
}th, td {padding: 10px;text-align: left;
}tbody tr:nth-child(even) {background-color: #f8f8f8;
}tbody tr:hover {background-color: #e0e0e0;
}

这个示例展示了一个简单的水果库存静态页面,其中包含:

  • 一个顶部的header元素,显示页面标题。
  • 一个使用table标签创建的表格,用于展示水果库存信息。
  • 表格包含一个thead部分,包含列标题,和一个tbody部分,包含具体的水果库存数据。
  • 水果库存数据以行的形式展示,每一行包含水果名称、数量和价格信息。

通过CSS样式的设置,实现了以下布局和样式效果:

  • header具有浅灰色的背景色和一定的内边距。
  • 表格占满页面宽度,并具有合并的边框。
  • 列标题具有灰色的背景色。
  • 表格行交替显示不同的背景颜色,方便区分。
  • 鼠标悬停在表格行时,行背景颜色有变化,提高可读性。

可以将HTML代码和CSS代码保存为文件,通过浏览器打开该文件,即可看到水果库存静态页面的效果。 

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

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

相关文章

MFC图表控件high-speed-charting的使用

high-speed-charting是MFC上的开源图表库,Teechart的替代品。 high-speed-charting的下载地址 https://www.codeproject.com/Articles/14075/High-speed-Charting-Control 特性 High-speed drawing (when axis is fixed) which allows fast plotting of dataUnlimited number …

list与sort()

运行代码&#xff1a; //list与sort() #include"std_lib_facilities.h" //声明Item类 struct Item {string name;int iid;double value;Item():name(" "),iid(0),value(0.0){}Item(string ss,int ii,double vv):name(ss),iid(ii),value(vv){}friend istre…

【Golang 接口自动化01】使用标准库net/http发送Get请求

目录 发送Get请求 响应信息 拓展 资料获取方法 发送Get请求 使用Golang发送get请求很容易&#xff0c;我们还是使用http://httpbin.org作为服务端来进行演示。 package mainimport ("bytes""fmt""log""net/http""net/url&qu…

Shell 排序法 - 改良的插入排序

说明 插入排序法由未排序的后半部前端取出一个值&#xff0c;插入已排序前半部的适当位置&#xff0c;概念简单但速度不快。 排序要加快的基本原则之一&#xff0c;是让后一次的排序进行时&#xff0c;尽量利用前一次排序后的结果&#xff0c;以加快排序的速度&#xff0c;Shel…

ZLMediaKit+wvp-GB28181-pro 安装文档

文章目录 前言1. 安装zlm1.1 镜像说明1.2 docker安装1.2.1 docker安装命令1.2.2 docker-compose安装 1.3. zlm配置和日志重点说明 2. 安装wvp2.1 目录结构说明2.1.1 导入idea2.1.2 sql文件夹自带初始化库脚本2.1.3 进入web_src 编译静态资源2.1.4 修改resources配置 2.2 wvp 启…

DHCP中继代理原理(第二十八课)

当客户机和DHCP服务器不在一个广播域时,DHCP服务器无法接收到客户机的DHCP discover广播数据包,客户机就无法获得IP地址 第一步配置DHCP服务器的信息 <Huawei>u t m //清除日志 Info: Current terminal monitor is off. <Huawei>sys [Huawei]sysname DHCP-R…

分布式异步任务处理组件(二)

一些关键点的设计脑暴记录----very important&#xff01;&#xff01;&#xff01; 首先&#xff0c;任务存储交给kafka&#xff0c;由节点负责写入kafka&#xff0c;acks1&#xff1b;失败重试&#xff1b;透传kafka的提交可靠性&#xff0c;保证任务提交成功&#xff1b;后…

c语言locale.h简介

<locale.h>提供的函数用于控制c标准库中对于不同的地区行为不一样的部分。&#xff08;地区通常是国家或者某种特定语言的地理区域&#xff09; 在标准库里&#xff0c;依赖地区的部分通常包括以下几项&#xff1a; 数字量的格式 货币的格式 字符集 时间日期的格式 它设…

IOS开发:去除TabView的底部留白

我最近在做IOS开发的时候&#xff0c;使用SwiftUI中的TabView做左右滚动的页面切换&#xff0c;遇到了页面底部有大量留白无法去除的问题&#xff1a; 我查了很多资料都没有看到网上有人记录这个问题的解决方案&#xff0c;后来查阅apple developer的文档&#xff0c;我发现.ed…

iOS开发-字符串base64编码与解码

iOS开发-字符串base64编码与解码 在开发总经常遇到需要将字符串进行base64加密与解密。Base64是网络上最常见的用于传输8Bit字节码的编码方式之一&#xff0c;Base64就是一种基于64个可打印字符来表示二进制数据的方法。 这里使用的是GTMBase64 在Podfile中引入 pod GTMBas…

【计算机视觉|人脸建模】深度学习时代的3D人脸重建调查报告

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;3D Face Reconstruction in Deep Learning Era: A Survey 链接&#xff1a;3D Face Reconstruction in Deep Learning Era: A Survey - PubMed (nih.gov) 摘要 随着深度学习的出现和图形…

前端学习--vue2--2--vue指令基础

写在前面&#xff1a; 前置内容 - vue配置 文章目录 插值表达式v-html条件渲染v-show和v-ifv-ifv-if的扩展标签复用组件 v-show v-on /事件v-bind /&#xff1a;属性v-modelv-for 循环元素v-slotv-prev-cloak vue指令只的是带有v-前缀的特殊标签属性 插值表达式 插值表达式{…

Times New Roman对应的latex

在LaTeX中&#xff0c;可以使用以下命令将文字设置为Times New Roman字体&#xff1a; \usepackage{times} 然后&#xff0c;将文档正文部分包含在以下命令之间&#xff1a; \begin{document} … \end{document} 这样&#xff0c;文档正文中的文字将以Times New Roman字体呈…

AES加密的基本常识和封装类

AES加密的基本常识和封装类 AES(Advanced Encryption Standard)是一种对称密钥加密算法,被广泛用于保护敏感数据的安全性。它是一种块加密算法,意味着它将明文数据分成固定大小的块,并使用相同的密钥对每个块进行独立加密。AES算法支持不同的密钥长度,包括128位、192位和…

cglib动态代理、jdk动态代理及spring动态代理使用

1.项目初始化 1.1 pom.xml <dependencies><!-- spring依赖 --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.5.RELEASE</version></dependency>&l…

从源程序到可执行文件的四个过程

从源程序到可执行文件的四个过程 预处理编译汇编链接 程序要运行起来&#xff0c;必须要经过四个步骤&#xff1a;预处理、编译、汇编和链接&#xff0c;如下图所示&#xff1a; -E选项&#xff1a;提示编译器执行完预处理就停下来&#xff0c;后边的编译、汇编、链接就先不执…

网络应用技术师技能考试试题(二)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️努力不一定有回报&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xf…

kafka权威指南学习以及kafka生产配置

0、kafka常用命令 Kafka是一个分布式流处理平台&#xff0c;它具有高度可扩展性和容错性。以下是Kafka最新版本中常用的一些命令&#xff1a; 创建一个主题&#xff08;topic&#xff09;&#xff1a; bin/kafka-topics.sh --create --topic my-topic --partitions 3 --replic…

Java学习笔记——(10)环境变量path配置及其作用

环境变量的作用为了在 Dos 的任务目录&#xff0c;可以去使用 javac 和 java开发工具命令 先配置 JAVA_HOME 指向 jdk 安装的主目录&#xff08;避免开发中出现问题&#xff09; 编辑 path 环境变量(开发环境)&#xff0c;增加 %JAVA_HOME%\bin 编辑 path 环境变量(运行环境…

快速学会MyBatis映射关系一对一

文章目录 映射关系一对一映射关系-官方文档映射关系1对1-基本介绍基本介绍注意细节 映射关系1 对1-映射方式映射方式配置Mapper.xml 的方式方式1方式2 注解的方式实现应用实例总结 映射关系一对一 映射关系-官方文档 文档地址: https://mybatis.org/mybatis-3/zh/sqlmap-xml.…