CSS网页布局中 DIV和TABLE超出宽度自动换行方法总结

作者:flywe 日期:2009-12-24

      自动换行问题，正常字符的换行是比较合理的，而连续的数字和英文字符常常将容器撑大，挺让人头疼，现在总结一下CSS如何实现换行的方法，只要在CSS中定义了如下句子，可保网页不会再被撑开了。

      对于div,p等块级元素
      正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。

分类:Css+Div | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 473

Div高度随窗口变化而变化

作者:flywe 日期:2009-10-31

在有些页面制作中要求高度也随浏览器的高度变化而变化，多半我们是用js来实现这个功能，今天在网上看了一个用css写的，虽然自己没有怎么用过，但相信有朋友能够用到这个方法，让我们来看看吧！

可以在IE6、IE7与FF中，自由的调整浏览器窗口的高度。即可看到DIV高度上的变化。

程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tags: div div 高度高度

分类:Css+Div | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 248

DIV+CSS打造环形图片导航菜单

作者:flywe 日期:2009-03-22

一个利用css+div打造的环形图片导航菜单，可用于简洁有特点的网站首页，或那种只有一个导航作为引导页的那种页面，这种菜单相对Flash制作的环形菜单来说，对搜索引擎更加友好！

Tags: div div css css 图片导航图片导航导航菜单导航菜单

分类:Css+Div | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 444

CSS+DIV 二级竖向导航菜单

作者:flywe 日期:2009-03-19

CSS+DIV的网站结构是越来越多了，利用DIV+CSS制作的二级导航菜单甚至是多级的导航菜单的使用也越来越普遍，今天就给大家提供一个效果还不错的利用Div+Css制作的二级竖向导航菜单，希望大家喜欢！

分类:Css+Div | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 906

CSS和DIV实现的一个简单的下拉效果

作者:flywe 日期:2008-12-16

在现在的网页布局中，有一种效果就是鼠标指向一个按钮或者一个链接或者一个图片，然后出现一个下拉框，里面列出了所有相关内容，这样的一个布局就比较灵活了，相关内容比较多的时候，就算在这里全部列出来也不会占用多大的地方，在网上找了一些，都有些麻烦，突然想到以前做过一个类似的效果，于是就直接搬过来用，就实现了我想要的效果！

代码部分：

程序代码

Tags: css css div div 下拉下拉

分类:Css+Div | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 760

如何解决flash挡住层的问题

作者:flywe 日期:2008-09-16

    在网页制作的过程中，尤其是DIV+CSS的布局，有的时候flash会挡住其它的层的内容，如果遇到带下拉菜单的导航，而导航下面正好又是一个flash的时候，很有可能下拉菜单会跑到flash的后面，而失去导航的作用。

    那么，怎么样才能让flash不在最上层呢？这时候大家可能会想到z-index，试过之后貌似对flash无效，在网上查阅一些资料后发现一个属性设置<param name="wmode" value="opaque">

    把<param name="wmode" value="opaque">加到html代码中flash的相关部分，目前使用基本还算正常！

分类:Other | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1356

鼠标事件导致样式表定位变动

作者:flywe 日期:2008-02-01

      在表格中有一种效果，当鼠标指向的时候当前行或者鼠标所指单元格变色，大家都知道，最常用的方法就是利用onmouseover和onmouseout这两个属性，在今天做一个这样的效果的时候发现某些情况下，这种效果会使DIV+CSS定位的页面发生一定的变化。

    运用这个效果的页面采用上中下的DIV布局，中间整体的一个样式表是：#main {margin-top:-15px;}

      table就在#main这个DIV中，我做的是鼠标指向当前行变色，代码为：

Tags: 鼠标事件鼠标事件样式表样式表 css css div div

分类:Css+Div | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2418

Div CSS布局关于分辨率与100%自适应问题的探讨

作者:flywe 日期:2007-08-28

　　在论坛看到有网友提问，关于分辨率与自适应的问题：

论坛原文如下：

程序代码

　　本人最近在学CSS，但是有蛮多疑问。我现在在这里列出来。

　　1.请问如何设定在不对的客户端都能正常的浏览（不变型）网页。你用CSS定位，你要怎么设定最外面的层宽？假如设定为。宽800

Tags: div div CSS布局 CSS布局分辨率分辨率自适应自适应

分类:Css+Div | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1741

使用恰当的XHTML元素及避免过多的使用div与span

作者:flywe 日期:2007-08-11

　　在许多的DIV+CSS布局中，多次强调使文档具有语义。我们应该根据文档内容的结构去选择最为恰当的HTML或XHTML元素标记，而不是根据它们的外观样式去选择他们。我们使用P元素定义一个段落，而不是用它来取得换行效果。我们使用h1-h6元素标记标题，而不是用它们取得文字大小与加粗的效果。

例如：

程序代码

　　一个标题，我们可以用h1来定义它：
　　<h1>这里是文章的标题文字</h1>
　　而不应该使用其它的什么方式来定义它：

Tags: XHTML XHTML div div Span Span

分类:Css+Div | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 922

DIV CSS技巧：在DreamWeaver中编写CSS的一些习惯建议

作者:flywe 日期:2007-07-26

　　CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求，Macromedia DW MX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性，你可以为未来的更新作好计划，开发与W3C标准更加兼容的站点。本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议。

　　一般地讲，样式表（style sheet）就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS：

程序代码

　　代码式（Inline）：写入到代码中的一次性的样式。
　　内嵌式（Embedded）：可控制一个页面中所有元素的样式表
　　外联式（External）：可控制许多页面中的元素的样式表