• 当前标签:css

多种CSS垂直居中技巧

自古以来(是有多古?)~网页CSS的垂直置中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈们的研究后,据说CSS的垂直置中技巧已达到近十种之多,但始终鲜为人知,部分公司甚至将CSS的垂直置中技巧当成了面试题目,其重要性可见一斑,经过了Amos通灵了一下之后把垂直置中的写法扩增到了23个,今天就让Amos带着大家轻松的了解一下CSS的垂直置中的方式吧。 1、Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于将单行文字的行高设定后,文字会

2018-08-27 01:38:19 153 9 2
阅读详情

网页设计中常用的web安全字体及CSS写法

HTML,CSS,font-family:中文字体的英文名称 中文名 对照名 css写法 宋体 SimSun font-family:SimSun; 黑体 SimHei font-family:SimHei; 微软雅黑 Microsoft YaHei font-family:Microsoft YaHei; 微软正黑体 Microsoft JhengHei font-family:Microsoft JhengHei; 新宋体 NSimSun font-family:NSimSun; 新细明体 PMingLiU font-family:PMingLiU; 细明体 MingLiU font-fa

2018-04-06 21:21:45 1307 22 16
阅读详情

css改变鼠标形状

原理其实就是一段CSS代码,定义了一下光标,使他不再使用本地的光标!改变鼠标指针形状的方法:系统鼠标指针与自定义控件,一般我们都用系统鼠标指针,其实这已经能满足大部分群众了,通常只有为了页面看起更好看,锦上添花才会选择自定义控件。CSS文件只要在页面中引用了就可以,wordpress的直接添加到style.css中即可 ,其他的不知道可直接添加到页面底部!在此水发文一篇。 例如: a{ cursor:default;} div{ cursor:url(url图片地址) } css样式表(加粗为常用): 属性 效果  crosshair  十字准星  auto &n

2017-10-29 22:41:37 711 10 4
阅读详情

常用CSS样式缩写语法

缩写CSS样式的好处: 对于浏览者而言,缩写可以减少CSS代码量,进而减少CSS文件体积,有利于访问者更快的打开网页;对于开发者而言,CSS代码量少,阅读简洁明了;对于网站服务器而言,在相同带宽下可以承受更多的访问请求。 常用CSS样式表缩写语法总结 盒尺寸(padding、margin) 常见margin与padding边距缩写margin外边距与padding内边距是制作布局时常用到的两个属性,在传统写法上,我们通常使用以下形式: .box{ width:300px; height: 300px; background: #eee; margin-left: 20px; margin-ri

2017-10-19 19:31:02 797 13 5
阅读详情

CSS 样式画三角形

下面是一些三角形样式,部分我在仿站练习时,用到了的图案,加了点颜色美化,记录一下... 各种三角形的效果图和代码记录 三角形,倒三角形,左三角形,右三角形 上三角 效果图: 代码样式: #triangle{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid #f44336; } 右三角 效果图: 代码样式: #triangle{ width:0; height:0; border-top:50px solid

2017-10-15 23:15:30 999 22 5
阅读详情

编写出色CSS代码的13个建议

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset: *{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同,Reset并

2017-10-11 13:37:40 593 6 5
阅读详情

border属性练习

border属性小练习,做的两个简单页面 border属性演示一 border属性演示二

2017-09-30 21:09:49 796 7 3
阅读详情

html/css路径引用同级、下级、标准写法

在网页制作的过程中,少不了跟路径打交道,比如,包含一个文件,插入一个图片等,与路径都有关系,如果使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。 作为初学者的我,有时会感到困惑「(°ヘ°),这路径什么鬼Σ (゚Д゚;) ,怎么写的啊(⊙_⊙)?, 下面我就介绍一下了解到的相对路径与绝对路径。 根相对路径(也称相对跟目录)的路径以“/”开头,路径是从当前站点的根目录开始计算。 / 代表根目录,慎用 ../ 代表上一级目录 ../../ 代表上两级目录 /..代表下级目录 /../.. 代表下两级目录 标准写法: 同级 直接引用文件名 <link rel=

2017-09-16 13:18:36 858 4 0
阅读详情
  • 1
  • 2
  • 3
前往