<!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. CodeForces 862B（思维+二分图染色）
			
    题意 https://vjudge.net/problem/CodeForces-862B 给出n个点,n-1条边,求再最多再添加多少边使得二分图的性质成立 思路 因为题目是求的最多添加多少边,所以可 ...
    
			
    2. 
						
  2. python程序封装成exe流程
			
    在学习python的过程中,在IDE编写完成py项目,运行成功想要封装成exe,方便分享给不同的人即使别人没有安装python也可以使用. 封装的过程中遇到一些问题,记录一下,方便自己和他人查阅. 以 ...
    
			
    3. 
						
  3. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
			
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    4. 
						
  4. Linux 编译工具 gcc/g++、Make/Makefile、CMake/CMakeLists.txt、qmake
			
    前言 编译器的主要工作流程: 源码(Source Code)>> 预处理器(Preprocessor)>> 编译器(Compiler)>> 汇编程序(Assembl ...
    
			
    5. 
						
  5. Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入
			
    目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...
    
			
    6. 
						
  6. IT兄弟连 HTML5教程 HTML5的学习线路图 第二、三阶段
			
    第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...
    
			
    7. 
						
  7. 解决上一篇bean.xml中<bean>标签报错“ Error while downloading 'http://www.springframework.org/schema/beans/spring-beans.xsd........”
			
    在xml文件中,头部报错如题 一开始查询,说是头部少了“<?xml version="1.0" encoding="UTF-8"?>”,但是我并没有 ...
    
			
    8. 
						
  8. 基于 H5 + WebGL 实现的地铁站 3D 可视化系统
			
    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
    
			
    9. 
						
  9. MYSQL 高级语法
			
    1.高级建表和插入 使用creat 和select 进行建表操作,中间采用AS 标识符: CREATE TABLE new_table AS SELECT * FROM exist_table LIM ...
    
			
    10. 
						
  10. python基础(12):函数(二)
			
    1. 函数参数 之前我们说过了传参,如果我们需要给⼀个函数传参,⽽参数⼜是不确定的,或者我给⼀个函数传很多参数,我的形参就要写很多,很⿇烦,怎么办呢,我们可以考虑使⽤动态参数. 形参的第三种: 动态参 ...
    
			
    11.