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分页方法

    /** maxpage 最大页数 */function gotoPage(maxpage){         var gotoPage = document.getElementById(" ...

  2. css小记(3)

    1.只有块级元素可以设置背景图,行内元素要变成块级元素才可以:2.盒子不设置宽度,只设置高度,默认为100%,并自适应屏幕大小变化,为这个盒子设置margin可以在保证margin效果的同时默认调整盒 ...

  3. HTML5 Input 类型

    浏览器支持 Input type IE Firefox Opera Chrome Safari email No 4.0 9.0 10.0 No url No 4.0 9.0 10.0 No numb ...

  4. 第1章 Bootstrap介绍

    学习网址:http://www.bootcss.com/ 下载网址:http://v3.bootcss.com/ 下载后一共三个文件夹 css js fonts 引入的文件 <link rel= ...

  5. SQL server 视图、范式

    视图 1.视图的概述       视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关数据.视图将一个查询的结果作为一个表来使用,因此视图可以被看作是存储的查询 或一个虚拟表.视图来 ...

  6. log4net 配置应用

    (一). WinForm 或者 WPF 中的配置和应用 <?xml version="1.0" encoding="utf-8" ?> <co ...

  7. 创造tips的秘籍——PHP回调后门

    作者:Phithon 原文连接:https://www.leavesongs.com/PENETRATION/php-callback-backdoor.html 最近很多人分享一些过狗过盾的一句话, ...

  8. Python起步(2)

    单行注释:#多行注释:'''或""" 一条语句写在一行之内,不需要分号分隔两条语句在同一行,中间分号隔开缩进语句块中只有一条语句,可以直接写在“:”之后使用“\”进行续行 ...

  9. mysql中的字符串类型数据索引优化

    摘自 "高性能mysql" 对于一些字符串类型较长的字段搜索时, 可以参考如下方法

  10. linux 查找命令

    查找目录:find /(查找范围) -name '查找关键字' -type d查找文件:find /(查找范围) -name 查找关键字 -print