简介 在设置input的适合,你会觉得默认的input样式并不好看。那么该怎么优化呢? 默认的input ? 可以从上面看出,这个样式的确不好看。...优化input样式 设置 outline-style: none ; 取消外边框 ? 可以从上图看出,在点击输入input的适合,框边就显示比较粗的边框,那么怎么将这个样式取消呢?...---- 设置灰色 1px的边框 border: 1px solid #ccc; input{ outline-style: none ; border: 1px solid #ccc;...那么能不能调整input的大小呢?...---- 设置宽度,如下: width: 620px; 因为input也是块元素,直接设置宽度即可,效果如下: ? 设置输入的字体大小 当前的字体有些小,那么可以调整一下。 ?
2 移动端1px线 有一次设计师拿着重构的手机截图和设计稿对照,发现重构稿边框的线比设计稿的粗了1px,可我明明在样式里面这样写的: 表面上看没毛病,但是细想一下的确有问题,因为现在的手机都是二倍以上的屏幕...我们可以使用这个属性来实现多行截字并显示省略号,代码如下: 5 使用border写三角箭头 在做页面的时候,经常会遇到有三角箭头的情况,这个我一般都使用CSS来写,而不是使用图片,改起来非常方便,如果要兼容ie6就需要设置边框样式为...dashed 和 solid ,如果不需要就直接写solid就行,代码如下: 效果如下: 最后,谢谢您的阅读!
半粗体FontWeight.w700 加粗FontWeight.w800 特粗FontWeight.w900 最粗 FontStyle fontStyle 字体变体:FontStyle.italic...如果字体是在包中定义的,那么它将以'packages / package_name /'为前缀(例如'packages / cool_fonts / Roboto') double fontSize 字体大小...Paint foreground 文本的前景色,不能与color共同设置(比文本颜色color区别在Paint功能多,后续会讲解) Listshadows 详解:Flutter Decoration背景设定...Locale locale 此属性很少设置,用于选择区域特定字形的语言环境 bool softWrap 某一行中文本过长,是否需要换行。...直线,double 双下划线,dotted 虚线,dashed 点下划线,wavy 波浪线 decorationStyle: TextDecorationStyle.solid
半粗体FontWeight.w700 加粗FontWeight.w800 特粗FontWeight.w900 最粗 FontStyle fontStyle 字体变体:FontStyle.italic...如果字体是在包中定义的,那么它将以'packages / package_name /'为前缀(例如'packages / cool_fonts / Roboto') double fontSize 字体大小...Paint foreground 文本的前景色,不能与color共同设置(比文本颜色color区别在Paint功能多,后续会讲解) Listshadows 详解:Flutter Decoration背景设定...Locale locale 此属性很少设置,用于选择区域特定字形的语言环境 bool softWrap 某一行中文本过长,是否需要换行。... 直线,double 双下划线,dotted 虚线,dashed 点下划线,wavy 波浪线 decorationStyle: TextDecorationStyle.solid
...将 selectionLineWidth 设置成 10 之后,边框就比默认的粗了很多。 虚线选框 如需将边框设置成虚线,可以修改 selectionDashArray 属性。...selectionBorderColor: 'red', selectionLineWidth: 10, selectionDashArray: [10] }) 如果直传1个值,比如上面只传了 [10] ,那么边框的规则就是...下图是默认情况,我没真正选中三角形,但只要选区出现在三角形的范围内就能选中它。...如果需要设置成精准选择(真正选中图形才算选中),可以将 selectionFullyContained 设置成 true 。
一.字体 1.字体的设置 通过font-family设置字体样式,通过font-size设置字体大小 <meta name="...,每个颜色最多取到255,可以简写成#f00 2.3rgb表示法 color: rgb(255, 0, 0); 3.字体粗细及样式 字体粗细有四种预定样式 normal默认值,粗细为400 bold<em>粗</em>700...bolder更<em>粗</em> lighter更细 <em>那么</em>字体样式也有四种 normal默认样式 italic斜体 oblique倾斜 inherit继承父元素的字体样式 4.文本 4.1text-align 控制文本靠左靠右居中...; border-radius: 20%; } div{ width: 400px; height: 400px; border: 2px red <em>solid</em>...> div{ width: 400px; height: 300px; border: 2px red <em>solid</em>
如果将这个盒容器的width和height设置为0,并为每条边框设置一个较粗的width值和彼此不同的颜色,最终会得到四个被拼接到一起的三角形,它们分别指向不同的方向: #demo { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: yellow...green red blue; } 如果将三个方向的边框颜色设置为透明,那么就得到了一个三角形: #demo { width: 0; height: 0; border-width: 50px...; border-style: solid; border-color: transparent transparent red transparent; } 综上所述,实现一个纯CSS三角形的要素是...: 将一个元素的width和heigth都设置为0 设置较粗的边框 将其中三个边框的颜色设置为透明 还可以为相邻边框设置不同的边框宽度来改变三角形的角度。
border-width 属性可以设置盒子模型的边框宽度。 为什么线的粗细叫宽度?边框线像马路往前冲,马路的宽度就好比是线的宽度。...示例: border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid...或border设置边框的时候,边框粗细在屏幕上是如何表现的?...对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么大...例如,iPhone的devicePixelRatio==2,而border-width: 1px描述的是设备独立像素,所以,border被放大到物理像素2px显示,在iPhone上就显得较粗。
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的 移动端1px像素问题。...none; } .lines { width: 200px; margin: 0 auto; } .lines li { border: 1px solid...hairlines li:after { content: ''; position: absolute; left: 0; top: 0; border: 1px solid
CSS 也为链接准备了几个伪类选择器,用来设置超链接的交互操作。但是在绝大多数网站中,我们看到的超链接交互样式,通常是:改变一下链接的颜色、取消或者增加下划线、点击链接文本变色或者下划线消失等等。...实现原理和分析 首先,仍然是常规的超链接样式,带一条下划线,但是与普通的超链接样式不同的是,这条下划线要粗(2px 普通的 1px),同时这个下划线和文字颜色不同(用 color 和 text-decoration...既然原理分析完毕,那么我们就开始写出相应代码吧。 HTML 结构 随便输入一些字,加上个链接就OK了。...#f00; } div a:hover{ border-bottom:2px solid #00f; } div a:active{ border-bottom:2px solid #00f; outline...发散思维 既然是用了边框的方式模拟下划线,那么可不可以通过调整超链接的高度让这条线变成一条可以交互操作的 “删除线” 呢?
三角形的实现: 只需要把其中三条边的颜色定义为 transparent 透明,另一条边设置一个颜色和宽度就可以了。...border-right: 50px solid transparent; border-bottom: 50px solid #BCA18D; border-left: 50px solid...border-width: 10px;/*统一设置边框的宽度*/ border-width: thin medium thick 10px;/*分别设置每个边框的宽度,顺序是 上 右 下 左*/ border-width...thick 粗的边框。 length 自定义边框的宽度。 inherit 从父元素继承边框宽度。 border-style 边框的样式。...inherit 从父元素继承 border 属性的设置。 边框的应用有很多,可以根据自己的情况进行拓展。
说到 SOLID 原则,相信有过几年工作经验的朋友都有个大概印象,但就是不知道它具体是什么。甚至有些工作了十几年的朋友,它们对 SOLID 原则的理解也停留在表面。...今天我们就来聊聊 SOLID 原则以及它们之间的关系。...我们在设计一个类的时候,可以先从粗粒度的类开始设计,等到业务发展到一定规模,我们发现这个粗粒度的类方法和属性太多,且经常修改的时候,我们就可以对这个类进行重构了,将这个类拆分成粒度更细的类,这就是所谓的持续重构...那么当父类出现的地方,换成了子类,那么必然会出错。 其实这个例子举得不是很好,因为这个在编译层面可能就有错误。但表达的意思应该是到位了。...SOLID 原则的本质 我们总算把 SOLID 原则中的五个原则说完了。但说了这么一通,好像是懂了,但是好像什么都没记住。 那么我们就来盘一盘他们之间的关系。
/5dd739d5f265da7de43494d4 封装成mixin复用 在写css的时候, 很多样式都是很常用但是写起来很麻烦, 虽然现在有很多成熟的ui框架, 但是我们也不能一个简单的活动页也引入那么大个框架吧...webkit-line-clamp: $rowCount; -webkit-box-orient: vertical; } } 真.1px边框 移动端由于像素密度比的问题, 实际的1px边框看起来比较粗,...你可以根据需要传入(top, left, bottom, right) 4个方向; * {Color} 边框的颜色, 默认#ccc; * {List} 4个圆角半径, 默认0; * {String} 一个高级设置...: ($directionMaps); } @each $directionMap in $directionMaps { border-#{$directionMap}: 1px solid...display: inline-block; height: $width; width: $width; border-radius: $width; border-style: solid
3.html显示 html显示的时候如果我们在代码里面直接输出,那么一旦我们每次 仅仅只是更改点html的代码却要重新编译。是不是很痛苦。 感谢go为我们提供了template包。...那么开始吧。 我们实现一个留言本。 一个留言本的基本功能就是。提交留言,显示留言。 为了使得这个项目好理解和容易实现我们尽量简单。所以这个例子代码会非常的烂。请别砸砖头。囧!...首先你在系统中安装git吧(真麻烦 囧,这个自行google) 另外你得设置个gopath 可以是任意目录 第三方包惠粗在这个目录 然后通过命令go get github.com/go-sql-driver...因为go默认是utf8 编码的(鄙视哈居然不能用中文当变量名,看看java或者c#) 操作数据库 看代码应该基本没太大问题。这里略过。...input[type=button] {-webkit-appearance: button;} img{border:0px;} .list{margin:5px;border:#cccccc 1px solid
font-weight:linghter; /*更细*/ font-weight:normal; /*默认值=500*/ font-weight:bolder; /*更粗*/ line-height...第一个值是水平方向上的(即 x 轴),第二值是竖直方向上的(即 y 轴),如果只规定了一个关键词,那么第二个值将默认是 center background-position: 75% 100%; /*...属性,用于设置元素所有边框的样式,或者单独地为各边设置边框样式,只有当这个值不是 none 时边框才可能出现 border-style:dotted solid double dashed; //上边框是点状...:thin medium thick 10px; //上边框是细边框,右边框是中等边框,下边框是粗边框,左边框是 10px 宽的边框 border 简写属性在一个声明设置所有的边框属性,属性设置顺序为...; border-style:solid; border-color:red; 等价于 border:1px solid red; <!
在不同加工阶段下设置好参数、选好刀具 1) 开粗 开粗石墨加工路径 如下图是简单的石墨加工路径,是开粗的路径,旁边是放大的开粗的切削深度,每刀的加工量。...参数的设置: 切削量:2~3mm 加工速度:3~4m/min 主轴转速:10000~12000rpm 刀具的选择: 开粗刀:四刃,10~12mm (直径过小:速度慢,加工没效率) (直径过大:刀摆大,影响加工精度...) 开粗的效果图 2) 中粗 中粗石墨加工路径 如上图是中粗的刀路,一般我们会采用R刀在精修之间中粗一下,这样对减少精修的量,那么精修的刀磨损会小一点。...参数的设置: 切削量:0.5mm 加工速度:3m/min 主轴转速:15000rpm 刀具的选择: R刀:R3(带曲面,曲面稍微大,适合曲面开粗) 中粗的效果图 3) 精修 精修石墨加工路径 如上图是精修的加工路径...1)系统问题:系统设置需调整,选择“高精修”模式,配合系统专用后处理; 2)走刀方式:建议最好两轴同时移动,而非三轴同时移动。45°一般使用三轴同时动,三轴同时动的话效果没那么好,容易产生刀纹。
2倍屏下用两排像素去展示,自然会比普通屏下用一排像素去展示,看起来更粗。 如何修正1px问题 要解决1px问题,本质就是让高清屏用一个物理像素去展示一个css像素。...style=" width: 100px; height: 100px; // 宽度1px border: 1px solid...为了佐证,可以把画的矩形缩小一点,不占满视口,可以看出,这时候和没有处理过的1px一样粗了。 实际操作 以上是关于svg的基础知识,但实际的业务代码肯定不会直接这样使用,因为代码的可扩展性太低。....target { position: relative; } .target::before { width: 200%; height: 200%; border: 1px solid...transform-origin: left top; box-sizing: border-box; pointer-events: none; } 以二倍屏为例,上述是Demo代码,我们将蒙层的宽高都设置为目标元素的
,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 list-style: none; border:1px solid... width: 200px; line-height: 2em; text-align: center; 你会发现中间的线条特别的粗,...还有其他的解决方法,就是重合的边框你可以设置:border-top(bottom或left或right):none;这样的话也可以取消边框。
格式:宽度 样式 颜色 例如: border:1px solid red , 1 像素粗的 实线 红色边框。...线条样式: solid 实线, none 无边, double 双线 示例: 效果: 1.2 width 用于设置标签的宽度 示例: 效果: 1.3 height 用于设置标签的高度...示例: 效果: 1.4 background-color 用于设置标签的背景颜色 背景颜色设置的两种主流方式: ①英文单词 例如: red,blue,yellow...若需要对背景图片是否重复显示进行调整,有以下几个常见设置 2.布局 2.1 float 通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排 版, 就需要使用浮动属性...3.2 color 用于设置字体的颜色。 示例: 效果:
如果自带的js代码不能满足您的需求,那么您自己写的插件实现需要的效果。 5、 Ajax的方式获取记录集,减轻网络负担。 6、 多种调用方式,让“偷懒”和灵活共存。 缺点: 1、 不支持SEO。...页号导航有很多总形式,一中形式肯定不能满足所有人的需求,那么怎么办呢?把每种形式都罗列出来吗?这样整个分页代码就会比较臃肿。所以就想到了这种扩张的形式。在主体外面实现页号导航的功能,在主体里调用。...如果自带的不能满足,那么可以把自己写一个替换掉自带的。而总体结构不会发生变化。达到了“对扩展开放,对修改关闭”。 使用方法: 1、 设置“属性”。 ...存放分页控件的容器ID,简单的说就是DIV的ID,当然也可以放在td里面,只要设置好ID就行。如果要实现上下两个分页UI,那么只需要把这两个ID用半角逗号分割,设置上就行。 2、 设置事件。 ...感谢群里的兄弟们帮忙做测试,发现了几个小bug和没注意到的地方。 如果大家也挺感兴趣的话,欢迎加群:82598514
领取专属 10元无门槛券
手把手带您无忧上云