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. POJ 2155 Matrix（二维树状数组）

    与以往不同的是,这个树状数组是二维的,仅此而已 #include <iostream> #include <cstdio> #include <cstring> # ...

  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. Android网络开发之Volley--Volley基本用法JsonObjectReques(二)

    1.JsonObjectRequest用法 用法和StringRequest基本相同,主要分为3步: (1).实例化一个RequestQueue对象 (2).设置JsonObjectRequest对象 ...

  4. HTML知识点

    1. 首页布局 // 顶部DIV#top{ position:absolute; top:; left:; width:100%; height:15%; overflow:hidden; margi ...

  5. Vasiliy's Multiset

    Vasiliy's Multiset time limit per test 4 seconds memory limit per test 256 megabytes input standard ...

  6. R.layout.main cannot be resolved解决办法

    今天敲的代码 package com.sharpandroid.activity; import android.R; import android.app.Activity; import andr ...

  7. YouKu iOS笔试题一

    序言 最近收到某某同学将去youku的iOS笔试题的邮件,希望笔者能整理一下,并提供参考答案.笔者决定整理出来,并分享给大家.当然,与此同时,也想看看youku的笔试题到底有多难,也考考自己有多少料吧 ...

  8. Apache Commons工具集简介（转）

    此文为转帖,原帖地址:http://zhoualine.iteye.com/blog/1770014

  9. Java6.0中Comparable接口与Comparator接口详解

    Java6.0中Comparable接口与Comparator接口详解 说到现在,读者应该对Comparable接口有了大概的了解,但是为什么又要有一个Comparator接口呢?难道Java的开发者 ...

  10. find 路径必须在表达式之前

    http://sukaka.blog.51cto.com/379985/906008 把*号引起来.