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. UIScrollView 和 UIPageControl

    UIScrollView [滚动视图]非常重要 UIScrollView是滚动视图,是其它带有滚动功能视图的父类, 本身不显示或者只显示背景,主要负责子视图的滚动和翻页. 一.常用属性 1.基本方法 ...

  2. Codeforces Round #364 (Div. 2) E. Connecting Universities (DFS)

    E. Connecting Universities time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  3. AIM Tech Round 3 (Div. 2)D. Recover the String（贪心+字符串）

    D. Recover the String time limit per test 1 second memory limit per test 256 megabytes input standar ...

  4. fn标签

    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

  5. webView缩放

    self.webview.scalesPageToFit = YES; 可以让webView内容用缩放手势放大或缩小

  6. (中等) CF 585B Phillip and Trains，BFS。

    The mobile application store has a new game called "Subway Roller". The protagonist of the ...

  7. 优化EF性能

    本文介绍一些改善EF代码.优化其性能的相关方法,如NoTracking,GetObjectByKey, Include等,还包括编译查询.存储模型视图以及冲突处理等内容.. l         Mer ...

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

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

  9. Centos rsync文件同步配置

    一.服务器端配置: # yum -y install xinetd   CentOS默认已经安装了rsync 服务.. 输入 rsync 命令可查看是否安装.   # vi /etc/xinetd.d ...

  10. (简单) FZU 2150 Fire Game ，Floyd。

    Problem Description Fat brother and Maze are playing a kind of special (hentai) game on an N*M board ...