div布局如下

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>HTML基础：利用div进行布局</title>

 <style type="text/css">

  *{margin:0;padding:0}

 </style>

 </head>

 <body>

  <div class="container" style="width:500px;margin:0 auto">

     <!--头部-->

     <div class="header" style="background-color:#FFA500;">

        <h1>主要的网页标题</h1>

     </div>

     <!--左侧菜单-->

     <div class="menu" style="background-color:#FFD700;height:200px;width:100px;float:left">

        <h4>菜单</h4><br>

        HTML<br>

        CSS<br>

        JavaScript

     </div>

     <!--内容部分-->

     <div class="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left">

       内容在这里

     </div>

     <!--版权-->

     <div class="footer" style="background-color:#FFA500;clear:both;text-align:center">

       版权 @ bokeyuan.com

     </div>

  </div>

 </body>

 </html>

浏览器打开如下:

看到这里你是不是对布局有一点感觉了呢？我们继续把例子完成

HTML基础 用div布局实现一个简单网页的更多相关文章

  1. CSS布局中一个简单的应用BFC的例子

    什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...

  2. css基础-2 div布局

    div布局 <html> <head> <title>div布局 </title> <meta charset="utf-8" ...

  3. 【Java基础】用LinkedList实现一个简单栈的功能

    栈的基本功能 栈的最基本功能是保障后进先出,然后在此基础上可以对在栈中的对象进行弹入弹出,此外,在弹出时,如果栈为空,则会报错,所以还需要提供获取当前栈大小的方法. 构造存储对象Student /** ...

  4. nodejs基础 用http模块 搭建一个简单的web服务器 响应JSON、html

    前端在开发中,大多会想浏览器获取json数据,下面来用nodejs中的http模块搭建一个返回json数据的服务器 var http = require("http"); var ...

  5. nodejs基础 用http模块 搭建一个简单的web服务器 响应纯文本

    首先说一下,我们平时在浏览器上访问网页,所看到的内容,其实是web服务器传过来的,比如我们访问www.baidu.com.当我们在浏览器地址栏输入之后,浏览器会发送请求到web服务器,然后web服务器 ...

  6. bootstrap开发一个简单网页。

    CSS代码: body{        padding-top: 50px;        padding-bottom: 50px;        overflow: auto!important; ...

  7. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  8. Linux内核分析第三周学习总结：构造一个简单的Linux系统MenuOS

    韩玉琪 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.Linux内 ...

  9. 第三周：构造一个简单的LINUX系统MENUOS

    吕松鸿 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.Linux内 ...

随机推荐

  1. 第四周作业—N42-虚怀若谷

    一.统计出/etc/passwd文件中其默认shell为非/sbin/nologin的用户个数,并将用户都显示出来 [root@centos7 ~]# grep -v "/sbin/nolo ...

  2. Linux内核设计与实现 总结笔记（第六章）内核数据结构

    内核数据结构 Linux内核实现了这些通用数据结构,而且提倡大家在开发时重用. 内核开发者应该尽可能地使用这些数据结构,而不要自作主张的山寨方法. 通用的数据结构有以下几种:链表.队列.映射和二叉树 ...

  3. [CSP-S模拟测试]:天空龙（模拟）

    题目描述 奥西里斯之天空龙很喜欢颜色,有一天他找到了三种颜色——红黄蓝.奥西里斯有$a$个红色,$b$个黄色,$c$个蓝色,他想用画出最好的画,可是需要至少$x$个红色,$y$个黄色和$z$个蓝色,似 ...

  4. Java实践-远程调用Shell脚本并获取输出信息

    1.添加依赖 <dependency> <groupId>ch.ethz.ganymed</groupId> <artifactId>ganymed-s ...

  5. jQuery入门教程-文档操作方法

    一.append()和appendTo() 1.1 append()方法 <body> <p>好好学习</p> <button>append() 方法& ...

  6. mysql_DML_select_升序降序去重

    select *from wsb   limit 5;显示前5行 select *from students LIMIT  (m,n) (其中m是指记录开始的index,从0开始,表示第一条记录n是指 ...

  7. mariadb（二）增删改

    一.表的结构的增删改 添加数据类型 alter table 表名 add 字段 数据类型: #如果字段存在则会报错 Duplicate column name '字段' #修改数据类型 alter t ...

  8. System.Web.Script.Serialization的引用

    解决方案: 找到C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 ==>System.Web.Extensions.d ...

  9. 20190814 On Java8 第四章 运算符

    第四章 运算符 优先级 程序员经常都会忘记其他优先级规则,所以应该用括号明确规定运算顺序. 赋值 基本类型的赋值都是直接的,而不像对象,赋予的只是其内存的引用.举个例子,a = b ,如果 b 是基本 ...

  10. Vue-实现简单拖拽(自定义属性)

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...