关注前端开发微信微信号web007007

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

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

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

阅读全文...

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

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

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

阅读全文...

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

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

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

阅读全文...

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

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

使用浮动定位方式,从一列到多列的固定宽度及自适应,基本上可以简单完成,包括三列的固定宽度。而在这里给我们提出了一个新的要求,希望有一个三列式布局,其中左栏要求固定宽度,并居左显示,右栏要求固定宽度并居右显示,而中间栏需要在左栏和右栏的中间,根据左右栏的间距变化自动适应。这给布局提出了一个新的要求,而且单纯使用float属性与百分比属性并不能够实现,CSS目前还不支持百分比...

阅读全文...

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

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

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

阅读全文...

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

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

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

阅读全文...

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

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

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

阅读全文...

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

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

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

阅读全文...

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

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

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

阅读全文...

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

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

横向菜单是通过div及JavaSprict实现下拉控制,纵向菜单呢?答案是肯定的。我们现在要做的就是一个纵向菜单,css代码: ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;} ul li { position:relative;} li ul { position:absolute; left:119px; top:0; display:none;} ul li a { width:108px; display:block; text-decoration:non...

阅读全文...

DOM元素上jQuery事件几点学习

DOM元素上jQuery事件几点学习

闲着无聊看了jQuery event部分的代码,发现一个小惊喜,嘿嘿,可能我奥特曼了。以下一jQuery 1.4.4版本说事,更高级版本稍有不同,但是关系不大。 jQuery 在元素上绑定事件的时候,会在该元素上添加一个自定义属性“events”,这个属性包含了通过jQuery绑定事件的事件集合,例如: 这样一个元素: <a id="bind" href="#">这是一个绑定了事件的元素(bind)</a> ...

阅读全文...