1.transform浏览器支持情况也就是说目前不考虑老浏览器的话是不用加前缀的，感谢菜鸟教程：https://www.runoob.com/cssref/css3-pr-transform.htmltransform默认值none;就是不转换，不继承，js中对其更改示例：object.style.transform="rotate(7deg)"2.transform能干啥？transform属性让元素进行2D或3D转换。可以将元素：旋转，缩放，移动，倾斜等。3.transform怎么用？ transform: none|transform-functions; none是默认的，就是不...
一、什么是媒体查询媒体查询是面向不同设备提供不同样式的一种实现方式，它可以为每种类型的用户提供最佳的体验，也是响应式设计的实现方式。现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示...
学了就忘，该记录一下了字体下载网址：http://www.dafont.com http:www.google.com/webfonts用法：@font-face { font-family: ‘zwl‘; src:url(‘fonts/zwllll.eot‘) format(‘eot‘), url(‘fonts/zwllll.ttf‘) format(‘truetype‘), url(‘fonts/zwllll.woff‘) format(‘woff‘), url(‘fonts/zwllll.svg‘) format(‘svg‘); font-weight: normal; font-style: normal;}到这里定义好了字体，也就是说浏览器能识别zwl这...
浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色，如下图所示，截自Firefox3.6浏览器：在CSS3的爸爸妈妈还没有相亲认识的时候，要改变页面上文字选中后的背景色以及文字颜色，就跟让太监生孩子一样困难。但是，随着CSS3呱呱落地，获得越来越多的浏览器认可，一切又显得那么自然而然。虽然有些顽固的糟老头（如IE浏览器）还不认可这个新生的CSS3，但是，丝毫不影响其在...
效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。 html代码如下： 复制代码代码如下:<div class="content"> <h3 title="专业技能">专业技能</h3> <div class="next"><!--其他内容--></div> </div> 有两种实现方式： 1.box-reflect (属性详情见http://css.doyoe.com/ 属性→边框→box-reflect) 复制代码代码如下:.content h3{ opacity:0.7; font:40px/50px ‘Microsoft yahei‘; -webkit-box-reflect: below 5px -webkit-gr...
1、强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>2、iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；<meta content="yes" name="apple-mobile-web-app-capable" />3、iphone的私有标签，它指定的iphone中safari顶端的状态条...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box1{width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div{width: 100px;height: 100px;margin-bottom: 100px;}.box2{background-color: #bfa;...
CSS3入门之转换*:first-child {margin-top: 0 !important; }body>*:last-child {margin-bottom: 0 !important; }/* BLOCKS =============================================================================*/p, blockquote, ul, ol, dl, table, pre {margin: 15px 0; }/* HEADERS =============================================================================*/h1, h2, h3, h4, h5, h6 {margin: 20px 0 10px;padding: 0;font-...
这是用CSS3制作的旋转的六面体请用火狐或谷歌浏览器预览，有些旋转角度做的不够好，请大神指教topbottomleftrightfrontback原文：http://www.cnblogs.com/jesse131/p/4823041.html
只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持，要设置垂直居中的话只需要将这两个属性的值都设置为center即可，需要的朋友可以参考下 以前处理垂直居中用的方法是设置div的height和line-height是一样的值，现在就不用那么麻烦了。只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持。其中box-pack控制的是水平的左和右，取值有：start(居左)，center(居中)，end(居右)。box...
弹性盒布局(Flex Box)一、概念弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（f...
在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。在详细介绍rem之前，我们先一起来回顾一下我们常用的两种记量单位，也是备受争论的两个： PX为单位 EM为单位PX为单位在Web...
?? ??? ? ? A、代码生成器(开发利器)? ? ? ? ? ?生成Java各层次的类和JSP等文件，提高开发效率? ? ? B、阿里巴巴数据库连接池Druid? ? ? ? ? ?性能最好的数据库连接池，稳定、可扩展、高性能、高并发? ? ? C、安全权限框架Shiro? ? ? ? ? ?实现认证、授权、加密、缓存、并发、会话管理、单点登录等功能? ? ? D、Ehcache二级缓存和Spring MVC静态加载缓存? ? ? E、微信接口开发? ? ? ? ? ?详尽的单元测试代码，详尽的开发文档，每个...
<title>CSS3圆角气泡框，评论对话框</title> <style> body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff; }a:link, a:visited {border-bottom:1px solid #c55500; text-decoration:none;color:#c55500; }a:visited {border-bottom:1px solid #730800; color:#730800; }a:hover, a:focus, a:active {border:0; color:#fff; background:#c55500; }a:visited:hover, a:visited:fo...
利用css3实现一个半月形的西瓜，利用queue实现吃西瓜的动画。练习例子css3:1、圆角border-radius:100%;border-top-left-radius:5px;2、变形2D旋转：transform: rotate(25deg);(正角度为顺时针，负角度为逆时针)。3D旋转：transform: rotateX(25deg);-----效果为div的高度变小，90deg时高度为0。3D旋转：transform: rotateY(25deg);-----效果为div的宽度变小（左右border同时内缩），90deg时宽度为0。缩放:transform:scale(1,0.5);或...