HTML导航页面结构

先放效果图

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面结构</title><style>body,html{margin: 0;padding: 0;}header,aside,section,footer{border: 1px solid yellow;background: #1b6d85;text-align: center;}.header{height: 100px;}.aside,.section{height: 300px;}.aside{width: 100px;float: left;}.footer{height: 100px;}</style>
</head>
<body>
<header class="header">header</header>
<aside class="aside">aside</aside>
<section class="section">section</section>
<footer class="footer">footer</footer>
</body>
</html>

但是如果把section也float:left，就会出现下面的效果

 .aside,.section{height: 300px;float: left;}.aside{width: 100px;}

原因是：当一个元素设置了float属性后，部分元素会脱离原来的文档流，紧随其后的块元素会无视设置float属性的元素，但是后面元素的文本依然会为float元素让出位置，环绕于周围。

HTML导航页面结构相关推荐

web前段学习day_01:HTML（学习如何搭建页面结构和内容）：文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用
学习如何构造页面结构和内容安装HBuilderX 一.HTML 创建第一个HTML页面写完html后如何测试写在body中的常见标签有哪些? 注释快捷键 Ctrl+Shift+/ 1.文本相关标 ...
网页优化中，网站页面结构该注意什么？
网站页面结构即网页内容布局,网站页面结构的创建就是要对网页的内容进行规划布局,合理的网站页面结构总是很受搜索引擎蜘蛛的欢迎,网站页面结构也能直接影响页面的用户体验及相关性,还能影响网站整体结构及页面被 ...
移动Web单页应用开发实践——页面结构化
1. 前言在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
获取元素到页面顶部的距离_组成网站页面结构的元素有哪些？
想要做好网站内部优化,必须要了解网站的组成结构,同时也要对网站结构有一个全面的了解.页面结构就是页面内容的格局,是制作页面的重点之一.合理的页面结构不仅有利于搜索引擎的收录,同时还有利于用户体验. 在 ...
前端：HTML5/36/HTML5简介，文档类型定义，网页字符集，页面结构标记，文章相关的标记，其它标记，音频标记，视频标记，表单中新增的属性，表单input元素type属性的值
HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...
[HTML/HTML5]3 页面结构
在HTML5之前,主要的容器元素是div元素,但在HTML5中提供了数种其它容器元素供我们使用. 因此,当组织Web页面结构时,首先使用HTML将内容分成多部分,然后在对其使用CSS应用样式和格式. ...
html新增和删除行,html5页面结构的变化以及增加和删除标签的总结
这篇文章给大家介绍的内容是关于html5页面结构的变化以及增加和删除标签的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 页面结构传统页面结构 html5页面结构 eg 新增标 ...
php序顶部导航,页面上下滚动改变顶部导航的定位方式
最近碰到设计师的一个设计效果要求,其他网站也有实现: state1:当网页向下滚动时,页面header栏消失,顶部nav往上靠: state2:当网页向上滚动时,页面header栏出现,顶部nav顺着 ...
页面结构图示例图_定义示例站点的页面结构
页面结构图示例图 The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition ...

HTML导航页面结构

HTML导航页面结构相关推荐

最新文章

热门文章