<!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. Winclone 8 Mac增强汉化版  Windows分区备份迁移工具 8.0.1
			
    winclone 8 for Mac版是一款系统清理工具winclone的Mac平台版本,winclone Mac版可以将Bootcamp分区安装的windows进行克隆也可将克隆文件传回Bootca ...
    
			
    2. 
						
  2. GNS3 2.18 +  ASA(IOU)
			
    使用软件及版本 地址:https://www.gns3.com/ gns3: 2.1.18 ASA:asa842-initrd asa842-vmlinuz 一.gns3 vm安装 1.安装 注意:启 ...
    
			
    3. 
						
  3. 求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。例如2+22+222+2222+22222。
			
    方法一: var num = ""; var nums = []; var a = Number(prompt());//所要拼接的数字 var b = Number(prompt ...
    
			
    4. 
						
  4. 面向对象程序设计（JAVA） 第13周学习指导及要求
			
    2019面向对象程序设计(Java)第13周学习指导及要求 (2019.11.19-2019.11.25)   学习目标 (1) 掌握事件处理的基本原理,理解其用途: (2) 掌握AWT事件模型的工作 ...
    
			
    5. 
						
  5. alipay sign error
			
    阴影部分地址参数有问题: <PAY_COMPLETE_PAGE_URL><![CDATA[https://baoxian.itaiping.com/ae-console/remote ...
    
			
    6. 
						
  6. html和css常见问题解答
			
    1. 详细描述层叠和继承的概念. 元素内嵌样式(用元素的全局属性style定义的样式) 文档内嵌样式(定义在style元素中的样式) 外部样式(用link元素导入的样式) 用户样式(用户定义的样式)  ...
    
			
    7. 
						
  7. vuex 的使用 mapState, mapGetters, mapMutations, mapActions
			
    state => 基本数据getters => 从基本数据派生的数据mutations => 提交更改数据的方法,同步!actions => 像一个装饰器,包裹mutation ...
    
			
    8. 
						
  8. 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 10
			
    23.5.4  客户端访问API 按RESTful规范开发API,又有详细的帮助文档,客户端的应用就相对容易一些.下面,以PHP作为访问接口的客户端,演示API的应用.在PHP中请求接口需要使用CUR ...
    
			
    9. 
						
  9. MySQL-8.0.18 引入了破坏性变更
			
    MySQL-8.0.18 引入了破坏性变更 变更日志里面有这样一项 When the server is run with --initialize, there is no reason to lo ...
    
			
    10. 
						
  10. Java 类加载机制(阿里)-何时初始化类
			
    (1)阿里的面试官问了两个问题,可以不可以自己写个String类 答案:不可以,因为 根据类加载的双亲委派机制,会去加载父类,父类发现冲突了String就不再加载了; (2)能否在加载类的时候,对类的 ...
    
			
    11.