DIV+CSS理论
文章平均质量分 71
html_exists
前台开发
展开
-
DIV+CSS 样式表命名的规则
刚开始写DIV+CSS 样式表的时候,是记不住那些CSS样式的属性,但是在逐渐熟悉后,发现给DIV+CSS 样式表命名也是一件头疼的事情,本文将介绍一些相关的规则方法供大家参考。 畅谈DIV+CSS 样式表命名的规则方法 如果要是就几行或几十行代码吧!就根据英文单词就行了。可是要是多了那就不好写了,有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧,自己写的都看不出是什么意思,别转载 2014-03-10 17:09:00 · 709 阅读 · 0 评论 -
WEB2.0标准教程: 调用样式表
用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局。这是思维方式的变化,一开始有些不习惯。呵呵,任转载 2014-03-11 00:00:37 · 613 阅读 · 0 评论 -
DIV CSS网页制作一般流程
本节向大家描述一下DIV CSS网页制作的流程及方法,在制作网页开始时候需要认识和了解一些基本知识,比如了解DIV+CSS网页制作常用属性,了解ID与class区别及用法,了解掌握常用CSS属性,CSS盒子机构;了解CSS在页面中运用等内容,相信本文介绍对你的学习一定会有所帮助。 学习DIV CSS网页制作的流程及方法 如何学习网页设计、网页制作,相信新入门想学习DIV+CSS网页转载 2014-03-11 00:10:38 · 1206 阅读 · 0 评论 -
CSS学习笔记:id与class、padding和margin、min-height和height
id和class到底要用哪一个? 首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。 id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有效的。而class标签,或者class容器内的原创 2014-03-10 00:10:31 · 602 阅读 · 0 评论 -
HTML CSS列表元素ul,ol,dl的研究与应用
一、可以看做废话的前言HTML列表元素(如ol,ul,dl)等在现下的网站开发制作中有着非常广泛的应用,然而,它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性,在不同浏览器下的各类兼容性问题,以及介绍一些常见的应用等。对初学者或是有一定CSS方面经验的同行们应该会有帮助的。二、HTML中可用的列表元素1、无序列表:ul无序列表是最常使用的列表,下图显示了无原创 2014-03-10 00:21:07 · 1063 阅读 · 0 评论 -
去除冗余 – 精简您的CSS样式代码
一、前面简短的唠叨我掂量了下,本文还是有些必要的。讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的。越是对CSS理解不够,越容易出现这些问题。有必要说明下,本文的样式代码均不考虑继承或是CSS reset。翻译 2014-03-10 00:30:18 · 3978 阅读 · 0 评论 -
我是如何对网站CSS进行架构的
一、写在前面的都是自己积累形成的一些东西,可能带有明显的个人印记。不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解。以得到进步与提高。二、我所知的一些过往的做法关于如何处理网站的CSS,各个网站做法都不一样,这随着网站的性质及大小不同,公司前人留下的规范不同,以及CSS工程师的眼界不同而有所不同。由于我从业经历有限,所知甚浅,只能说些肤浅业余转载 2014-03-10 00:51:23 · 1160 阅读 · 0 评论 -
WEB2.0标准教程:head区的其他设置
这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧。收藏夹小图标首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:为搜索引擎准备的内容代码如下,替换成你自己站点的内容就可以:允许搜索机器人搜索站内所有链接转载 2014-03-11 00:01:16 · 481 阅读 · 0 评论 -
实现CSS网页布局的简单原理
DIV+CSS布局 用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static转载 2014-03-11 00:10:11 · 849 阅读 · 0 评论 -
有人说div+CSS网页布局比较愚蠢,我来说两句!
Web Designing with w3c Standards什么是标准?各位慢慢理解。而标准的核心就是内容,表现,行为,三者分离,这一点已是共识。CSS是其中一个重要的标准,这一点大家都没有异意的。而HTML最终是向XML发展的,大家应该也没有什么意见。而XHTML是发展中的过渡产物,这一点大家都是知道的。对于DIV,只是XHTML中的一个标签,是在实现标准的网翻译 2014-03-11 00:12:04 · 614 阅读 · 0 评论 -
DIV+CSS排版实用技巧
相信大家对DIV+CSS布局应该有所了解,那么你对DIV+CSS排版是否熟悉,这里和大家分享一些DIV+CSS排版技巧,主要包括设置背景属性,首行缩进,竖排文字等内容,希望对你的学习有所帮助。 必需知道的DIV+CSS排版技巧 1、CSS盒子(CSSbox) CSS中没有box这个属性。CSS的盒子(box)是由以下几个部分组成的:内容(content)、填充(paddin翻译 2014-03-10 16:44:57 · 1833 阅读 · 0 评论 -
css行高line-height的一些深入理解及应用
一、前言前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看。这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考。另外,将结合实际,展示line-height的一些特性和一些常见应用,帮助您对css行高line-height原创 2014-03-10 00:23:12 · 679 阅读 · 0 评论 -
divcss布局及Web标准对网站优化和SEO方面的益处
现在采用CSS+DIV建网站的朋友越来越多,我们今天就谈谈divcss布局及Web标准对网站优化和SEO方面的益处: 一、用css+div,就要放弃以前表格排版的一些习惯,包括页面格式的一些习惯:1.以前用表格排版,一般都是用不规则的背景图片,跨单元格来做一些不规则的效果.css+div的特点就是格式和样式分开.2.css+div还是用块的行使排版比较好,页面简单,直观,不那么花哨.源码的结原创 2014-03-11 00:04:18 · 556 阅读 · 0 评论 -
Div+CSS布局 网站设计的优点!
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 Very excellent webm转载 2014-03-11 00:08:41 · 713 阅读 · 1 评论 -
DIV+CSS布局概述及初步入门
你在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left原创 2014-03-11 00:09:35 · 681 阅读 · 1 评论 -
WEB2.0标准教程:应用WEB标准建设网站有什么好处?
们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了转载 2014-03-10 19:58:16 · 627 阅读 · 0 评论 -
复选框单选框与文字对齐问题的研究与解决
前言目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下的截图:雅虎中国首页单选框复选框与文字不对齐这里,不是说,雅虎中国的原创 2014-03-10 00:17:40 · 505 阅读 · 0 评论 -
写给入门者的三十条HTML代码编写指南
文总结了30条html代码编写指南,只要在编写HTML代码的过程中牢记它们,灵活运用,你一定会写出一手漂亮的代码,早日迈入专业开发者的行列。 1. 一定要闭合HTML标签 在以往的页面源代码里,经常看到这样的语句: Some text here. Some new text here. You get the idea. 也许过去我们可以容忍这样翻译 2014-03-10 15:45:17 · 1060 阅读 · 1 评论 -
CSS基础:常用CSS英文字体介绍
CSS中对文字的控制在52CSS.com中有过不少的介绍,但关于字体的还没有。今天向大家介绍一些英文字体,希望在今后的字体设置中,对您的编码有所帮助。Arial Arial是一套随同多套微软应用软件所分发的无衬线体TrueType字型。虽然比例及字重(weight)和Helvetica极之相近,但Arial其实是Monotype Grotesque系列的变种。设计Arial时考虑原创 2014-03-10 00:02:09 · 622 阅读 · 0 评论 -
CSS实现圆角六色渐变自适应按钮详解
一、前言之前曾写过“关于Google圆角高光高宽自适应按钮及其拓展”一文,里面讲述了如何用css实现圆角高光按钮。但是,那些按钮的圆角大小仅有1个像素,渐变的颜色最多三种,颜色带区别明显,即明显的高光投影效果。而本文要将此表现、技术等深入深化——实现2个像素的真正意义上的圆角,并且按钮带有细腻圆滑的渐变效果,其色彩丰富,可支持6种过渡色,从上往下可支配的颜色达9种。本文将通过专业的图片、动画演转载 2014-03-10 00:25:30 · 1113 阅读 · 0 评论 -
CSS的样式合并与模块化
一、引言本文的核心观点为CSS的合并与模块化,似乎与前一篇文章“CSS样式的再分离”有矛盾,其实不然,分离可以精简CSS代码,合并也可以精简CSS代码,一切都是权衡!或是说是在恰当的情况下使用恰当的手段。正如前文所提到的,分离可以精简CSS,但是同时会带来巨大的HTML代码的开销,显然,对所有的样式进行再分离式不切实际的,是会带来痛苦的。前文提到的“通用库”看似属于分离,其实又是分离之外的翻译 2014-03-10 00:55:51 · 1030 阅读 · 0 评论 -
DIV + CSS 实现最经典的布局
我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对它的视觉效果作过多的讨论,我们今天说说如何用DIV+CSS实现三行两列的布局。 我们看下面的图片: 这样的结构大家再熟悉不过了,我们该如何用DIV+CSS实现它呢。我们看下转载 2014-03-11 00:11:12 · 1023 阅读 · 0 评论 -
CSS标识当前位置页效果的实现原理
CSS标识当前位置页效果的实现原理当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不 同,用以给浏览者一个明显的指示。下面来说下具体的做法,菜单的基本实现和一般的CSS菜单没多大区别,着重说下如何 实现当前页。设菜单有5个栏目:home、about、products、services、contact,分别给每个栏目一 个ID,m1-m5,CSS可转载 2014-03-11 00:11:32 · 905 阅读 · 0 评论 -
HTML link相关 属性
rel属性通常出现在a,link标签中属性值alternate -- 定义交替出现的链接appendix -- 定义文档的附加信息bookmark -- 书签canonical -- 规范网页是一组内容高度相似的网页的首选版本chapter -- 当前文档的章节contentscopyright -- 当前文档的版权glossary -- 词汇help -- 链接帮助信息index --翻译 2014-03-10 14:15:02 · 615 阅读 · 0 评论 -
WEB前端开发规范文档
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小转载 2014-03-10 00:05:52 · 532 阅读 · 0 评论 -
CSS基础:DIVcss初学者需要引起重视的10个问题与技巧
DIVcss初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,在52CSS.com中,有多篇文章提醒大家经引起重视,下面罗列了10个问题与技巧,温故而知新。 一、检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 二、检查CSS是否正确 检查原创 2014-03-10 00:09:10 · 591 阅读 · 0 评论 -
对html与body的一些研究与理解
一、写在前面的最近一直构思着写篇关于html标签的文章,虽说之前处理过html标签,也解决过不少棘手的问题,但是对其理解还不是很透彻,很多原理都是自己推测的。在网上查阅相关资料想整合一下相关的信息,发现深入探讨html,与body的文章很少,只有在蓝色理想看到一篇“一叶千鸟”的这篇“正确认识html与body”有点价值,其余都没有什么相关的好文章。而这里,我要讲述的与上面的交集并不多,翻译 2014-03-10 00:27:54 · 685 阅读 · 0 评论 -
CSS border三角、圆角图形生成技术简介
一、前言利用CSS的border属性可以生成一些图形,例如三角或是圆角。纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理,以及实例。我觉得此技术相当实用的,故本文再次简单叙述一下,另外,本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了,裹脚布的话就不说了,直接进入正题。本转载 2014-03-10 00:33:51 · 562 阅读 · 0 评论 -
CSS reset的重新审视 – 避免样式重置
一、CSS reset(CSS重置)的历史根据淘宝射雕的叙述,最早的一份CSS reset来自Tantek 的undohtml.css,很简单的代码,Tantek 根据自己的需要,对浏览器的默认样式进行了一些重置。其余一些有名的CSS reset如业界领袖Eric Meyer的reset,或是Tripoli Reset。CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准翻译 2014-03-10 00:45:55 · 866 阅读 · 0 评论 -
WEB2.0标准教程:WEB标准是什么?
WEB标准WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准转载 2014-03-11 00:00:00 · 962 阅读 · 0 评论 -
详解CSS网页布局中默认字体样式
浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。 拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定原创 2014-03-10 00:07:47 · 699 阅读 · 1 评论 -
应用DIV+CSS布局以后 该在什么时候使用TABLE?
关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种翻译 2014-03-16 20:58:57 · 796 阅读 · 0 评论