CSS的position设置:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<style type="text/css">

    h1{

        /*设置为relative一般是为其他元素作为基础;*/

        position:relative;

        width:100%;

        border-bottom:1px dashed #999999;

    }

    h1 span.date{

        position:absolute;

        bottom:0;

        right:0;

        font-size:.5em;

        background-color:#E9E9E9;

        color:black;

        padding:2px 7px 0 7px;

    }

</style>

</head>

<body>

<h1><span class="date">Nov.10,2016</span>CosmoFarmer Bought By Google</h1>

</body>

</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<style type="text/css">

#contentWrapper{

    /*设置为relative一般是为其他元素作为基础;*/

    position:relative;

}

#leftSidebar{

    /*设置为absolute，其他元素都不知道他的存在;*/

    position:absolute;

    left:0;

    top:0;

    width:200px;

}

#rightSidebar{

    position:absolute;

    right:0;

    top:0;

    width:200px;

}

#main{

    /*设置margin可以空出有效的位置留给其他元素;*/

    margin-left:200px;

    margin-right:200px;

}

</style>

</head>

<body>

<div id='banner'>banner</div>

<div id='contentWrapper'>

    <div id='main'>main</div>

    <div id='leftSidebar'>leftSidebar</div>

    <div id='rightSidebar'>rightSidebar</div>

    <div id='footer'>footer</div>

</div>

</body>

</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<style type="text/css">

#banner{

    /*设置为fixed位置固定不变*/

    position:fixed;

    left:0;

    top:0;

    width:100%;

}

#sidebar{

    position:fixed;

    left:0;

    top:110px;

    width:175px;

}

#footer{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

}

#main{

    margin-left:190px;

    margin-top:110px;

}

</style>

</head>

<body>

<div id='banner'>banner</div>

<div id='main'>main

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<div id='sidebar'>sidebar</div>

<div id='footer'>footer</div>

</body>

</html>

CSS的position设置的更多相关文章

  1. css中的四个不同的position设置

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

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  4. 十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...

  7. CSS的position(位置)

    position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...

  8. Css元素居中设置

    你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...

  9. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

随机推荐

  1. HDU 1883 Phone Cell（计算几何）

    方法:选取一个点A,以点A为圆心做一个半径为r的圆,然后枚举另一个点B,以B为圆心做一个圆,如果这两个圆有交集,那我们在这个交集内选取一个点做半径为r的圆,这个圆就包括了A和B点,找到交集最多的区域并 ...

  2. 一道js题

    <script> var a = 5; function test(){ this.a = 10; a = 15 this.func = function(){ var a = 20 ; ...

  3. mariadb cache1

    http://www.percona.com/blog/2006/07/27/mysql-query-cache/ MySQL Query Cache July 27, 2006 by Peter Z ...

  4. 关于BOM 的详细介绍

    原文地址:http://blog.csdn.net/u011526599/article/details/51419182

  5. DNS原理及其解析过程

    网络通讯大部分是基于TCP/IP的,而TCP/IP是基于IP地址的,所以计算机在网络上进行通讯时只能识别如“202.96.134.133” 之类的IP地址,而不能认识域名.我们无法记住10个以上IP地 ...

  6. Delphi 悬浮窗口、浮动窗口的实现

    源:Delphi 悬浮窗口.浮动窗口的实现 浮动窗体的实现 http://blog.tianya.cn/blogger/post_show.asp?BlogID=68097&PostID=80 ...

  7. (中等) HDU 4979 A simple math problem. , DLX+重复覆盖+打表。

    Description Dragon loves lottery, he will try his luck every week. One day, the lottery company brin ...

  8. (简单) POJ 3087 Shuffle'm Up，枚举。

    Description A common pastime for poker players at a poker table is to shuffle stacks of chips. Shuff ...

  9. [Unity Quaternion]四元数Quaternion的计算方式

    什么是Quaternion四元数 1843年,William Rowan Hamilton发明了四元数,但直到1985年才有一个叫Ken Shoemake的人将四元数引入计算机图形学处理领域.四元数在 ...

  10. Bitmap 格式

    源:Bitmap 格式 参考:bitmap文件格式 Bitmap是Windows操作系统中的标准图像文件格式,可以分成两类:设备相关位图(DDB)和设备无关位图(DIB),DDB已经基本停用. Bit ...