html中左右浮动怎么写,css 浮动(float)页面布局
【第一步 整体布局与公共CSS定义】我们先来分析一下这个页面
页面主要分5大块,顶部的Logo、导航条Nav、Banner、Content、Footer,如下图
下载 (116.12 KB)
2009-6-1 09:22
这样HTML就很容易写出来了
复制代码代码如下:
因为这5块的宽度都是900像素,并且都是水平居中的,所以相应CSS代码如下
复制代码代码如下:
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
/*为什么写这段代码没有忘记吧,作用就是重置可能用到的标签,不明白的去看第四节的课程关键词*/
#logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
【第二步 布局Logo栏】
首先我们需要把页面上的logo给切割出来,其大小为173*46,名字为:logo.gif
一般网站都会做到点击logo,就会回到主页,应该怎么做呢,大家首先会想到,给图片加上链接就可以了,代码一般会这么写
不过KwooJan要介绍另外一种方法,将图片做成链接a的背景,同样可以达到上面说的效果,并且HTML代码就会更精简,少了,看看下面Logo栏的页面代码,红色的为将logo.gif作为背景的链接
HTML代码:
复制代码代码如下:
CSS代码
复制代码代码如下:
#Logo{
height:80px;/*公共代码中没有定义高度,在这里定义*/
}
#logoLink{
display:block;/*将链接a转化成块状元素,这样才能显示出背景*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*为了让ie6和ff显示效果一样,如果不加上这句话,后面的margin-top:20px;两个浏览器解析不一样,大家可以去掉这句话,看看两者显示效果差别*/
margin-top:20px;/*设置a的顶部外边距为20像素,这样才能和浏览器顶部有段距离,才能和图片中做的一样*/
}
好到这里,头部含有logo的区域已经写完,如果自己做不出来,就来下载源代码
float1.rar
【第三步 布局导航栏Nav】
页面上的导航栏和第四节讲的几乎是一样的,并且更简单些,这里我就不再给大家一步一步做,不会做的就去看第四节,这里我就直接把代码发出来供大家学习
HTML代码:
复制代码代码如下:
- HOME
- PHOTOS
- ABOUT
- LINKS
- CONTACT
CSS代码
复制代码代码如下:
#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*转化成块状元素,因链接是内链元素,若想给它定义下面的属性,必须将它转化成块状元素,*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除链接样式,默认是有下划线的,加上这句就没有任何样式,下划线也没有了*/
float:left;/*这句一定要加,不然在IE6中会出现,这种效果*/
}
#Nav ul li a:hover{background:#68acd3;}
float2.rar
【第四步 Banner布局】
这个就更简单了,有两种方法
第一种:将图片作为
第二种:直接将图片插入
大家可以根据需求和实际情况选择用哪一种,在这里我们用第一种
HTML代码没有什么变化,只需要在CSS里面定义一下就OK了
CSS代码:
复制代码代码如下:
#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}
源代码下载: float3.rar (73.79 KB)
怎么样做到这里比较简单吧,好,接着来
【第五步 内容Content板块布局】
从图片上我们看到,内容板块分为左右两个区域,左边ContentL宽度是600px,右边ContentR宽度是300px,但是由于我们要将内边距设置成15px(这样才会好看),所以ContentL的宽度在CSS中就要设置成600-15*2=570px,而右侧的ContentR则需要设置成300-15*2=270px;
HTML代码:
复制代码代码如下:
CSS代码:
复制代码代码如下:
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*为什么都要左侧浮动,如果不明白就去看第二节*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}
页面效果:
内容部分我们就先做到这里,最后我们再布局里面的具体元素,下面接着来布局版权模块(Footer)
【第六步 Footer布局】
这部分结构比较简单,大家只需要知道怎么布局就OK了
HTML代码:
复制代码代码如下:
版权归CSS学习(www.cssxuexi.cn)所有
CSS交流QQ群:5505810/87951377/73513641/72263578
CSS代码:
复制代码代码如下:
#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}
目前效果如下:
就这样我们页面的整体结构基本出来了,剩下的工作就是内容板块内部元素的具体布局了,我将在下节课接着讲~
float4.rar
以上代码打包下载
html中左右浮动怎么写,css 浮动(float)页面布局相关推荐
- html中的左浮动的作用,CSS浮动
float是css样式中的定位属性,用于设置标签对象(如: 标签盒子.标签.标签.标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(floa ...
- Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
- CSS设计指南---页面布局
CSS设计指南-页面布局 教材:CSS设计指南 实现多栏布局 三种方案: 固定宽度:固定宽度布局的大小不会随用户调整浏览器窗口大小而变化,一般是 900 到1100像素宽. 流动: 流动布局的大小会随 ...
- html 清除浮动怎么写,清除浮动的css写法有哪些
本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码,非常不错,具有一定的参考借鉴价值,,需要的朋友可以参考下 一.float(浮动)是什么 float 属性定义元素在哪个方向浮动. fl ...
- css 浮动 解决,div+css浮动的解决方法
如何清楚浮动(一) 已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器),清楚浮动的div容器设置css样式为c ...
- asp.net 网页做一个浮动层_【CSS】7 页面布局:浮动
传统网页的3种布局方式: 普通流(标准流):标签按规定好的默认方式排列 浮动 定位 1.为什么需要浮动 浮动:很多网页布局标准流不能实现的,可以用浮动来做,因为浮动可以改变元素标签的默认排列方式i. ...
- CSS盒子模型/页面布局
1.盒子模型 页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 利用CSS设置 ...
- 应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
- html中盒子浮动怎么写,CSS盒子的浮动
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用"浮动"方式后,块级元素的表现就会有所不同. CSS中有一个fl ...
最新文章
- AngularJs 基础教程 —— 依赖注入
- 微软云创益大赛获奖团队风采:做一个中国特色的.Net源代码社区
- linux screen 命令简单使用
- TreeSet集合排序方式一:自然排序Comparable
- 发现一个病毒文件你删了他又自动创建怎么解决
- TypeScript 里 object 和 Object 的区别
- Git master branch has no upstream branch的解决
- Python 程序 可以一直输入 quit_Python二级考试临时抱佛脚专用笔记——(二)基本控制结构的程序设计amp;数据的输入和输出...
- 移动应用开发常见技术比较
- Latex插入PPT矢量图
- MISRAC系列之 Rule 1.1-1.3 C语言环境
- 查看本地MSN帐号和密码
- 【渝粤教育】广东开放大学 电算化会计 形成性考核 (44)
- 霍夫曼编码和LZ编码
- 服务器及电脑主机系统安全加固操作手册
- 微信红包随机算法转载
- 什么是CPA?如何通过CPA推广模式赚钱呢?
- MonoRail学习笔记四:MonoRail基本流程分析
- C语言进程——进程间的通信方式
- 机器学习编程作业ex7(matlab/octave实现)-吴恩达coursera K-means和PCA
热门文章
- canon镜头串口控制_佳能常规镜头和L系列镜头有什么区别,您应该购买哪个
- 要求输入框只能输入数字跟破折号
- 西西吹雪:从程序员到项目经理
- 对学校的希望和寄语_对学校的祝福语
- 安卓 Android 下载网络图片保存到本地
- iPhone4激活出错,菜鸟试验!!!!!
- 中文分词的基本原理以及jieba分词的用法
- 【iMessage苹果家庭】共享推软件设备安装创作AppleScript增加了iMessage群应用会得到一个硬件token
- 音视频开发基础知识(2)——最通俗易懂的视频编解码理论知识
- Mac 活动监视器 闪退 pro发热耗电过快问题解决,亲测可用解决