position_fixed固定在某一个页面上

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg_head{
height: 60px;
background-color: black;
color: white;
position: fixed;
/*position头部固定*/
top :0;
left:0;
right:0; }
.pg_body{
background-color:#dddddd;
height: 5000px;
margin-top: 20px;
}
</style>
</head>
<body>
<!--position fixed-->
<div class="pg_head"> 头部</div>
<div class="pg_body">内容</div>
</body>
</html>

position_fixed 固定在某一个页面上

position中 relative和 absolute的结合使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title> </head>
<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>
</html>

position中 relative和 absolute的结合使用

 IE浏览器显示图片是有蓝色边框的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
border: 0;
}
</style>
</head> <body>
<div> <!--默认img图片有蓝色的边框,如果border: 0;就可以去掉-->
<a href="http://www.baidu.com">
<img src="7.png" style="width: 820px; " alt="mei"/>
<!--或者-->
<img src="7.png" style="width: 820px;border: 0; " alt="mei"/>
</a>
</div>
</body>
</html>

IE浏览器显示图片是有蓝色边框的如何去掉

overflow图片显示不完全,现实滚动条

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<div style="width:100px;height: 100px; overflow: hidden">-->
<!-- 按外面的大小隐藏图片大小overflow: hidden-->
<div style="width:100px;height: 100px; overflow: auto">
<!--图片大小带滚动条overflow: auto-->
<div>
<a><img src="7.png"/></a>
</div>
</div>
</body>
</html>

overflow图片显示不完全,现实滚动条

python :HTML+CSS (Position)的更多相关文章

  1. Python:程序练习题(二)

    Python:程序练习题(二) 2.1温度转换程序. 代码如下: t=input("请输入带符号的温度值(如:32C):") if t[-1] in ["C", ...

  2. Python:基础知识(一)

    输入 input():接收命令行下输入 1)在py2下:如果你输的是一串文字,要用引号''或者""引起来,如果是数字则不用. 2)在py3下:相当于py2的raw_input(), ...

  3. Python:如何排序(sort)

    一.前言 对Python的列表(list)有两个用于排序的方法: 一个是内建方法list.sort(),可以直接改变列表的内容: >>> list1 = [9,8,7,6,5] &g ...

  4. Python:pyglet学习(2)图形的旋转&batch

    这次讲讲图形的旋转和批量渲染(rotate.batch) 1:图形旋转 先看看上次的代码中的一段: glRotatef(rot_y, 0, 1, 0) glRotatef(rot_z,0,0,1) g ...

  5. Python:pyglet学习(1):想弄点3D,还发现了pyglet

    某一天,我突然喜欢上了3D,在一些scratch教程中见过一些3D引擎,找了一个简单的,结果z轴太大了,于是网上一搜,就发现了pyglet 还是先讲如何启动一个窗口 先看看官网: Creating a ...

  6. Python:基础知识(二)

    常用模块 urllib2 :用于发送网络请求,获取数据 (Pyhton2中的urllib2工具包,在Python3中分拆成了urllib.request和urllib.error两个包.) json: ...

  7. python: 基本知识(一)

    从今天开始继续python的学习,将应用到到黑客学习中,一边学习黑客知识一边学习python. 1.类:(封装) class T: def  __init__(self,...): //类对象创建后调 ...

  8. Python:itertools模块(转)

    原文:http://www.cnblogs.com/cython/articles/2169009.html itertools模块包含很多创建迭代器的函数,可以用各种方式对数据进行循环操作,此模块中 ...

  9. Python:常用正则表达式(一)

    文章转载于:http://www.cnblogs.com/Akeke/(博主:Akeke) https://www.cnblogs.com/Akeke/p/6649589.html (基于JavaSc ...

随机推荐

  1. IE hack中主要的几个

    _: IE6; #*+.: IE6 IE7; black\0: IE8; black\9: IE所有; @media screen\9 { … }: IE6 IE7; @media \0screen\ ...

  2. 状态压缩DP

    K - Necklace Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:327680KB     ...

  3. CSS Bugs 解决方案

    说明:本文档兼容性测试基础环境为:windows系统:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 Bugs及解决方案列表(以下实例默 ...

  4. CSS3初学篇章_3(属性选择符/字体样式/元素样式)

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  5. nyoj-71

    描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客的总重量不能超过独木舟的最大承载量.我们要尽量减少这次活动中的花销,所以要找出可以安置所有旅 ...

  6. php实现实现代码多主从,切换,轮询,健康检查

    现在很多框架现在都提供数据库读写分离,比如CI,TP,YII,一般使用正则表达书判断sql语句是读操作,还是写操作,但是有个缺点,没有给用主动判断,比如写入操作必须去立即读取主数据库的,如果不能立即判 ...

  7. Objective-C基础语法快速入门

    Objective-C基础语法快速入门 2010-11-04 16:32 折酷吧 zheku8 字号:T | T 假如我们对面向对象的思维已经C语言都很熟悉的话,对于我们学习Objective-C将会 ...

  8. Ubuntu 安装java环境搭建

    1.下载JDK 8从http://www.oracle.com/technetwork/java/javasebusiness/downloads/选择下载JDK的最新版本 JDK 8. 2.解压文件 ...

  9. How to generate ssh key only for github and not conflict with original key

    3 生成SSH公钥 $ ssh-keygen -t rsa -C "your_email@youremail.com"  #ssh-keygen -t dsa -C "y ...

  10. AFNetworking的原理与基本使用

    全称是AFNetworking 虽然运行效率没有ASI高,但是使用比ASI简单 是对NSURLConnection和NSURLSession的各自的一层包装 AFN的内部中的RunLoop AFN内部 ...