利用css特性布局页面制作京东特价框

布局技巧：利用css特性去制作京东价格图框；

类似步骤：

1、首先制作一个四边形的样式，对高度和宽度进行设置，两者设置为0px

2、原来制作一个四边形里面的一个三角形部分采取的是对颜色设置transparent（透明色）这样就不会显示那一部分了，我们现在是对一个0部分进行设置然后利用定位安插进入元素内容之中；

3、实现步骤:1、在原基础上将上边框的宽度调大与此同时设定的高也会变长；2、对左边和下边的边框宽度设置为0px，就会实现类似隐藏的效果（左右为0也就是不显示）；

制作京东促销价格图：1、一个div包裹两个span第一个span设置相对定位与浮动（产生文字环绕效果）第二个盒子会自动居于第一个盒子的旁边，在第一个盒子里面设置一个元素用来制作一个小三角遮挡（需要设置为相对定位）对于三角属性设置规则按照width:0;height:0;等这个尤为重要，具体代码如下：

<!-- <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS三角强化的巧妙运用</title><style>.box1 {width: 0;height: 0;/* 把上边框宽度调大 *//* border-top: 100px solid transparent;border-right: 50px solid skyblue; *//* 左边和下边的边框宽度设置为0 *//* border-bottom: 0 solid blue;border-left: 0 solid green; *//* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2. 样式都是solid */border-style: solid;/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */border-width: 100px 50px 0 0 ;•        }
•        /* 最大的一个盒子 */
•        .price {
•            width: 160px;
•            height: 24px;
•            line-height: 24px;
•            border: 1px solid red;
•            margin: 0 auto;
•        }
•        /* 第一个span */
•        .miaosha {
•            position: relative;
•            float: left;
•            width: 90px;
•            height: 100%;
•            background-color:red;
•            text-align: center;
•            color: #fff;
•            font-weight: 700;
•            margin-right: 8px;•       }
•        /* 第一个span里面的小盒子定位 */
•        .miaosha i {
•            position: absolute;
•            right: 0;
•            top: 0;
•            width: 0;
•            height: 0;
•            border-color: transparent #fff transparent transparent;
•            border-style: solid;
•            border-width: 24px 10px 0 0;
•        }
•        /* 第二个span   */
•        .origin {
•            font-size: 12px;
•            color: gray;
•            text-decoration: line-through;
•        }
•    </style>
</head>

<body>
•        <div class="box1"></div>
•        <div class="price">
•            <span class="miaosha">
•                ¥1650
•                <i></i>
•            </span>
•            <span class="origin">¥5650</span>
•        </div>
</body>
</html> -->

利用css特性布局页面制作京东特价框相关推荐

利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
内容来源:2017年5月20日,乐逗游戏高级数据分析师在"第十届中国R会议软件工具专场"进行<HTTPS最佳安全实践>演讲分享.IT大咖说作为独家视频合作方,经主办方和 ...
利用css实现太极图的制作（带旋转动画）（课程实践教学项目）
利用css实现太极图的制作(带旋转动画) (课程实践教学项目) 简要说明第一步:太极图的绘制(1) 相关知识: 实现步骤: 代码: 效果: 第二步:太极图的绘制(2) 相关知识: 实现步骤: 代码: ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
信息导航与网站设计采用HTML+CSS+DIV布局页面
期末作业:根据本课程所学内容布局如下页面要求:导航条的内容要链接到自己的作品页面(从7次作业中选6个),页面中间的DIV要按照图示要求并根据自己的情况填写上相应的内容,可以使用列表也可以使用段落, ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
vue设置右边距_利用页面布局设置制作工资条（不用函数）
利用页面布局设置制作工资条(不用函数) 彭怀文第一节和第二节分别讲了使用函数或排序的办法,将工资表转化工资条,但是美中不足的是标题行只能是单标题行,对于多标题行或者含有合并单元格的标题行却没有办法解 ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...

利用css特性布局页面制作京东特价框

利用css特性布局页面制作京东特价框相关推荐

最新文章

热门文章