css实现京东的价格标签

0x00 京东效果图

0x01 原理及代码

京东这个实质上是分为了三个部分，左边盒子中间盒子右边盒子

这个效果主要是通过中间盒子来实现，代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="box"></div><div class="price"><span class="price-now">￥1999<i></i></span><span class="price-before">￥9999</span></div></body>
<style>* {margin: 0;padding: 0;border: 0;}.price {width: 160px;height: 24px;border: 1px solid red;margin: 50px;line-height: 24px;}.price-now {position: relative;float: left;width: 90px;height: 100%;background-color: red;color: #fff;font-weight: 700;text-align: center;}.price-now > i {position: absolute;right:0;top:0;width: 0;height: 0;border-top: 24px solid transparent;border-right: 12px solid #fff;border-bottom: 0px solid cornflowerblue;border-left: 0px solid greenyellow;}.price-before {float: left;width: 70px;height: 100%;line-height: 24px;color: gray;font-weight: 700;font-size: 12px;text-align: center;text-decoration: line-through;}
</style>
</html>

css实现京东的价格标签相关推荐

HTML和CSS实现京东首页（html和css详解）
HTML和CSS实现京东首页,效果图如下: 基本代码如下:需要源代码和素材的评论区留言 (1)页面部分设计如下: <!DOCTYPE html> <html lang="e ...
html+css实现京东、英雄联盟静态页面
效果展示真高仿,像真的一样,页面的效果几乎都做出来了. 京东刚接触html css的时候写第一个页面,由于当时布局不太熟练,写了将近一个月- 英雄联盟实现功能京东点击切换轮播图京东自动轮播图 ...
HTMl+CSS 模仿京东网登录页面
课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...
京东商城（HTML和CSS实现京东商城网站）
学习京东商城(HTML和CSS实现京东商城网站),本文实现该系统的功能截图,HTML和CSS部分关键语句,系统功能图等供大家学习参考本页面模仿京东商城本系统完全模仿京东商城写的页面,页面功能齐全 ...
HTML+CSS 创建京东导航栏
使用HTML+CSS 搭建京东首页导航栏,主要实现的功能: 静态部分以及鼠标移入显示下拉列表信息位置和向下图标使用Font Awesome图标字体库 <!DOCTYPE html> &l ...
纯HTML+CSS仿作京东页面
纯HTML+CSS仿作京东页面大一学了一个月的网页制作课程,就在今天,我对京东页面下手了. 我用的是旧版京东的素材... 先上效果图接下来让我们看看HTML代码 <!DOCTYPE html ...
HTML和CSS实现京东首页（附GitHub地址）
HTML代码基本结构需要练手,或者需要代码的留言即可 <!DOCTYPE html> <html lang="en"> <head>< ...
基于HTML和CSS完成京东页面的制作
首先打开京东页面分析页面元素由图可把整个页面分为4个部分,分别为top顶部部分,tip提示部分,mid中间部分,foot底部部分然后编写每一部分的代码,边写边测试结果,防止一步错步步错代码如下: ...
html和css仿照京东网页页面（文本和链接的跳转）
上图是京东页面的一个参照物用到的语法: 代码块: <!doctype html> <html lang="en"> <head><met ...

css实现京东的价格标签

css实现京东的价格标签相关推荐

最新文章

热门文章