网上有各种用CSS3画图标，画漫画的代码，实在是有点吊！如果能为自己的网站也绘制一套CSS3图标，那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同，但是大势所趋，写写更健康。首先，我们要做到使用简单，简单到给元素加个类就能使用图标，然后我们还要支持可定制，比如颜色，大小。看下面的代码：<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>...
水平大家都知道，一般固定宽度给个margin:0 auto；就可以了。下面实现水平垂直都居中HTML<div class="parent"></div>csshtml,body{width: 100%;height: 100%; } .parent{width: 750px;height: 400px;background: orange;/*水平居中*/margin: 0 auto;position: relative;top: 50%;margin-top: -200px;/*高度的一半*/ }都居中了。也可以把margin-top:-200;换为CSS3新属性:transform:translateY(-50%);原文：http://www.cnblogs.com/-...
我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@media）或者js动态设置css，根据不同的手机屏幕宽度，适配不同手机，但是这样有个很大的缺点，那就是移动端的屏幕尺寸太多了，就得写很多代码，才能实现我们想要的效果。今天突发奇想，使用了纯css实现了我想要的效果，下面就和大家来分享，上代码;<!DOCTYPE html> <html><head><meta charset="utf-8"><title>九宫格</title><meta name="viewport" content="maximum-s...
1 <body>2 <ul id="list">3 <li>11</li>4 <li></li>5 <li></li>6 <li></li>7 <li></li>8 <li></li>9 <li></li> 10 <li></li> 11 <li id="last" class="last"></li> 12 </ul> 13 <script> 14var li=document.getElementsByTagName(‘li‘); 15for(var i=0;i<li.length;i++){ 16 li[i].addEventListener(‘mouseover‘,function () { 17this.style.background=‘red‘; 18 }); 1...
要怎么实现下面的效果.只要在列表项之间避免换行就行了,所以要把<li>转换为内联. HTML和CSS代码如下: 复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel...
html结构：1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd"> 2 <img src="default.jpg" width="400" height="300"/> 3 </div>实现img位于外层div的居中显示，网上有很多在img外层嵌各式各样的span、div、li等等，以便于使用 text-align来进行居中，不推荐嵌套多层的方式。方法一（推荐）：1.demo{ 2 display:table-cell; text-align:center; vertical-align:middle; 3} 4.demo img{ 5 ...
分享一款基于jQuery+CSS3实现人物跳动特效。这是一款类似gif图片效果的CSS3动画特效代码。效果图如下：在线预览 源码下载实现的代码。html代码：<div class="charector-wrap " id="js_wrap"><div class="charector"></div></div><a class="run-xfast" href="#none">最快</a><a class="run-fast" href="#none">快</a><a class="run-normal" href="#none">正常</a><a class="run-slow" href="#none">慢</a><button class="btn-paus...
以前使用瀑布流都要用js，现在有了css3，可以轻松实现了。掌握点：1、column-count 把div中的文本分为多少列2、column-width 规定列宽3、column-gap 规定列间隙4、break-inside: avoid; 避免元素内部断行并产生新列注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。 实例： 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>CSS3瀑布流</title> 6<style> 7/*大层*/ 8 .con...
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。<divid="...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚网登录</title><style type="text/css">.main{width:100%;height:920px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52px;border:1px solid #000;}.downMenu{width:100%;height:30px;font:normal normal 20px "宋体";color:#fff;background-color: #000000; }#search{margin-left:520px;}a{text-decoration: none;}#img1{margin-left:330...
<div id="demo"></div> #demo{ width: 0px;height: 0px; border-color: #0FF #00F #F00 #933; border-style: solid; border-width: 50px; }因为元素宽度、高度都为0，只有4px的边框transparent;将其他颜色置为透明，则得到三角形，如图所示 原文：http://www.cnblogs.com/yanran/p/5013684.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS网页顶部阴影代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body:before { content:""; position:fixed; top: -10px; left: 0; width: 100%; height: 10px; z-index:...
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS圆角折叠菜单</title> <style type="text/css"> #menu { font-size:12px; height:380px; margin:0; padding:0; width:180px; overflow:hidden; background:#f0f0f0; list-style:none; border-left:1px solid #DDD; border-right:1px solid #DDD; } #menu li a { display:block; text-d...
想要适配手机端和pc端，有几种简单的方法，本人使用的是百分比分配的方法。*{padding: 0;margin: 0; } body,html{width: 100%;height: 100%;overflow: hidden; } #bottom_box{width: 100%;height: 50px;background-color: #eee;display: flex; //这是flex布局，父元素设置为flex，子元素设置几等份就是分成几等份position: fixed;bottom: 0px; } .tab{flex:1; //子元素都平均是1：1：1：1的意思text-align: center;padding-to...
css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下：复制代码代码如下:<body><div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</...