靠左靠右实际布局DIV CSS实例模块
来源:互联网 发布:40岁没结婚的女人知乎 编辑:程序博客网 时间:2024/06/06 04:23
靠左靠右布局与只靠左布局DIV CSS实例模块
在实际css布局中常常会遇到,图标式超链接布局,以下为大家介绍一个使用float实现的图标布局。
采用css float布局效果截图
本模块使用float浮动实现div css布局。通过两种方法实现同种布局效果,第一种靠左float:left和float:right靠右实现布局,第二种使用两个float:left靠左实现。间距使用padding实现与div间距效果。
一、案例关键代码 - TOP
1、CSS代码
- .boxs{ margin:0 auto; height:70px; width:550px; background:#4089B2; padding-top:32px; overflow:hidden}
- .box-left{ float:left; width:250px; text-align:right}
- .box-right{ float:right; width:250px; text-align:left}
- .boxs2{ margin:0 auto; height:70px; width:550px; background:#4089B2; padding-top:32px}
- .box-left2{ float:left; width:154px; padding-left:96px}
- .box-right2{ float:left; width:154px; padding-left:50px}
2、HTML代码
- <p>使用靠左float:left 靠右float:right实现布局:</p>
- <div class="boxs">
- <div class="box-left"><a href="#"><img src="images/ad1.gif" /></a></div>
- <div class="box-right"><a href="#"><img src="images/ad2.gif" /></a></div>
- </div>
- <p>使用靠左float:left和padding实现布局:</p>
- <div class="boxs2">
- <div class="box-left2"><a href="#"><img src="images/ad1.gif" /></a></div>
- <div class="box-right2"><a href="#"><img src="images/ad2.gif" /></a></div>
- </div>
3、效果截图
float实现图标左右布局
二、案例在线浏览与下载 - TOP
1、css实例在线演示
查看案例
2、css div案例打包下载
本div+css实例采用div css布局,通过两种方法实现其布局效果,大家可以学会利用float实现并列左右布局效果。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m779.shtml
阅读全文
0 0
- 靠左靠右实际布局DIV CSS实例模块
- div+css布局实例
- div+css布局实例
- CSS 实例 div布局
- DIV+CSS网页布局实例
- div+css三栏式布局实例
- 转:div+css布局实例分析(一)
- DIV+CSS布局网页的一个实例
- html+css+div网页布局实例
- div+css网页标准布局实例
- 第三天 DIV+CSS布局实例
- 简洁 DIV+CSS布局入门之一 ( DIV+CSS常用 常用CSS DIV+CSS实例 简单DIV+CSS DIV+CSS布局分析 DIV+CSS流程)
- 简洁 DIV+CSS布局入门之二 ( DIV+CSS常用 常用CSS DIV+CSS实例 简单DIV+CSS DIV+CSS布局分析 DIV+CSS流程)
- 简洁 DIV+CSS布局入门之三 ( DIV+CSS常用 常用CSS DIV+CSS实例 简单DIV+CSS DIV+CSS布局分析 DIV+CSS流程)
- 简洁 DIV+CSS布局入门之四 ( DIV+CSS常用 常用CSS DIV+CSS实例 简单DIV+CSS DIV+CSS布局分析 DIV+CSS流程)
- DIV CSS绝对定位布局案例 position布局实例
- DIV+CSS实操一:经管系网页总体模块布局
- 最简单适用的 DIV 与 CSS 布局实例
- IAR版本不兼容打开工程文件的方法
- C++11:智能指针
- svn零散知识点
- 数电基础1 码制
- 十字链表的c语言实现
- 靠左靠右实际布局DIV CSS实例模块
- Logger 日志输入
- 获取最新的一条记录
- MQTT协议-MQTT协议简介及协议原理
- CoordinatorLayout+AppBarLayout+appbar_scrolling_view_behavior
- 小白学tkinter(事件之(事件绑定))
- WordPress版微信小程序开发系列(一):WordPress REST API
- oracle基础知识
- Linux系统中,main函数的执行过程