简易商品展示HTML+CSS

效果展示图

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
</head>
<style>* {margin: 0;padding: 0;}a {text-decoration: none;color: black;}body {background-color: #f5f5f5;}.box {width: 280px;height: 360px;background-color: #fff;margin: 200px auto;border-radius: 14px;}.box img {width: 100%;border-radius: 14px 14px 0 0;}.box p{height: 100px;font-size: 14px;padding: 0 16px;margin-top: 20px;}.text {font-size: 14px;color: #cdcdcd;padding: 0 16px;margin-top: 10px;}.box_a {padding: 0 16px;margin-top: 20px;}.box_a h4 {display: inline-block;font-weight: 400;width: 130px;text-align: center;}.box_a h4 a:hover {color: #6594ff;}.box_a em {font-style: normal;margin: 0 16px 0 20px;}.box_a span {color: orange;}
</style><body><div class="box"><img src="data:images/main1.jpg" alt=""><p>双座款式，防爆轮胎，踏板设计。踏板造型款式，骑行的时候给双脚落脚点。加上防爆轮胎的配置，经久耐骑，彰显出优质质感。搭配上双座的款式，方便了载人，适合家庭出行的时候选择。</p><div class="text">共同推进绿色环保建设</div><div class="box_a"><h4><a href="#">新风创新型电动车</a></h4><em>|</em><span>99元</span></div></div>
</body></html>

初步了解盒子用法，适用于入门简单练习。

简易商品展示HTML+CSS相关推荐

淘宝网简易实现, Html + css + Javascript + Jquery +Swiper +Vue, 期末js大作业
首先上一张页面效果图, 下载地址往最下面翻
[转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术与大家分 ...
css画横线箭头_2020年你应该关注这50款前端热门工具：CSS HTML 工具篇
大家好,在一篇文章里 2020年让人难以置信的50款前端新工具:JavaScript插件篇(一),我分享了 11 款 JS 插件,本篇文章我将会和大家分享七款 CSS.HTML 相关的新工具. 12. ...
html中的函数怎么显示变量,css - 原生变量及使用函数 var()
零.序言前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
JS实现简易版备忘录
1.概述实现像手机便签一样功能的简易版备忘录页面,该备忘录全部用JQuery提供的功能实现,非常简单易懂. 2.功能介绍 (1)简洁的页面,主界面仅提供两个按钮用于添加和删除记录; (2)添加完成的 ...
放心，GPT-3 不会“杀死”编程
GPT-3 和任何人工智能都不会让编程"凋亡",所以程序员不需要感到焦虑. OpenAI 于 2020 年 7 月发布了 GPT-3 的 beta API.此后不久,开发人员开始试 ...
放心，GPT-3不会“杀死”编程
来源:towardsdatascience.com 作者:Alberto Romero 译者:朱琪珊策划:刘燕本文由 Alberto Romero 发表在 towardsdatascience.c ...
36个引人注目JQuery导航菜单
1.jQuery 选项卡界面 / 选项卡结构菜单教程这种类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心 ...
caja 原理 : 前端
作为前端开放的基础安全保证,caja 是目前比较合适的运行机制,包括前端运行环境以及后端编译环境,这次先整体介绍下 caja 在前端是如何屏蔽外部模块代码对整体应用的影响 (注意:官方文档较少,以下为 ...

简易商品展示HTML+CSS

简易商品展示HTML+CSS相关推荐

最新文章

热门文章