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布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- codeforces 14D（搜索+求树的直径模板）
D. Two Paths time limit per test 2 seconds memory limit per test 64 megabytes input standard input o ...
- TypeScript keyof typeof All In one
TypeScript keyof typeof All In one keyof typeof refs https://www.typescriptlang.org/docs/handbook/re ...
- Google PageSpeed Insights : 网站性能优化检测工具
1 1 https://developers.google.com/speed/pagespeed/insights/ PageSpeed Insights 使您的网页在所有设备上都能快速加载. 分析 ...
- auto open Chrome DevTools in the command line
auto open Chrome DevTools in the command line --auto-open-devtools-for-tabs # macOS $ /Applications/ ...
- yaml配置和ini配置的数据源配置和数据获取
1.前言 关于yaml和ini的相关理论暂不做记录,不影响代码编写,百度即可. 2.关于配置文件的选择 yaml 和 ini 都使用过, 但是yaml更符合人类使用,已要弃用ini,后期各项目均采用y ...
- 记一个关于std::unordered_map并发访问的BUG
前言 刷题刷得头疼,水篇blog.这个BUG是我大约一个月前,在做15445实现lock_manager的时候遇到的一个很恶劣但很愚蠢的BUG,排查 + 摸鱼大概花了我三天的时间,根本原因是我在使用s ...
- 基于tcp的应用层消息边界如何定义
聊聊基于tcp的应用层消息边界如何定义 背景 2018年笔者有幸接触一个项目要用到长连接实现云端到设备端消息推送,所以借机了解过相关的内容,最终是通过rabbitmq+mqtt实现了相关功能,同时在心 ...
- Spark + GraphX + Pregel
Spark+GraphX图 Q:什么是图?图的应用场景 A:图是由顶点集合(vertex)及顶点间的关系集合(边edge)组成的一种网状数据结构,表示为二元组:Gragh=(V,E),V\E分别是顶点 ...
- SpringBoot解决特殊符号 []报400问题
当遇到特殊符号传递给后台时,如果不加处理,就会报400的错误,解决办法有两种. 1.前台解决 前台解决的方法就是把这些特殊符号转义,转义之后浏览器和后台都可以识别. //对特殊字符进行转义 encod ...
- 基于vue3+electron11实现QQ登录切换|自定义导航栏|托盘|打包
上一篇有给大家分享过使用vue3和electron快速搭建项目.创建多窗口/父子modal窗口的一些方法.今天继续给大家分享一些vue3.x+electron11项目开发中的一些知识点/踩坑记录,希望 ...