DIV+CSS实例
文章平均质量分 79
html_exists
前台开发
展开
-
CSS的样式合并与模块化
一、引言本文的核心观点为CSS的合并与模块化,似乎与前一篇文章“CSS样式的再分离”有矛盾,其实不然,分离可以精简CSS代码,合并也可以精简CSS代码,一切都是权衡!或是说是在恰当的情况下使用恰当的手段。正如前文所提到的,分离可以精简CSS,但是同时会带来巨大的HTML代码的开销,显然,对所有的样式进行再分离式不切实际的,是会带来痛苦的。前文提到的“通用库”看似属于分离,其实又是分离之外的翻译 2014-03-10 00:55:51 · 1030 阅读 · 0 评论 -
CSS floats来创建三栏网页布局的方法
栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。现在,我们都开始抛弃基于表格的布局技转载 2014-03-11 00:14:13 · 609 阅读 · 0 评论 -
CSS实现圆角六色渐变自适应按钮详解
一、前言之前曾写过“关于Google圆角高光高宽自适应按钮及其拓展”一文,里面讲述了如何用css实现圆角高光按钮。但是,那些按钮的圆角大小仅有1个像素,渐变的颜色最多三种,颜色带区别明显,即明显的高光投影效果。而本文要将此表现、技术等深入深化——实现2个像素的真正意义上的圆角,并且按钮带有细腻圆滑的渐变效果,其色彩丰富,可支持6种过渡色,从上往下可支配的颜色达9种。本文将通过专业的图片、动画演转载 2014-03-10 00:25:30 · 1113 阅读 · 0 评论 -
我是如何对网站CSS进行架构的
一、写在前面的都是自己积累形成的一些东西,可能带有明显的个人印记。不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解。以得到进步与提高。二、我所知的一些过往的做法关于如何处理网站的CSS,各个网站做法都不一样,这随着网站的性质及大小不同,公司前人留下的规范不同,以及CSS工程师的眼界不同而有所不同。由于我从业经历有限,所知甚浅,只能说些肤浅业余转载 2014-03-10 00:51:23 · 1160 阅读 · 0 评论 -
如何应用ul、li标签 创建css横向导航菜单?
我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成,或者由单元格内的文字所组成,由于人们不再推荐用表格来定位任何非表格的页面内容,所以很多制作Web的人正在寻找新的方法,用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好,这对我们来说是非常重要的。 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来原创 2014-03-11 00:07:56 · 6196 阅读 · 0 评论 -
CSS菜单实例:一款简单的CSS下拉菜单
昨天52CSS和大家共同参考了一款两级CSS菜单。有网友说是很早以前就有的了,知识不在于新旧,而在于是不是实用,您或许已经学习了解这款菜单的制作与实现,但不一定所有人都见过都能理解。本站提供的信息尽可以照顾到CSSer各个层面的需求,而不是一味的追求CSS技术,尽力做到新手,高手都能有所收获吧。 这款菜单的实现非常简单,没有用到复杂的JS代码,进行简单的变换就可以了。我们来看最终的效果,原创 2014-03-11 00:13:16 · 608 阅读 · 0 评论 -
CSS基础:DIVcss初学者需要引起重视的10个问题与技巧
DIVcss初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,在52CSS.com中,有多篇文章提醒大家经引起重视,下面罗列了10个问题与技巧,温故而知新。 一、检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 二、检查CSS是否正确 检查原创 2014-03-10 00:09:10 · 591 阅读 · 0 评论 -
DIV CSS网页布局常用的方法与技巧
CSS布局常用的方法float:none|left|right 取值:none:默认值。对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml代码: Example Source Code[www.52css.com] 这里是第一列 这里是第二列 /*这是违背web标准翻译 2014-03-11 00:14:39 · 939 阅读 · 0 评论 -
复古式的立体CSS菜单实例
CSS菜单的制作在CSS网页布局中一直是重头戏,用CSS制作菜单重要的是语义,结构简单,形式更加的灵活。 今天的这一款菜单仅是作为小品来展示,其编码并不可取,我们通这个实例可以看到CSS功能的强大与形式的灵活,在具体的工作中不可以用此案例进行应用。因为其代码太冗余了。 更多的CSS菜单制作知识,您可以参考大量的教程与实例,相信你一定会有更多的收获。 关于CS翻译 2014-03-16 20:57:55 · 1003 阅读 · 0 评论 -
DIV+CSS布局概述及初步入门
你在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left原创 2014-03-11 00:09:35 · 681 阅读 · 1 评论 -
css行高line-height的一些深入理解及应用
一、前言前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看。这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考。另外,将结合实际,展示line-height的一些特性和一些常见应用,帮助您对css行高line-height原创 2014-03-10 00:23:12 · 680 阅读 · 0 评论 -
WEB2.0标准教程:CSS入门
在了解XHTML代码规范后,我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了,可以跳过这一节。CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1.基本语法规范分析一个典型CSS的语句:p {COLOR:#FF0000;BACKGROUND:#FFFFFF}翻译 2014-03-11 00:02:14 · 872 阅读 · 0 评论 -
WEB2.0标准教程: CSS布局入门
CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。1.定义DIV分析一个典型的定义div例子:#sample{ MARGIN: 10px 10px 10px 10px;PADDING翻译 2014-03-11 00:03:45 · 1141 阅读 · 0 评论 -
实现CSS网页布局的简单原理
DIV+CSS布局 用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static转载 2014-03-11 00:10:11 · 850 阅读 · 0 评论 -
DIV + CSS 实现最经典的布局
我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对它的视觉效果作过多的讨论,我们今天说说如何用DIV+CSS实现三行两列的布局。 我们看下面的图片: 这样的结构大家再熟悉不过了,我们该如何用DIV+CSS实现它呢。我们看下转载 2014-03-11 00:11:12 · 1023 阅读 · 0 评论 -
无图片CSS圆角的五个实例
CSS圆角的现实一直是大家所热衷的话题,我们进行CSS布局一直强调语义,强调文档的结构。圆角作为页面的外面表现,应该分离到CSS文件中,可以用图片的形式实现。 也有好多CSSer用XHTML+CSS来实现圆角,也就是无图片CSS圆角,我们不提倡这样做。但在有些时候,这样的圆角还是有一定的好处。无图片CSS圆角的实现主要是应用了1px的微小容器,设置颜色来达到目的。在52CSS.com的文翻译 2014-03-11 00:13:44 · 968 阅读 · 0 评论 -
WEB2.0标准教程:第一个CSS布局实例
接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。注:在实际应用过程翻译 2014-03-11 00:03:22 · 957 阅读 · 0 评论 -
DIV CSS网页制作一般流程
本节向大家描述一下DIV CSS网页制作的流程及方法,在制作网页开始时候需要认识和了解一些基本知识,比如了解DIV+CSS网页制作常用属性,了解ID与class区别及用法,了解掌握常用CSS属性,CSS盒子机构;了解CSS在页面中运用等内容,相信本文介绍对你的学习一定会有所帮助。 学习DIV CSS网页制作的流程及方法 如何学习网页设计、网页制作,相信新入门想学习DIV+CSS网页转载 2014-03-11 00:10:38 · 1206 阅读 · 0 评论 -
CSS3 transition实现超酷图片墙动画效果
一、前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等。但都是试试而已,知道有这么回事。今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了,半天说不出话来,这…这…unbelievable,amazing,太神奇了,太不可思议了,几行简单的CSS,如此炫酷的动画效果,flash都不及的动画效果,我真是难以表达我的心情。我们可以先看一段原创 2014-03-10 00:19:31 · 833 阅读 · 0 评论 -
13种常用按钮、文本框、表单等CSS样式
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。文档中提供了丰富的内容。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。http://www.weby.com.cn/view.asp?id=3一、按钮样式 Example Source Code.buttoncss翻译 2014-03-11 00:05:51 · 7743 阅读 · 4 评论