2016年10月27日--格式布局

格式布局

1、position：fixed

相对于浏览器窗口来对元素进行定位

position：fixed

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="one">字字字字字</p>
<p class="two">字字字字字</p>

</body>
</html>

示例

2、position：absolute

使用绝对值来对元素进行定位

position：absolute

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">绝对定位</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

示例

3、position：relative

相对于一个元素的正常位置来对其定位

position：relative

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<h2 class="pos_left">相对于其正常位置向左移动</h2>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<h2 class="pos_right">相对于其正常位置向右移动</h2>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

示例

4、分层（z-index）

Z-index可被用于将在一个元素放置于另一（些）元素之后或之前

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="http://files.cnblogs.com/files/hqxc/001.ico" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>

img在后

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="http://files.cnblogs.com/files/hqxc/001.ico" />
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>

</html>

img在前

5、float：left，right

　　float 属性定义元素在哪个方向浮动。

float

<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>

<body>
<p>添加一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="http://files.cnblogs.com/files/hqxc/001.ico" />
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>
</body>

</html>

示例

小练习：

　　1.菜单

<!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>
* {
    margin: 0px;
    padding: 0px;
}
.aa {
    width: 80px;
    height: 40px;
    background-color: #0000ff;
    position: relative;
    top: 100px;
    left: 300px;
    overflow: hidden;
    transition: 0.7s;
}
.aa:hover {
    overflow: visible;
    background-color: #FFB600;
}
.a1 {
    width: 80px;
    height: 120px;
    background-color: #FFff04;
    position:relative;
    top: 40px;
    left: 0px;
}
.a2 {
    width: 80px;
    height: 40px;
    float: left;
    overflow: hidden;

}
.a2:hover {
    overflow: visible;
    background-color: #FFB600;
}
.a3 {
    width: 240px;
    height: 40px;
    position: relative;
    left: 80px;}
.a4 {
    width: 80px;
    height: 40px;
    position:relative;
    float:left;
}
.a5 {
    width: 80px;
    height: 40px;
    position:relative;
}
</style>
</head>

<body>
<div class="aa" style="">
<div style="position:absolute;"></div>
  <div class="a1">
    <div class="a2" style="background-color:#FFff04">
      <div class="a3" style="background-color:#FF0004">
        <div class="a4" style="background-color:#FFB600">1</div>
        <div class="a4" style="background-color:#FF0004">2</div>
        <div class="a4" style="background-color:#FFB600">3</div>
      </div>
    </div>
    <div class="a2" style="background-color:#FF0004">
      <div class="a3" style="background-color:#FF0004">
        <div class="a4" style="background-color:#FFB600">11</div>
        <div class="a4" style="background-color:#FF0004">22</div>
        <div class="a4" style="background-color:#FFB600">33</div>
      </div>
      </div>
    <div class="a2" style="background-color:#00ff04">
      <div class="a3" style="background-color:#FF0004;width: 80px;">
        <div class="a5" style="background-color:#FF0004">111</div>
        <div class="a5" style="background-color:#FFB600">222</div>
        <div class="a5" style="background-color:#FF0004">333</div>
      </div>
      </div>
  </div>
</div>
</body>
</html>

结果

　　2.仿照页面布局

<!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></style>
<link href="360.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form>
  <div id="top">
    <div id="index" class="topp"> 设置360导航为首页 </div>
    <div id="topr" class="topp"> 互联网 | 反馈 | 换肤 </div>
  </div>
  <div style="width:1000px;height:2300px; margin-left:auto; margin-right:auto; position:relative; margin-bottom:50px;">
    <div style="height:50px;">
      <div style="width:193px; height:50px; background-image:url(images/t0151320b1d0fc50be8.png); background-repeat:no-repeat; background-position:center; position:relative; float:left;"></div>
      <div style=" position:relative; float:left; border:1px solid #000000; width:420px; height:50px;">天气www</div>
      <div class="topp2">万年历</div>
      <div class="topp2">
        <input type="text" placeholder="邮箱账号" />
      </div>
    </div>
    <div class="sousuo">
      <div style=" margin-left:200px; width:600px;position:absolute;">
        <ul style="list-style:none;position:relative;">
          <li class="ssli">X1</li>
          <li class="ssli">X2</li>
          <li class="ssli">X3</li>
          <li class="ssli">X4</li>
          <li class="ssli">X5</li>
          <li class="ssli">X6</li>
          <li class="ssli">X7</li>
          <li class="ssli">X8</li>
        </ul>
      </div>
      <div style=" float:left; left:200px; top:50px; width:500px; height:30px; border:1px solid #000000;position:relative;">
        <div style=" left:-200px; width:193px; height:33px; position:relative; background-image:url(images/so.png); background-repeat:no-repeat;"></div>
      </div>
      <div style=" float:left; left:210px; top:50px; width:100px; height:30px; border:1px solid #000000;position:relative; line-height:30px;">搜一下</div>
    </div>
    <div class="sousuo" style="height:80px;">
      <div class="tuijian" style="background-color:#FFB600;">推荐网站</div>
      <div class="tuijian" style="background-color:#FF0004;">新闻头条</div>
      <div class="tuijian" style="background-color:#FFB600;">333333</div>
      <div class="tuijian" style="background-color:#FFB600;">推荐网站</div>
      <div class="tuijian" style="background-color:#FF0004;">新闻头条</div>
      <div class="tuijian" style="background-color:#FFB600;">333333</div>
      <div class="tuijian" style="background-color:#FFB600;">推荐网站</div>
      <div class="tuijian" style="background-color:#FF0004;">新闻头条</div>
      <div class="tuijian" style="background-color:#FFB600;">333333</div>
      <div class="tuijian" style="background-color:#FF0004; width:30px; font-size:16px; line-height:20px;">静音</div>
    </div>
    <div class="zhuti">
      <div class="zi" style="height: 269px; line-height:269px; background-image:url(cut/1.png);">背景切图</div>
      <div class="zi" style="margin-top: 10px;height: 117px; line-height:117px; background-image:url(cut/4.png);">背景切图</div>
      <div class="zi" style="margin-top: 10px;height: 276px; line-height:276px; background-image:url(cut/6.png);">背景切图</div>
      <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/12.png);">背景切图</div>
      <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/13.png);">背景切图</div>
      <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/14.png);">背景切图</div>
      <div class="zi" style="height: 245px; line-height:245px; border-botton:0px;background-image:url(cut/15.png);">背景切图</div>
      <div class="zi" style="height: 79px; line-height:79px; border-top:0px;background-image:url(cut/17.png);">背景切图</div>
    </div>
    <div style="left:10px; width:748px;" class="zhuti">
      <div class="zi" style="height: 258px;line-height:258px; background-image:url(cut/2.png);">背景切图</div>
      <div class="zi" style=" margin-top: 10px;height: 40px;line-height:40px; font-size:30px; background-image:url(cut/3.png);">背景切图</div>
      <div class="zi" style=" margin-top: 10px;height: 215px;line-height:215px; background-image:url(cut/5.png);">背景切图</div>
      <div class="zi" style="height: 32px;line-height:32px; border:0px; background-color:#DBD6D6;font-size:30px; background-image:url(cut/7.png);">背景切图</div>
      <div class="zi" style="height: 249px;line-height:249px; border:0px; background-image:url(cut/8.png);">背景切图</div>
      <div class="zi" style="height: 219px;line-height:219px; border:0px; background-image:url(cut/9.png);">背景切图</div>
      <div class="zi" style="height: 219px;line-height:219px; border:0px; background-image:url(cut/10.png);">背景切图</div>
      <div class="zi" style="height: 399px;line-height:399px; border:0px; background-image:url(cut/11.png);">背景切图</div>
      <div class="zi" style="margin-top: 10px;height: 80px;line-height:80px; border:0px;background-image:url(cut/16.png);">背景切图</div>
    </div>
    <div style=" margin-top:10px;height: 230px;" class="zhong">
      <div class="z1" style="background-image:url(cut/18.png);">背景切图</div>
      <div class="z1" style="background-image:url(cut/19.png);">背景切图</div>
      <div class="z1" style="border-right:1px solid #e6e6e6;background-image:url(cut/20.png);">背景切图</div>
    </div>
  </div>
  </div>
</form>
</body>
</html>

HTML部分

@charset "utf-8";
/* CSS Document */

* {
    margin: 0px;
    padding: 0px;
}
#top {
    position: relative;
    background-color: #fbfbfb;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #E1E1E1;
}
.topp {
    text-align: center;
    font-size: 12px;
    margin: 3px;
    position: relative;
    height: 24px;
    line-height: 24px;
}
#index {
    left: 10%;
    border: 1px solid #a8a8a8;
    width: 110px;
    background-color: #fbfbfb;
}
#topr {
    position: absolute;
    right: 10%;
    top: 3px;
}
.topp2 {
    position: relative;
    float: left;
    top: 5px;
    margin-left: 20px;
    padding: 10px;
    border-left: 1px solid #a8a8a8;
    height: 20px;
}
.sousuo {
    position: relative;
    width: 1000px;
    height: 100px;
    line-height: 50px;
    background-color: #fbfbfb;
    margin-top: 10px;
}
.ssli {
    line-height: 20px;
    top: 20px;
    position: relative;
    float: left;
    margin-left: 20px;
}
.ssli:hover {
    background-color: #3AFF00;
}
.tuijian {
    width: 105px;
    height: 40px;
    position: relative;
    float: left;
}
.zhuti {
    top: 5px;
    width: 238px;
    height: 1745px;
    position: relative;
    float: left;
}
.zi {
    width: 100%;
    position: relative;
    box-shadow: 0px 0px 2px #969696;
    font-size: 50px;
    font-weight: 700;
    background-repeat: no-repeat;
    text-align: center;
    color: #FF0004;
}
.zhong {
    margin-top: 10px;
    width: 100%;
    height: 200px;
    position: relative;
    float: left;
}
.z1 {
    width: 332px;
    height: 100%;
    position: relative;
    float: left;
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    font-size: 50px;
    font-weight: 700;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 220px;
    color: #FF0004;
}

CSS部分

时间： 2024-08-05 11:14:09

2016年10月27日--格式布局的相关文章

2016年10月27日--css样式表

CSS样式表样式表分类 1.内联样式表和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <meta charset="UTF-8"> <title>css内嵌样式</title> </head> <body> <style type="text/css"> #div{width:100px;heig

全国身份证前6位地区编码归属地(2016年06月27日）共6724条

简介: 前段时间在忙单位的一个小系统,用来管理从业人员的电子档案,最核心.复杂的功能已经完成,现在基本告一段落.用户可上传已扫描或拍照的档案图片,然后选择一个(已导入数据库)的从业人员信息,将扫描件与数据库信息对应,便于日后查询,也减轻了档案室的日常工作量.现在单位已经有一个成熟的系统用来管理从业人员信息,但只有一个档案编号,无法查询纸质档案信息,经常查档案就找档案室,太繁琐.带来各种麻烦.而从业人员涉及到的信息字段比较多,好在原系统可以导出数据库信息,我直接导入新系统就可以用了.省的操作员在录

中级学员：2015年10月27日作业

中级学员:2015年10月27日作业一.项目收尾管理1.项目收尾包括哪三方面内容?2.项目总结的意义;3.项目总结会包括哪些内容:4.项目评估包括哪些方面:5.项目审计的定义.6.一般项目人员转移的流程:二.知识产权管理1.著作权由哪3个要素组成:2.认定职务作品,考虑的前提有哪2个:三.法律法规和标准规范1.标准名称由哪4个要素组成:2.政府采购法,包括哪六种采购方法,以及每种的前提条件:3.教材中,把标准分为基础标准.开发标准.??标准和??标准.四.请背诵教材P180页项目管理知识体系,并

10月27日全球域名商解析新增量TOP20：爱名网第三

IDC评述网(idcps.com)10月30日报道:根据DailyChanges公布的最新数据显示,在2015年10月27日,全球域名解析新增量二十强排名顺序,环比上期10月20日,有所变动.其中,爱名网以新增量12,053个升至第3,排名环比上升4位.另外,DOMAINCONTROL.COM蝉联冠军,新增量高达30,954个.下面,请看IDC评述网整理的具体数据分析. (图1)全球域名解析商(国际域名)解析新增量Top20分布图如图1所示,10月27日全球域名解析新增量前五位分别是DOMAI

海豚驾考2016年10月8日系统升级公告

海豚驾考2016年10月8日系统升级公告功能概述: 1.学员报名支付成功后 2.相关人员登陆后台为学员指派一个教练(后面系统完善后,由系统自动指派) 3.在后台[教练列表页]可以查看所有教练各个阶段下的学员人数 4.教练在微信端个人中心页,进入[我的学员]列表页,可以查看各个阶段下的学员 5.教练根据学员的阶段,安排学员学习(包括准备资料.科目一.科目二.... 直到拿本) 6.教练可以在微信上给学员约车(以及取消预约).设置学员的进度 1.微信 - 教练端个人中心页升级(查看我的学员 ->

10月27日中国域名商解析量TOP14：万网蝉联冠军

IDC评述网(idcps.com)10月29日报道:根据DailyChanges公布的实时数据显示,截止至2015年10月27日,国内域名解析量十四强名单顺序,与上期10月20日对比,无任何变动.中国万网继续称王,环比净增78,776个,域名解析量升至3,541,426个.值得一提的是,易名中国发展依旧迅猛,环比净增163,002个,涨幅为十四强之首.接下来,请看IDC评述网整理的具体数据情况. (图1)中国域名解析商(国际域名)解析量排行榜TOP14分布图通过图1,截止至2015年10月27

10月27日全球域名商解析量TOP21:易名中国升至十三

IDC评述网(idcps.com)10月29日报道:根据DailyChanges公布的实时数据显示,截至2015年10月27日,全球域名解析量前二十一位名单,环比上期10月20日,发生明显变化.其中,易名中国以域名解析量1,275,807个跃居第13名,排名上升5位,环比净增163,002个,涨幅约增大82%,幅度明显.下面,IDC评述网将对具体数据进行整理与分析. (图1)全球域名解析商(国际域名)解析量排行榜TOP21分布图观察图1,可获悉在全球域名解析量二十一强比拼中,DOMAINCON

10月27日Java整理

实验一:凯撒密码 import java.util.Scanner; //zhanxinwu,October,25,2016 public class Addmi { public static void main(String[] args) { // TODO 自动生成的方法存根 int m,i; System.out.println("请输入你想加密的字符串:"); Scanner h=new Scanner(System.in); String s=h.nextLine();

2016年10月1日训练 QAQ

据说这是zld的题书写比赛 [问题描述]最近,SZ 在高一各个班级都举行了书写比赛,具体内容是让同学们走上讲台在黑板上写下几段文字.现在,你所在的班级有 N 个人,座号分别为 1~N(即给定顺序),每个同学按座号顺序需要书写 S 段文字. 书写过程中, 每个人的速度是不一样的, 每个同学每个单位的时间可以书写 Vi 段文字,当一组上讲台的人中最慢的人完成书写,就轮到下一组继续书写.不幸的是,老教室的讲台陈年失修,当站在上面的同学的体重大于 W 的时候就会崩塌.每个同学的重量 Qi 是不同的,每