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 不 ...

随机推荐

django——简介
1.django的介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVT的软件设计模式,即模型Model,视图View和模板Template.它最初是被开发来用于管理劳伦 ...
修改终端terminal
修改终端路径显示的颜色 (1)在home目录中,新建 .dircolors: $vi .dircolors 输入下面内容 DIR 00;36 保存退出. (2)在 .bashrc文件中 $vi .b ...
Windows中杀死占用某个端口的进程（转）
最近写项目,总是出现端口被占用的问题,原来傻傻的把电脑重启一下,终于有一天受不了了,想要想办法解决.刚开始从网上找了好多教程,发现不行.开始自己尝试,终于,成功的将占用端口的进程杀掉.在此记录下过程( ...
postman上传图片时已经添加cookie，但仍显示未登陆
postman上传图片时,已经添加过cookie,但是返回的结果是用户未登陆,如下图所示: 我的解决办法是:清楚cookie code中的cookie 最终的结果如下:成功
LocalDate
java中做时间处理时一般会采用java.util.Date,但是相比于Date来说,还有更好的选择 -- java.time.LocalDate. 这是jdk8中新增的日期处理类,同时新增的还有ja ...
css_css 盒子水平居中垂直居中
1.盒子垂直居中---常用3种方法方法2: 2.盒子水平居中 3.垂直水平都居中之前学过 1.结合上面的知识 2.flex布局可以做到 3.css3 translate 定位
弄懂JDK、JRE和JVM到底是什么
首先是JDK JDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK).在JDK的安装目录下有一个jre目录,里面有两个文件夹bin和lib,在这里可以认为bi ...
java实现求最大子数组和的逐步显示
package 最大的子数组和; import java.util.Scanner; public class shuzu { public static int maxArr(int a[]) { ...
平安银行在开源技术选型上的思考和实践 RocketMQ
小结: 1. https://mp.weixin.qq.com/s/z_c5D8fvHaYvHSczm0nYFA 平安银行在开源技术选型上的思考和实践平安银行·吴建峰阿里巴巴中间件 3月7日随着 ...
2018-2019-2 20165317《网络对抗技术》Exp1 PC平台逆向破解
2018-2019-2 20165317<网络对抗技术>Exp1 PC平台逆向破解实验目的掌握NOP, JNE, JE, JMP, CMP汇编指令的机器码 NOP:无作用,英文&quo ...

html5 css练习 定位布局