django 之菜鸟学习CSS与html.
页面布局：
- 结构化标准语言（HTML和XML）；
- 表现标准语言（CSS）；
- 行为标准语言（DOM和ECMAScript）。
倡导结构，样式，行为分离。
CSS中的定位机制：
- 1、标准文档流（Normal flow）：从上到下，从左到右，输出文档内容，由块级元素（从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。常见块级元素：div、lu、li、d、dt、p……）和行级元素(能在同一行内显示，不会改变HTML文档结构。
常见行级元素：span、strong、img、input……)组成。 - 2、浮动（Floats)：
- 3、绝对定位（Absolute positioning）：
盒子模型：网页布局的基石，有四部分组成：
盒子的尺寸=边框+外边距+内边距+盒子中的内容尺寸
注：块级元素和行级元素都是盒子模型。
盒子3D模型：
常见页面布局及解决方案：
####二、自动居中一列布局
关键词：标准文档流，块级元素，margin属性
自动居中一列布局需要设置margin左右值为auto，而且一定要设置宽度为一个定值。
auto会根据浏览器的宽度自动地设置两边的外边距
如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动和绝对定位属性
代码示例：
一列布局固定：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style> body{ margin:0; padding:0; font-size:30px} div{ text-align:center; font-weight:bold} .head, .main, .footer{ width:960px; margin:0 auto} /*margin属性及具体的宽度*/ .head{ height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF}
</style>
</head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div>
</body>
</html>
一列布局自适应：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .head, .main, .footer{width:80%;margin:0 auto} /*margin属性及定宽为百分比*/ .head{ height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF}
</style>
</head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div>
</body>
</html>
####三、横向两列布局
浮动布局：CSS中规定的第二种定位机制；能够实现横向多列布局；通过设置float属性实现。
float属性：left | right | none
特点：元素会左移，或右移，直至触碰到容器为止。
注：设置了浮动的元素，仍旧处于文档流中。当元素没用设置宽度值。若设置了浮动属性，元素的宽度随内容的变化而变化。当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指相邻后面的元素。
清除浮动的方法：
clear属性——常用clear：both;clear:left;或者clear:right；同时设置width：100%（或固定宽度）+overflow：hidden；
横向两列布局是网页布局最常见的方式之一
主要应用技能：
float属性——使纵向排列的块级元素，横向排列
margin属性——设置两列之间的间距
注：
（1）当父包含块缩成一条时，用clear：both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。
（2）div块的高度一般不需要设置。
代码示例
两列居中固定
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.left{ width:20%; height:600px; background:#ccc; float:left}
.right{ width:80%; height:600px; background:#FCC; float:right}
</style>
</head> <body> <div class="left">left</div> <div class="right">right</div>
</body>
</html>
DEMO：http://Lovejulyer.github.io/Source_Code//Blog_demo/Codes2/liangliejuzhingguding.html
两列居中自适应：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:80%; height:600px; margin:0 auto}
.left{ width:20%; height:600px; background:#ccc; float:left}
.right{ width:80%; height:600px; background:#FCC; float:right}
</style>
</head> <body>
<div class="main"> <div class="left">left</div> <div class="right">right</div>
</div>
</body>
</html>
####四、绝对定位布局
position属性：
拥有三种定位方式：1、静态定位 2、相对定位 3、绝对定位
可设置4个属性值：
static（静态定位）
relative（相对定位）——特点：相对于自身原有为止进行偏移；仍处于标准文档流中；随即拥有偏移属性和Z-index属性
absolute（绝对定位）——特点：建立以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和Z-index属性
( 1）未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置；脱离了标准文档流
（2）设置偏移量
偏移参考基准：无已定位祖先元素，以为偏移参考基准
有已定位祖先元素，以距离其最近的已定位祖先元素为偏移参照基准
注：当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节
fixed（固定定位）
使用absolute实现横向两列布局——常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：
relative——父元素相对定位
absolute——自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列
代码举例：
三列自适应：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.left{ width:20%; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 20%; background:#9CF}
.right{ height:600px; width:20%; position:absolute; top:0; right:0; background:#FCC;}
</style>
</head> <body> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div>
</body>
</html>
DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezishiyin.html
三列左右固定：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.left{ width:240px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 240px; background:#9CF}
.right{ height:600px; width:240px; position:absolute; top:0; right:0; background:#FCC;}
</style>
</head> <body> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div>
</body>
</html>
DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezuoyouguding.html
五、混合布局及结构与表现原则
混合布局01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局01</title>
<style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .head{ height:100px;background:#9CF} .left{ width:20%; height:600px; background:#ccc; float:left} .right{ width:80%; height:600px;background:#FCC; float:right}/*宽度设置为百分数，以实现自适应*/
</style>
</head> <body> <div class="head">head</div> <div class="left">left</div> <div class="right">right</div>
</body>
</html>
DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju01.html
混合布局02
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局</title>
<style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .head, .main, .footer{ width:960px; margin:0 auto} .head{ height:100px;background:#9CF} .left{ width:240px; height:600px; background:#ccc; float:left} .right{ width:720px; height:600px;background:#FCC; float:right}/*宽度设置为固定值*/ .footer{ height:50px; background:#9F9; clear:both}
</style>
</head> <body> <div class="head">head</div> <div class="main"> <div class="left">left</div> <div class="right">right</div>
</div> <div class="footer">footer</div>
</body>
</html>
DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju02.html
混合布局03
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head, .main, .footer{ width:960px; margin:0 auto}/*head main及footer设置固定宽度*/
.head{ height:100px;background:#9CF}
.left{ width:220px; height:600px; background:#ccc; float:left}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right}/*540px+200px=740px 注意宽度值的设置*/
.footer{ height:50px; background:#9F9; clear:both}/*使用clear：both清除浮动*/
</style>
</head> <body>
<div class="head">head</div>
<div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div>
</div>
<div class="footer">footer</div>
</body> </html>
DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju03.html
混合布局04
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; margin:0 auto}/*footer和main未设置宽度*/
.head{ height:100px;background:#9CF}
.left{ width:220px; height:600px; background:#ccc; float:left}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right}/*540px+200px=740px 注意宽度值的设置*/
.footer{ height:50px; background:#9F9; clear:both}/*使用clear：both清除浮动*/
</style>
</head> <body>
<div class="head">head</div>
<div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div>
</div>
<div class="footer">footer</div>
</body>
</html>
DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju04.html
混合布局05（自适应）
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head{ height:100px;background:#9CF}
.left{ width:20%; height:600px; background:#ccc; float:left}
.main{margin:0 30%;height:600px; background:#9CC }
.right{ width:20%; height:600px;background:#FCC; float:right}/*宽度均设为百分比*/
.footer{ height:50px; background:#9F9; clear:both}
</style>
</head> <body> <div class="head">head</div> <div class="left">left</div> <div class="right">right</div> <div class="main">main</div> <div class="footer">footer</div>
</body>
</html>
DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju05.html
以上是来自与网上资源整理，感谢这个这个提供demo的朋友，同时可以参考51job的一个博客（直通车），通过以上基本就可以实现大部分页面的布局了，至于其他内容请自行解决。
条条大路通罗马，先从模仿开始吧，如果你是大牛前端，欢迎留言，提供方法。
django 之菜鸟学习CSS与html.相关推荐
- 零基础转行Web前端开发自学靠谱吗？菜鸟学习前端的方法分享
Web 前端开发行业长期处于供不应求的状态,薪资待遇也随之水涨船高,因此吸引了不少零基础转业者.那么,可能会有人问了:零基础转行Web 前端开发自学靠谱吗?这个问题没有确切的答案,毕竟每个人的情况都不 ...
- scrapy框架菜鸟学习记录
scrapy框架菜鸟学习记录 scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架.其可以应用在数据挖掘,信息处理或储存历史数据等一系列的程序中.其最初是为了页面抓取(更确切的说,网络抓 ...
- WEB前端学习:CSS学习_用户界面样式
用户界面样式 文章目录 用户界面样式 一.鼠标样式 二.轮廓 三.防止文本域拖拽 四.去除图片底侧空白间隙 五.溢出文字隐藏 1. work-break 2. white-space 3. text- ...
- Vue+Django搭建网页学习
Vue+Django搭建网页学习 1 简介 1.1 Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐 ...
- Spark菜鸟学习营Day5 分布式程序开发
Spark菜鸟学习营Day5 分布式程序开发 这一章会和我们前面进行的需求分析进行呼应,完成程序的开发. 开发步骤 分布式系统开发是一个复杂的过程,对于复杂过程,我们需要分解为简单步骤的组合. 针对每 ...
- css flexbox模型_5分钟内学习CSS Flexbox-初学者教程
css flexbox模型 快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you'll l ...
- oracle菜鸟学习之 分析函数-排序
oracle菜鸟学习之 分析函数-排序 排序函数 1.row_number:返回连续的排序,无论值是否相等 2.rank:具有相等值得行排序相同,序数值随后跳跃 3.dense_rank:具有相等值得 ...
- Django 模板中使用css, javascript
Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...
- 从0学习css开发之 font-size的基本用法
从0学习css开发之 font-size的基本用法 定义和用法 设置字体的大小. 语法 font-size: 12px; 语言 语法 Javascript object.style.fontSize= ...
最新文章
- SP 2010: Getting started with Business Connectivity Services (BCS) in SharePoint 2010
- Docker安装部署RabbitMQ
- react-native for android windows开发环境搭建详细记录
- 【小夕精选】多轮对话之对话管理(Dialog Management)
- C#4.0 命名参数可选参数
- mysql 自动 分库 备份_MySQL分库备份的方法
- [转载] RGB与16进制色互转
- 包装模式就是这么简单啦
- 《淘宝技术这十年》读书总结
- 9700usb网卡 linux驱动,0fe6:9700 usb网卡，终于编译成功驱动。
- 【抓否】哪来的“独角兽”——360私有化，富士康开飞机上市，宁德时代、药明康德这一系列闪电过会
- Win11电脑蓝屏怎么办？Win11电脑蓝屏的修复方法
- smartbi问题_SAP BO的五大尴尬，Smartbi就是HANA用户的“菜”
- 互动媒体——随及行为以及运动学
- java excel 多列排序,《excel表格调取行和列的数据》 excel列排序的时候怎么让所有行的信息跟着排（其它的非数据行）...
- C盘扩容，不需要相邻盘清空
- 网络信息安全之基于时间的安全模型（PDR和PPDR模型）
- HTML相对定位与绝对定位
- PaddlePaddle飞桨入门之旅(二)
- LightGBM Python 软件包的基本演练.