网站用css来布局,怎么样才能让两个层在同一个水平线上!

作者&投稿:吉晓 (若有异议请与网页底部的电邮联系)
html布局,下面怎么使两个div在同一行显示?~

两种常用方法:左左左左左左左右右右右右右右。一、.p_left{float:left;}。.p_right{float:left;}。
二、(中间如果有空格 他会留空格的 上面的就不会,你要块状也可以换成display:inline-block;)。.p_left{display:inline;}。.p_right{display:inline;}。
在界面设计的时候,经常需要将两个div在同一行显示。
如以下要将“第一个div”和“第二个div”显示在同一行:
/*外层div*/
第一个div
第二个div

只需要对id2和id3增加css样式即可,如下所示:
/*外层div*/
第一个div
第二个div

这样就可以了。

把两个div放在一个父div里面,然后进行浮动即可。
下面我们一起来实现以下:
创建一个父div,然后创建两个子div,代码如下:

给div加上css样式,分别给他们设置背景颜色,父div可以不设置,子div设置绿色,然后给div加上浮动代码即可,"float:left"我们来写一下代码:

下面我们来看一下运行效果

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

左边的快加上 float:left,右边的块加上float:right,只要这两个块的宽度不超过父块的宽就能在同一水平线上了。
想让鼠标放按钮上显示不同颜色,可以不用CSS,你可以做几个颜色的图片,用鼠标响应事件,当鼠标放到按钮上,按钮调取指定图片,鼠标离开,再调取响应图片。如果用CSS原理也一样,鼠标放上,触发一个时间,JAVASCRIPT改变这个按钮CSS控制颜色的属性。

第一个就是把这两个DIV放在同一个大的DIV内,然后设置这两个小DIV同时:float:left;就行
下面一个就得用伪类了
你上网找找那个网站模板,然后改改它的CSS就行,我这样打出来,代码太多
希望有所帮助

举个例子
<div style="width:100px;float:left;height:30px;">
<div style="float:left;width:50px; height:30px;clear:right"></div>
<div style="float:left;width:50px; height:30px;"></div>
</div>

不同颜色的话有很多方法的,最简单的用!Important,不清楚的你看
http://hi.baidu.com/kerryhero/blog/item/24240bcf2e1f9530b700c8c1.html
这个里面有详细的

你应该跪求百度


CSS有几种实现三栏布局的方法
这次给大家带来CSS有几种实现三栏布局的方法,CSS实现三栏布局的注意事项有哪些,下面就是实战案例,一起来看一下。前言其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只...

怎么用css+div布局一个网页!具体的思路是怎么样的?先后顺序是怎么的...
div+css布局现在是主流,能提高网页加载速度,提高后期代码维护效率。步骤阅读 方法\/步骤 >01 div 所谓标签我们可以理解为一个盒子。例如:这里是Top02 border:1px solid #000;(这是把边框显示出来,方便我们布局)。background-color:#EEE;(这是背景色设置,#EEE为颜色值)。div的设置属性有很多,...

CSS3怎么做出响应式布局
如何在CSS中引入媒体查询?媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式。如何用CSS做响应式布局呢?1、在HTML头部添加以下代码,用来显示兼容移动设备的显示效果。 参数详解:width=device-width :宽度等于当前设备的宽度 initial-scale=1 :初始的缩...

如何用DIV+CSS进行网页样式布局
一、选择“div标签”命令 打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对象】【div标签】命令,打开“div标签”对话框。二、输入div标签名称 1、在“ID”列表框中选择“top”2、单击“新建css规则”按钮准备进行css规则定义 三、新建css规则 在打开的对话框中保持默认设置,单击“...

如何用DIV+CSS进行网页样式布局
在html网页编辑中,对于新手来讲,接触最多的就是div+css;那么如何使用div+css就行网页简单布局呢 一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分; 头部有分为店招(logo)和导航等 中间既内容部分,内容也可一个整体,也可左右分离, 底部来页面结尾,一般写版权信息,友情链接...

网页设计采用div+css有什么好处?
第三、兼容性卓越 DIV+CSS布局符合web标准规范,几乎所有的浏览器上都可以使用,不会因为在不同的浏览器中显示效果差距很大。第四、缩短网站改版时间 因为网站的布局都是通过外部的css文件来控制,只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上...

CSS 布局_1 盒模型
display 属性,元素的显示方式,规定元素应该生成的框的类型,这个属性用于定义建立布局时元素生成的显示框类型 注释 : inline-block 在 IE7 开始支持,在 IE6 下设置 _display:inline; 也可以实现相同效果,下划线 _ 是只针对 IE6 所设置的 CSS 样式,例: _width:100px;我们来回顾下...

如何用CSS进行网页布局
CSS英文全称:Cascading Style Sheets(层叠样式表)是为了丰富网页布局的样式,在CSS没有出来之前,大家会用表格来进行分割布局,很不方便,CSS出来后就好多了。我们平时所访问的都是服务器反馈到浏览器的HTML页面,但是正如上面说的,HTML无法满足新时代网站拥有者的表达需求,我们就会在HTML代码中加入适当的...

请问怎么使用css实现下面的布局
简单来说就是一个css排布的问题(由于你需求的宽高不清楚,我直接使用绝对的简单数据来示范):首先一个总盒子,在里面有三个小的盒子。(红色部分不知道你是打算整个网页就是这样的布局,还是局部的,所以我直接当作一个盒子(box)处理,到时候只要改下长宽即可):2.接着完成类名赋予,再给右下角...

如何使用css实现响应式全屏布局
如何用css实现响应式全屏布局呢?满屏大图是当前比较流行的一种网页形式,本文将使用css的background-size属性,教您如何简单实现该效果。核心概念使用background-size 属性,填充整个viewport当css属性background-size 值为cover时,浏览器会自动按比例缩放背景图的宽和高,直到大于或等于viewport的宽和高使用...

银海区15235724301: 网站用css来布局,怎么样才能让两个层在同一个水平线上! -
里依灵辰: 举个例子不同颜色的话有很多方法的,最简单的用!Important,不清楚的你看 http://hi.baidu.com/kerryhero/blog/item/24240bcf2e1f9530b700c8c1.html 这个里面有详细的

银海区15235724301: 网页如何使用两个CSS -
里依灵辰: 如果你是让所有td标签的链接都是蓝色那么这样td a:hover{color:#0000ff}如果只让一个链接是就给td起个名字如.link1 a:hover{color:#0000ff}<td class="link1"><a href="www.cssbbs.com">CSSBBS</a></td>

银海区15235724301: div+CSS 网页布局分两栏时,如何让两栏同等高度.请求帮忙,急!!谢谢? -
里依灵辰: 因为你使用了float,所以left和right都已经不在正常的流中了,所以他们之间的以及父元素之间的高度都是互相独立的.所以要想不使用javascript,而又要这两者之间有关系的话就不能使用float.通常要进行准确的布局都是通过table来解决 参考下...

银海区15235724301: 如何使用CSS布局左右两栏? -
里依灵辰: #left,#right{float:left}<div id=left></div> <div id=right></div>浮动型设置为left 就可以使下面的2个DIV采用左右两栏的形式布局了!!如果2个DIV过宽 那么会另起一行显示!!!

银海区15235724301: DIV+CSS布局问题,让两个DIV标签并排 -
里依灵辰: 假设 apDiv1是外面的层,apDiv2,apDiv3是里面的,给apDiv2,apDiv3 设置浮动为左就可以了,还有当apDiv2的宽度加上apDiv3的宽度大于apDiv1的宽度是,apDiv3会跑到apDiv2下面,这时可以改它们的宽度.#apDiv1 { position:absolute; left:...

银海区15235724301: 如何用css进行网页布局 -
里依灵辰: 实现网页布局的方式方法比较多,布局方式可以大概分为这几类.布局种类:1、table布局(网页的兴起,1995)2、Flash布局(自由的黄金时代,1996)3、div+css(CSS的诞生,1998)4、栅格与响应式(移动端的兴起,2007与2010) 当前...

银海区15235724301: CSS如何使多行数据变成两列多行? -
里依灵辰: 不能实现,重新布局吧.左边的中间的...

银海区15235724301: 怎样在一个网页中设置两套CSS连接样式? -
里依灵辰: 用CSS和JavaScript结合可以实现这个效果.这个东西行话叫“网站换肤”.但是我JavaScript还不太懂.我也说不太懂.但是我知道有本书里面讲了.书名字叫《CSS网站布局实录》是科学出版社出版的.你可以去买一本.也可以去一个CSS论坛问问这个问题.地址是http://bbs.blueidea.com/index.php 这个书的作者的地址是http;//allan.flashempire.net/blog/ 另外,你可以去JavaScript的网站的论坛问问这个问题,地址是http://bbs.javascript.com.cn/

银海区15235724301: dreamweaver怎么用同一个css编辑几个网页 -
里依灵辰: 在DW中要用同一个CSS的话那么你就要相同页面的布局是一样的,包括DIV命名,这样你在应有的时候就可以用同一个CSS,在第一个的CSS建立的时候你就要储存并命名好,然后放在网站CSS目录下.后面的相同页面就可以直接引用那所建立的那个CSS.不同的地方还是要你自己重新去编写,同一个CSS样式的使用就只能应用于相同布局的页面.

银海区15235724301: css中 如何在一个层里让两个表格排在一行上 -
里依灵辰: 加浮动啊.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网