CSS3可以实现制作立方体，代码简单，只是涉及CSS3的一些变换、动画以及过渡属性，而且这些大家都见过，通过制作这个立方体可以让大家更好见识到CSS3的厉害。实现效果如下图：立方体是由六个面组成，分上下、左右和前后，考虑这些可以助我们更好的融入css3的代码接下来就是要写代码了：首先我们设一个大盒子cube，包裹住六个div：然后是css代码：首先在.cube里设置宽高，整体居中，这些按个人习惯，不可省略的有定位，目的是为了让每...
css代码.container{ -webkit-column-width:160px; -moz-column-width:160px; -webkit-column-gap:5px; -moz-column-gap:5px; }/*数据块 砖块*/.container div{width:160px; margin:4px 0;} css写完了body中的元素 <div class="container"><div><img src="images/P_00.jpg" /></div><div><img src="images/P_01.jpg" /></div><div><img src="images/P_02.jpg" /></div><div><img src="images/P_03.jpg" /></div><div><img src="ima...
段落前面空两个字的距离，不要再使用空格了，用CSS实现段落首缩进两个字符。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。<style type="text/css">p{text-indent: 2em;/*em是相对单位，2em即现在一个字大小的...
一、使用css实现.slh {width:200px;display: block;overflow: hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;}优点：简单易用缺点：如果设置 /*td, th, div { word-break: break-all; word-wrap: break-word; }*/ie8+直接根据宽度将宽度截取。而不会显示省略号。而且如果不规定高度。文本还会换行显示。所以加一个样式.height20{height:20px;}原文：http://www.cnblogs.com/wuqiong/p/4132893.html
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>图片立体过渡切换效果</title><style type="text/css">*{margin:0;padding:0;}div{width:500px;height:500px;margin:150px auto;position:relative;perspective:800px;}ul{list-style:none;width:500px;height:280px;}li{position:absolute;top:0;left:0;transition:all 1s;}li.center{transform:translateZ(100px);z-index:10;}li.left1{transform:rotateY...
气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样...
列表隔行换色是指在新闻和文章列表中，前一行和后一行的背景色交替显示，也可称为斑马线，给网页可增色不少。今看到小毅在BI的贴子“标准下隔行换色的思考”，采用UL的两行背景重复，虽说方法不错，但LI里的高度只能采用背景中的实际高度，不够灵活，所以用ASP+CSS 写了一个，采用自定义列表。<% set rs=...... sql="......" rs.open sql,con,1,1 %> <dl> <% i=0 do while not (rs.eof or err)%> <dt><a href="http://www.forest5...
css代码：input{width: 200px;height: 40px;}input.focus{border-color: #08c;box-shadow: 0 0 4px #8bd6fb;transition: all .2s ease-out 0s;} 原文：http://www.cnblogs.com/heimanba/p/3868378.html
本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下：这是一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/css-xlcd-nav-menu-codes/具体代码如下：复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
<html><head><title>河北礼品公司</title><style> body {background:#eee;margin:0;padding:0;} .example {background:#fff url(/imagesforcode/201306/clouds-in-blue-sky.jpg);width:770px;height:570px;border:1px #000 solid;margin:20px auto;padding:15px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}/* main menu styles */ #nav {display:inline-block;width:100%;margin:0px auto;padding:0;ba...
前端技术众多，作为一名前端工程师，我们每接触新技术首先要懂得此技术的优势和劣势，这是最基本的。往深入了说还需要懂得技术的应用场景，与之配合的技术等，方便为以后架构做准备。而less作为一门CSS预处理语言，拥有函数式变成的特点，主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在：项目公共样式的定义，如页面主色、固定数值（宽、高、时间等）、公用样式模板、封装省略浏览器兼容前缀的函数等。1.less的两...
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> <style>/*三角形*//* div{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid;} *//*带角框*/div{width:100px;height:100px;border:2px solid;}div::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;bord...
先来看张图吧聪明的你应该已经看出来了，border的边框是由四个三角形组成的，接下来我们就使用这一原理来实现等边三角形吧~1.首先创建一个带边框的div<div class="triangle"></div> <style>.triangle {width: 50px;height: 50px;border-width: 50px;border-style: solid;border-color: red green blue brown;</style>2.将div的宽高设置为0 <style>.triangle {width: 0;height: 0;border-width: 50px;border-style: solid;border-...
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>图片投影效果</title><style>.box {position: absolute;padding: 2px;background: white;-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);box-shadow: 1px 2px 4px rgba(0,0,0,.5);}.box img {display:block;width:200px;height:220px;border: 1px inset #8a4419;background:#eee;}.box:after {content: ‘‘;-webkit-box-...
今天要给大家介绍的是css3按钮，里面包含四种特效的动画，如下图： 在线预览 下载源码实现html代码：<div align="center" class="fond"><br /><div class="bouton_1"><a href="#123"><img src="caddie.png"/><span class="texteduboutton_1">Ajouter au panier</span></a></div><br /> <br /><div class="bouton_2"><a href="#123"><img src="caddie.png"/><span class="texteduboutton_2">Ajouter au panier</span></a></div><...