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. linux操作命令实验

    实验内容:文件操作与用户操作实验 实验设备(环境):电脑.Vmware WorkStation 实验步骤: 一.创建新用户bob 目的:练习useradd命令 二.为新用户bob设置口令 目的:练习p ...

  2. fsck害了我很久了，必须关掉，因为他每次打卡都要推迟数十分钟。

    http://crashmag.net/disable-filesystem-check-fsck-at-boot-time Disable the filesystem check (fsck) a ...

  3. Bessie Goes Moo

    Bessie Goes Moo 题目描述 Farmer John and Bessie the cow love to exchange math puzzles in their free time ...

  4. PAT (Advanced Level) 1028. List Sorting (25)

    时间卡的比较死,用string会超时. #include<cstdio> #include<cstring> #include<cmath> #include< ...

  5. PAT (Advanced Level) 1027. Colors in Mars (20)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> ...

  6. ionic常用命令记录

    npm install -g ionic //安装ionic ionic lib update //更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower upda ...

  7. matlab字符串操作

    字符串转换函数 abs        字符串到ASCII转换dec2hex        十进制数到十六进制字符串转换fprintf        把格式化的文本写到文件中或显示屏上hex2dec   ...

  8. boost库之shared_ptr

    shared_ptr 编辑 目录 1简介 2作用 3历史 4概要 5用法 ▪ 删除共享对象 ▪ 标准容器 1简介编辑 shared_ptr是一种智能指针(smart pointer). 2作用编辑 s ...

  9. python redis list操作

    LPUSH list_name value [value ...] Prepend one or multiple values to a list 从左侧插入值,最早插入的值在最右边 LPUSHX ...

  10. (简单) POJ 1511 Invitation Cards，SPFA。

    Description In the age of television, not many people attend theater performances. Antique Comedians ...