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 不 ...
随机推荐
- 浅析uWSGI、uwsgi、wsgi
WSGI协议 首先弄清下面几个概念: WSGI:全称是Web Server Gateway Interface,WSGI不是服务器,python模块,框架,API或者任何软件,只是一种规范,描述web ...
- linux(debian) arm-linux-g++ v4.5.1交叉编译 embedded arm 版本的QtWebkit (browser) 使用qt 4.8.6 版本 以及x64上编译qt
最近需要做一个项目 在arm 架构的linux下 没有桌面环境的情况下拉起 有界面的浏览器使用. 考虑用qt 的界面和 qtwebikt 的库去实现这一系列操作. 本文参考: Qt移植到ARM Lin ...
- Java RE （正则表达式）
正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式通常被用来检索.替换那些符合某个模式(规则) ...
- TypeError: 'module' object is not callable
pkuseg.py 内容如下: import pkusegseg = pkuseg.pkuseg()text = seg.cut('我爱北京天安门')print(text) 原因是py文件名于包名一样 ...
- FastDFS 分布式文件系统的安装与使用（单节点）
FastDFS 分布式文件系统的安装与使用(单节点) 跟踪服务器:192.168.4.121 (edu-dfs-tracker-01) 存储服务器:192.168.4.125 (edu-dfs-sto ...
- 【函数式编程】reducer为什么叫reducer
最近学习前端的技术,在了解react对DOM的组件抽象,但不提供整体的组件通讯时候,了解了redux,然后就是react-redux: 抽象后,视图完全由对象决定,而用户只能接触视图,所以对象的改变必 ...
- App拉起小程序提示跳转失败
App拉起小程序提示跳转失败 req.userName = "gh_8afldfalsejw"; // 小程序的原始ID,注意不是Appid
- 微信小程序计算经纬距离
微信小程序计算经纬距离 微信小程序计算两点间的距离 getDistance: function (lat1, lng1, lat2, lng2) { lat1 = lat1 || 0; lng1 = ...
- OO第二次博客作业--第二单元总结
第一次作业 1. 设计策略 第一次作业,一共三个线程,主线程.输入线程和电梯线程,有一个共享对象--调度器(队列). 调度的策略大多集中到了电梯里,调度器反而只剩下一个队列. 2. 基于度量的分析 类 ...
- NI Vision ClampRake修改
也可以直接在C盘模板中直接修改,模板路径: C:\Program Files (x86)\National Instruments\Vision Assistant\CG\Visual ...