移除 IE 下 textarea 的滚动条
textarea {
overflow: auto;
}
完全的CSS实现的透明效果
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
...
<div class="box transparent">larger content</div>
X-UA-Compatible
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Internet Explorer 条件判断
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]> for higher than IE9 or non-IE <![endif]-->
YUI 字体 Reset
更多相关文档请看 YUI developer documentation
.
/*
fonts.css from YUI Library: URL - developer.yahoo.com/yui/ */
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }
强制显示浏览器滚动条
html { overflow-y: scroll; }
在输入框中显示手型光标
/** label CSS pointer reset **/
label, input[type=button], input[type=submit], button { cursor: pointer; }
表单域与文本标签的对齐
/* @group align radio, labels, forms */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
CSS3 预加载图片(s)
div.imgload {
background:url(images/sheet1.gif) no-repeat;
background:url(images/sprites.png) no-repeat;
background:url(images/mybanner.jpg) no-repeat;
margin-left: -99999px;
}
使用css翻动图片
img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
纯 CSS3 实现的圆角效果
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
IE 下的 Min-Height
.box {
min-height:500px;
height:auto !important;
height:500px;
}
垂直居中
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
类似杂志风格的 Pull 引号
.pullquote {
width: 220px;
float: right;
margin: 5px;
margin-left: 25px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #333;
}
花式符号
.amp {
font-family: Baskerville, 'Goudy Old Style', Georgia Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
分享到：
相关推荐
HTML5不仅是一个标记语言，还是一个完整的Web开发框架，它融合了HTML、CSS3和JavaScript，带来了许多新特性和改进，主要包括以下几点： - **良好的语义特性：** HTML5通过引入新的结构元素如`section`、`article`、...
### HTML5及CSS3 Web前端...以上就是关于HTML5及CSS3 Web前端开发技术的一些关键知识点和习题解析。这些内容不仅涵盖了HTML5的新特性，还包括了如何利用这些特性来改善Web应用的功能性和用户体验。希望对你有所帮助！
该书详细介绍了HTML5和CSS3这两个现代Web开发的重要技术，并且深入浅出地讲解了如何利用它们进行高效、美观的Web页面构建。书中涵盖了308页的内容，定价为39元，是初学者和进阶开发者学习Web前端技术的宝贵资源。 ...
《Web前端开发案例教程（HTML5+CSS3）（微课版）》是一份重要的教学资料，主要关注现代Web开发的基础技术，即HTML5和CSS3。这些技术是构建交互式、响应式和动态网页的核心工具。源代码的提供使得学习者能够深入理解...
《Web前端开发案例教程（HTML5+CSS3）（微课版）》是一份全面介绍Web前端开发技术的教育资料，特别关注HTML5和CSS3的应用。这份PPT课件旨在帮助初学者和有一定基础的学习者掌握现代网页设计与开发的核心技能。HTML5...
通过学习和实践这个响应式Web开发项目，新手可以了解如何使用HTML5来构建结构化的网页，使用CSS3来美化和响应化布局，以及如何借助Bootstrap高效地开发跨设备的界面。同时，熟悉这些源码文件的结构和用途也有助于...
在"HTML5+CSS3移动Web开发实战（第2版）"这本教材中，读者将深入学习如何利用这两门语言构建响应式、交互性强的移动端网站。 HTML5是超文本标记语言的最新版本，它引入了许多新特性，旨在提升网页的可编程性、交互...
学习HTML5和CSS3的移动Web开发，你需要理解新元素的用法，熟悉新的API接口，掌握响应式设计的原则，以及如何利用CSS3来提升用户体验。这个压缩包中的资源将是你学习过程中宝贵的实践材料。你可以逐个案例进行研究，...
响应式 Web 开发项目教程（HTML5+CSS3+Bootstrap）第 2 版第 1 章 HTML5+CSS3 初体验课后练习 本资源涉及到的知识点包括 HTML5、CSS3、Bootstrap 等响应式 Web 开发技术。下面是对每个知识点的详细解释： 一、 ...
《60023Web前端开发案例教程》是针对HTML5和CSS3技术的一套实践性强、内容丰富的教学资源，特别适用于初学者和希望提升Web前端技能的学习者。本教程以PPT课件的形式呈现，旨在通过实例讲解，帮助读者掌握网页设计与...
总之，"响应式Web设计HTML5和CSS3实战第2版"是一本全面的指南，涵盖了现代Web开发的关键技术。通过学习，开发者不仅可以掌握响应式设计的基本原理，还能了解如何利用HTML5和CSS3的最新特性构建适应多平台的高性能...
本教程《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》专注于这一领域，结合了最新的HTML5和CSS3技术，并引入了流行的Bootstrap框架，以帮助学习者快速掌握响应式设计的核心技能。 HTML5是超文本标记语言的第五...
它主要依赖于HTML5、CSS3以及一些响应式框架，如Bootstrap，来创建能够自适应不同分辨率和设备的网站。本教程是针对这些关键概念的一个综合学习资源，包括源码示例、课件和习题，帮助你深入理解和掌握响应式设计。 ...
响应式Web开发是一种现代网页设计方法，旨在提供跨设备、跨屏幕尺寸的无缝用户体验。...通过学习和实践提供的源码，你可以加深对HTML5、CSS3和Bootstrap的理解，进一步提升自己的响应式Web开发技能。
HTML5、CSS3和JavaScript是现代Web前端开发的三大核心技术，它们共同构建了网页的结构、样式和交互性。这份“HTML5+CSS3+JavaScript Web前端开发案例教程（慕课版）-测试卷.rar”压缩包文件包含了针对这三种技术的...
通过这个PPT教程，你不仅可以学习到HTML5和CSS3的基础语法，还能了解到它们在实际项目中的应用，包括如何创建响应式设计，优化用户体验，以及如何利用新特性提升网站的交互性和功能性。无论你是刚开始接触Web开发，...
1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化、支持更多多媒体元素、跨平台兼容性以及后台一致性等特点。 - CSS3...
前端设计人员必备教程；图文并茂，轻松掌握最新设计技术；全面应用HTML5和CSS3，一步跨入量前沿。 本书将当前WEB设计中热门的响应式设计技术与HTML5和CSS3结合起来，为...本书适合各个层次的web开发和设计人员阅读。
HTML网页免费自适应WEB开发人员网站模板，HTML、CSS、jsHTML网页免费自适应WEB开发人员网站模板，HTML、CSS、jsHTML网页免费自适应WEB开发人员网站模板，HTML、CSS、jsHTML网页免费自适应WEB开发人员网站模板，HTML...
总的来说，学习Web前端需要理论与实践相结合，理解HTML5、CSS3和JavaScript的基本概念，然后通过编写实际的网页项目来提升技能。这个3D魔方拼图项目就是一个很好的实践机会，它涵盖了前端开发中的许多重要概念和技术...