随笔分类 -  CSS

上一页 1 2
html5中input的type类型有哪些（总结）
摘要：目录 一、总结 一句话总结：时间、颜色、（邮件、电话、url）、（数字、数字范围）、搜索search 二、html5中input的type类型 三、HTML5 input类型总结 1、文字总结 2、代码 四、input相关总结 一、使input文本框不可编辑的三种方法 二、input调用移动端的相册 阅读全文
posted @ 2020-09-03 13:01 威武的大萝卜 阅读(2895) 评论(0) 推荐(0)
CSS样式相关
摘要：目录 1.高度和宽度 2.字体相关 3.字体对齐 4.颜色设置 5.背景 6.边框 7.盒子模型 8.display属性 9.伪元素选择器 10.伪类选择器 11.浮动 12.文字装饰 13.相对定位和绝对定位 14.固定定位 1.高度和宽度 <!DOCTYPE html> <html lang=" 阅读全文
posted @ 2020-09-02 13:53 威武的大萝卜 阅读(252) 评论(0) 推荐(0)
字体大小之px、em、rem、pt,字号详解
摘要：PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，A 阅读全文
posted @ 2020-09-02 09:45 威武的大萝卜 阅读(5872) 评论(0) 推荐(0)
html5 中创建manifest缓存以及更新方法
摘要：今天学习了一下manifest的相关知识，整理记录如下，以备将来查阅。 一、manifest MIME TYPE：text/cache-manifest 需要由你创建的：NAME.manifest 作用：主要是配置需要缓存的文件 二、实现 在服务器上添加MIME TYPE支: 比如 Apache 中 阅读全文
posted @ 2020-09-02 09:36 威武的大萝卜 阅读(675) 评论(0) 推荐(0)
怎么设置背景图片大小
摘要：可以通过cover和baicontain来对图片进行伸缩。 语法：background-size:auto;/* 默认值，du不改变背景图片zhi的高度和宽度 */ background-size:100px 50px;/* 第一个值为宽，第二个dao值为高，当设置一个值时，将其作为图片宽度来等比缩 阅读全文
posted @ 2020-09-01 17:07 威武的大萝卜 阅读(953) 评论(0) 推荐(0)
深入浅出 Viewport 设计原理
摘要：Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现，提供响应式解决方案。这篇文章尝试通过循序渐进的方式，逐层探索 Viewport 的设计原理，希望能给读者带来更加清晰、更加全面的技术认知。 一、引言 在PC时代，我们用 css 设置 阅读全文
posted @ 2020-08-25 17:39 威武的大萝卜 阅读(250) 评论(0) 推荐(0)
CSS3：页面添加水印pointer-events
摘要：pointer-events:none 允许点击穿透。 应用场景： 如下图所示，需要给页面添加水印，并且不影响页面的点击事件。解决办法：添加一个遮罩层，设置position:fixd;为此遮罩层设置pointer-events:none;，使其下面盒子的点击事件能够正常点击。 阅读全文
posted @ 2020-08-25 17:22 威武的大萝卜 阅读(1832) 评论(0) 推荐(0)
CSS绝对定位元素居中的几种方法
摘要：CSS居中绝对定位元素的方法，有很多种，下面是我收集的几种 1，div宽度未知1 <body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotte 阅读全文
posted @ 2020-08-01 22:35 威武的大萝卜 阅读(616) 评论(0) 推荐(0)
三角形的实现和盒模型、层模型、浮动模型、定位、权重、margin问题
摘要：相邻的border会平分所占的区域，出现一个斜线， .my_triangle{ width: 10px; height: 10px; background-color: blue; border-width: 100px ; border-style: solid; border-left-colo 阅读全文
posted @ 2020-07-13 17:24 威武的大萝卜 阅读(221) 评论(0) 推荐(0)
sass语法进阶小结
摘要：Sass的控制命令1.@if与@else if和@else可一起用 2.@for循环语法：@for $i from <start> through <end>@for $i from <start> to <end>$i 表示变量start 表示起始值end 表示结束值注：这两个的区别是关键字 th 阅读全文
posted @ 2020-07-11 10:26 威武的大萝卜 阅读(174) 评论(0) 推荐(0)
CSS
摘要：CSS简介 CSS 指层叠样式表 (Cascading Style Sheets)，样式定义 如何显示 HTML 元素。 样式通常存储在样式表中，当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明： 1. 阅读全文
posted @ 2020-06-18 20:00 威武的大萝卜 阅读(211) 评论(0) 推荐(0)
CSS代码片段
摘要：居中问题 定位: 将元素居中 将元素水平居中 将元素垂直居中 样式: 文字毛玻璃效果 代码 将元素居中: 1.使用绝对定位实现1 { width: 50px; height: 50px; /*设置元素宽高*/ position: absolute; /*修改为绝对定位*/ top: 50%; lef 阅读全文
posted @ 2020-06-13 11:30 威武的大萝卜 阅读(195) 评论(0) 推荐(0)
css中的单位
摘要：前端开发中, 做适配是少不了的, 这就用到了css中的各种长度单位, 做一下总结 在css中, 长度单位分为以下几种 绝对单位: px、in、cm、mm、pt、pc 百分比单位: vw、vh、vmin、vmax、% 相对单位: em、rem、ex、ch 各单位介绍 px 不用过多介绍, 精确像素 i 阅读全文
posted @ 2020-06-13 11:25 威武的大萝卜 阅读(333) 评论(0) 推荐(0)
HTML标签
摘要：HTML文档结构# head# Copy <head> <!-- 汉字编码 --> <meta charset="UTF-8"> <!-- 设置一个网站的搜索关键字 --> <meta name="Keywords" content=""/> <!-- 网站描述内容 --> <meta name=" 阅读全文
posted @ 2020-06-06 16:05 威武的大萝卜 阅读(430) 评论(0) 推荐(0)
懒加载和预加载
摘要：一、什么是图片预加载与懒加载： 图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而 阅读全文
posted @ 2020-04-28 18:49 威武的大萝卜 阅读(199) 评论(0) 推荐(0)

上一页 1 2