随笔分类 - CSS
1
摘要：// 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; // 苹方-简 极细体 font-family: PingFangSC-Ultralight, sans-serif; // 苹方-简 细体 font-family: PingFangSC-Light, sans-serif; // 苹方-简 纤细体 font-family: ...
阅读全文
摘要：【要求】 一个div，配合 css3 或者 js 实现红绿灯切换的效果。 【思路】 使用 css3，要实现红绿灯颜色的变换必然要用到 animation 动画，通过 keyframes 控制颜色的渐变效果。 使用 js，则需要使用定时器，在定时器的方法中改变 div 的类名或者直接修改样式，来控制颜
阅读全文
摘要：px(pixel) 像素，是屏幕上显示数据的最基本的点，表示相对大小(不同分辨率上px显示不同) pt(point) 印刷行业常用的单位(磅)，等于1/72英寸，表示绝对长度 em em是相对长度单位，基于父级元素的font-size计算字体大小。 如果未设置父级字体大小，则相对浏览器默认字体尺寸1
阅读全文
摘要：首先看一个例子 分别执行两段 css， 发现效果是一样的，如下： 但是如果文档的结构变得更加复杂呢？看下面一个例子： 此时的样式应该是怎样的呢？效果如下： 平时开发中对于 nth-child(n）和 nth-of-type(n) 常用在一些需要单独渲染的列表元素的选取上面，因为结构单一，所以不难区分
阅读全文
摘要：前端时间在面试过程中问到了父元素中子元素水平和垂直居中的实现方法，因为平时疏于整理，只想到两种，现在回想到这个问题，所以针对各种情况集中整理一下。 首先看页面结构和元素的基本样式： 注：为了便于演示，这里给父元素和子元素都设置了宽高，但是实际情况下，这两者的宽高经常都是未知的。 要实现的效果如下：
阅读全文
摘要：实际的页面开发中经常会遇到左边定宽，右边自适应的需求，特别是一些管理系统，比如左边显示信息或操作列表，右边显示详情，如下所示：、 针对这种布局，首先抽象出页面结构如下： 浏览器中效果： 需要实现的效果如下： 那么针对这种常见的布局，方式是非常多的，下面给出几种比较简单和常见的方法。 方法一：左边设置
阅读全文
摘要：word-break: break-all; 控制是否断词。（粗暴方式断词）break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。 word-wrap: break-word; 控制是否换行。使用break-word时，是将强制换行。中文没有任何问题，英文语
阅读全文
摘要：经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点： 1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展
阅读全文
摘要：解决Safari下input光标过大 设置浮层 CSS绘制三角形 文字超出显示省略号 清除浮动 1.浮动元素父级添加样式 2.父元素后添加伪元素 3.同样可以使用如下方式（兼容IE） 5. 在浮动元素后面添加 br 元素 注意： 1. clearfix 应用在包含浮动子元素的父级元素上 2. 使用
阅读全文
摘要：CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- t
阅读全文
摘要：效果如下： 修改文字内容后测试效果：
阅读全文
摘要：【问题】页面中如果有多张图片，那么图片之间会有一些间距，在某些情况下（如切好的图片再次拼接），在显示上就会出现一些问题。效果如下： 对应代码： 【问题分析】 这个是浏览器的一个设计问题。 1.img本来是行内元素，却可以用width 和height,当父元素没有设置高度的时候，用子元素们的高度计算出
阅读全文
摘要：css中position定位有四个属性，分别是：static、fixed、relative、absolute。其中，static是默认值，未脱离文档流，元素的位置即按照文档结构的顺序进行定位排序；fixed是固定定位，和absolute定位不同的是，设置为固定定位的元素不会随页面滚动而改变位置，所以...
阅读全文
摘要：在网页的顶部或者底部导航栏中经常需要使用到固定层的效果，即紧挨浏览器窗口的顶部或底部而网页其他内容的影响。 一、实现 主要通过设置导航栏元素的位置属性position="fixed"来实现导航栏的固定效果。 学习过bootstrap框架都知道，在为网页设置顶部或底部导航栏时，需要为div或者ul列表
阅读全文
摘要：前段时间突然想到做一个显示时间的网页，虽然功能十分简单，但是做出来感觉效果还是很不错的。代码十分简单，通过Date()方法获取时间并分别获取具体的年月日时分秒，为了格式的统一在显示的时候需要判断时间位数，即当时间位数小于10时在前面加"0"，这样能有效避免显示时出现的跳动问题。同时我觉得单一的背景比...
阅读全文
摘要：1.页面中有一图片，请在下划线处添加代码能够实现隐藏该图片的功能【解】为图片添加display属性为hidden即可。2.编写样式表，要求图片在文字右方，标题字号16px 粗体居中，内容字号10px，图片宽度为300px。【解】图片在文字右方可以通过右浮动和设置margin属性实现。【效果】【代码】...
阅读全文
摘要：nofollow是HTML元标签(meta)的content属性和链接标签(a)的rel属性的一个值，告诉机器(爬虫)无需追踪目标页，为了对抗blogspam(博客垃圾留言信息)，Google推荐使用nofollow，告诉搜索引擎爬虫无需抓取目标页，同时告诉搜索引擎无需将的当前页的Pageran...
阅读全文
摘要：（一）实现简单的淘宝带图标侧边栏效果 效果图： （二）实现人人网登录页面（登录和提交按钮通过css sprite实现） 效果图： 参考：慕课网
阅读全文
摘要：在上一节的介绍中展示了通过函数改变ul类名的方式来设置对应类名的css样式来实现导航栏下方横线随栏目颜色变化的方法，但是这种方法并未真正实现属性值的跟踪，而是通过手动赋值来实现，并且代码量大，代码重复度高。下面介绍另一种更有效的通过获取（跟踪）元素属性值的方法来设置另一元素属性的方法。常用的获取元素...
阅读全文
摘要：简介：彩色的导航十分具有视觉美感，简约时尚，比较适合于童儿网站，女性网站等页面的导航。 功能：每一个栏目对应一个颜色，当鼠标移动到对应栏目时，该栏目突出显示，并同时改变下方横线的颜色。 实现： 1.导航栏用ul列表实现，横向显示通过 li{float:left} 实现； 2.列表项li和a标签通过
阅读全文
1