web标准布局实例教程，用定位轻松解决CSS复杂布局

我相信来经典论坛学习标准的朋友，99%都不是为了进W3C，不是为了成为专业的研究人员，那么大家来的目的是什么呢？很简单，其实都是想通过标准的学习让自己多增加一项技能而已，让自己在找工作的时候不会在被“需要熟练掌握web标准”而难倒，在下面的实例中xhtml并没有什么语意，文章的目的只是让然大家能更好的掌握CSS中相对、绝对定位的用法(新手问此问题的确实很多)，及如何有效的结合背景，实现比较复杂的布局。不足之处还望前辈们能指点一二,感谢！

--------------------------------------------------第一步-------------------------------------------

先来随便设计一个布局复杂点的(布局不规整)demo:
document.body.clientWidth-300) {this.height=(document.body.clientWidth-300)*this.height/this.width;this.width=document.body.clientWidth-300}" border=0>

--------------------------------------------------第二步-------------------------------------------
我们来进行代码的编写
<HTML>
<HEAD>
<TITLE>model</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<style>
html,body{
    margin:0;
    padding:0;
    background:#A1A9B6 url(images/allbg.jpg);
    text-align:center;
    }
#main{
    margin:0 auto;
    position:relative; -------------------------------->我是相对定位
    width:780px;
    height:659px;
    background:url(images/model.jpg) no-repeat;
    }
#main #menu{
    position:absolute;
    right:12px;
    width:354px;
    height:115px;
    background:url(images/menu.gif) no-repeat;
    }
#main #menu a,#main #menu a#page{
    float:left;
    width:112px;
    height:30px;
    }
#main #menu a#about{
    width:80px;
    height:55px;
    }
#main #menu a#services{
    width:70px;
    height:80px;
    }
#main #menu a#contacts{
    width:80px;
    height:115px;
    }
#main #menu a:hover{
    background: url(images/menu.gif) no-repeat;
    }
#main #menu a#page:hover{
    background-position: 0px -115px;
    }
#main #menu a#about:hover{
    background-position: -112px -115px;
    }
#main #menu a#services:hover{
    background-position: -192px -115px;
    }
#main #menu a#contacts:hover{
    background-position: -262px -115px;
    }
#main h1{
    position:absolute;-------->我是绝对定位，我相对与我的上一级#main来进行定位，因为他设置了position:relative;如果在我的父一级中没有找到position:relative;那我就相对与body来定位了...

top:0;left:1px;
    width:151px;
    height:56px;
    background:url(images/logo.jpg) no-repeat;
    }
#main h2{
    position:absolute;------------------>我也是绝对定位 我和上面提到的用法一样
    top:133px;
    right:7px;
    width:404px;
    height:190px;
    background:url(images/about.gif) no-repeat;
    }
#main h6{
    position:absolute;------------------>我也是绝对定位 我和上面提到的用法一样
    bottom:75px;
    right:10px;
    width:265px;
    height:44px;
    background:url(images/cars-logo.gif) no-repeat;
    }
</style>
</HEAD>
<BODY>
<div id="main">
<div id="menu">
------------------------------------------------------------------------------>这个菜单是怎么工作的呢？
一张图是怎么能实现背景切换呢？
呵呵，其实也很简单?大家知道背景图象中有：图像横纵坐标位置设置,此例子也正是运用这个特性，将拥有不同ID的链接A的背景进行偏移，以达到背景切换的目的。

<a href="#" id="page" title="page"></a>
<a href="#" id="about" title="about"></a>
<a href="#" id="services" title="services"></a>
<a href="#" id="contacts" title="contacts"></a>
</div>
<h1></h1>
<h2></h2>
<h6></h6>
</div>
</BODY>
</HTML>
-----------------------------------------------实际页面效果：---------------------------------------

model

html,body{
margin:0;
padding:0;
background:#A1A9B6 url(http://www.okrmt.com/demo7.8/images/allbg.jpg);
text-align:center;
}
#main{
margin:0 auto;
position:relative;
width:780px;
height:659px;
background:url(http://www.okrmt.com/demo7.8/images/model.jpg) no-repeat;
}
#main #menu{
position:absolute;
right:12px;
width:354px;
height:115px;
background:url(http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat;
}
#main #menu a,#main #menu a#page{
float:left;
width:112px;
height:30px;
}
#main #menu a#about{
width:80px;
height:55px;
}
#main #menu a#services{
width:70px;
height:80px;
}
#main #menu a#contacts{
width:80px;
height:115px;
}
#main #menu a:hover{
background: url(http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat;
}
#main #menu a#page:hover{
background-position: 0px -115px;
}
#main #menu a#about:hover{
background-position: -112px -115px;
}
#main #menu a#services:hover{
background-position: -192px -115px;
}
#main #menu a#contacts:hover{
background-position: -262px -115px;
}
#main h1{
position:absolute;
top:0;left:1px;
width:151px;
height:56px;
background:url(http://www.okrmt.com/demo7.8/images/logo.jpg) no-repeat;
}
#main h2{
position:absolute;
top:133px;
right:7px;
width:404px;
height:190px;
background:url(http://www.okrmt.com/demo7.8/images/about.gif) no-repeat;
}
#main h6{
position:absolute;
bottom:75px;
right:10px;
width:265px;
height:44px;
background:url(http://www.okrmt.com/demo7.8/images/cars-logo.gif) no-repeat;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

好了，这次的实例教程就结束了，希望对大家以后进行xhtml网页的设计，布局能有所帮助！再见.

赞 (0)

相关推荐

  • web前端开发中常见的多列布局解决方案整理(一定要看)

    web前端开发中常见的多列布局解决方案整理(一定要看)

    多列布局 多列布局在web前端开发中也是较为常见的,比如常见的三列.四列及以上,列的布局使得单一的页面可以展示更多分门别类的内容.这里会提到的多列布局有两列定宽加一列自适应.多列不定宽加一列自适应.多列等分三种. 两列定宽加一列自适应布局 本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变.简易实现代码如下: 两列定宽加一列自适应 本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现.需要注

  • 简要了解jQuery移动web开发的响应式布局设计

    简要了解jQuery移动web开发的响应式布局设计

    响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计.这意味着,无论用户是在移动.平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备. 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计.对不同屏幕分辨率的反应方式. 没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度: 在我们的自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局.在很宽的屏幕宽度,我们

  • WEB标准网页布局中尽量不要使用的HTML标签

    Do not use these html elements in html pages. Presentational elements should not be used. Support for some elements has been (or will be) deprecated; they should not be used. Don't Use These Tags Presentational b big hr i small sub sup tt Deprecated

  • Web移动端Fixed布局的解决方案

    Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码) <body> <!-- fixed定位的头部 --> <header

  • 用标准件的方式来组装网页DIV布局-WEB标准网站设计心得

    有这样一个想法,不知道可行么 例子: 布局中的左栏,它的属性有:{居左,宽度,背景色,字体等等} 如果把每个属性都做成一个标准件,然后这样组装起来使用 class="float width height background font padding....",通过多个class的标准件的引用来完成页面布局样式 先按需要定义好标准件如: float标准件 .l{float:left} .r{float:right} .cl{clear:left} ... width标准件 .w200{

  • web标准布局实例教程，用定位轻松解决CSS复杂布局

    web标准布局实例教程，用定位轻松解决CSS复杂布局

    我相信来经典论坛学习标准的朋友,99%都不是为了进W3C,不是为了成为专业的研究人员,那么大家来的目的是什么呢?很简单,其实都是想通过标准的学习让自己多增加一项技能而已,让自己在找工作的时候不会在被"需要熟练掌握web标准"而难倒,在下面的实例中xhtml并没有什么语意,文章的目的只是让然大家能更好的掌握CSS中相对.绝对定位的用法(新手问此问题的确实很多),及如何有效的结合背景,实现比较复杂的布局.不足之处还望前辈们能指点一二,感谢! ------------------------

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • asp.net开发与web标准的冲突问题的一些常见解决方法

    论坛中也经常有从事.net开发的新手朋友问一些asp.net开发过程中与web标准之间的冲突问题,其实说到底就是客户端代码生成的问题.更高深的开发层面的东西我也说不出来,从页面前端的角度和大家分享一下建议: 少用asp.net中的服务器端控件 在Visual Studio中,有一系列强大的控件,让我们的刚开始学习.net开发人员爱不释手.但vs中的这些控件,大多都是基于winForm的那种模式搬来的,在网页开发上,有些控件还是少用为佳,比如: 不要什么也没都统统加form runat="serv

  • Python Tkinter简单布局实例教程

    Python Tkinter简单布局实例教程

    本文实例展示了Python Tkinter实现简单布局的方法,示例中备有较为详尽的注释,便于读者理解.分享给大家供大家参考之用.具体如下: # -*- coding: utf-8 -*- from Tkinter import * root = Tk() # 80x80代表了初始化时主窗口的大小,0,0代表了初始化时窗口所在的位置 root.geometry('80x80+10+10') # 填充方向 ''' Label(root, text = 'l1', bg = 'red').pack(f

  • CSS标签切换代码实例教程 比较漂亮

    CSS标签切换代码实例教程 比较漂亮

    我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,

  • 网站程序员如何应对web标准第1/2页

    网站程序员如何应对web标准第1/2页

    作者:jxdawei jxdawei的blog:http://www.iwcn.net/ 本文讨论的是在web标准普及的形势下,网站程序员的定位以及如何与设计师配合开发符合web标准的网站项目.本文适合的读者是传统TABLE布局下分工不是非常明晰的程序员. 1:学习web标准,让你的工作变得更加简单. web标准是大势所趋,所以作为网站程序员.你必须洗脑,必须去学习web标准.去重新认识html标签,去了解如何让程序输出页面需要的代码. 比如: 上边是美工出来的效果图,下边是符合标准的程序代码:

  • 第9天:第一个CSS布局实例

    第9天:第一个CSS布局实例

    接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了. 注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.但任何事情都有得有失,取舍在于你的价值判断.好

  • Java Web开发入门书籍实例解析(总结一)

    Java Web开发入门书籍实例解析(总结一)

    从事Java Web开发这一段时间来,对Java 面向对象的思想和MVC开发模式可以说已经熟悉了.我当前参与的项目使用的框架是Spring.SpringMVC.Hibernate.下面我们小编给大家整理一篇教程帮助大家学习javaweb相关知识,感兴趣的朋友可以参考下. 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 1.静态web资源(如html 页面):指w

  • Yii2搭建后台并实现rbac权限控制完整实例教程

    Yii2搭建后台并实现rbac权限控制完整实例教程

    1.安装yii2 未安装的请参考yii2史上最简单式安装教程,没有之一 已安装的请继续看下一步操作 2.配置数据库 2.1 配置数据库 修改common/config/main-local.php 实际项目中本地的数据库往往跟线上数据库不一致, 我们这里配置到main-local.php就可以了,产品上线后,我们可以使用git或者svn忽略掉main-local.php,线上直接部署. 我们这里使用的mysql数据库,配置如下 当然啦,上面红圈圈的信息需要你自己手动修改掉,要是十分巧合跟我的一样

  • 我的一些关于web标准的思考笔记（一）

    我是从去年初开始学习web标准的,两年下来也有些心得.最近跳槽了正好闲在家里,写一些出来和大家交流一下. 1 对于web标准和W3C XHTML规范的理解 按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论"^_^).但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性.web标准简而言之就是将页面的结构.表现和行为各自独立实现,更通俗的讲就是如今招聘时流行的语言"div+css".但W3C XHTML的任何一个版本都

随机推荐