html5 css练习 定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<link rel="stylesheet" type="text/css" href="st1.css">
</head>
<body>
<header>头部内容</header>
<aside>侧栏导航</aside>
<section>主体内容</section>
<footer>底部</footer>
</body>
</html>
/*定位布局*/
*{
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
position: relative;
}
header{
width: 960px;
height: 150px;
background: rgba(0,0,0,0.3);
}
aside{
width: 200px;
height: 500px;
background: rgba(200,20,20,0.8);
}
section{
width: 760px;
height: 500px;
background: rgba(20,200,20,0.8);
position: absolute;
right: 0;
top: 150px;
}
footer{
width: 960px;
height: 150px;
background: rgba(60,60,60,0.6);
}
html5 css练习 定位布局的更多相关文章
- CSS之定位布局（position，定位布局技巧）
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- html5 css多列布局
p{ text-indent: 2em; line-height: 2em;}h4{ -webkit-column-span:all; background: green; ...
- html5 css练习浮动布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- CSS的定位布局(position)
定位 static(默认值) 没有开启定位 relative 相对定位的性质 包含块(containing block)概念 没有开启定位时包含块就是当前元素最近的祖先块元素 开启绝对定位后的元素包含 ...
- 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题
小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
- IT兄弟连 HTML5教程 和页面布局有关的CSS属性
使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式.一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
随机推荐
- (86)Wangdao.com第十九天_JavaScript 接口之 ParentNode 和 ChildNode
ParentNode 接口,ChildNode 接口 节点对象除了继承 Node 接口以外,还会继承其他接口. ParentNode 接口 表示当前节点是一个父节点,提供一些处理子节点的方法. Chi ...
- 3.2station
题意火车进入,然后要求以最大字典序输出 解题思路:先用一个数组储存当前位置之后最大的数字是什么,然后把已经进站的最后一节火车和还没进站的车的最大值,哪个更大,如果已经进站的更大,那么就先出站,否则就先 ...
- [Codeforces Round #433][Codeforces 853C/854E. Boredom]
题目链接:853C - Boredom/854E - Boredom 题目大意:在\(n\times n\)的方格中,每一行,每一列都恰有一个被标记的方格,称一个矩形为漂亮的当且仅当这个矩形有两个角是 ...
- Gparted Live分区调整
由于年少无知,在安装ubuntu系统的时候,以为/temp是软件包安装时解压的缓冲,所以给/temp留了10G,而以为/var只是记录一些log而已,因此把仅存的1G分配给了它.随后在安装软件时出现“ ...
- 实现全选、全不选功能 JQuery
<input type="checkbox" name="" id="checkAllChange" value="&quo ...
- 最大流sap
带当前弧优化 gap优化的sap 甚至省去了开始的bfs分层 虽然花了一些时间了解原理 但是感觉不亏 现在能完全独立靠原理写出具体实现了 #include<cstdio> #include ...
- 用TCP IP从C#实时传数据到Matlab
项目需要要从C#传实时数据到Matlab到数据分析,应该很多人也有这个需求,但是网上这方面的数据比较少,所以我把代码稍微贴下 首先是C#的部分 //介于我是同台电脑上传数据,直接用自己的IP建一个Se ...
- char
1 char是多少位的 2 java用的是什么方式表示字符 3 Unicode是用多少位表示的 1的答案是16位的,2的答案是Unicode,3的答案是16位 值得注意的是,2的答案并不是utf-8 ...
- type显示的是访问类型，是较为重要的一个指标，结果值从好到坏依次是： system > const > eq_ref > ref > fulltext > ref_or_null > index_merge > unique_subquery > index_subquery > range > index > ALL ，一般来说，得保证查询至少达到range级别，最好能达到ref。 作者：高
MySQL EXPLAIN详解 - 简书 https://www.jianshu.com/p/ea3fc71fdc45 type显示的是访问类型,是较为重要的一个指标,结果值从好到坏依次是: syst ...
- 【C++】根据二叉树的前序遍历和中序遍历重建二叉树并输出后续遍历
/* 现在有一个问题,已知二叉树的前序遍历和中序遍历: PreOrder:GDAFEMHZ InOrder:ADEFGHMZ 我们如何还原这颗二叉树,并求出他的后序遍历 我们基于一个事实:中序遍历一定 ...