‹‹ 上一主题 | 下一主题 ››
 19 12
发新话题
打印

DIV+CSS网站重构技术交流论坛

本主题由 枪击蓝色 于 2007-11-11 00:06 加入精华
枪击蓝色

我看好你呦！

超级版主

Rank: 19Rank: 19Rank: 19

做人要厚道

UID
2 
帖子
1210 
精华
29 
积分
2132 
威望
632  
Bulo币
2978  
热心度
2090  
专业度
10  
阅读权限
255 
注册时间
2007-2-27 
荣誉勋章
终身成就勋章
活力地带
1# 大 中 小 发表于 2007-5-9 11:09  只看该作者

DIV+CSS网站重构技术交流论坛

　　研讨会的宗旨：

　　相信大家都能体会到DIV+CSS的热潮已经越来越高了，好多大型的门户网站已经都成功重构完成了自己的DIV+CSS版本的网站，而DIV+CSS相对于以往的Table做网站的方法而言，实现起来还是比较麻烦的，尤其是其兼容性方面的问题，为了帮助个人站长都能顺利完成自己的DIV+CSS网站重构我们特与各大技术类网站联合举办这次《DIV+CSS网站重构技术交流讨论会》，在以后的时间里，我们会向大家提供DIV+CSS方面的相关知识，与技术问题解答！

合作网站（成为合作伙伴）：



　　什么是DIV+CSS:

　　CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。
CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

　　DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

　　DIV+CSS有什么好处：

　　对网站浏览者的好处：

  • 文件下载与页面显示速度更快；
  • 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人等等）
  • 用户能够通过样式选择定制自己的表现界面
  • 所有页面都能提供适于打印的版本
　　对网站所有者的好处：
  • 更少的代码和组件，容易维护
  • 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。
  • 更容易被搜寻引擎搜索到
  • 改版方便，不需要变动页面内容
  • 提供打印版本而不需要复制内容
  • 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

　　DIV+CSS和Table的优缺点：

　　DIV与TABLE本身并不存在什么优缺点，所谓web标准只是推荐的是正确的使用标签，好比说DIV用于布局，而TABLE则本来就是转二维数据的。

　　我们并不是说用DIV+CSS来做网站就要完全抛弃Table不用，在网站设计中Table在布局方面是很优秀的，他能很方便的对网站进行布局，而DIV+CSS的优点在上面已经说过了，所以在设计网站的时候视情况的不同还要共用DIV和Table来设计出一个最佳的网站布局。

一些DIV+CSS的技术文章(不断更新)：

CSS hack浏览器兼容一览表       　　CSS对各浏览器（IE/FF）兼容问题　　　　CSS对各浏览器（IE/FF）兼容问题

浏览器的CSS兼容性问题(IE vs FF) 　　div+css兼容问题解决方案（IE5/5.5/6/7/FF）　　不同浏览器对CSS的兼容性问题

div+css页面ie与ff浏览器兼容方法　　CSS在IE和Nascape的显示差别　　以!important的CSS定义兼容不同浏览器

div+css布局技术漫谈　　　在DIV+CSS排版中新闻列表的制作方法　　　　CSS布局中最小高度（min-height）的妙用

CSS初级入门：整体布局声明　　　解决列高度自适应(列高度相同)的五种方法　　　用CSS floats创建三栏页布局

DIV+CSS网页布局常用的方法与技巧　　符合Web标准！CSS同比例缩小图片 　　CSS的倡导者：学习CSS的10大理由

web标准化设计：常用CSS命名规则　　DIV布局之三行三列之高度自适应


　　您可以把你在DIV+CSS网站重构中碰到的问题在此回帖，我们会以最快的速度为您解决，您也可以将您在DIV+CSS网站重构中一些好的技巧，在论坛中分享给大家，我们会定期整理，然后推荐到技术部落首页或站长网及一些IT技术类网站中，让更多网友一起分享。
技术成就未来！

TOP

wangqimars
Bulo秀才

Rank: 2Rank: 2

UID
62 
帖子
11 
精华
0 
积分
220 
威望
209  
Bulo币
1  
热心度
2  
专业度
0  
阅读权限
20 
注册时间
2007-4-6 
活力地带
2# 大 中 小 发表于 2007-7-21 00:28  只看该作者
支持，正在做

TOP

敷衍⿳靈魂
版主

Rank: 18Rank: 18

UID
153 
帖子
12 
精华
0 
积分
12 
威望
0  
Bulo币
19  
热心度
12  
专业度
0  
阅读权限
240 
注册时间
2007-9-14 
活力地带
3# 大 中 小 发表于 2007-9-16 23:59  只看该作者
高深~~
辷壹秒吥夨望…↘丅弌秒僦會囿俙望⿴ァァ.o‘＂

TOP

hxf88
Bulo儒生

Rank: 1

UID
197 
帖子
2 
精华
0 
积分
2 
威望
0  
Bulo币
7  
热心度
2  
专业度
0  
阅读权限
10 
注册时间
2007-11-7 
活力地带
4# 大 中 小 发表于 2007-11-7 17:12  只看该作者
偶是CSS+DIV新手   有个问题想请教下
    就是偶的一个页面在IE7。0下  调试的时候  用普通模式和最大化的时候 不一样了
      不像别的网站那样最大化变成普通模式时会自动缩进  
             这是怎么回事  ？？

TOP

hxf88
Bulo儒生

Rank: 1

UID
197 
帖子
2 
精华
0 
积分
2 
威望
0  
Bulo币
7  
热心度
2  
专业度
0  
阅读权限
10 
注册时间
2007-11-7 
活力地带
5# 大 中 小 发表于 2007-11-7 17:14  只看该作者
<style type="text/css">
<!--
body{font-size:15px;
color: #000000;
font-family:"宋体";
}
#box{
position:relative;
width:950px;}
#Pagetop{position:relative;
border-color:#333333;
margin-left:auto;
margin-right:auto;
width:770px;

}
#Pagetop ul{
        margin-right:auto;
        margin-left:0;
        list-style-image: none;
        list-style-type: none;
        position: relative;
        padding-left:0px；
}
#Pagetop li{float:left;
margin-right:80px;

}


                                                   
-->
</style>
<title>篮球时尚</title>
</head>
<body><div id="box"><div id="Pagetop">
   <ul>
      <li><a href="#"><center>1</center></a></li>
          <li><a href="#"><center>2</center></a></li>
          <li><a href="#"><center>3</center></a></li>
          <li><a href="#"><center>4</center></a></li>
          <li><a href="#"><center>5</center></a></li>
          <li><a href="#"><center>6</center></a></li>
          </ul></div>
          </div>
</body>
</html>
   这是原代码   请高人指点下偶的问题  谢谢

TOP

枪击蓝色

我看好你呦！

超级版主

Rank: 19Rank: 19Rank: 19

做人要厚道

UID
2 
帖子
1210 
精华
29 
积分
2132 
威望
632  
Bulo币
2978  
热心度
2090  
专业度
10  
阅读权限
255 
注册时间
2007-2-27 
荣誉勋章
终身成就勋章
活力地带
6# 大 中 小 发表于 2007-11-7 17:48  只看该作者

回复 5# 的帖子

已经看过你的代码了

在效果上 没有什么问题！
技术成就未来！

TOP

kin0224
Bulo儒生

Rank: 1

UID
322 
帖子
3 
精华
0 
积分
3 
威望
0  
Bulo币
8  
热心度
3  
专业度
0  
阅读权限
10 
注册时间
2008-3-13 
活力地带
7# 大 中 小 发表于 2008-3-13 17:30  只看该作者
<body>
   <div id="box">
   <div id="Pagetop">  <!--怎么会有两个DIV id="XXX" ?-->
   <ul>
      <li><a href="#"><center>1</center></a></li>      
<!-- <center>1</center>也没看懂是什么意思...,<li align="center>"可以这样加吗? 我是也菜啊..指教一下-->
          <li><a href="#"><center>2</center></a></li>
          <li><a href="#"><center>3</center></a></li>
          <li><a href="#"><center>4</center></a></li>
          <li><a href="#"><center>5</center></a></li>
          <li><a href="#"><center>6</center></a></li>
          </ul>
   </div>
   </div>  <!--怎么会有两个</div> ?-->
</body>
</html>


我也是才学DIV+CSS
提了点楼上写的一些内容中的疑问.
还有就是,为什么楼上的喜欢用#XXX{XXX}的类,调用样式时是<div id=""></div>
                        而我是喜欢用.XXX{XXX},调用样式时是<div class=""></div>
希望高手指点

[ 本帖最后由 kin0224 于 2008-3-13 17:37 编辑 ]

TOP

枪击蓝色

我看好你呦！

超级版主

Rank: 19Rank: 19Rank: 19

做人要厚道

UID
2 
帖子
1210 
精华
29 
积分
2132 
威望
632  
Bulo币
2978  
热心度
2090  
专业度
10  
阅读权限
255 
注册时间
2007-2-27 
荣誉勋章
终身成就勋章
活力地带
8# 大 中 小 发表于 2008-3-13 18:59  只看该作者
楼上的你好~！

对于你的问题呢 要从Class和id的区别来说。

class是设置标签的类。

id是设置标签的标识。

当然还有更详细的见解，可以看下面的这篇文章：

http://www.jsbulo.com/htmldata/wyzz/css/2007817/8699.html
技术成就未来！

TOP

kin0224
Bulo儒生

Rank: 1

UID
322 
帖子
3 
精华
0 
积分
3 
威望
0  
Bulo币
8  
热心度
3  
专业度
0  
阅读权限
10 
注册时间
2008-3-13 
活力地带
9# 大 中 小 发表于 2008-3-14 09:16  只看该作者
谢谢,不过还有一个问题有点费解.我做了一个无序列表
<div class="test li">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</div>


我在CSS里设置如下:
li{
   color:#FFFFFF;
}

.test li{\*＂test＂里面＂li＂的格式*\
   list-style:none;\*设置li没有圆点*\
   float:left;|*所有元素向左浮动*|
   font-size:12px;\*li内所有字体元素大小为12像素*\
   color:#000000\*字体颜色为黑色*\
}

结果预览的时候，发现没有调用＂test li＂的样式，而是调用了li的样式，照理说.test li（意思应该是：在test里面li元素的样式）呀，怎么会没有调用呢．．









先感谢"枪击蓝色"回答了楼楼上的问题

[ 本帖最后由 kin0224 于 2008-3-14 09:55 编辑 ]

TOP

枪击蓝色

我看好你呦！

超级版主

Rank: 19Rank: 19Rank: 19

做人要厚道

UID
2 
帖子
1210 
精华
29 
积分
2132 
威望
632  
Bulo币
2978  
热心度
2090  
专业度
10  
阅读权限
255 
注册时间
2007-2-27 
荣誉勋章
终身成就勋章
活力地带
10# 大 中 小 发表于 2008-3-14 13:12  只看该作者
<div class="test li">

这个位置不能这样调用，要像下面一样调用：

<div class="test">

因为你在CSS里面已经定义了

.test li{......}

test中li的样式，所以只要调用test的样式就行，包含在其中的li的样式就会自动调用.test li{......}这个了！

不知道我这样说你能明白吗？
技术成就未来！

TOP

kin0224
Bulo儒生

Rank: 1

UID
322 
帖子
3 
精华
0 
积分
3 
威望
0  
Bulo币
8  
热心度
3  
专业度
0  
阅读权限
10 
注册时间
2008-3-13 
活力地带
11# 大 中 小 发表于 2008-3-14 15:38  只看该作者
看懂了!感谢楼主,人品那是相当的好啊!

[ 本帖最后由 kin0224 于 2008-3-14 15:40 编辑 ]

TOP

枪击蓝色

我看好你呦！

超级版主

Rank: 19Rank: 19Rank: 19

做人要厚道

UID
2 
帖子
1210 
精华
29 
积分
2132 
威望
632  
Bulo币
2978  
热心度
2090  
专业度
10  
阅读权限
255 
注册时间
2007-2-27 
荣誉勋章
终身成就勋章
活力地带
12# 大 中 小 发表于 2008-3-14 17:14  只看该作者

回复 11# 的帖子

呵呵 谢谢~！
技术成就未来！

TOP

linyh2008
Bulo儒生

Rank: 1

UID
469 
帖子
3 
精华
0 
积分
3 
威望
0  
Bulo币
8  
热心度
3  
专业度
0  
阅读权限
10 
注册时间
2008-4-17 
活力地带
13# 大 中 小 发表于 2008-4-17 19:56  只看该作者

高手和有心提高者请进

想提高自己的div+css的网页美工的，请加入改群：378328900！！想进者不可胡乱吹水打扰他人。

TOP

枪击蓝色

我看好你呦！

超级版主

Rank: 19Rank: 19Rank: 19

做人要厚道

UID
2 
帖子
1210 
精华
29 
积分
2132 
威望
632  
Bulo币
2978  
热心度
2090  
专业度
10  
阅读权限
255 
注册时间
2007-2-27 
荣誉勋章
终身成就勋章
活力地带
14# 大 中 小 发表于 2008-4-18 20:53  只看该作者
群号发错了吧~？  查找不存在阿！
技术成就未来！

TOP

linyh2008
Bulo儒生

Rank: 1

UID
469 
帖子
3 
精华
0 
积分
3 
威望
0  
Bulo币
8  
热心度
3  
专业度
0  
阅读权限
10 
注册时间
2008-4-17 
活力地带
15# 大 中 小 发表于 2008-4-29 17:02  只看该作者

试试看，是真的！

有没有听说过免费赠送手机充值卡密码呀？这个网站我也是刚发现的，你也可以打开看看，网址：
http://www.589108.com/zr?id=22449     以前网上很多免费的东西都是骗人的，但这一个可的的确确是真是的哦，因为我刚刚给手机充值了的。不过就是有一点点麻烦，那就是要替他们公司宣传下网站，只要把他们的网址发给30个人浏览便可获得一张30元的充值卡密码，其实挺简单，也挺容易的。

TOP

‹‹ 上一主题 | 下一主题 ››
 19 12
发新话题