搜索文章
类目归类
搜索到15篇与CSS的结果
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...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; }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%; /*根据三角形的位置,可以随意...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的宽...web前端浏览器内核简介
浏览器内核:也称为渲染引擎或排版引擎,主要用于对网页语法进行解释,并进行网页渲染,将网页代码转换为看得到的页面。可分为两部分:渲染引擎和 JS 引擎。最开始渲染引擎和 JS 引擎并没有被区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。渲染引擎主要负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。不同浏览器内核对于网页的语法解释会有所不同,所以渲染的效果也不相同。JS引擎用于解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。常用浏览器内核内核的种类很多,如果加上没什么人使用的非商业的免费内核,可能会有10多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。Trident(windows)Trident(IE内核) :由微软开发,国内很多的双核浏览器的其中一核便是 Trident,美其名曰 "兼容模式"。代表:IE、傲游、世...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...自适应网站只须一个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...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伪...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 ...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) { ...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...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初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网...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),简称"项目"。容器默认存在两根轴:水平的主...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...