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. Js中this用法及注意点详解

          我们在写js时,特别是用到回调函数时,经常会发现this指代的对象总是可能脱离自己的思路而发生改变.面向对象语言的特性告诉我们this始终指代它的调用者,而在js中回调函数中内部的this ...

  2. Daily Scrum 10.24

    昨天我们的工作已经全面开始了,本来想等今天(25号)看那个燃尽图和燃速图能不能出来,结果还是没有,就先把我们的Task统计贴上来吧. 今天的Task统计: 至于燃尽图和燃速图的问题已经发老师邮件提问了 ...

  3. poj1700

    这题的最坑的地方就是每步可能会有两种情况,这两情况起初我都单独考虑了,但就是没放在一起考虑...wa个不停,果然贪心是一个很考验思维的东西. 这里可以这样考虑,在运人的过程中,河的起始岸最后终将剩下一 ...

  4. svn学习笔记（2）操作----还原，重命名，冲突处理，权限配置等

    1.查看某个文件的所有版本信息 2.版本还原,还原到之前的某一个版本 通过show log查看 查看某个文件的所有版本后,可以在这些版本之间自由切换 3.文件改名 文件改名字给我们一个教训: 如:in ...

  5. HTML5初学篇章_4

    HTML5的表单所有type类型(补第一章) 类型 说明 button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) checkbox 定义复选框. color 定义拾色器. da ...

  6. Greenplum各种Tips(不定时更新)

    Greenplum接触也有一段时间了,在使用过程中积累了一些命令,在此分享给大家. 1. 查看segment是否有切换(没有记录则没有切换) SELECT * from gp_segment_conf ...

  7. 转载：有关qsort的使用方法和注意事项

    七种qsort排序方法 <本文中排序都是采用的从小到大排序> 一.对int类型数组排序 int num[100]; Sample: int cmp ( const void *a , co ...

  8. 创建一个LinkedList，然后在其中插入多个值，确保每个值都插入到List中间（偶数中间两个数之一，奇数在正中间）

    这是Thinking in java 中的一道题,下面是我的解决方案: package test; import java.util.LinkedList; import java.util.List ...

  9. Python中的属性管理

    Python管 理属性的方法一般有三种:操作符重载(即,__getattr__.__setattr__.__delattr__和 __getattribute__,有点类似于C++中的重载操作符).p ...

  10. php课程---练习（发布新闻）

    做一个发布新闻的页面,实现发布新闻,查看新闻,修改新闻与删除等功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...