<!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练习 定位布局的更多相关文章

  1. CSS之定位布局（position，定位布局技巧）

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  2. html5 css多列布局

    p{    text-indent: 2em;    line-height: 2em;}h4{    -webkit-column-span:all;    background: green;   ...

  3. html5 css练习浮动布局

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. CSS的定位布局(position)

    定位 static(默认值) 没有开启定位 relative 相对定位的性质 包含块(containing block)概念 没有开启定位时包含块就是当前元素最近的祖先块元素 开启绝对定位后的元素包含 ...

  5. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  6. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

  7. IT兄弟连 HTML5教程 和页面布局有关的CSS属性

    使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式.一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过 ...

  8. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  9. css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

随机推荐

  1. oracle12 group by 拼接字符串

    select listagg(合并字段,'连接符号') within group (order by 排序字段) as 别名 from 表 group by 字段

  2. lArea.js 城市选择

    http://blog.csdn.net/libin_1/article/details/50689075 lArea.js

  3. XIV Open Cup named after E.V. Pankratiev. GP of America

    A. Ancient Diplomacy 建图,同色点间边权为$0$,异色点间边权为$1$,则等价于找一个点使得到它最短路最长的点的最短路最小,Floyd即可. 时间复杂度$O(n^3)$. #inc ...

  4. 201771010126.王燕《面向对象程序设计（Java）》第六周学习总结

    实验六 继承定义与使用 实验时间 2018-9-28 1.实验目的与要求 (1) 理解继承的定义: 继承就是用已有类来构建新类的一种机制,当你继承了一个类时,就继承了这个类的方法和字段,同时你也可以在 ...

  5. Installation of CarbonData 1.1.0 with Spark 1.6.2

    关键词:carbondata spark thrift 数据仓库 [Install thrift 0.9.3] 注意 要装thrift-java必须先装ant . 有人说要装boost,我在cento ...

  6. 马昕璐201771010118《面向对象程序设计（java）》第七周学习总结

    第一部分:理论知识学习部分 Java用于控制可见性的4个访问权限修饰符: 1.private(只有该类可以访问) 2.protected(该类及其子类的成员可以访问,同一个包中的类也可访问) 3.pu ...

  7. Servlet.service() for servlet [jsp] in context with path [/Healthy_manager] threw exception [Unable to compile class for JSP] with root cause java.lang.IllegalArgumentException: Page directive: inval

    严重: Servlet.service() for servlet [jsp] in context with path [/Healthy_manager] threw exception [Una ...

  8. USACO1.4 1.5 搜索剪枝与数字 洛谷OJ P1214 P1215 P1217 P1218

    USACO1.4 题解 Arithmetic Progressions 题意 让你求长为n的由小于2*m*m的双平方数组成的等差数列有几个 双平方数:形如 B=P*P+Q*Q,p,q>0的数 题 ...

  9. Spring boot 国际化自动加载资源文件问题

    Spring boot 国际化自动加载资源文件问题 最近在做基于Spring boot配置的项目.中间遇到一个国际化资源加载的问题,正常来说只要在application.properties文件中定义 ...

  10. linux查看所有用户信息

    所有的用户信息在根目录/etc/中passwd文件内,而passwd的所有权限是root用户及root组用户,所有想要查看所有用户,需要root用户登录系统. root用户登录后,可以直接用查看命令c ...