下边框0.5px border: { border-bottom: 1px solid transparent; border-image: linear-gradient(to bottom, transparent 50%, #eee 50%) 0 0 100%/1px 0; } 上边框 或者 全边框 0.5px .bnq-agent-fixed-btn::before { content: ' '; position: absolute;
<template> <ul class="triangle_step"> <li :class="{cur:active>=index}" v-for="(item,index) in stepArr" :key="index" :style="{width:width}" @click=&
确定技术选型：方案：单独制作移动页面方案 技术：布局采取流式布局 题外知识：制作favicon.ico图标制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net 1.视口（选择理想视口）：设备有多宽，布局视口有多宽 meta视口标签标准
场景 Leaflet快速入门与加载OSM显示地图： Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上，怎样使用Leaflet.contextmenu插件实现地图上显示右键菜单效果如下 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构
两栏布局 //html <div class="wrapper"> <div class="left"> 左边固定宽度，高度不固定 </div> <div class="right"> 这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。 </div> </div> 1.grid //css .wrapper { padding: 15
面试题积累 1.自我介绍： 略... 2.说一下盒模型，还问到了IE盒子与标准盒子的区别 margin外边距 border边框 padding内边距 content内容 IE盒子与标准盒子的区别：IE盒子的content包括border和padding 3.移动端响应式布局你会哪些？ 百分比布局100% rem布局16px=1rem 视口布局vw/vh
设置div的宽高、利用border-radius属性制作。 圆形图案：div 的宽高必须相同，border-radius的值是div宽度和高度的一半 圆角矩形图案：border-radius的值是div高度的一半 半形图案：div 的宽是高的一半，border-top-left-radius与border-bottom-left-radius的值是div高度的一半 代码： <!DO
盒模型 box-sizing: content-box; 即普通盒模型 box-sizing: border-box; 即怪异盒模型 注意：浏览器默认的是普通盒模型也就是 box-sizing:content-box; 普通盒模（标准盒模型）型的特征 在使用border和padding之后是向外扩展的。（增加盒模型的面积，会撑开盒子） 怪异盒模型（IE盒模型）
实现代码 主要通过stroke-width来控制 <view class="view1"> <progress percent="{{30}}" stroke-width="10" border-radius="25" background-color="rgba(255,255,255,0.2)" active-color="#FDD643"></pr
1、效果图： 2、设计思想： （1）整个QQ企鹅有头部、左眼、右眼、嘴部、围巾、肚子、左手、右手、左脚、右脚十个部分。 （2） 头部部分里面包含
Jerry 之前的文章.scss 文件里的特殊符号 - % 百分号和 $美元符号，介绍了 scss 文件里两个特殊符号，百分号 % 和美元符号 $ 的用法。 本文介绍另一个特殊符号 @ 的用法。 使用预处理器的优点之一是它们能够处理复杂、冗长的代码并对其进行简化。 这就是 mixins 派上用场的地方！ @mixi
效果图： 方法一的效果图： 方法二的效果图： 方法三的效果图： 方法1：因为有背景，所有实现起来比较方便，尖角的内部同个颜色就可以不用考虑遮挡问题 html: 1 2 3 4 <div id="first"> <p>带背景颜色的小三角实现是比较简单的！</p> <span id="top"></span> </div>
文章目录 一、效果二、样式代码三，加载样式表 在项目开发过程中，不可缺少的一部分就是界面的美化，软件做的怎么样，界面风格样式很重要。在qt中通过样式表，*.qss文件加载到程序中美化界面 一、效果 二、样式代码 代码如下： QWidget { color: rgb(255, 255, 255); /*字体
html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/index.css"/> <script src="js/jquery.min.js"></
目录 01 总体介绍 02 首页搭建第一部分 03 首页搭建第二部分 04 首页搭建第三部分 上一节我们实现了图片的横向滚动，本节我们实现一下新闻列表功能，实现的效果如下： 打开首页，先添加一个普通容器 输入如下样式： width: 710px; height: 620px; margin-top: 24px; margin-left: 20
https://www.cnblogs.com/benbenfishfish/p/9674197.html 需要引用的库请点击附件下载 ↓ 附件 源码参考直接右键 :https://files.cnblogs.com/files/benbenfishfish/htmltortf.zip html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载) 项目中有用到h5识别我们的单
解决input获取焦点，弹出输入法之后，input被遮挡的问题 关于input输入框fixed在窗口底部的时候，input获取焦点，弹出输入法，input会被输入法遮挡，导致输入内容不方便。 我们可以用scrollIntoView 与 scrollIntoViewIfNeeded来解决这个问题。scrollIntoView 与 scrollIntoViewIfNeeded都
openlayers弹出框popup弹出层Overlay 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_sel
1.flex方法 <style> .flex{ width: 200px; height: 200px; box-sizing: border-box; border: 1px solid red; float: left; display: flex; justify-content: center;
这几天，找了很多CSS的网站，自己研究弄了个兼容性不错的框体和按钮的模板，分享给大家用一下，顺便分项一个编码的工具，都在框体里面了，因为博客园发帖会屏蔽一些js功能，所以上一篇随笔中，没有应该有的效果。废话不多说了，收下： 1 <style> 2 .cyan { 3 background-color: #34A853; /
CSS3盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu
/*隐藏-input-number 上下箭头*/ .ivu-input-number-handler-wrap { display: none; width: 22px; height: 100%; border-left: 1px solid #dcdee2; border-radius: 0 4px 4px 0; background: #fff; position:
效果展示： 这个案例比较简单： 就先分析一下这个结构吧： 值得一提的是，这个案例中的文字段落是使用lorem功能自动生成的，关于lorem功能的介绍参考这篇文章。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/index.css"/> <script src="js/jquery.min.js"></script&
1.边框 边框涉及1物理像素的问题，需要根据媒体查询进行相应的配置 .border-bottom{ position: relative; } @media screen and (-webkit-device-pixel-ratio:1){ .border-bottom::after{ position: absolute;
