文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

div css左右浮动布局的方法是什么

2024-04-02 19:55

关注

这篇文章主要介绍“div css左右浮动布局的方法是什么”,在日常操作中,相信很多人在div css左右浮动布局的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”div css左右浮动布局的方法是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

div css左右浮动布局的方法是什么
需要div+css布局案例效果图(缩小)

一、DIVCSS5实例布局技术点说明 

1、图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小)。
2、采用float:left和float:right布局:一般遇到内容靠左和靠右的,通常使用css float浮动布局
3、logo布局:一般logo图片布局时作为css背景图片布局,使用h2标签,对应h2标签内容打上网站名称(公司名称等)文字,并且加上超链接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教程有切图教程,相信参加DIVCSS5培训同学在课堂已经学会切图)

div css左右浮动布局的方法是什么
切出两张图片素材

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

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

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

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

<div id="header">     <h2 id="logo"><a href="http://www.编程网.com/">DIVCSS5网站</a></h2>     <div class="right-ad"><img src="images/rt-ad.jpg" /></div> </div>

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

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

#header{ margin:15px auto; width:700px; overflow:hidden}  h2#logo{ float:left; height:70px; background:url(logo.jpg) no-repeat; width:174px} h2#logo a{ display:block; width:100%; height:100%; text-indent:-9999px}  .right-ad{float:right} 

7、布局效果截图

div css左右浮动布局的方法是什么
css div布局案例截图

到此,关于“div css左右浮动布局的方法是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯