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

这篇具有很好参考价值的文章主要介绍了用CSS和HTML写一个水果库存静态页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

用CSS和HTML写一个水果库存静态页面,前端,html,css,前端,学习

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代码保存为文件,通过浏览器打开该文件,即可看到水果库存静态页面的效果。 文章来源地址https://www.toymoban.com/news/detail-621596.html

到了这里,关于用CSS和HTML写一个水果库存静态页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 制作一个简单HTML静态网页(HTML+CSS)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月03日
    浏览(75)
  • 前端编写页面HTML、CSS常用属性方法汇总

    不太常用的属性: box-shadow的: CSS3动画的点: 控制文字行数: CSS3的一些冷知识: @keyframes: HTML5: html+css乱七八糟的: JavaScript:

    2024年02月16日
    浏览(42)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(55)
  • HTML+CSS仿写京东页面附代码(web前端大作业)

    学习前端时间不多,看了两晚上就开始赶实训作业,大家看看就行 先来看看效果:         相关资源可以在主页资源查看

    2024年02月11日
    浏览(54)
  • web前端html+css页面内容的六种隐藏方式

    一、使用透明度 语法:opacity:0 注意:元素消失,但是还会占据空间,只是视觉看不出来   二、使用display 语法:display:none 注意:元素消失,不会占据空间   三、scale 缩放 语法:transform:scale(0)    值大于1放大,小于1缩小 注意:元素消失,但是还会占据空间   四、使用vis

    2024年02月08日
    浏览(53)
  • 前端 :用HTML , CSS ,JS 做一个秒表

    2024年02月06日
    浏览(40)
  • 制作一个简单HTML旅游网站(HTML+CSS+JS)无锡旅游网页设计与实现8个页面

    👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点,学生网页作业源码,制作水平

    2024年02月10日
    浏览(58)
  • 前端 用HTML,CSS, JS 写一个简易的音乐播放器

    这个实现了基本的播放/暂停、歌曲切换、音量控制、进度条控制和显示歌曲信息等功能,同时还支持播放模式切换和歌曲列表操作。不过这只是一个简单的示例,实际上还有很多功能需要进一步完善和优化,例如: 支持歌词显示和同步 支持播放列表编辑和保存 支持拖拽上传

    2024年02月04日
    浏览(39)
  • html+css+js制作LOL官网,web前端大作业(3个页面+模拟登录+链接)

    index.html index.css introduce.html introduce.css shop.html shop.css 链接:https://pan.baidu.com/s/1VtaAMts5TnKk8CJtaL750Q 提取码:LDL6

    2024年02月02日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包