浮动案例

最新推荐文章于 2023-03-23 11:46:06 发布
最新推荐文章于 2023-03-23 11:46:06 发布
阅读量313 收藏 1
点赞数 1
分类专栏： HTML及CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44888570/article/details/109514060
版权

一个网页的小小案例，主要用到浮动
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实训2</title>
    <link rel="stylesheet" href="../css/4-2.css">
</head>
<body>
    <!--总体-->
    <div class="wrapper">
        <!--1.导航栏-->
        <div class="nav">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">HTML5资讯</a></li>
                <li><a href="">移动互联网</a></li>
                <li><a href="">应用推荐</a></li>
                <li><a href="">教程视频</a></li>
                <li><a href="">资源下载</a></li>
                <li><a href="">开发工具</a></li>
                <li><a href="">HTML5论坛</a></li>
            </ul>
        </div>
        <!--2.主体-->
        <div class="main">
            <!--（1）文本区-->
            <div class="content">
                <h1>HTML5：过去、现在、未来</h1>
                <h4>1.HTML5：过去、现在、未来</h4>
                <p>展示了HTML5的发展路程，从1991年HTML的出现，经过多年演变和进化，2009年HTML5问世了。它超越了以往的功能，增加了web网页的表现力，同时也增加了表单、本地数据等全新功能，对于网站的建设是一个全新的体验，HTML5带给Web无穷无尽的可塑性。
                </p>
                <p>HTML5支持多种媒体设备和浏览器，对Web和移动的应用和浏览器都有着较高的支持性和兼容性。据IDC调查，2012年1月，使用HTML5开发的应用程序已占据应用总数的78%。而在2011年7月调查显示，在移动设备上使用HTML5浏览器的设备约有1.09亿，预计2016年将达到21亿。
                </p>
                <h4>2.什么是HTML5？
                </h4>
                <p>乔布斯认为HTML5的到来，让Web开发人员再也无需依赖第三方浏览器插件，就能开发出高品质的图片、排版、动画等。
                </p>
                <p>该信息图标简单的介绍了HTML5的特性和功能，以及五大主流浏览器使用HTML5的程度，IE（26%）、Firefox(77%)、Chrome（86%）Safari（79%）和Opera（72%）。并从价格、效果、普遍性和能力四个方面，对比HTML5和Flash两者之间的不同。
                </p>
                <h4>3.HTML5发展史
                </h4>
                <p>HTML5从何而来？如何摇身一变成为今日的Web标准？答案就在下面的图表中。从2004年Web超文本应用技术工作组（WHATWG ）成立开始，直至展望2013年HMTL5预计将超过10亿用户，该信息图标详细介绍了HTML5发展历程和里程碑。
                </p>
                <h4>4.为什么开发者需要HTML5
                </h4>
                <p>长久以来，HTML5一直被遮蔽在Flash Web开发框架的阴影中，难以显露头角。但今时今日，却发生了变化。虽然Flash和IE浏览器占领着大部分市场份额，但手机系统厂商Apple和Android却都与HTML5站在同一条战线上。让我们看看，为什么桌面和移动端的浏览器、应用和开发人员都需要HTML5？
                </p>
                <h4>5.HTML5：浏览器的未来
                </h4>
                <p>从2012年1月的数据来看，全球已有超过34%的网站使用了HTML5技术。除去IE6-8浏览器外，其他主流浏览器都支持HTML5，其中仅有iPhone/iPad不支持Flash。
                </p>
                <h4>6.HTML5：移动领域的下一个阶段
                </h4>
                <p>据IDC调查研究显示，2013年全球各地将有10亿人使用HTML5浏览器，将有200万开发人员为HTML5浏览器开发应用。HTML5在未来的5-10年中，将成为移动发展的一个重要因素。该信息图表列举HTML5在不同领域、企业中起到的重要作用。
                </p>
                <h4>7.HTML5的美妙世界
                </h4>
                <p>该信息图表显示，预计2016年将有超过21亿部移动设备使用HTML5浏览器，该数据是2010年1.09亿的20倍之多。与此同时，还介绍了HTML5的新功能和特性。
                </p>
            </div>
            <!--（2）侧边栏-->
            <div class="aside">
                <div class="aside-top">
                    <div class="nav-aside">参考资料</div>
                <ul>
                    <li><a href="">HTML5技术差异特征理解</a></li>
                    <li><a href="">HTML的时代到来</a></li>
                    <li><a href="">HTML5标准</a></li>
                    <li><a href="">HTML5游戏开发盈利之道</a></li>
                    <li><a href="">HTML5的N个最常见问题</a></li>
                    <li><a href="">W3C正式宣布完成HTML5规范</a></li>
                    <li><a href="">HTML5规范开发完成，可能成为主流</a></li>
                    <li><a href="">应用HTML5须知五则</a></li>
                </ul>
                </div>
                <div class="aside-top">
                    <div class="nav-aside">扩展阅读</div>
                <ul>
                    <li><a href="">HTML5的未来</a></li>
                    <li><a href="">你不知道的HTML5开发工具</a></li>
                    <li><a href="">HTML5引领下的Web革命</a></li>
                    <li><a href="">HTML亟待解决的4大问题</a></li>
                    <li><a href="">HTML5巨头的游戏</a></li>
                    <li><a href="">HTML5在应用层的表现</a></li>
                    <li><a href="">测试浏览器是否支持HTML5</a></li>
                    <li><a href="">免费HTML5图标库jChartFX</a></li>
                    <li><a href="">HTML之article与section的区别</a></li>
                </ul>
                </div>
            </div>
        </div>
        <!--3.页脚-->
        <div class="footer nav">
            Coryright 2013
        </div>
    </div>
</body>
</html>
zeddme
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html/css中float浮动的用法实例详解
11-21
一、float基础用法示例 1、我们先建两个div盒子，设置高度、宽度和背景颜色； 最开始两个盒子在网页上的位置如下：  然后我们将红色盒子浮动到右边  然后我们会发现红色盒子浮动到了右边，但是蓝色盒子就直接上移到了原先红色盒子的位置。 然后我们将蓝色盒子也浮动到右边看看效果： 我们会发现它会紧跟着红色盒子排列，而不会受块级元素影响独占一行。 二、浮动定位的基本规则 1、当元素的float属性取值为left或right时，元素属于浮动定位; 2、若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动； 3、浮动盒子的顶边不得高于上一个盒子
css之浮动案例。
qq_43198727的博客
11-01 1199
浮动 浮动可以实现让多个元素排在同一行，并且给这些元素设置宽度与高度！浮动可以让元素脱离标准文档流 就可以实现让多个元素排在同一行，并且可以设置宽高 浮动:他是通过一个(float)浮动属性来实现 float left 向左浮动 向左移动 float right 向右移动 浮动元素的特性 1.浮动元素它可以脱离标准文档流 他不再占用空间了 2.我们可以把浮动元素理解为 “漂”浮动元素他的层级要比标准文档流里面的元素层级要高，它们会将标准文档流中的元素给压盖住 3.浮动元素他会向左或者向右移动。 4.浮动元
前端 盒子浮动布局
qq_55061257的博客
07-25 199
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮.
CSS浮动详解及案例
小洋人最happy的专栏
07-14 3771
浮动的规则 规则一 元素一旦浮动后 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或其他元素的边界为止 定位元素会层叠在浮动元素上面 示例 <style> .box { height: 500px; background-color: green; } span { background-color: hotpink; } strong background-color: khaki;
浮动及应用案例
m0_45659764的博客
03-17 895
三、标准流 目标：能够认识标准流的默认排布方式及其特点 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素 常见标准流排版规则： 块级元素：从上往下，垂直布局，独占一行 行内元素 或行内块元素：从左往右，水平布局，空间不够自动折行 四、浮动 1.1 浮动的作用 早期的作用：图文环绕 现在的作用：网页布局 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右 2.1 浮动的代码 属性名：float 属性值： .
浮动窗口的案例
03-16
浮动窗口是窗口比较重要的部分，可以随意移动，也可以改变大小。
CSS元素的浮动与定位综合案例3.pdf
07-10
CSS元素的浮动与定位综合案例3.pdf 学习资料 复习资料 教学资源
HTML CSS案例教程
08-05
CSS 教程案例, CSS盒模型,Css浮动,Css定位等
网页设计与开发的网页布局项目案例flex布局float浮动postion定位技术
06-24
通过学院展示网站介绍目前流行的flex布局技术、float浮动技术以及postion定位技术以及使用jq库实现图片轮播放大等效果。压缩包里面包括ppt、案例、项目源码等资料齐全。可用于简单的网页制作课程答辩等
Android浮动窗口demo
04-08
实现了Android浮动窗口，类似于360窗口的网速显示，一共包括两种样式的悬浮窗，可以通过主Activity里的按钮开启或关闭，也可以直接点击浮动窗口关闭。
HTML 布局 浮动 位置移动 和 边框盒子模型例子
06-24
HTML 布局 浮动 位置移动 和 边框盒子模型例子 通过这些文件例子的使用你基本可以了解布局的一些相关只是，通过例子自己尝试做出自己的页面
HTML+CSS自适应浮动例子
12-03
兼容IE6,下面的都是废话，是为了达到20个才写的，所以你不要在往下面看下去了，不喜欢写太多说明性文字，直接看代码就是了
浮动及案例
wyy的博客
04-17 119
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .outerDiv{ bord
浮动案例--常用的网页布局
一夜奈何梁山
02-01 660
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
HTML——浮动布局案例
piduocheng0577的博客
03-16 1232
案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 去除所有标签默认的编剧 */ *{ margin: 0; padding: 0; } ...
浮动的简单例子
yibashou的博客
01-29 326
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>浮动的变化title> meta name="viewport" content="width=device-width, initial-scale
关于浮动和边距的一个综合案例
点点的java小栈
08-02 476
本文主要来带大家实现一个案例，案例会用到浮动和边距的知识点，因为浮动和边距是html中比较重要的一部分，所以希望大家能够在吸纳知识点的同时，自己去写一写代码，练一练，以巩固住所学到的知识。而不是一看而过，这样学习是没有意义的。
【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-23 1603
一、案例效果 二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式 三、完整代码示例
css中浮动demo例子展示
xvzhengyang的博客
01-13 323
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;浮动demo&lt;/title&gt; &lt;!-- 1.例子中使用浮动,ad广告页面居右显示 2.内容区可以设置外边距,距离正好是浮动元素的宽度 3.但是我们可以发现
举例子写一个表格浮动案例
最新发布
06-07
好的，下面是一个简单的 HTML 表格，使用 CSS 中的浮动属性将其浮动到右侧： ```html <style> table { float: right; margin-left: 20px; /* 为了与其他内容保持一定距离，添加左边距 */ } </style> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table> <p>这是一段文字，表格已经浮动到了右侧。</p> ``` 在上面的代码中，我们使用 CSS 的 `float` 属性将表格浮动到了右侧，同时为了与其他内容保持一定距离，添加了一个左边距。当页面宽度足够时，表格会浮动到右侧；当页面宽度不足时，表格会自动换行，不会遮挡其他内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值