搜索文章
类目归类
搜索到15篇与CSS的结果
小白
2020-11-11
/
0 评论
/
0 阅读
2020-11-11
CSS之栅格化布局
栅格化布局帮助你更容易构建复杂的网页设计。它会将HTML元素转换为网格的容器（有行有列）。你可以在网格里面添加你想要的子元素。grid 初始化元素为栅格化将一个HTML元素转换为网格的容器，只需要对其设置display: grid即可。display: grid告诉我们，可以使用CSS Grid的相关属性了。<dl class="container"> <dd class="item1">item1</dd> <dd class="item2">item2</dd> <dd class="item3">item3</dd> <dd class="item4">item4</dd> <dd class="item5">item5</dd> <dd class="item6">it...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
transform 导致字体模糊的解决方案
很多人在日常开发中会使用transform: translate(-50%, 50%)来居中弹出层，那么相信大家也会碰到与我相同的情况：有时候弹出层的内容变得模糊不清晰。原因很简单，是因为css动画在渲染非整数的px时会出现字体模糊。上面transform内的50%是相对于自身的宽高的，所以我们就需要确保自身的宽高都为偶数。解决办法：设置元素宽高皆为偶数（需要知道元素高度）使用margin代替transform（需要知道元素宽高）增加一个父级元素，将定位给父级，并使用flex布局使原本元素居中（不需要知道元素高度）.father { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
Css3如何:before :after 写小三角形
主要介绍了详解Css3如何利用 :before :after 写小三角形，在开发过程当中还是会实际用到的，分享给大家做个参考。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #demo { margin: 100px;; width: 100px; height: 100px; background-color: #fff; position: relative; border: 2px solid #333; } /*方框的样式*/ #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; left: 100%; /*根据三角形的位置，可以随意...
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
CSS限制字数,超出部份显示点点点...
最近项目中需要用CSS实现限制字数,超出部份显示点点点...，只需要一下代码即可：width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/ white-space :nowrap; /*让文字不换行*/ overflow : hidden; /*超出要隐藏*/语法：text-overflow : clip | ellipsis参数：clip : 不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）ellipsis : 当对象内文本溢出时显示省略标记（...）说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。请您注意，text-overflow:ellipsis属性在FF中是没有效果的。示例：div { text-overflow : clip; }text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽...
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
web前端浏览器内核简介
浏览器内核：也称为渲染引擎或排版引擎，主要用于对网页语法进行解释，并进行网页渲染，将网页代码转换为看得到的页面。可分为两部分：渲染引擎和 JS 引擎。最开始渲染引擎和 JS 引擎并没有被区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。渲染引擎主要负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。不同浏览器内核对于网页的语法解释会有所不同，所以渲染的效果也不相同。JS引擎用于解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。常用浏览器内核内核的种类很多，如果加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。Trident（windows）Trident(IE内核) ：由微软开发，国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。代表：IE、傲游、世...
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
CSS3实现毛玻璃（图片模糊）效果
效果HTML:<img id="blur" src="img/back.jpg">CSS:#blur{ filter:blur(10px); -webkit-filter:blur(10px); -moz-filter:blur(10px); -ms-filter:blur(10px); -o-filter:blur(10px); }结合CSS3毛玻璃实现微信版的发红包看完整照片效果。可以完美的兼容移动端与PC端。代码如下：html：<div id="content"> <!--模糊图片--> <img id="blur" src="img/4.jpg"> <!--使用canvas绘制图片--> <canvas id="canvas"></canvas> <a href="javascript:reset()" rel=&q...
admin
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
自适应网站只须一个CSS属性就够了
用一个CSS属性创建一个响应式网站，让我们来看看它是如何做到的。以这个模板为例，没有应用css属性。使用 clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。现在添加魔术CSSclamp(minimum, preferred, maximum);在这里！你已经完成了说明clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间。使用方法如下：minimum 最小值：例如 16pxflexible 弹性值：例如 5vwmaximum 最大值：例如 34pxh1 { font-size: clamp(16px, 5vw, 34px); }在此示例中，仅当该值大于 16px 且小于 34px 时,h1 字体大小值将为视口宽度的 5％。例如，如果你的视口宽度是 300px，你的 5vw 值将等于 15px，但是，你将该字体大小值限制为最小 16px，因此这就是将要发生的情况。另一方面，如果你的视口宽度为 1400px，则 5vw 将高达 70px！但幸运的是，你将该最大值限制为 34px，因此它不会超过该值。我可以为此模板添加此代码...img...
admin
2020-11-07
/
0 评论
/
0 阅读
2020-11-07
CSS之CSS变量
前言自定义属性（有时可以称为CSS变量或者层叠variables）是由CSS作者定义的实体，这些实体在一个document内可以被重用。一般按照自定义属性的符号设置（比如，--main-color: black；）然后使用var()函数使用。（例如color: var(--main-color)）复杂的网站有大量的CSS，通常会有很多重复的值。例如，同一个颜色可能会被在几百个地方都用到，可以从全局搜索去一次性替换掉。自定义属性允许这个值存储在一个地方，然后再多个地方引用。另一个好处是语义标识符号。（semantic identifier）例如，--main-text-color比#00ff00更容易理解，尤其是这个值在其他的上下文中也存在时。自定义属性遵循级联，会从父级继承它们的值。基本用法定义一个自定义的属性需要用--开始，然后属性的值需要是一个有效的CSS值。 和任何其他的属性一样，在一个规则集中定义：element { --main-bg-color: brown; }请注意规则集中的选择器定义了自定义属性可以使用的scope。一个通常的最佳实践是定义在:root伪...
admin
2020-11-07
/
0 评论
/
0 阅读
2020-11-07
CSS之背景渐变
线性渐变css背景渐变基本语法格式：background: linear-gradient( [ angle | to side-or-corner , ] ? color-stop [ , color-stop]+ )第一个参数是代表渐变的角度方向，可以是角度值或者方向顺序默认角度为180deg，代表渐变方向是垂直向下的，90度是水平向右，对应的方向顺序也可写成to bottom、to right.box { background: linear-gradient(#0f0, #00f); /* to bottom */ background: linear-gradient(90deg, #0f0, #00f); /* to right */ } 第二个及之后的参数是颜色值与其起止位置还是上面的例子，只指定颜色值，至少要指定两种颜色，默认将平均分配，每个色值各占比例相同。可以使用数值或者百分比调整渐变的长度，推荐使用百分比更加灵活。.box { background: linear-gradient(90deg, #0f0 50%, #00f 80%, #f00 ...
admin
2020-11-07
/
0 评论
/
0 阅读
2020-11-07
css之rem单位换算
此css引用时，直接1.2rem=12px，在与UI以px单位交互时直接在px的基础上除以10即可@media screen and (min-width:320px) and (max-width:321px) { html { font-size: 62.5%; } } @media screen and (min-width:321px) and (max-width:322px) { html { font-size: 62.6953125%; } } @media screen and (min-width:322px) and (max-width:323px) { html { font-size: 62.89062500000001%; } } @media screen and (min-width:323px) and (max-width:324px) { html { font-size: 63.08593749999999%; } } @media screen and (min-width:324px) and (max-width:325px) { ...
admin
2020-11-06
/
0 评论
/
0 阅读
2020-11-06
css之双飞翼布局
圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局 。 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。效果图双飞翼布局要求header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。双飞翼布局的实现left、center、right...
admin
2020-11-06
/
0 评论
/
0 阅读
2020-11-06
CSS之初始化代码reset.css
为什么要初始化CSS？建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。 最简单的初始化方法就是： * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。 写过css的都知道每个网页引进的css首先都需要初始化，而出名的css reset有YUI css reset（QQ、淘宝等都出现他的影子），业内用的最多的还有Erik Meyer’s CSS Reset。 CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网...
admin
2020-11-06
/
0 评论
/
0 阅读
2020-11-06
css之Flex布局教程
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex; }注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主...
admin
2020-11-03
/
0 评论
/
0 阅读
2020-11-03
css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手cursor:pointer;用JS使鼠标变小手onmouseover(鼠标越过的时候)onmouseover="this.style.cursor='hand'"cursor其他取值auto //标准光标 default //标准箭头 pointer, hand //手形光标 wait //等待光标 text //I形光标 vertical-text //水平I形光标 no-drop //不可拖动光标 not-allowed //无效光标 help //帮助光标 all-scroll //三角方向标 move //移动标 crosshair //十字标 e-resize //箭头朝右方n-res...
