(案例) 京东三角案例

最新推荐文章于 2022-03-31 15:10:01 发布
最新推荐文章于 2022-03-31 15:10:01 发布
阅读量276 收藏 1
点赞数 1
分类专栏： 案例 前端开发 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dute_i/article/details/108002591
版权
代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东三角案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
            margin: 100px auto;
        }

        .sanjiao {
            position: absolute;
            top: -10px;
            right: 0;
            width: 0;
            height: 0;
            /*为了照顾兼容性*/
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sanjiao"></div>
    </div>
</body>

</html>
小米案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米三角案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 200px;
            height: 259px;
            margin: 50px auto;
            background-color: pink;
        }

        .sanjiao {
            position: absolute;
            top: 5px;
            right: -10px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-left-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sanjiao"></div>
    </div>
</body>

</html>
独特的懒人
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定位-三角形_定位案例_
10-01
200smartplc定位案例，运动控制三角形，
css实现六角星
qq_39039128的博客
09-23 1194
<!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-U...
CSS第七天学习总结—— CSS 三角
weixin_52819925的博客
07-31 90
CSS 三角 我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0; 代码： div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-
仿京东三角效果案例
qq_44156869的博客
02-22 226
下面的效果是如何实现的呢？ 案例： <head> <style> div { /*相对定位*/ position: relative; width: 200px; height: 100px; background-color: pink; margin: 100px auto; }
CSS绘制特殊三角，实现梯形样式
kettlo的博客
04-09 192
制作非等腰三角形可以给边框设置其它样式、属性。（调节边框宽度） <body> <div class="box"> </div> </body> .box { width: 0; height: 0; border-top: 120px solid transparent; border-right: 50px solid red; border-left: 0 solid black; bor
京东页面中小三角的三种制作方案
weixin_45147894的博客
09-20 210
切记：在盒子边框属性中,border属性有常用的border-style、border-width、border-color、等等。其中也可以直接写综合形式，也就是直接用border:10px solid transparent.或者border:10px solid pink.也就是说。重点来了：transparent是color的一种。写red就不写transparent了。 创建三角有三种方法： 第一种： <!DOCTYPE html> <html lang="en">
黑马程序员前端-CSS三角以及京东三角案例
黑马程序员官方博客
03-31 412
按照HTML+CSS的学习顺序笔记已经更新了25篇内容了，因为篇幅问题，请看文末。 目录 一、介绍 二、案例，京东三角 三、往期合集 今天来学CSS三角以及案例。 一、介绍 网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。 一张图， 你就知道 CSS 三角是怎么来的了, 做法如下： div { width: 0; height: 0; border: 50px solid transparent; border-co
css--京东小三角绘制
oneblue123的博客
06-09 665
css--京东小三角绘制         效果图如下：         这样式的难道是绘制右侧的向下小箭头，“小箭头”可以用图片代替，比较简单，查看京东网页发现并不是图片，而是通过posion来实现的。    实现思路如下：   show my code~~ 最后的效果图： 很多网站都有类似的小箭头，尤其想京东这样的电商网站比如 不需要图片
京东小三角做法
qq_37608036的博客
03-16 360
html> html> head lang="en"> meta charset="UTF-8"> title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！title> style> /*顶部导航*/.shortcut {     height: 30px;     line-height: 30px;     background-colo
Web前端学习笔记——CSS京东案例、BFC
唯恋殊雨的博客
09-20 3000
京东项目(一) 京东项目介绍 项目名称：京东网 项目描述：京东首页公共部分的头部和尾部制作，京东首页中间部分。 项目背景 现阶段电商类网站很流行，很多同学毕业之后会进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的，这里用京东电商网站复习、总结、提高前面所学布局技术。其实，最主要的原因还是，为啥写京东？ 因为刘强东，赚了我们的钱，抢了我们的女神， 我们也要学刘强东，赚别人的钱，抢别人…...
经典案例python.zip
03-17
数个经典案例的python实现 如约瑟夫环问题， 小偷钻石问题， 杨辉三角实现， 随机验证码函数，等等。
杨辉三角c语言程序案例
最新发布
10-25
杨辉三角c语言程序 杨辉三角c语言程序案例
软件测试案例(三角形白盒测试)
04-15
软件测试案例(三角形白盒测试)
OpenGL旋转三角形案例
12-03
OpenGL ES 2.0 开发一个旋转三角形 注释超级详细 配套解析博客 : http://blog.csdn.net/shulianghan/article/details/17020359
学成在线(案例)
独特的懒人
08-13 1585
学成在线 2. CSS属性书写顺序（重点） 生活中衡量一个人有气质： ​ 穿着打扮 举止言行 等等 编程中如何衡量一个人的代码能力： ​ 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验… 建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding
CSS学习线路导读
独特的懒人
08-11 1005
文章目录CSS好好 “表现”（presentation）1. CSS作用：美化，布局,让结构(html)和样式"css"分离2. 构成：3. CSS标签选择器(基础选择器 / 复合选择器)3.1. 标签选择器(用标签名作为选择器)3.2. 类选择(重点) 可以先定义，**谁调用就写在谁身上**,书写注意事项: **冒号后面空一格**3.3 id选择器3.4 通配符选择器4. CSS字体属性(字体系列，大小，粗细，文本样式(斜体，加粗))4.1 字体系列：`font-family`**在页面中通常是给b
(案例)品优购-注册页面制作
独特的懒人
08-16 713
布局可以分成三个部分 注册页面命名:register.html 注意:注册页面怎么简单怎么写，保护隐私不需要优化 有高度522px，四个边框。 左边是直接写在h3里面了，右边新建一个盒子，给一个浮动 2.重点:底部的表单区域的做法 思路:这个父盒子给一个名字reg-form并且给一个宽度，然后里面按照ul>li来制作,手机号用lable来做 <ul> <li><lable for="">手机号: </lable><input type="tex
(案例)品优购-list页面制作
独特的懒人
08-16 589
准备工作: last-child 和nth-child 不能选到表兄弟，只能选到亲兄弟，所以下面是这么写 列表页主体 都是先给一个w的盒子 然后给sk_container 重要重要重要:碰到的问题，以及解决方案 本来给定一个左右浮动的话 123应该是在左边，abc应该是在右边。但是图中123的位置不对了。 这边的高度是47px 但是我们给它的行高是49px 给他挤下来了，然后里面的女装，更多分类都是浮动的，浮动是不会压住文字的。所以出现了这种情况。 **解决方法:**把超出的部分切除掉 .nav { o
(案例)品优购项目-公共部分header和footer的制作
独特的懒人
08-15 523
2. nav导航栏制作 这边是一个通栏的盒子不需要给宽度，给一个高度47px再给一个下边框就可以了。 左边给定一个div盒子叫做dropdown,右边给定一个div盒子叫做navitems，因为都是块级元素，这里给一个左浮动。 dropdown要给一个宽度210px，给一个高度45px，再给一个背景颜色，高度是放在盒子里面的就不要量下边框 dropdown盒子的细节: 这边要看上下布局的细节(上下按照相关性应该放在一起的) - 根据相关性 ...
processing十个运用三角函数的案例
06-10
下面是十个使用三角函数的案例： 1. 绘制正弦函数的图像 ``` import matplotlib.pyplot as plt import numpy as np x = np.linspace(0, 2*np.pi, 100) y = np.sin(x) plt.plot(x, y) plt.show() ``` 2. 判断一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值