这是一篇很久以前的文章了，现在看来，其中的思想很值得大家学习，在jb51.net学习案例的同时，不仿学习一些理论的知识，对您知识的突破会很有帮助。大家加油！ 自从看了Zeldman先生的力作“Designing with Web Standards”中文版为《网站重构》（第2版）一书，感受颇深，坚定了我用web标准的思想，去开发实践我们的项目。但是仅知道一些什么是web标准以及如何应用到实际项目中，还是远远不够的。必须对web标准中的每...
本篇文章给大家带来的内容是关于CSS实现基于用户滚动应用（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。通过将当前滚动偏移映射到html元素上的属性，我们可以根据当前滚动位置设置页面上的元素样式。我们可以使用它来构建一个浮动导航组件。这是我们将使用的HTML，<header>当我们向下滚动时，我们希望在内容之上浮动的一个很好的组件。<header>Im the page header</header> <p>Lots of content here.....
根据定义：before和：after是CSS的伪元素，我们可以使用它们在元素内容之前或之后插入内容，有很多的文章都给出了它们的基础知识，所以我想写一篇关于:before和:after在实际应用的文章，表示我们正在使用它们。语法假设我们有以下简单的html标记：<p>paragraph text</p>我们可以使用这样的伪元素：p:before {content: "this is "; font-weight: bold; font-style: italic; }结果是：请注意，实际上是在内容之前或之后添加元素...
很多刚刚接触display的时候，不知道displaytable是什么和怎么去使用display:table-cell，其实display:table-cell的使用并不难，只要我们了解一下display:table-cell的属性的应用规则，那么，display:table-cell的怎么应用？下面我们来讲解一下display:table-cell的应用方法。一：display:table-cell的属性display:table-cell的属性很类似于td标签，现在很多浏览器都是支持display:table-cell属性的，我们都知道表格有些特别的属性，...
本篇文章给大家带来的内容是关于css中clip属性的应用方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。先看效果clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。clip: rect(<top>, <right>, <bottom>, <left>);<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title>...
这篇文章给大家介绍的内容是关于多列布局的概念是什么？CSS多列布局的应用（实例代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。多列布局CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:代码如下（具体的解释也在代码中）浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。<!DOCTYPE html> <html lang="en"><head><meta ...
本篇文章主要介绍css中sprites的应用，这是一个很简单的应用，不过在设计中，这样做可以减轻服务器的压力，是请求次数减少，是一个不错的方法。实例代码如下：body { font-family: "Lucida Sans", "Lucida Sans Unicode"; font-size: 14px; line-height: 24px; } ul { list-style-type: none; } li { float: left; } a{ background-image: url(bg.gif); height: 26px; background-position: 53px 0px; display: block; margin...
作为 CSS3 规范的一部分，弹性盒布局模型可以在很多典型的场景中简化完成布局所需的 CSS 代码。该布局模型也提供了很多实用的特性来满足常见的布局要求，包括对容器中条目的排列、对齐、调整大小和分配空白空间等。弹性盒布局模型可以作为 Web 开发人员工具箱中的一个很好的工具。 1、css清除浮动。父元素如果没有设置高度，将默认由子元素撑开父元素的高度。如果子元素设置了浮动，也不能撑开父元素的高度。 2、使用@media only ...
本文主要和大家介绍10分钟理解BFC原理及其应用的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲...
我们知道CSS3虽然目前为止还没有正式成为标准，但是IE9+, chrome, Firefox等现代浏览器全部都支持CSS3，它提供了很多以前用JS和切图才能完成的功能，下面就给大家详细的介绍一下有哪些。1.圆角2.多背景3.渐变色4.@font-face5.动画与渐变6.Box阴影7.文字阴影8.RGBa-加入透明色CSS性能优化：CSS 代码是控制页面显示样式与效果的最直接“工具”，但是在性能调优时他们通常被 Web 开发工程师所忽略，而事实上不规范的 CSS 会对页面渲染...
【CSS3盒模型display：box的应用】CSS3新增属性“display:box;”和“box-flex:数值”是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。box-flex属性：主要让子容器针对父容器的宽度按一定规则进行划分。啥都不说了，自己贴代码看效果。Html结构：<body> <p>魔</p><p>术</p><p>师</p> </body>应用：水平布局bo...
最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。Hihi, 大家好~ 最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。可惜字体的...
应用场景一：当表格中有很长的英文时，如果没有设置table-layout:fixed 或者 word-break:break-all，则单元格显示的宽度不是我们设置的宽度，如下：<style>table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;/*table-layout: fixed;*/}td,th{height: 30px;border:2px solid #ccc;/*word-break: break-all;*/}</style> <table width="400" border="1" id="table1"><tr> <td>3</td><td width="1...
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是对position五个值的解释：其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。1、absolute（绝对定位）absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取...
unicode-bidi设置与双向算法相关的嵌入语法： unicode-bidi : normal | bidi-override | embed参数： normal : 对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作embed : 对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序bidi-override : 严格按照direction属性的值重排序。忽略隐式双向运算规则 说明： 用于同一个页面里存在从不同方向读进的文本显示。与direction属性...