- 博客(28)
- 收藏
- 关注
RSS订阅转载 CSS 浮动规则
前面介绍过 CSS 浮动的基本概念，这里继续介绍 CSS 浮动的规则。 规则一： 浮动元素的左（或右）外边界不能超过其包含块的左（或右）内边界。 注：浮动元素的包含块指的是其最近的块级祖先元素。 规则二： 浮动元素的左（或右）外边界必须是源文档中之前的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。 如上图，图片都
2017-08-12 15:33:20
241
转载 CSS网页布局时常犯的几种小错误
1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错P的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2. 检查CSS是否书写正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 3. 用删除法确定错
2017-08-11 16:32:08
171
转载 CSS中常用属性详解
1.span:行内标签 2.font-family:字体类型 font-family:"楷体"; 3.font-size:字体大小 font-size:16px; 4.font-style:字体风格 normal:正常样式 italic:斜体样式 oblique:倾斜样式 5.font-weight:字体粗细
2017-08-11 16:30:20
419
转载 html+css零基础入门教程
HTML即超文本标记语言 (Hyper Text Markup Language)， 是用来描述网页的一种语言。 超文本标记语言的结构包括"头"部分（外语：Head）、和"主体"部分（外语：Body），其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 如下代码
2017-08-11 16:29:46
653
转载 CSS 样式书写规范
可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。 我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，并不希望大家完全采用，而是希望可以结合自己的团队需要，发展出一套适合自己的 CSS 代码规范。 也希望可以有更多
2017-08-11 16:27:22
153
转载 编写出色CSS代码的13个建议
CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则： 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset： *{ margin
2017-08-10 16:41:40
125
转载 DIV+CSS中让布局居中_背景图片居中_文字内容居中
在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。 1、首先介绍使用css属性让整体布局的居中： 设置对象的父级内容居中，这里一个页面的为父级是什么呢？我们可以想象整个页面的内容是由和这两个包含，那根据较近父级我们就设置body的CSS来实现居中问题，可以向在内容里居中有text-align:center;具体css的
2017-08-10 16:40:29
545
转载 CSS的状态
JavaScript越来越有一统天下的趋势，这已经不是什么秘密了。但是你可能不知道的是，CSS也同样的在进化，在创新。 CSS最近已突飞猛进，得到很多的改善。甚至CSS都有可能不再是你认识的CSS了。当你不注意的时候，CSS社区开发了很多真正解决许多古怪的CSS问题，在这个过程不需要使用一些黑魔法，以前的缺陷也不再是缺陷。也使这些害群之马从前端的家庭中踢出去。 在这篇文章中，将
2017-08-10 16:39:27
206
转载 DIV+CSS规范命名大全集合
很多初次接触网页设计的小伙伴，是不是对于开始书写div的时候 给它们取名字犯难了 用拼音吧，明显很low啊 而且慢慢会发现同行都是用一些简短的字母表达一些常用的名字 比如放置图片的div一般取名会叫pic这样 那么，各种常见的div一般都是如何取名字的呢？ 一、命名规则说明 1）、所有的命名最好都小写 2）、属性的值一
2017-08-10 16:26:51
554
转载 CSS 布局十八般武艺都在这里了
布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带来一些帮助。 1常用居中方法 居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中： 水平居中 北京双眼皮医院h
2017-08-09 18:02:04
149
转载 动态加载css方法实现和深入解析
一、方法引用来源和应用 此动态加载css方法 loadCss，剥离自Sea.js，并做了进一步的优化（优化代码后续会进行分析）。 因为公司项目需要用到懒加载来提高网站加载速度，所以将非首屏渲染必需的css文件进行动态加载操作。 二、优化后的完整代码 /* * @function 动态加载css文件 * @param {string} op
2017-08-09 17:51:54
111
转载 前端工程师必须收藏的 CSS 资源大全
预处理器 更快地编译 CSS GCSS：一个用GO语言编写的CSS预处理器。 LESS：向下兼容CSS并为当前的CSS增加额外的功能。 Myth：只用写纯CSS而不用担心浏览器加载缓慢。 PCSS：一个用Python语言编写的CSS预处理器。 PostCSS：通过JS插件来转换CSS。PostCSS Sass：成熟、稳定且强力的
2017-08-09 17:51:14
244
转载 CSS实现文本溢出的部分用省略号代替的方法
我们通常在设计网页的时候，由于相关的需求需要一行定宽，然而有时候文字的展现过长就会溢出。今天，就单行和多行两种情况来说明一下溢出的文字用省略号代替。 一、单行溢出 1,单行溢出，超出部分显示...或者截取。前提必须有宽度。 CSS：{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis
2017-08-09 17:50:18
4808
转载 动态加载css方法实现和深入解析
一、方法引用来源和应用 此动态加载css方法 loadCss，剥离自Sea.js，并做了进一步的优化（优化代码后续会进行分析）。 因为公司项目需要用到懒加载来提高网站加载速度，所以将非首屏渲染必需的css文件进行动态加载操作。 二、优化后的完整代码 /* * @function 动态加载css文件 * @param {string} op
2017-08-08 17:28:11
395
转载 CSS中的color
一、web中颜色的使用 /* Keyword values */ color: currentcolor; /* values */ color: red; color: orange; color: tan; color: rebeccapurple; /* values */ color: #0f0
2017-08-08 17:27:00
334
转载 CSS 核心概念归纳之定位和 BFC
三个特征 BFC会阻止垂直外边距的折叠。(当同属一个BFC时，两个元素有可能发生垂直的重叠，要解决margin重叠，只要让他们不在同一个BFC就行了，对于两个相邻的元素来说，意义不大，没有必要给他加一个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设置为BFC就行了，这样元素的margin就不会和父元素的margin重叠了) BFC不会重叠浮动元素 BFC可以包
2017-08-08 17:26:26
157
转载 表单与其他页面元素的作用不同
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显
2017-08-08 17:25:53
249
转载 CSS界面组件之表单
1.概述 表单与其他页面元素的作用不同。其他元素是把服务器发过来的内容显示给用户，而表单则是 把用户的信息发送给服务器。 form 元素有两个必要的属性：action 和 method。 action 属性用于指定服务器上用来处理表单数据的文件的URL。 method (值为 post 或 get)用于指定怎么把数据发送到服务器。 所谓 控件，是对
2017-08-08 17:25:19
248
转载 css基础样式（9）-定位、浮动
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显
2017-08-08 17:24:03
164
转载 CSS八种方式实现等高布局
下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果，正如下图所示： 一、假等高列 这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像： Html Markup 在制作样式之前需要一张类似下面的背景图：
2017-08-07 16:52:14
442
转载 CSS实现多列复杂界面布局
1、此页面宽高均占满全屏 这种占满全屏的布局，比较常见的是早期的一些论坛，width都设置为100%，现在也有不少论坛设置成了定宽~ 当前这种页面元素比较多的布局，建议加上最小宽度 & 最小高度，再加上宽度高度都是100%(要设置html,body高度为100%)。 html, body{ height: 100%; } .w
2017-08-07 16:51:41
387
转载 CSS网页布局时常犯的几种小错误
1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错P的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2. 检查CSS是否书写正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 3. 用删除法确定错
2017-08-07 16:50:15
145
转载 CSS动画实战：创建一个太极Loading图
动画分析 首先通过效果对动画执行进行一下分析： 边框的四条边进行按顺序动画加载 。 矩形边框变为圆行边框。 太极图内部图案渐渐出现。 太极图旋转。 整个动画逆序执行。 针对上面的1效果是需要思考一下的，其他都比较容易实现。5效果只需设置属性animation-direction: alternate即可，整体动画加入animat
2017-08-07 16:49:21
194
转载 纯 CSS 实现波浪效果！
而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。 使用 SVG 实现波浪效果 借助 SVG ，是很容易画出三次贝塞尔曲线的。 看看效果： 代码如下： 50.0%
2017-08-07 16:48:24
3018
转载 有用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。除了那些解决常见的恼人的问题外，也包含了一些解决新问题的新技术。 1.垂直对齐 如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题： .v
2017-08-04 18:03:42
166
转载 CSS布局整理
目录 1. 常用居中方法 （1）水平居中 （2）垂直居中 2. 单列布局 3. 二列&三列布局 （1）float+margin （2）position+margin （3）圣杯布局（float+负margin） （4）双飞翼布局（float+负margin） （5）flex布局 4. 总结
2017-08-04 17:59:37
229
转载 17个css知识点整理【下】
8.css的基本语句构成是？ 选择器{属性1:值1;属性2:值2;……} 9.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? IE(IE内核)、火狐（Gecko）、谷歌（webkit）、opear(Presto) 10.写出几种IE6 BUG的解决方法 双边距BUG：float引起的，使用display； 像素问题：使用flo
2017-08-04 17:58:52
167
转载 17个css知识点整理【上】
1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率； 使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快； 内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件； 容易维护、改版方便，不需要变动页面内容； 提供打印版本而不需要复制内容、提高网站易用性； 2.xh
2017-08-04 17:58:18
266
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人