一个老外弄的Clearing floats（清除浮动的方法）

2016年07月27日 60 阅读

我常用的都是clear:both;方法，如 <divstyle="clear:both"> <divstyle="float:left"></div> <divstyle="float:right"></div> </div> 今在PlanABC看到另外这种方法，特些记录下来。 div.container{ border:1pxsolid#000000; } div.left{ wid...

XHTML下用dl,dt,dd标签实现翻页的效果代码

2016年07月27日 53 阅读

今天在标准之类的blog（http://www.aa25.cn）看到"纯CSS代码实现翻页" 的文章 dl {position:absolute;width:389px;height:154px;border:10px solid #eee;}dd {margin:0;width:389px;height:154px;overflow:hidden;}img {border:1px solid black}dt {position:absolute;rig...

常用的DIV+CSS的基本框架结构但不推荐都放一个div里

2016年07月27日 51 阅读

常用的DIV+CSS的基本框架结构但不推荐都放一个div里css样式代码： 程序代码复制代码 代码如下:/*---全局样式---*/ *{margin:0px;padding:0px;} body{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;background:#fff;} /*---主体样式---*/ #container{} .clearfloat{clear:both;...

无js5款纯div+css制作的弹出菜单标准

2016年07月27日 53 阅读

一、最基本的：二级dropdown弹出菜单 二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif;wi...

超强推荐CSS打造经典鼠标触发显示选项

2016年07月27日 57 阅读

css打造鼠标触发效果 找什么 会计 网页设计 翻译 家教更多>> 在那里 北京 上海 广州 深圳 南京 天津 杭州 成都 重庆 武汉 西安 沈阳 更多城市>> 高级搜索分类搜索 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]...

CSS网页布局入门教程1：一列固定宽度

2016年07月27日 61 阅读

本系列教程为入门级教程，适合初学者学习，由最简单的知识一点一点进阶。主要以实例为主，很少部分理论，这样更适应初学者快速掌握。因本人也正在学习，难免有一些错误或疏漏地方，望各位给予指正。本教程参考《CSS网站布局实录》一书，在此向作者表示感谢。 要想学好DIV+CSS，首先要有一定的HTML和CSS知识，如果这些你还不了解，建议你先去补习这一课，再来学习本教程。另外还要抛弃传统表格布局的思维模式，至于为什么，在你学习本教程中慢慢就会体会到。如果这些你都准备好...

CSS网页布局入门教程2：一列自适应宽度

2016年07月27日 62 阅读

自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度和高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上div默认状态的占据整行的空间，便是宽度为100%的自适应布局的表现形式，一列自适应布局需要我们做的工作也非常简单，只需要将宽度由固定值改为百分比值的形式即可。复制代码 代码如下:#layout{ border:2pxsolid#A9C9E2; backgroun...

CSS网页布局入门教程3：一列固定宽度居中

2016年07月27日 58 阅读

页面整体居中是网页设计中最普遍应用的形式，在传统表格布局中，我们使用表格的align="center"属性来实现，。div本身也支持align="center"属性，也可以让div呈现居中状态，但css布局是为了实现表现和内容的分离，而align对齐属性是一种样式代码，书写在XHTML的div属性之中，有违背分享原则（分离可以使你的网站更加利于管理），因此应当css的方法实现内容的居中，我们以固定宽度一列布局代码为例，为其增加居中的css样式： 复制代码 ...

CSS网页布局入门教程4：二列固定宽度

2016年07月27日 56 阅读

有了一列固定宽度作为基础，二列固定宽度就非常简单，我们知道div用于对某一个区域的标识，而二列的布局，自然需要用到两个div，XHTML代码如下： 复制代码 代码如下:<divid="left">左列</div> <divid="right">右列</div>新的代码结构中使用了两个id，分别为left和right，表示两个div的名称，我们所需要做的是，首先为它们制定宽度，然后让两个div在水平行中并排显示...

CSS网页布局入门教程5：二列宽度自适应

2016年07月27日 57 阅读

从二列固定宽度入手，开始尝试二列布局的情况下，左右栏宽度能够做到自适应，从一列自适应布局中我们知道，设定自适应主要通过宽度的百分比值设置，因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计，继续上面的CSS代码，我们得新定义二列的宽度值：复制代码 代码如下:#left{ background-color:#E8F5FE; border:1pxsolid#A9C9E2; float:left; height:300px; width:20%; } #r...

CSS网页布局入门教程6：左列固定，右列宽度自适应

2016年07月27日 56 阅读

在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应，在CSS中实现这样的布局方式是简单可行的，只需在设置左栏的宽度即可，如上例中左右栏都采用了百分比实现了宽度自适应，而我们只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动，代码如下： 复制代码 代码如下:#left{ background-color:#E8F5FE; border:1pxsolid#A9C9E2; float:left; height:300px; wi...

CSS网页布局入门教程7：二列固定宽度居中

2016年07月27日 72 阅读

在一列固定宽度之中，我们使用margi:0pxauto;这样的设置，使一个div得以达到居中显示，而二列分栏中，需要控制的是左分栏的左边与右分栏的右边相等，因此使用margi:0pxauto;似乎不能够达到宁产的效果，这时就需要进行div的嵌套式设计来完成了，可以使用一个居中的div作为容器，钭二列分栏的两个div旋转在容器中，从而实现二列的显示，结合上面的代码，新的XHTML代码结构如下： 二列固定宽度居中——AA25.CN 左列 右列 ...

CSS网页布局入门教程8：三列浮动中间列宽度自适应

2016年07月27日 75 阅读

使用浮动定位方式，从一列到多列的固定宽度及自适应，基本上可以简单完成，包括三列的固定宽度。而在这里给我们提出了一个新的要求，希望有一个三列式布局，基中左栏要求固定宽度，并居左显示，右栏要求固定宽度并居右显示，而中间栏需要在左栏和右栏的中间，根据左右栏的间距变化自动适应。这给布局提出了一个新的要求，而且单纯使用float属性与百分比属性并不能够实现，CSS目前还不支持百分比的计算精确到考虑左栏和右栏的占位，如果对中间栏使用100%宽度的话，它将使用浏览器窗口...

CSS网页布局入门教程9：用CSS设计网站导航——横向导航

2016年07月27日 58 阅读

网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航第三种形式。 横向导航 作为门户网站的设计而言，主导航一般采用横向导航。由于门户网站下方文字较多，且每个频道均有一同的样式区分，因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择，国内大部分门户均采用这种形式。 纵向导航 目前在门户网站的设计中已经不再流行，纵向导航更倾向于表达产品分类。 ...

CSS网页布局入门教程10：带当前标识的标签式横向导航

2016年07月27日 66 阅读

当前标识指用户点击该频道或栏目，该栏目的标签呈现出与其他标签不同的颜色用以提示用户所处的位置。 这种设计是网站设计中相当简单而且是相当经典的一种增进网站可用性的方式。网站让用户使用时是应该考虑到用户浏览的思考过程，糟糕的网页设计只顾及页面本身而不去考虑用户感受，优秀的设计应当是以用户为中心出发的，这样一种简单的当前频道的标识往往是许多设计师所忽略的内容，用户需要知道自已的位置，以及知道自已还能去哪里，通过对当前位置的标识，有助于让用户认清自己在网站中的方位...

CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版

2016年07月27日 59 阅读

虽然完成了标签式导航，但是广场状的导航似乎并不能够顺应现在的设计潮流，其实导航不仅可以使用css的颜色来定义，同样可以采用精心设计的图片或其它元素来构建导航，在这里我们将开始改善导航的设计，使它成为更加出色的标签效果。 我们将考虑去掉单一的方块状背景元素，使用带色彩的圆角标签来完成我们的设计。不过从这个改进中能够体会到css设计的另一个优势，就是可以不需要修改结构代码，只需要修改样式，便可以完成改进，所以这里可以直接看看css代码的设计： <st...

CSS网页布局入门教程12：纵向导航菜单

2016年07月27日 59 阅读

纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧！如图所示的效果，我们先看一下代码结构：<div id="nav"><h1>CSS</h1><h2><a href="#">css入门</a></h2><h2><a href="#">css进阶</a></h...

CSS网页布局入门教程13：下拉及多级弹出式菜单

2016年07月27日 58 阅读

下拉及弹出式菜单是网站设计中常用导航形式，这种菜单形式能够充分利用页面现在空间隐藏与显示更多内容，并能对内容进行合理的分类显示，是一种非常优秀的导航形式。 早期的下拉或弹出式菜单通过隐藏的layer或div来实现内容的隐藏，通过JavaScript脚本来响应用户的操作，目前也采用JavaScript+div或其它元素的形式来制作此类导航，不同的是整个导航都将使用符合标准的css布局来打造，不再使用表格来制作菜单，下拉式菜单是上面提到的横向导航与纵向导航...

CSS网页布局入门教程14：纵向下拉及多级弹出式菜单

2016年07月27日 57 阅读

学完了上节教程，我想对于这于这节的学习就容易得多了。 横向菜单是通过div及JavaSprict实现下拉控制，纵向菜单呢？答案是肯定的。我们现在要做的就是一个纵向菜单，css代码： ul{margin:0;padding:0;list-style:none;width:120px;border-bottom:1pxsolid#ccc;font-size:12px;} ulli{position:relative;} liul{position:absolu...

DIV+CSS 英文命名规范

2016年07月27日 56 阅读

1.CSSID的命名 外 套： wrap 主导航： mainnav 子导航： subnav 页 脚： footet 整个页面： content 页 眉： header 页 脚： footer 商 标： label 标 题： title 主导航： mainbav（globalnav） 顶导航： topnav 边导航： sidebar 左导航： leftsidebar 右导航： rightsidebar 旗 志： logo 标 语：...