<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>布局</title>

    </head>

    <body>

        <header style="width: 800px;height: 120px;border: 1px red solid;">

            <header style="width: 800px;height: 20px;background-color: blue;">2019.3.22</header>

            <div style="width: 800px;height: 80px;background-color: red;">logotupian</div>

            <div style="width: 800px;height: 20px;background-color: pink;">导航部分</div>

        </header>

        <div style="width: 800px;height: 500px;border: 1px red solid;">

            <div style="width: 600px;height: 500px;background-color: green;float: left;" >

                <article>

                        正文导航

                        <p>新闻正文</p>

                </article>

            </div>

            <aside style="width: 200px;height: 500px;background-color: yellow; float: right;">侧边栏</aside>

        </div>

        <footer style="width: 800px;height: 30px;border: 1px red solid;>

            <div style="width: 800px;height: 50px;background-color: white;">

                版权信息

            </div>

        </footer>

    </body>

</html>






结果：






进阶：




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hpu</title>

    <style>

        *{padding: 0px;margin: 0px;}

        header{width:100%;height: 100px;    background:#f90;margin-bottom:5px;

            padding-top: 30px;position: absolute;}

        nav{position: absolute;left: 150px;top: 85px;}

        section{width: 100%;height: 700px;}

        /*article{width:70%;height: 700px;    background:#abc;float:left;}*/

        #a1{width: 34%;height: 700px;background: #453;float:left;margin-right:5px;}

        #a2{width: 35%;height: 700px;background: purple;float:left;}

        aside{width:29.5%;height: 700px;    background:#a10;float:right;}

        footer{width:100%;height: 100px;    background:cyan;clear:both;margin-top:5px;}

        ul{list-style: none;}

        ul li{float: left;}

        ul li a{

            text-decoration: none;

            background: #0f9;

            height: 40px;

            line-height: 40px;

            display: block;

            margin-right: 1px;

            padding:0px 10px;

        }

        ul li a:hover{background: purple;}

        ul li ul li{clear:left; }

        ul li ul{display: none;}

        ul li:hover ul{display: block;}

    </style>

</head>

<body>

    <header>

        <nav>

            <ul>

                <li><a href="http://baidu.com">学院简介</a></li>

                <li><a href="#">管理机构</a></li>

                <li>

                    <a href="#">学院设置</a>

                    <ul>

                        <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>

                    </ul>

                </li>

                <li><a href="#">招生就业</a></li>

                <li><a href="#">科学研究</a></li>

            </ul>

        </nav>

    </header>

    <section>

        <article id="a1"></article>

        <article id="a2"></article>

        <aside></aside>

    </section>

    <footer></footer>

</body>

</html>




结果：


												


											
Html学习之四（页面布局）的更多相关文章
	

    
						
  1. 九 Vue学习 manager页面布局
		
    1:  登录后系统页面如下: 对应代码: <template> <div class="manage_page fillcontain"> <el-r ...
    
		
    2. 
						
  2. 【Flutter学习】页面布局之其它布局处理
		
    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
    
		
    3. 
						
  3. 【Flutter学习】页面布局之列表和表格处理
		
    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
    
		
    4. 
						
  4. 【Flutter学习】页面布局之宽高尺寸处理
		
    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
    
		
    5. 
						
  5. 【Flutter学习】页面布局之基础布局组件
		
    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
    
		
    6. 
						
  6. xamarin学习之页面布局
		
    在android应中,需要注意3个文件,他们分别是:Main.axml,String.xml和Activity.cs. 1.布局文件Main.axml ,该文件保存在Resouses/layout的目 ...
    
		
    7. 
						
  7. [Android学习笔记]页面布局
		
    线性布局:LinearLayout 1.集成ViewGroup,故可容纳多个View 2.线性布局,可设置水平或者垂直方向 相对布局:RelativeLayout
    
		
    8. 
						
  8. （数据科学学习手札103）Python+Dash快速web应用开发——页面布局篇
		
    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
    
		
    9. 
						
  9. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
		
    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
    
		
    10. 
						
  10. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
		
    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. [C5W3] Sequence Models - Sequence models & Attention mechanism
			
    第三周 序列模型和注意力机制(Sequence models & Attention mechanism) 基础模型(Basic Models) 在这一周,你将会学习 seq2seq(sequ ...
    
			
    2. 
						
  2. C语言的指针用法：输入一堆字符，把非字母的删去。
			
    char *p,a[20]; int i; gets(a);    //这个语句不同于getchar(),后者只能一次输入一个,而前者可以一次输完所有的字符!!! p=a;        //这个语句 ...
    
			
    3. 
						
  3. prerender-spa-plugin预渲染踩坑
			
    为什么要使用预渲染? 为了应付SEO(国内特别是百度)考虑在网站(vue技术栈系列)做一些优化.大概有几种方案可以考虑: 服务端做优化: 第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整 ...
    
			
    4. 
						
  4. python-13-集合增删查
			
    前言 集合:可变的数据类型,但元素必须是不可变的数据类型,无序不重复,既可哈希.所以python的集合是不能进行修改的,只有增删查.可哈希.不可变数据类型有:元组.bool.int.str 一.增 1 ...
    
			
    5. 
						
  5. 百度开源的分布式唯一ID生成器UidGenerator，解决了时钟回拨问题
			
    UidGenerator是百度开源的Java语言实现,基于Snowflake算法的唯一ID生成器.而且,它非常适合虚拟环境,比如:Docker.另外,它通过消费未来时间克服了雪花算法的并发限制.Uid ...
    
			
    6. 
						
  6. 使用requests模块进行封装，帮你如何处理restful类型的接口
			
    import requests import urllib3 urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning) c ...
    
			
    7. 
						
  7. Android方法数超出限定的问题(multiDex，jumboMode)
			
    在Android项目开发中,项目代码量过大或通过引入很多jar导致代码量急剧增加,会出现错误: android.dex.DexIndexOverflowException: Cannot merge  ...
    
			
    8. 
						
  8. Java8的Stream方法findAny空指针异常（NullPointerException）实例对比
			
    实战介绍 学习完Java8的Stream方法,可能你正准备大展身手,却发现遇到不少问题,本篇文章为大家带来一个findAny方法抛出java.lang.NullPointerException的场景. ...
    
			
    9. 
						
  9. ASP.NET Core框架深度学习（三） Server对象
			
    8.Server   第五个对象 服务器在管道中的职责非常明确,当我们启动应用宿主的WebHost的时候,服务它被自动启动.启动后的服务器会绑定到指定的端口进行请求监听,一旦有请求抵达,服务器会根据该 ...
    
			
    10. 
						
  10. C# 简单的进程间通信方式
			
    只想实现一个简单的进程建通信,有什么快速实现方式? 1 进程单例需求 / Windows 消息与 IMessageFilter 如果需求是实现一个进程单例,在启动第二个进程时,期望能自动唤起第一个进程 ...
    
			
    11.