自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(56)
  • 收藏
  • 关注

原创 乐享weby

乐享weby

2014-04-25 16:22:34 785

原创 最齐全的web前端知识汇集

终于找到这么齐全的web前端知识了,现在分享给大家!CSS基础17篇,DIV+CSS基础14篇,DIV+CSS精通10篇,Javascript基础14篇,Javascript精通10篇,都是好东西啊!

2014-04-13 21:24:41 811 1

原创 牛人也得看的15个CSS常识

1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。  2、无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。  3、慎用 * 通配符

2014-04-01 18:05:06 770

原创 DIV CSS布局实例:用css网站布局之十步实录!(目录)

用css网站布局之十步实录 目录: 点击链接查看教程具体内容!第一步:规划网站http://weby.com.cn/view.asp?id=31第二步:创建html模板及文件目录等http://weby.com.cn/view.asp?id=32第三步:将网站分为五个div 网页基本布局http://weby.com.cn/view.asp?id=33

2014-04-01 17:59:38 1215

翻译 CSS基础教程17篇 [翻译Htmldog]

CSS基础教程17篇此教程共17篇,由浅到深、循序渐进的讲述CSS知识。对初学者有很大的学习价值,对已入门的朋友也有重要的参考价值。1、CSS的应用http://www.weby.com.cn/view.asp?id=132、CSS Selectors,Properties,and Values 选择器 、属性、值http://www.52css.com/art

2014-03-16 20:59:57 972

原创 DIV+CSS布局入门示例(目录

本示例通过五个步骤的介绍,基本形成了如下效果的页面。我们可以详细的阅读并动手试验这个示例的全过程:一、页面布局与规划  总体的美工构思,形成效果图,并对页面进行分隔,形成DIV结构,为细化页面,打好基础。  ◆ → http://www.weby.com.cn/view.asp?id=8二、写入整体层结构与CSS  XHTML的基本结构形成,应用CS

2014-03-16 20:59:25 839

翻译 应用DIV+CSS布局以后 该在什么时候使用TABLE?

关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路!  关于表格  使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种

2014-03-16 20:58:57 796

翻译 小试牛刀 CSS实例教程 前言与目录

52CSS为大家提供了丰富的CSS教程,很多朋友在此里学习DIV CSS网页布局技术,一直以来大家对本站还是很支持的,本站也在努力提供更丰富的内容,尽力为大家服务。XHTML与CSS技术日渐普及,但水平参差不齐,还有很多网站的布局存在着大量的问题。学习到现在,或许您对自己的知识也有所了解,今天跟随着52CSS.com继续深入下去,小试牛刀,看看自己的CSS实战水平到底如何了。如果你已经是一个高手,

2014-03-16 20:58:35 703

翻译 复古式的立体CSS菜单实例

CSS菜单的制作在CSS网页布局中一直是重头戏,用CSS制作菜单重要的是语义,结构简单,形式更加的灵活。  今天的这一款菜单仅是作为小品来展示,其编码并不可取,我们通这个实例可以看到CSS功能的强大与形式的灵活,在具体的工作中不可以用此案例进行应用。因为其代码太冗余了。  更多的CSS菜单制作知识,您可以参考大量的教程与实例,相信你一定会有更多的收获。  关于CS

2014-03-16 20:57:55 1003

翻译 DIV+CSS布局入门示例(五)border和clear

这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。  首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在中加入这么一段就可以了,你可以试试: Example Source Code    大家可以再次参考手册,然后你就能明白dashed

2014-03-14 21:02:37 1441

翻译 DIV+CSS布局入门示例(四)页面顶部 列表<li>制作菜单

开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。  这一节我将告诉大家如何用列表来制作菜单。 Example Source Code                              首页                        博客

2014-03-14 21:02:23 2240

翻译 DIV+CSS布局入门示例(三)页面顶部制作

我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。  在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式代码: Example Source Code/*基本信息*/body {font:12px Tahoma;margin:0px;text-align:center;bac

2014-03-14 21:01:57 1586

翻译 DIV+CSS布局入门示例(二)写入整体层结构与CSS

我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: Example Source Code[www.52css.com]无标题文档  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。  下面,我们在标签对中写入DIV的

2014-03-14 21:01:43 982 1

翻译 DIV+CSS布局入门示例(一)页面布局与规划

在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。  所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件

2014-03-14 21:01:27 2469

翻译 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

转载 CSS floats来创建三栏网页布局的方法

栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。  绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。现在,我们都开始抛弃基于表格的布局技

2014-03-11 00:14:13 609

翻译 无图片CSS圆角的五个实例

CSS圆角的现实一直是大家所热衷的话题,我们进行CSS布局一直强调语义,强调文档的结构。圆角作为页面的外面表现,应该分离到CSS文件中,可以用图片的形式实现。  也有好多CSSer用XHTML+CSS来实现圆角,也就是无图片CSS圆角,我们不提倡这样做。但在有些时候,这样的圆角还是有一定的好处。无图片CSS圆角的实现主要是应用了1px的微小容器,设置颜色来达到目的。在52CSS.com的文

2014-03-11 00:13:44 968

原创 CSS菜单实例:一款简单的CSS下拉菜单

昨天52CSS和大家共同参考了一款两级CSS菜单。有网友说是很早以前就有的了,知识不在于新旧,而在于是不是实用,您或许已经学习了解这款菜单的制作与实现,但不一定所有人都见过都能理解。本站提供的信息尽可以照顾到CSSer各个层面的需求,而不是一味的追求CSS技术,尽力做到新手,高手都能有所收获吧。  这款菜单的实现非常简单,没有用到复杂的JS代码,进行简单的变换就可以了。我们来看最终的效果,

2014-03-11 00:13:16 608

翻译 有人说div+CSS网页布局比较愚蠢,我来说两句!

Web Designing with w3c Standards什么是标准?各位慢慢理解。而标准的核心就是内容,表现,行为,三者分离,这一点已是共识。CSS是其中一个重要的标准,这一点大家都没有异意的。而HTML最终是向XML发展的,大家应该也没有什么意见。而XHTML是发展中的过渡产物,这一点大家都是知道的。对于DIV,只是XHTML中的一个标签,是在实现标准的网

2014-03-11 00:12:04 613

转载 CSS标识当前位置页效果的实现原理

CSS标识当前位置页效果的实现原理当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不 同,用以给浏览者一个明显的指示。下面来说下具体的做法,菜单的基本实现和一般的CSS菜单没多大区别,着重说下如何 实现当前页。设菜单有5个栏目:home、about、products、services、contact,分别给每个栏目一 个ID,m1-m5,CSS可

2014-03-11 00:11:32 905

转载 DIV + CSS 实现最经典的布局

我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对它的视觉效果作过多的讨论,我们今天说说如何用DIV+CSS实现三行两列的布局。  我们看下面的图片:  这样的结构大家再熟悉不过了,我们该如何用DIV+CSS实现它呢。我们看下

2014-03-11 00:11:12 1023

转载 DIV CSS网页制作一般流程

本节向大家描述一下DIV CSS网页制作的流程及方法,在制作网页开始时候需要认识和了解一些基本知识,比如了解DIV+CSS网页制作常用属性,了解ID与class区别及用法,了解掌握常用CSS属性,CSS盒子机构;了解CSS在页面中运用等内容,相信本文介绍对你的学习一定会有所帮助。 学习DIV CSS网页制作的流程及方法 如何学习网页设计、网页制作,相信新入门想学习DIV+CSS网页

2014-03-11 00:10:38 1205

转载 实现CSS网页布局的简单原理

DIV+CSS布局  用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。  你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或相对地用彼块取代此块。  定位  定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static

2014-03-11 00:10:11 849

原创 DIV+CSS布局概述及初步入门

你在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:  第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。  另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left

2014-03-11 00:09:35 681 1

转载 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

原创 如何应用ul、li标签 创建css横向导航菜单?

我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成,或者由单元格内的文字所组成,由于人们不再推荐用表格来定位任何非表格的页面内容,所以很多制作Web的人正在寻找新的方法,用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好,这对我们来说是非常重要的。  创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来

2014-03-11 00:07:56 6195

翻译 13种常用按钮、文本框、表单等CSS样式

虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。文档中提供了丰富的内容。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。http://www.weby.com.cn/view.asp?id=3一、按钮样式 Example Source Code.buttoncss

2014-03-11 00:05:51 7742 4

原创 divcss布局及Web标准对网站优化和SEO方面的益处

现在采用CSS+DIV建网站的朋友越来越多,我们今天就谈谈divcss布局及Web标准对网站优化和SEO方面的益处:  一、用css+div,就要放弃以前表格排版的一些习惯,包括页面格式的一些习惯:1.以前用表格排版,一般都是用不规则的背景图片,跨单元格来做一些不规则的效果.css+div的特点就是格式和样式分开.2.css+div还是用块的行使排版比较好,页面简单,直观,不那么花哨.源码的结

2014-03-11 00:04:18 556

翻译 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

翻译 WEB2.0标准教程:第一个CSS布局实例

接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。注:在实际应用过程

2014-03-11 00:03:22 957

翻译 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

转载 WEB2.0标准教程:head区的其他设置

这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧。收藏夹小图标首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:为搜索引擎准备的内容代码如下,替换成你自己站点的内容就可以:允许搜索机器人搜索站内所有链接

2014-03-11 00:01:16 481

转载 WEB2.0标准教程: 调用样式表

用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局。这是思维方式的变化,一开始有些不习惯。呵呵,任

2014-03-11 00:00:37 612

转载 WEB2.0标准教程:WEB标准是什么?

WEB标准WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准

2014-03-11 00:00:00 962

转载 WEB2.0标准教程:应用WEB标准建设网站有什么好处?

们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了

2014-03-10 19:58:16 627

转载 Web标准基础教程:CSS简写指南

高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小,更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。 色彩缩写 色彩的缩写最简单,在色彩值用16进制的时候,如果每种颜色的值相同,就可以写成一个: color:#113366 可以简写为 color:#136 所有用到16进制色彩值的地

2014-03-10 17:43:52 512

转载 DIV+CSS 样式表命名的规则

刚开始写DIV+CSS 样式表的时候,是记不住那些CSS样式的属性,但是在逐渐熟悉后,发现给DIV+CSS 样式表命名也是一件头疼的事情,本文将介绍一些相关的规则方法供大家参考。 畅谈DIV+CSS 样式表命名的规则方法 如果要是就几行或几十行代码吧!就根据英文单词就行了。可是要是多了那就不好写了,有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧,自己写的都看不出是什么意思,别

2014-03-10 17:09:00 709

翻译 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

翻译 写给入门者的三十条HTML代码编写指南

文总结了30条html代码编写指南,只要在编写HTML代码的过程中牢记它们,灵活运用,你一定会写出一手漂亮的代码,早日迈入专业开发者的行列。 1. 一定要闭合HTML标签 在以往的页面源代码里,经常看到这样的语句:  Some text here. Some new text here. You get the idea.  也许过去我们可以容忍这样

2014-03-10 15:45:17 1058 1

翻译 HTML link相关 属性

rel属性通常出现在a,link标签中属性值alternate -- 定义交替出现的链接appendix -- 定义文档的附加信息bookmark -- 书签canonical -- 规范网页是一组内容高度相似的网页的首选版本chapter -- 当前文档的章节contentscopyright -- 当前文档的版权glossary -- 词汇help -- 链接帮助信息index --

2014-03-10 14:15:02 615

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除