<!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>老Y天下-网页特效-导航菜单-漂亮的二级下拉菜单</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> /* common styling */ /* set up the...
原文来源：http://webdesignerwall.com翻译：http://xinyo.org当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择，网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。效果预览 代码下载先看看...
很棒的loading效果，收藏一下一HTML 代码：复制代码代码如下:<div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div></div>CSS 代码：复制代码代码如下:.spinner { margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px;}.spinner > div { background-color: #67CF22; height: ...
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"/> 5<title>使用CSS3实现百叶窗</title> 6<meta name="keywords" content=""/> 7<meta name="description" content=""/> 8 9<style>10 *{margin:0;padding:0;}11 body{}12 ul,li{list-style:none;}13 #banner{width:800px;height:500px;margin:60px auto;border:3px solid #082323;position:relative;}14 #banner .pic li{width:200px...
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的两...