#前端# #HTML与CSS练习# # 商品展示样例#

已于 2024-03-16 10:35:36 修改
阅读量200 收藏 2
点赞数 2
文章标签： 前端 html css
于 2024-03-16 10:34:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuehan5205/article/details/136757988
版权

 html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>商品展示样例</title>
    <link rel="stylesheet" href="../作业本/css部分/作业3.css">
</head>
<body>
    <div class="container">
        <div class="goods">
            <img src="C:\Users\lenovo\Desktop\前端\picture\2 - 副本.png" alt="物品">
            <div class="price">
                <span class="price">￥99</span>
                <span class="counts">10000+人付款</span>
            </div>
            <p>
                <a href="#">游戏盒子,河南直邮</a>
            </p>
            <div>
                <span class="shop-name">steam正版游戏盒子</span>
                <span class="counts">河南 郑州</span>
            </div>
        </div>
        <div class="goods">
            <img src="C:\Users\lenovo\Desktop\前端\picture\2 - 副本.png" alt="物品">
            <div class="price">
                <span class="price">￥99</span>
                <span class="counts">10000+人付款</span>
            </div>
            <p>
                <a href="#">游戏盒子,河南直邮</a>
            </p>
            <div>
                <span class="shop-name">steam正版游戏盒子</span>
                <span class="counts">河南 郑州</span>
            </div>
        </div>
        <div class="goods">
            <img src="C:\Users\lenovo\Desktop\前端\picture\2 - 副本.png" alt="物品">
            <div class="price">
                <span class="price">￥99</span>
                <span class="counts">10000+人付款</span>
            </div>
            <p>
                <a href="#">游戏盒子,河南直邮</a>
            </p>
            <div>
                <span class="shop-name">steam正版游戏盒子</span>
                <span class="counts">河南 郑州</span>
            </div>
        </div>
        <div class="goods">
            <img src="C:\Users\lenovo\Desktop\前端\picture\2 - 副本.png" alt="物品">
            <div class="price">
                <span class="price">￥99</span>
                <span class="counts">10000+人付款</span>
            </div>
            <p>
                <a href="#">游戏盒子,河南直邮</a>
            </p>
            <div>
                <span class="shop-name">steam正版游戏盒子</span>
                <span class="counts">河南 郑州</span>
            </div>
        </div>
        <div class="goods">
            <img src="C:\Users\lenovo\Desktop\前端\picture\2 - 副本.png" alt="物品">
            <div class="price">
                <span class="price">￥99</span>
                <span class="counts">10000+人付款</span>
            </div>
            <p>
                <a href="#">游戏盒子,河南直邮</a>
            </p>
            <div>
                <span class="shop-name">steam正版游戏盒子</span>
                <span class="counts">河南 郑州</span>
            </div>
        </div>
        <div class="goods">
            <img src="C:\Users\lenovo\Desktop\前端\picture\2 - 副本.png" alt="物品">
            <div class="price">
                <span class="price">￥99</span>
                <span class="counts">10000+人付款</span>
            </div>
            <p>
                <a href="#">游戏盒子,河南直邮</a>
            </p>
            <div>
                <span class="shop-name">steam正版游戏盒子</span>
                <span class="counts">河南 郑州</span>
            </div>
        </div>
        <div class="goods">
            <img src="C:\Users\lenovo\Desktop\前端\picture\2 - 副本.png" alt="物品">
            <div class="price">
                <span class="price">￥99</span>
                <span class="counts">10000+人付款</span>
            </div>
            <p>
                <a href="#">游戏盒子,河南直邮</a>
            </p>
            <div>
                <span class="shop-name">steam正版游戏盒子</span>
                <span class="counts">河南 郑州</span>
            </div>
        </div>
        <div class="goods">
            <img src="C:\Users\lenovo\Desktop\前端\picture\2 - 副本.png" alt="物品">
            <div class="price">
                <span class="price">￥99</span>
                <span class="counts">10000+人付款</span>
            </div>
            <p>
                <a href="#">游戏盒子,河南直邮</a>
            </p>
            <div>
                <span class="shop-name">steam正版游戏盒子</span>
                <span class="counts">河南 郑州</span>
            </div>
        </div>
    </div>
</body>
</html>

 

css部分：

.container{
    width: 1200px;
    height: 2000px;
    /* border: 1px solid; */
}

.goods{
    width: 250px;
    height: 375px;
    border: 1px solid white;
    float: left;
    margin: 10px;
}

img{
    width: 250px;
    height: 250px;
}

.price{
    color: rgb(255, 38, 0);
    font-size: 20px;
    font-weight: bold;
    font-family: ;
    margin-left: 10px;
}

.counts{
    color: dimgray;
    font-size: 15px;
    font-weight: bold;
    float: right;
    margin-right: 5px;
}

a:hover{
    color: red;
    text-decoration: underline;
}

.shop-name{
    color: black;
    font-size: 15px;
    font-weight: bold;
    margin-left: 5px;
}

.goods:hover{
    border: 1px solid red;
}

p{
    margin: 6px;
}

 效果图展示：

 

祈白.
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
HTML简单表格表单设计实验（含代码）
bruuuuuuuuno的博客
06-27 3679
目录目的和要求内容和步骤代码货品价格表用户留言表单心得体会 目的和要求 掌握 HTML 语言的使用，例如：TABLE、FORM、FRAME、CSS 等。 必须使用到 CSS。 必须有 HTML5 元素。 电子邮件输入框必须有邮件格式输入验证，采用客户端验证方法。 内容和步骤 1、创建如下图所示的货品价格表： 2、创建如下图所示的用户留言表单： 代码 货品价格表 <!DOCTYPE html> <html lang="en"> <head> <meta c
（html+css）小练习-盒子布局
少年的欢喜的博客
10-21 2281
测试样例： html文件设置框架 <div class="container w"> <div class="left"> <a href="#"></a> </div> <div class="right"> <ul> <li><a href="#"></a>
HTML+CSS学习demo合集
Yous的博客
07-06 587
HTML案例-跳转-index 在新窗口中跳转： 在当前窗口中跳转： 我的： index.html 1.html 2.html 学生信息表 表单 新闻网页案例 整体效果图： 卡片居中案例 要求：对于大小、颜色等具体样式取值，参考效果图上的标注即可 效果图： 成品图： 代码中发现用和还是有形式上的区别的： 两段文字之间有很大的空隙，这里用会导致上面这种 格式不一致 的问题。工作中可以考虑用p标签。样式图： 5个导航链接，鼠标悬停时变色，导航字迹居中。 a标签是行内元素，修改宽高不生效，
HTML+CSS（PC端+移动端）
qq_57003087的博客
06-01 4744
HTML+CSS基础（PC端+移动端）
一文讲透如何使用CSS美化HTML界面
2301_79959126的博客
07-25 1133
本文具体详细地介绍了如何使用CSS样式表语言去美化我们的HTML网页，介绍了CSS样式表语言中的基本概念，如规则集、选择器等，手把手地讲解了如何使用CSS样式表进行HTML的美化操作，并在最后进行了一个实战练习帮助巩固CSS样式表语言相关知识。
【web开发网页制作】Html+Css网页制作关于明星介绍王嘉尔（5页面）【附源码下载】
赏樱看雪撸代码
12-07 1713
期末作业网页制作练习，网页制作大作业，介绍人物网页制作，网页制作demo源代码，简单的网页制作，html+css多页面样例，原创网页制作源代码。
40个适合前端初学者练手的基础案例（HTML&CSS）
热门推荐
前端达人
10-15 1万+
英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361翻译...
最新小米商城（html+css）
m0_63324578的博客
06-24 628
这时候我们则可以利用::after和::before，这两个伪元素相当于是对当前元素的装潢，他们并不是节点，不会出现在dom树中，但是在显示上具备节点的效果。很多时候在设计中我们需要“|”进行分割样式，没有实际的意义，例如对li元素，而他所在的li元素仅是为了装饰，本是不应该被创建在文档内的。nth-child(-n+3){ 选取前三个元素生效} 因为例如本实例有六个元素（0-5）选择第四个元素-3+3=0 无效选择。注意：在实现nav-bar-list我只是设置了前几个作为样例，后面为了方便设置为重复。
【HTML + CSS】模仿腾讯云页面——初步实现
董哲朋的博客
04-03 3407
前端入门实战练习之腾讯云页面实现 样例图 实现后的样子如图所示，ps：量的尺寸最开始肯定是没有的，都是写一步，测一步，最后就成这样啦 使用的工具是 PxCook，方便我们量取图片设计尺寸 实现效果 初步实现大致样式，明日进行细节优化，2022.4.3 图中标识位置尚未优化，下面是该部分实现源码 index.html <!-- * @Author: coder-jason * @Date: 2022-04-02 22:39:35 * @LastEditTime: 2022-04-03 .
CSS笔记 详细包括样例 需要typora打开，typora在我的其他资源里有
03-19
**CSS（层叠样式表）**是用于控制网页元素外观的一种编程语言，是前端开发中的核心技术之一。这个压缩包文件“CSS笔记”包含了详细的CSS用法和实例，旨在帮助学习者深入理解并熟练掌握CSS。要查看这些笔记，你需要...
DIV+CSS样例网站.rar
11-28
【标签】"样例"表明了这些文件的性质，即它们是示范性的，用于展示如何在实际项目中运用`div`和CSS。这些样例提供了参考模板，可以帮助初学者理解和模仿，进而发展出自己的设计风格。 【压缩包子文件的文件名称列表...
Bootstrap基础练习28个样例（含代码）
04-30
这个“Bootstrap基础练习28个样例（含代码）”压缩包文件显然是一个学习资源，包含了多种Bootstrap的基本用法示例，帮助初学者理解和应用Bootstrap的核心组件。 1. **Bootstrap介绍**：Bootstrap是由Twitter开发并...
练习项目
03-03
2. CSS样式：虽然主要标签没有提及CSS，但在实际项目中，HTML与CSS密不可分，用于实现页面的布局和视觉效果。 3. JSX语法：理解如何在JavaScript中编写HTML，包括使用{}插入表达式，以及创建类组件和函数组件。 4. ...
纯CSS3实现iOS7扁平化图标特效代码
03-20
通过实践和不断尝试，你将能够熟练地利用CSS3实现iOS7扁平化图标的效果，同时提升自己的前端开发技能。在Web设计的道路上，不断学习和创新是至关重要的，希望这个话题能为你的学习之路提供宝贵的参考。
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 315
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1098
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【IC前端虚拟项目】用例的完善与补充
最新发布
moon9999的博客
08-20 36
当然只不过是参考，个人不建议在寄存器测试这个环节投入太多的经历，也没有必要非在环境中讲寄存器模型以seq方式呈现，只要用起来方便就是最合适的。如果之后在实际的项目中寄存器模型时通过seq的方式集成到环境中的（比如我现在负责的项目，验证环境就是如此），那么转换过来也是没有什么难度的，这点大可放心。此外，在组织更多随机用例的过程中可以练习多种不同约束的transaction以不同的比例关系通过同一个seq/sqr uvm_do的操作。好了，具体的用例大家可以参考我的代码，尽量以自己的思路来进行扩充。
CORS error && 302 Found
zcxbd的博客
08-19 144
单点登录认证：访问A系统，在B系统登录认证此处代码为A系统。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

祈白.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值