大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下：#nav{ padding： 10px... } #header{ padding： 10px ... } #footer{ padding： 10px ... } 定义完之后呢，我们使用p标签来组织页面结构，如下：<div id=“header”></div> <div id=“nav”></div> <div id=“footer”></div>这样的代码...
下拉菜单是一个很常见的效果，在网站设计中被广泛使用。通过使用下拉菜单，设计者不仅可以在网站设计中营造出色的视觉吸引力，但也可以为网站提供了一个有效的导航方案。使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。A Flash Blue Menu在线演示源码下载Fancy Rolling Navigatio在线演示源码下载Sweet tabbed navigation using CSS3在线演示源码下载jQuery style menu with CSS3在线演示源码下载Fun Animated Na...
由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。好罢这篇本来是我私下做的笔记，我特别喜欢在Evernote上做备忘的笔记，虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击！比如跟别人讨论The Dark Knight里小丑...
本篇文字将展示给你的是，如何利用HTML5/CSS3，仅用5步就可以制作便签贴效果的HTML页面，效果图如下：(注：图里的文字纯属杜撰，搞笑目的，如有雷同，纯属巧合，谢谢！)注：该效果可以在Safari, Chrome,Firefox和Opera在看到效果，IE上由于对HTML5的支持不完全，所以看不出效果。第一步：创建基本HTML和正方形首先添加基本的HTML结构以及构建基本的正方形，代码如下：代码如下: Dudu： 最近咋没有美女发帖呢？我一定给个头条推荐...
在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。 问题 通过查看demo能注意到，我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲...
好吧，上次说要赶紧的补上几篇文章，结果淡定的失约了。又是近一个月才发一篇，真是让人郁闷。发现最近总是抽不出时间了，基本都是一个项目接一个项目的安排，自己不是在空闲的时候找不到合适的话题，就是在有纠结话题的时候抽不出时间了。所以我决定一段时间内先把自己纠结过的问题先归纳下知识点，等空闲的时候在一个一个深入研究，然后再整理成文章后分享出来。 开始进入正题，提到slider，过去一直都是用css+js来配合实现相关的...
在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。 demo地址：http://www.gxlcms.com/jiaoben/70022.html 下面我们开始介绍如何制作。 html： 代码如下: One face Up, down, left, right Lorem ipsum. New forms of navigation are fun. Rotating 3D cube More content 上面的html中，class为face的6个div分别代表立方体的...
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。 首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。 html： 代码如下: css： 代码如下: #pyramid { position: relative; margin: 100px auto; height: 500px; width: 100px; } #pyramid > div { position: absolute; border-style: solid; border-width: 200px 0 200px 346px...
很久没写过技术文章了，最近一直在以Webkit作为载体开发系统，当然需要大量使用Html5与CSS3，不仅减少大量的JS还可以保证更流畅。 当选中对话框后，提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。 HTML5出现后，我们有一个更好的方法。 代码如下: 我们看到有placeholder标签，可以作为用户文字提示。这样子就非常方便了。但是为了最求完美，我们需要在选中后，将文字变浅，或者修改提...
效果图如下： 代码如下： 代码如下:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>纯html+css导航</title> <!-- mulder --> <!-- qq:10221408 --> <!-- 只支持 chrome firefox --> <style> *{ margin:0; padding:0; } .clear:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } nav{ display:inline-block; border:1px solid #505255; border-bottom...
效果图如下： html源码： 代码如下: css源码： 代码如下: body{ background:url(bg.jpg) repeat; font-family:Arial Narrow, Arial, sans-serif; margin:0; padding:0; } header, section, footer{ display:block; } header{ width:100%; background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.9); color:#ccc; padding:15px 0; letter-spacing:1px; margin-bottom:20px; position:relative; } header h...
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联和标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。 虽然我们现在已经普遍使用了HTML4和 CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的...
今天要脚本之家的小编要再给大家带来一款html5和css3打造的创意404页面。一起看下效果图吧：实现的代码html代码：代码如下: c0-11.4-9.2-20.6-20.6-20.6v-0.2H633c-11.4,0-20.6-6.7-20.6-18.1c0-11.4,9.2-19.3,20.6-19.3h70.4l2-0.2c7.3-3.1,12.5-11,12.5-19.5<br /> c0-8.5-4.2-16.7-11.4-19.2l-2.5-0.3h-11.3c-11.9,0-21.6-8.9-21.6-19.9c0-11,9.7-19.9,21.6-19.9h15.8l1.4-0.3<br /> c8.6-2.5,14.8-10.1,14.8-19.5c0-11...
本文简单介绍一下HTML5的拖放实现。拖放（Drag 和 drop）是 HTML5 标准的组成部分。浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 被拖元素，dragElement :(1)添加事件：ondragstart(2)添加属性：dragable 放置元素，dropElement:1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop和mouser划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来说明...
今天偶然发现电脑里面还有这样的一个例子，感觉效果还不错，不记得啥时候下载的了，也好久没上w3cfuns了，怀念学习前台的日子，给大家分享下。 效果图： 效果是不是还是很不错的，最主要的是没有使用一行js，这才是亮点。 先看html文件： 简单描述一下： 1、ul 中 li决定了照片的个数 2、ul使用样式float:right，width:140px;使得显示在相册的右侧区域 3、li的float：left，使得li可以左浮动；li中存放大图的p，position为absolut...