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布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- pthread_create函数
函数简介 pthread_create是UNIX环境创建线程函数 头文件 #include<pthread.h> 函数声明 int pthread_create(pthread_t *re ...
- Python爬虫全网搜索并下载音乐
现在写一篇博客总是喜欢先谈需求或者本内容的应用场景,是的,如果写出来的东西没有任何应用价值,确实也没有实际意义.今天的最早的需求是来自于如何免费[白嫖]下载全网优质音乐,我去b站上面搜索到了一个大牛做 ...
- 如何用 js 实现一个 new 函数
如何用 js 实现一个 new 函数 原理 new 关键字实现经过了如下过程 创建一个空对象 obj = {} 链接到原型 obj.proto = constructor.prototype 绑定 t ...
- vueJS+ES6开发移动端APP实战项目笔记
一.什么是MVVM框架 MV*包括MVC.MVP.MVVM MVVM框架由Model.View.ViewModel构成. Model指的是数据,在前端对应的是JavaScript对象. View指的是 ...
- RocketMq灰皮书(三)------MQ使用
RocketMq灰皮书(三)------MQ使用 在使用MQ之前,我们回顾一下前两篇博文的内容. 我们大致了解了RocketMQ的四个概念,分别是:Producer,Consumer,Message和 ...
- .Net按模板导出Excel
最近在项目中遇到需求 需要按照一定的模板导出数据 还是直接上代码 这里贴一部分模板长什么样吧 然后就是代码 大致就是找到模板 复制一份临时文件 然后修改临时文件然后导出数据 代码如下 string a ...
- 最佳搭档:利用 SSH 及其配置文件节省你的生命
本文转载自最佳搭档:利用 SSH 及其配置文件节省你的生命 导语 SSH 协议是事实上的互联网基石之一.在 SSH 协议出现之前(1995 年由 Tatu Ylonen 设计),通过互联网远程登录其他 ...
- Java之HTTP网络编程（一）：TCP/SSL网页下载
目录 一.简介:HTTP程序设计 1.HTTP系统设计 2.HTTP客户端工作过程 3.HTTP服务端工作过程 二.基于TCP Socket的HTTP网页下载 三.基于SSL Socket的HTTPS ...
- 关于Java高并发编程你需要知道的“升段攻略”
关于Java高并发编程你需要知道的"升段攻略" 基础 Thread对象调用start()方法包含的步骤 通过jvm告诉操作系统创建Thread 操作系统开辟内存并使用Windows ...
- 使用lua-nginx模块实现请求解析与调度
系统版本及需求: OS:CentOS 7.7.1908 OpenResty:1.15.8.2 目录 描述 安装配置 安装openresty 使用示例 HTTP请求复制 HTTP报文解析 总结 描述 l ...