CSS的position设置
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设置的更多相关文章
- css中的四个不同的position设置
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS之Position详解
CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...
- CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
- Css元素居中设置
你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
随机推荐
- Go语言实现列出排列组合
今天,隔壁坐的小朋友给我一串数字: 1 6 21 55 让我观察规律,然后帮他推导公式. 尼玛,当我是神呢?!! 想了半天没看出个原委, 于是看了他那边具体需要才发现他那边是对N个数字进行5个数字的组 ...
- 第2课 Linux操作系统简介
1. Linux操作系统的构成 (1)内核(kernel) ①操作系统的核心,负责管理系统的进程.内存.设备驱动程序.文件和网络系统. ②控制系统和硬件之间的相互通信. ③决定着系统的性能和稳定性. ...
- UML学习小结
最近在使用状态模式写一个仿Windows计算器的MFC程序,顺便学习了一下UML图的绘制,尤其是类图和状态图的绘制,这里做一下总结吧. 一.UML简介 统一建模语言UML(Unified Mod ...
- 基于Redis的在线用户列表解决方案
前言: 由于项目需求,需要在集群环境下实现在线用户列表的功能,并依靠在线列表实现用户单一登陆(同一账户只能一处登陆)功能: 在单机环境下,在线列表的实现方案可以采用SessionListener来完成 ...
- HDU 5438 拓扑排序+DFS
Ponds Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Sub ...
- Lumen 时区设置
根据 Laravel 4.x 和 5.0 的经验, 只需要到 config/app.php 中设置下 'timezone' 参数为 'PRC' 就好了, 找到 Lumen 的 config 目录, 在 ...
- kafka 集群部署 多机多broker模式
kafka 集群部署 多机多broker模式 环境IP : 172.16.1.35 zookeeper kafka 172.16.1.36 zookeeper kafka 172.16 ...
- CDN概念+作用+特点+原理
CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...
- S3C2440外部中断系统详解
个中断源的请求.提供这些中断源的是内部外设,如DMA控制器.UART.IIC等等.在这些中断源中,UARTn.AC97和EINTn中断对于中断控制器而言是“或”关系.任意一个中断发生都会触发总中断 当 ...
- php中设置时区
第一种办法:在php.ini 中设置:date.timezone＝Asia/Shanghai(注意不加单引号或双引号) 第二种办法:在程序中ini_set('date.timezone','Asia/ ...