-
深入分析网页CSS隐藏文字和以图换字技术
所属栏目:[系统] 日期:2020-12-01 热度:68
打开电脑,感觉没有什么事可做,就随便拿起《css mastery》翻了下,刚好看倒图像替换这块,突然想起前些天曾有一网友问过该问题,就想总结出来,以便自己和网友今后参考。 正式进入使用方法总结之前,我们需要先理清几个概念,1.二者的区别:隐藏文字是要[详细]
-
闭合浮动元素让CSS代码更规范
所属栏目:[系统] 日期:2020-12-01 热度:178
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种[详细]
-
实用的CSS常见的问题和技巧总结
所属栏目:[系统] 日期:2020-12-01 热度:107
1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。 如: div{ border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px soli #cccccc; border-bottom:1px solid #cccccc; } 可以写为 p{border:1px solid #c[详细]
-
CSS教程:网页文本渐变
所属栏目:[系统] 日期:2020-12-01 热度:162
注:本文由 Robin 翻译自 webdesignerwall(这个标题不知道该怎么翻译好, 希望大家能提提意见.) 你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数[详细]
-
页面中有间隔的方格布局如何完美实现方法
所属栏目:[系统] 日期:2020-12-01 热度:192
如上图所示的布局,方格中间有一定的间隙,间隙是固定的。应该如何布局会更加完美呢,比如要保证在布局完成的情况下,可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候,这样的布局依然能够不受影响。又不用修改太多的内容。 设置宽为10[详细]
-
CSS实现宽度自适应宽高16:9的矩形的示例
所属栏目:[系统] 日期:2020-12-01 热度:58
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.jb51.net/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 style*{margin:[详细]
-
css样式常见图形效果展示的实例代码
所属栏目:[系统] 日期:2020-12-01 热度:141
副标题#e# 简单写一下常见的基础图形,以及一些遇到的样式小图标 下图是css效果: 各个图形的代码如下: Square(正方形) /*正方形*/.square {width: 60px;height: 60px;background: red;} Circle(圆形) /*圆形*/ /* 可以使用百分比值(大于30%),但是低版本[详细]
-
CSS教程:浮动元素对浏览器的支持
所属栏目:[系统] 日期:2020-11-28 热度:99
当元素设置浮动(float)后会被移出文档流,相信大家都会经常遇到这样的问题。 这问题的解决办法有N种之多,因为每种浏览器对CSS的解析各异,所以在不同浏览器使用清除浮动的元素也会有所不同。 我认为目前还没有最好的清除浮动元素或组合,而是根据情况分析[详细]
-
CSS教程:创建性感的CSS样式表
所属栏目:[系统] 日期:2020-11-28 热度:90
原文名称:Creating Sexy Stylesheets 原文地址: 作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由[详细]
-
CSS教程:CSS兼容的技巧
所属栏目:[系统] 日期:2020-11-28 热度:141
让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了。 .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } * html .e{ ba[详细]
-
CSS教程:学习CSS的继承性
所属栏目:[系统] 日期:2020-11-28 热度:55
所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应用的时候容[详细]
-
性感的CSS菜单(Menus)
所属栏目:[系统] 日期:2020-11-28 热度:186
当你需要一个简单易用的导航菜单得时候。CSSMenu是个不错的选择。相对于Flash/Javascript,他们小巧轻便,而且方便使用。当然,他们也能做出很多很漂亮的效果。 CssMenuExample 这里有几个专门收集CSS导航菜单的站点,其中有很多优秀的作品。也许能给你带[详细]
-
CSS教程:用dl dt dd来制作列表
所属栏目:[系统] 日期:2020-11-28 热度:69
今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方: 1、如果用UL还布局,右边一栏比较麻烦; 2、文字外边的边框自适应比较麻烦; 3、很可能要定死高度; 所以,细细地看一看这个布局,想一想还是用DL.DT.DD作是[详细]
-
区分IE6,IE7和firefox的CSS hack
所属栏目:[系统] 日期:2020-11-28 热度:107
区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*backgroun[详细]
-
CSS制作符合网站标准的细线表格
所属栏目:[系统] 日期:2020-11-28 热度:117
css教程:实现符合Web标准的细线表格 随着应用CSS网页布局构建网页, 以及web标准的广泛普及与发展, 表格渐渐被人们遗忘, 但是表格还是有它优秀的一面, 数据处理用表格的确省了不少麻烦! 这个是细表格的代码,并且通过了标准验证! table{ border:1px[详细]
-
学习WEB标准必备的四项技能
所属栏目:[系统] 日期:2020-11-28 热度:113
今天在群里,熊猫君提议整理一个帖子,一方面为初学者提供一个入门指南,另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结,希望抛砖引玉,大家不吝赐教。 1、必备工具 其实web标准并不是很复杂的技术,实现we[详细]
-
CSS3 实现时间轴动画
所属栏目:[系统] 日期:2020-11-26 热度:147
html h2CSS3 Timeline/h2pPlease set the $vertical variable to false to see the horizontal version./pul liinput type='radio' checkeddiv class=relativelabel for='work5'Lorem ipsum dolor sit amet/labelspan12 May 2013/spanspan/span/divdivpLor[详细]
-
详解overflow-scrolling解决滚动卡顿问题
所属栏目:[系统] 日期:2020-11-26 热度:55
如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。 解决方法 以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling: touch;,是因为这行代码启用了[详细]
-
CSS3实现菜单悬停效果
所属栏目:[系统] 日期:2020-11-26 热度:102
html nav id=nav-1 a class=link-1 href=#Home/a a class=link-1 href=#About/a a class=link-1 href=#Contact/a a class=link-1 href=#Shop/a/navnav id=nav-2 a class=link-2 href=#Home/a a class=link-2 href=#About/a a class=link-2 href=#Contact/a[详细]
-
Blazor中的CSS隔离问题
所属栏目:[系统] 日期:2020-11-26 热度:94
副标题#e# VS 2019 16.9.0 Preview 1.0 .NET SDK 5.0.100 2.前言 CSS一旦生效,就会应用于全局,所以很容易出现冲突。为了解决这个问题CSS隔离就顺势而生。Blazor诞生于2018年,至今为止已经2年多了,然而CSS隔离直至.NET 5出现才支持。 3.Razor组件间隔离[详细]
-
CSS对表格单元格强制换行和不换行
所属栏目:[系统] 日期:2020-11-25 热度:131
CSS控制Table单元格强制换行与强制不换行 我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗? 用CSS实现Table单元格[详细]
-
符合web标准的嵌入Flash的方法
所属栏目:[系统] 日期:2020-11-25 热度:128
常有网友提问,如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法,这篇文章中,我们将Flash嵌入标签写入js文件中,通过变量传递参数的办法来回避不符合标准的标签。 请注意,这只是一个变通的方法,换汤不换药,并未能最终解决存[详细]
-
CSS教程:控制网页文件大小通过精简CSS实现
所属栏目:[系统] 日期:2020-11-25 热度:193
尽管对于现如今的带宽来说,网页文件那仅以K来算的大小实在是微不足道,但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。 众所周之,在不影响整个网页构架与功能的情况下,网页文件越小越好,因为更小的网页文件有利于浏览[详细]
-
CSS教程:关于文字溢出问题的研究
所属栏目:[系统] 日期:2020-11-25 热度:66
首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子,里面提到ie7下出现的文字溢出问题; 于是又重新翻了以前怿飞斑竹的帖子,他提到的是注释引起的文字溢出问题,我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7,所以没有测试),[详细]
-
CSS教程:CSS命名参考
所属栏目:[系统] 日期:2020-11-25 热度:120
在XHTML中定义ID、CLASSS都用得上,主要是方面CSS定义样式时能一眼看穿。所以,CSS命名仅作参考。 (1)页面结构类 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整[详细]