前端开发
关注
分享
扫一扫
郁美人
不告诉你
展开
-
用css绘制三角形
一、.tri1 { width: 0; height: 0; border-color: red blue red blue; border-width: 50px 50px 50px 50px; border-style: solid; }二、.tri2 { ...原创 2020-04-26 18:23:00 · 295 阅读 · 0 评论 -
图片触发HTTP请求总结，网页图片预加载
图片的http请求，有很多种情况，那么究竟什么情况下面不会发生请求呢？下面我用案例一一列举一下，（请求图片截图，均已谷歌浏览器为例！）1. 隐藏图片<img src="haorooms.jpg" style="display: none" />http请求如下：结论：只有Opera不产生请求。注意：用visibility: hidden隐藏图片时，在Opera下也会产...转载 2020-04-23 08:17:38 · 1534 阅读 · 0 评论 -
前端开发捡漏——css reflow、 CSS 绝对定位、JS中的作用域scope和闭包closure、js字符串操作函数
1、cssreflow（回流）和repaint（重绘）浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow（回流）。由于 reflow 是一种浏览器中的用户拦截（user-blocking）操作，所以了解如何减少 reflow 次数，及不同的文档属性（DOM 层级（DOM depth），CSS 效率，不用类型的 style 变化）...原创 2020-04-22 22:09:00 · 734 阅读 · 0 评论 -
web前端开发一些捡漏知识——table-layout 属性、＜col＞ 标签、地标角色、css选择器的特殊性、Media Queries媒体查询
1、CSStable-layout属性设置表格的布局算法：table{table-layout:fixed;}tableLayout 属性用来显示表格单元格、行、列的算法规则。固定表格布局(fixed)与自动表格布局(auto)相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。在自动表格布局...原创 2020-04-22 17:46:27 · 1066 阅读 · 0 评论 -
rem 和px、em的区别 ？
先说一下几个的特性一、px:是显示屏上显示的每一个小点，为显示的最小单位，这个长度与你看到的显示屏中的文字屏幕像素没有任何关系。1、px 像素值是固定的，不会随着屏幕宽度变而改变二、em:是相对单位。相对于当前对象内文本的字体尺寸， 如果当前行内文本的字体尺寸没有被设置过，那则相对于浏览器的默认尺寸，默认是 16px。1、em 的值并不是固定的。2、em 会继承父级元素的字体大小。...原创 2020-03-23 18:42:21 · 523 阅读 · 0 评论 -
如何实现九宫格
九宫格容器是宽高相等的正方形，实现九宫格有几种方法，这里列举一二一、用Grid实现对于网格布局来说，grid 比 flex 更为方便，代码量更少，可以处理更为复杂的结构。如以下代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>九宫格</...转载 2020-03-23 11:17:43 · 1494 阅读 · 0 评论 -
css引入外部自定义字体
首先在css文件中写入@font-face { font-family: '汉真广标',"SalesforceSansRegular"; src: url('../font/汉真广标2.ttf') ;}再在类中引入.kc-name{ font-size: 18px; color:red; font-family: '汉真广标';}特殊字...原创 2020-03-21 13:45:41 · 399 阅读 · 0 评论 -
使用bootstrap框架-引入使用
【前端框架】bootstrap框架：这是一款开源免费的前端框架，能够帮助我们很快速的搭建一个页面，优化代码，符号w3c标准，并且兼容IE6及以下浏览器。为什么要使用框架：会少消耗点带宽一、Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的...原创 2020-03-21 13:01:20 · 1815 阅读 · 0 评论 -
如何设置placeholder文本样式css
1、用以下代码可以控制placeholder的文字样式。::-webkit-input-placeholder { /* Webkit browsers*/ color: red;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red;}:-moz-placeholder { /* Mozilla F...原创 2020-03-08 20:31:14 · 1110 阅读 · 0 评论 -
h5新增表单属性
1.input 增加了ty...转载 2020-02-02 17:04:58 · 163 阅读 · 0 评论 -
搭建-ico图标制作
啥是ico图标：即是显示在网页上的，如第一步：转换ico图标，将提前准备的透明图片（png格式）转换为图标，在网址上 http://www.bitbug.net/ 转换。转换后的后缀是ico，尺寸大小为32*32.第二步：在html文件里写代码，图标命名要与设置的一致，OK啦...原创 2020-02-02 15:47:34 · 311 阅读 · 0 评论 -
如何修改默认的placeholder的样式
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果，这时就可以用以下代码来对placeholder进行样式设置了。直接在CSS里写样式修改即可,如 input::-webkit-input-placeholder {//使用webkit内核的浏览器 color: #666; } input:-moz-placeholder {/...原创 2020-02-02 15:19:11 · 1346 阅读 · 0 评论 -
选择器的几种
1.属性选择器(1)标签...转载 2020-02-02 15:14:29 · 350 阅读 · 0 评论 -
html如何添加字体
1.添加普通字体：比如：font-family:,;一般系统支持的网页常见中文字体有：宋体、雅黑、黑体。body{font-size:14px;color:#333;background:#fff;font-family:"Times NewRoman","MicrosoftYaHei","simsun","HelveticaNeue",Arial,Helvetica,Georgi...原创 2019-11-09 23:12:32 · 5447 阅读 · 0 评论 -
Box Shadow阴影和圆角
一、盒子写Box Shadow阴影：如box-shadow:2px 2px 5px #120F0B;//支持Opera浏览器-moz-box-shadow:2px 2px 5px #120F0B;//支持Firefox浏览器-webkit-box-shadow:2px 2px 5px #120F0B; //支持webkit内核的Safari和Chrome浏览器一般要加上适合浏览器...原创 2019-11-09 21:52:09 · 2075 阅读 · 0 评论 -
vant-UI库修改样式无效
最近用vue写页面时，发现使用vant的有些UI组件，而又不能满足自己的样式，修改CSS样式还是无效。css一般都会使用sass或者less，加了scoped后修改的样式不起作用，即使加了important也没用vue项目中，当<style>标签有scoped属性时，它的 CSS 样式只作用于当前组件中的元素，父组件的样式将不会渗透到子组件中。解决办法：1.对于css语法起作用...原创 2019-10-30 16:22:13 · 9638 阅读 · 2 评论