CSS网页的布局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" href="./reset.css">
7 <style>
8 header,main,footer{
9 width:1000px;
10 margin:0 auto;
11 }
12 /*设置头部的样式*/
13 header{
14 height:150px;
15 background-color:silver;
16 }
17 /*设置主体*/
18 main{
19 height:500px;
20 background-color:#bfa;
21 margin:10px auto;
22 }
23 main nav{
24 float:left;
25 width:200px;
26 height:100%;
27 background-color:yellow;
28 }
29 main article{
30 float:left;
31 width:600px;
32 height:100%;
33 background-color:orange;
34 }
35 main aside{
36 float:left;
37 width:200px;
38 height:100%;
39 background-color:pink;
40 }
41 /*设置底部样式*/
42 footer{
43 height:150px;
44 background-color:tomato;
45 }
46 </style>
47 </head>
48 <body>
49 <!--设置头部-->
50 <header></header>
51 <!--设置主体-->
52 <main>
53 <!--设置左侧的导航栏-->
54 <nav></nav>
55 <!--设置中间的内容栏-->
56 <article></article>
57 <!--设置右边的边栏-->
58 <aside></aside>
59 </main>
60 60
61 <!--设置网页的底部-->
62 <footer></footer>
63 </body>
64 </html>
显示效果
CSS网页的布局的更多相关文章
- div+css网页标准布局实例教程（一）
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题
小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- div+css网页标准布局实例教程（二）
五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...
- div+css网页标准布局实例教程（三）
前边两节学完后,前台工作基本上完成了,下边的任务该程序员添加程序了.为什么说是基本完成呢?因为要做的工作还很多,不但要把首页做出来,其它的列表页详细页等页面也得做.还要配合程序员把整个网站完成,这样才 ...
- 深入理解CSS网页布局-理论篇
在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- 全局ID生成--雪花算法
分布式ID常见生成策略: 分布式ID生成策略常见的有如下几种: 数据库自增ID. UUID生成. Redis的原子自增方式. 数据库水平拆分,设置初始值和相同的自增步长. 批量申请自增ID. 雪花算法 ...
- Linux内核实现透视---软中断&Tasklet
软中断 首先明确一个概念软中断(不是软件中断int n).总来来说软中断就是内核在启动时为每一个内核创建了一个特殊的进程,这个进程会不停的poll检查是否有软中断需要执行,如果需要执行则调用注册的接口 ...
- 探索 .NET Core 依赖注入的 IServiceCollection
如果您使用了.NET Core,则很可能已使用Microsoft.Extensions.DependencyInjection中的内置依赖项注入容器,在本文中,我想更深入地了解Microsoft De ...
- SwiftUI error All In One
SwiftUI error All In One Instance member xxx cannot be used on type yyy Instance member 'game' canno ...
- ES6 Generator vs ES6 async/await
ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...
- deep copy & deep merge
deep copy & deep merge JSON.parse(JSON.stringify(obj)); lodash https://lodash.com/docs/ https:// ...
- Unicode & \u2028 & \u2029
Unicode \u2028 & \u2029 https://stackoverflow.com/questions/16686687/json-stringify-and-u2028-u2 ...
- nasm astrncmp函数 x86
xxx.asm: %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export as ...
- Flutter 使用p5
p5 工作示例 install dependencies: p5: ^0.0.5 main.dart import 'package:flutter/material.dart'; import &q ...
- 《Activity显示界面历险记》—说说View的那些理不清的关系
前言 在Activity显示View的过程中,有一些重要的角色总让人理不清,比如PhoneWindow.DecorView.ViewRootImpl. 也常常有面试题会问到,他们四者之间的关系?创建的 ...