登录 | 注册

左边logo 右边广告图片布局 div css左右浮动布局实例

首页 > Web前端 > CSS 2016-11-29 14:17:54 浏览次 共 条评论

收藏赞(分享

左边logo 右边广告图片布局( div css 左右 浮动 布局实例)

一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里 为大家介绍对 float浮动 使用实例布局介绍。

需要div+css布局案例效果图
需要div+css布局案例效果图(缩小)

一、 实例布局技术点说明

1、图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小)。
2、采用 float:left 和 float:right 布局:一般遇到内容靠左和靠右的,通常使用 css float 浮动布局
3、logo布局:一般logo图片布局时作为 css背景图片 布局,使用 h1标签 ,对应h1标签内容打上网站名称(公司名称等)文字,并且加上超链接 a标签 ,这时利用 CSS缩进 隐藏文字同时超链接不丢失任然生效(这样布局有利于搜索引擎优化哦)。
4、右侧广告图片:直接在 html 中使用 img标签 即可。

二、要使用CSS样式单词列表

1、 height 设置高度
2、 width 设置宽度
3、 float 设置浮动(float:left、float:right)
4、 overflow 清除浮动(overflow:hidden)
5、 margin 设置布局居中(margin:0 auto)
使用什么样式均由美工图中分析得出而非想设置什么样式就设置什么样式。

三、css实例

1、首先切出左边LOGO图片和右边广告图片(这里不再切图演示,在VIP教程有切图教程,相信参加 培训 同学在课堂已经学会切图)

ps切出两张图片素材
切出两张图片素材

2、引人 初始化模板 ,在此基础上进行实例布局

3、将图片拷贝入模板images文件夹(共2张)

4、因为布局靠左靠右,所以肯定有一个外层盒子,我们 命名 为#header( html5 header标签 ),从美工图分析(软件分析)得出宽度为700px, 布局居中 。

5、在模板基础上布局 HTML代码

  1. <div id="header"> 
  2. <h1 id="logo"><a href="http://www. .com/"> 网站</a></h1> 
  3. <div class="right-ad"><img src="images/rt-ad.jpg" /></div> 
  4. </div> 

以上设置<div id="header"></div>布局居中,<h1 id="logo"><h1>设置布局左侧logo,将图片作为背景,<div class="right-ad"></div>设置靠右 div盒子 装广告图片。

6、在模板基础上布局 CSS代码

  1. #header{ margin:15px auto; width:700px; overflow:hidden} 
  2. /*  设置布局居中,宽度和具有清除浮动功能overflow:hidden,不设置高度 */ 
  3. h1#logo{ float:left; height:70px; background:url(logo.jpg) no-repeat; width:174px} 
  4. h1#logo a{ display:block; width:100%; height:100%; text-indent:-9999px} 
  5. /*  设置text-indent隐藏文字, display:block; 让a形成块以便同时设置宽度高度生效 */ 
  6. .right-ad{float:right} 
  7. /* 只需要设置靠右即可 */ 

7、布局效果截图

css div布局案例截图
css div布局案例截图

8、在线演示:

查看案例

9、 HTML文件 + CSS文件 +布局图片素材整个案例打包下载:

立即下载 (15.923KB

9、PSD文件下载

立即下载PSD文件 (45.889KB

四、总结
以上是最简单的左右float浮动实际案例布局,同时在初始化模板基础上完成,以便兼容各大浏览器(记住为了兼容性一定 初始化模板 基础上布局)。

免责声明:本文来源于,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布Web前端相关趋势文章,包括 Web标准 HTML5 CSS JS JQuery Ajax 网页特效 等领域,敬请关注!

分享到
人收藏5 收藏
 
 
 

咨询中心

优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博