[33]DIV CSS - 随笔分类(第5页) - HackerVirus

[译] 关于CSS中的float和position

摘要：[译] 关于CSS中的float和position原文http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning当构建页面排版时，有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求，在不同的情况下，某些方法可能好过于其他的方法。比如，可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者，如果需要更复杂的排版要求，可以考略使用其他方法，比如使用相对定位和绝对定位。在这篇文章中，我们首先要讨论元素浮动；然后，我们要讨论如何使用x,y和z轴控制元素的位置。元素浮动当构建一个页面的排版时，使用元素浮动是一种直观阅读全文

posted @ 2013-02-01 18:17 HackerVirus 阅读(154) 评论(0) 推荐(0)

CSS3 制作旋转的大风车

摘要：CSS3 制作旋转的大风车发一个很久以前的作品，当开始得知CSS3可以做动画时，就很想玩玩，于是就做了个充满童年回忆的大风车。HTML：<div class="windmill"><div class="red"></div><div class="yellow"></div><div class="blue"></div><div class="green"></div><div 阅读全文

posted @ 2013-01-30 14:15 HackerVirus 阅读(251) 评论(0) 推荐(0)

了解CSS页面布局和加载流程

摘要：CSS技巧荟萃：了解CSS页面布局和加载流程如果你开发web相关应用或者网站的话，肯定知道CSS对于页面布局的重要性。在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局。介绍在我们开始正式的介绍页面流程前，我们需要简单了解几种不同类型的html元素，以及它们的缺省显示方式。这里我们主要重点介绍两个类型的元素：blockinline如果大家关心html5的话，你应该知道在HTML5中也包含了几个新的元素，例如，section，article等等，但是仍旧遵循这里我们介绍的显示类型。inline类型的元素包括： img，span，a等，用来定义文字或者数据，通常显示方式是“同一行阅读全文

posted @ 2013-01-29 16:04 HackerVirus 阅读(270) 评论(0) 推荐(0)

CSS3 制作绽放的莲花

摘要：这效果看起来挺炫，但原理并不复杂，能实现一片花瓣动起来，就能实现9片花瓣。效果的叠加而已。HTML：<section class="demo"> <div class="box"> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf">&l 阅读全文

posted @ 2013-01-29 16:04 HackerVirus 阅读(148) 评论(0) 推荐(0)

如何提高css编写速度

摘要：如何提高css编写速度一、前言如果你也想提高编写css的速度，那么这篇文章或许能帮到你！二、界面先看一个试例界面：界面中包含3个div块(如图中红色框中所示)，并且这些div有着奇怪的class属性，实事上我并没有给div写过一行css代码，但它们确实拥有了宽、高、底色等css属性！三、原理在上面的示例中，引用了一个js脚本:zl.js，在这个脚本中我编写了类似：?regArr['^w([0-9]{1,4})$'] = "width:$1px";regArr['^h([0-9]{1,4})$'] = "height:$1px 阅读全文

posted @ 2013-01-14 22:37 HackerVirus 阅读(373) 评论(0) 推荐(0)

css架构理念

摘要：前言做前端已有不短的时间了，在css这片领域越走越久、越走越远，回过头来看看，有很多技能知识掌握了就不会再忘了，比如无图片实现三角形、ie下如何实现半透明效果等等；但有些东西却需要在项目实战中不断地碰壁、总结，再碰壁、再总结，慢慢地去找到适合自己的方法，然后遵循这样的方法，去开发，以收到事半功倍的效果。本篇文章就属于后者，因为是站在整个css的大方向上，对于初学者或者项目实战经验不够多的同学，建议有看不懂的地方不必太介意，可以跳过，也可以留言提问。经验老道者也许也会些许吐槽，觉得跟您有出入，但是，我想说，css架构，因人而异、因项目大小而异，没有最优，只有适合！从语义化开始看《css禅意花园》阅读全文

posted @ 2013-01-10 20:36 HackerVirus 阅读(167) 评论(0) 推荐(0)

CSS题目子元素决定父元素的大小

摘要：要求三个面板（有指定宽度）并排，面板中有内容，内容的宽由标题确定，并且居中对齐，内容的其他段落与标题左对齐。<div> <centerclass="float_left"><span><h2>这个比较短<P>2013</p><p>2013</p><p>2013</p></h2></span></center><centerclass="float_left"><span>< 阅读全文

posted @ 2012-12-10 15:46 HackerVirus 阅读(726) 评论(0) 推荐(0)

带记忆功能的表单

摘要：在一般情况下，用户提交表单后，将会跳转到另一个页面，同时表单中的内容也会清空。而有时为了简化操作步骤，需要保留历史信息，即当用户再返回原来页面时，还可以看到刚才所填写的信息。以下实例，当用户刷新或者单击“确定”按钮提交表单后再退回到原来页面时，文本框中的内容将保持不变。如下图所示：本实例主要是通过在css样式定义中，设置behavior确定对象的行为，并设置<meta>元信息标记中的name属性和content属性来实现保留历史信息的功能。<meta>标记是用来在HTML文件中模拟HTTP协议的响应头报文，是实现元数据的主要标记，它可以用于鉴别作者、标注内容提要和关键字阅读全文

posted @ 2012-12-06 18:21 HackerVirus 阅读(453) 评论(0) 推荐(0)

发展中的 CSS3

摘要：正在发展中的 CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的JavaScript代码才能实现的效果，如今只需要简单的写几句CSS3代码就能实现。今天这篇文章就向大家分享14个让人惊叹的 CSS3 特性应用演示，让大家感受一下 CSS3 的魅力。您可能还喜欢20个非常绚丽的 CSS3 特性应用演示23个纯 CSS3 打造的精美LOGO图案24款非常实用的CSS3工具终极收藏推荐12个漂亮的CSS3按钮实现方案CSS3可以实现的五种很酷很炫的效果Monster使用 CSS3 绘制的奇怪生物，移动你的鼠标看看会有阅读全文

posted @ 2012-11-08 17:51 HackerVirus 阅读(147) 评论(0) 推荐(0)

CSS代码减肥

摘要：随着越来越多的CSS预处理器的普及，一些新的工具和应用程序，基本上使得网页设计师或开发人员的开发工作更轻松，像这样的工具：CSS2Less。今天就分享一些这个工具的使用，css2less是一个用 Ruby 开发的小工具用来将 css 转成 Less CSS 格式的文件使用工具这个工具可以让我们自己的CSS代码输入后给CSS代码减肥。所以让我给它一个尝试。有一个文件要转换，下面是CSS代码。nav { height: 40px; width: 100%; background: #000; border-bottom: 2px solid #fff;}nav ul { ... 阅读全文

posted @ 2012-10-15 11:40 HackerVirus 阅读(316) 评论(0) 推荐(0)

css3传送带示例

摘要：演示地址在这里!touch.js主要在桌面模拟了手指触摸,滑动,释放等系列事件,值得一看.源码如下: 1: <!DOCTYPE html> 2: <html lang="en"> 3: <head> 4: <meta charset="UTF-8" /> 5: <title>carousel demo</title> 6: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js&q 阅读全文

posted @ 2012-09-14 10:15 HackerVirus 阅读(445) 评论(0) 推荐(0)

学习 CSS3 的实用帮助手册

摘要：今天这篇文章向大家分享几份对学习CSS3非常有帮助的手册，大家记得收藏起来。CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写JavaScript才能实现的效果，如今只需要简单的写几句CSS3代码就能实现。CSS3 Click Chart演示 CSS3 特性的示例代码以及浏览器支持情况的详细信息。HTML5 & CSS3 Support五大主流浏览器对 HTML5 和 CSS3 支持特性一览表，值得收藏！CSS3 - Information and SamplesRobert Nyman 的博客有非常多的前端阅读全文

posted @ 2012-09-07 09:10 HackerVirus 阅读(141) 评论(0) 推荐(0)

CSS3

摘要：CSS3的transition和transform2012-07-14 20:51 by 轩脉刃, 227 阅读,0评论,收藏,编辑CSS3中的transition和transform是制作HTML5动画一定要使用到的两个属性。注：这篇文章不考虑兼容性，只讨论webkit核心的浏览器。所以本文的所有例子请用chrome，safari或360极速浏览器看。transitiontransition对标签的变化过程进行设置。比如我需要将这个图在2s内进行翻转180的动画，就使用到这个了transition可以配置的属性有：transision-property要变化的属性，可以的参数请参考：http 阅读全文

posted @ 2012-07-15 00:11 HackerVirus 阅读(171) 评论(0) 推荐(0)

网页设计师的必备

摘要：今天给网页设计师推荐20几个windows下提高工作效率的应用程序，对于设计师来说是必不可少的，希望大家喜欢1。Skybound Stylizer虽然我更喜欢使用Firebug时，我发现“开箱即用”的CSS编辑器要真正有用的。Skybound Stylizer已经出了一段时间，但最新版本，4.0，现在是出了很多令人难以置信的功能，以帮助您在开发过程中。的核心功能之一是它支持谷歌Chrome，火狐2 - 3.6，和Internet Explorer 6 - 8。2。notepad+ +Notepad+ +是迄今为止我最喜爱的文本编辑器适用于 Windows。它的快速，灵活，提供了多种插件。如果您阅读全文

posted @ 2011-10-30 00:17 HackerVirus 阅读(344) 评论(0) 推荐(0)

分享50个 CSS3 最佳应用示例

摘要：CSS3 和 HTML5 是现在Web开发领域的技术热点，它们的确给 Web 开发带来了革命性的影响。今天，要与大家分享的是50个 CSS3 应用的最佳例子，从中你能体会到 CSS3 中许多让人欣喜的特性，尽情欣赏吧。1- Leaves CSS32- Easily Turn Your Images Into Polaroids with CSS33- CSS3 Lightbox Gallery With jQuery4- Advanced CSS3 Menu5- Amazing CSS3 Template6- css3 web design examples7- CSS3 jQuery Alb 阅读全文

posted @ 2011-04-26 09:11 HackerVirus 阅读(204) 评论(0) 推荐(0)

介绍27款经典的CSS框架

摘要：利用 CSS 框架，可以简化你的工作，提高工作效率。CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架，你可以选用。1.960gs960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。2.YUI 2: Grids CSS芒果曾经介绍过由雅虎开发小组推出的 YUI，而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一，YUI Grids CSS 提供了四种预设页面宽度，六种预设阅读全文

posted @ 2011-04-12 00:48 HackerVirus 阅读(184) 评论(0) 推荐(0)

60佳灵感来自大自然的网页设计

摘要：在网页设计中结合大自然风格的美丽元素已成为日益流行的趋势。虽然大部分这样的设计都是加入一些装饰性质的元素，如树木，花草，天空，云彩等等...也有一些Web设计师能完美的集成自然风景到他们的设计作品中。这篇文章向大家分享60佳自然风格网页设计作品，希望这些精美的例子能带给你灵感，尽情欣赏吧！pojeta.czmorphix.sichrisjockey.comwakesomebodyup.comormanclark.compikaboo.beinteractiveanddesign.comredbrickhealth.comserj.caweberica.netlevel2d.comhuxleyp 阅读全文

posted @ 2011-03-06 01:29 HackerVirus 阅读(234) 评论(0) 推荐(0)

45个基于标准CSS排版的网站

摘要：在学习使用CSS的过程,感悟挺多!但仍有许多Web设计稿在用CSS排版时受到一些限制,总不能将一个网页从设计到XHTML表现得完美。使用CSS标准化排版有很多好处,一个很重要的一点是在搜索引擎中能获得较高的排名,因为如果你真的想让你的网站中脱颖而出,你发须把你的网页设计得漂亮的同时,也用完美的排版去表现!!本着这一精神,我已经收集了45个很棒的网站,基于CSS布局!!!!希望能让你受到启发。1.Fruit Ninja2.Kirk Whalum Website3.Radiant WebSoft4.Jan Kovacs Website5.LiveResto6.Kelt7.Gosco Valves8 阅读全文

posted @ 2011-01-25 10:47 HackerVirus 阅读(377) 评论(0) 推荐(0)

超级简单:DIV布局

摘要：/Files/zhuqil/DivLayout.zip 这篇文章演示在一个页面上有效的使用div元素来构建网站，而不是使用table元素。因为div元素有很多优势，所以大部分客户开发网站要求设计开发div元素，而不是table元素。上面的代码是是为了给初学者学习使用div元素开发网站的。下面解释为什么使用div元素而不是table元素 table元素的优点：大多是设计开发者使用table是为了统... 阅读全文

posted @ 2010-08-19 10:36 HackerVirus 阅读(293) 评论(0) 推荐(0)

梅花雨日历控件

摘要：/Files/sunsjorlin/calendar.rar调用方法：1. .aspx页面中<asp:TextBox id="TextDate" Runat="server" onfocus="calendar()"></asp:TextBox>不理会vs.net的提示，真接写 onfocus.2：<input name="txt" onfocus="calendar... 阅读全文

posted @ 2010-08-17 22:56 HackerVirus 阅读(208) 评论(0) 推荐(0)

导航

随笔分类 - [33]DIV CSS