Python学习进阶篇（七）

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

标签选择器

div{ background-color:red; } 
<div > </div>

div/a/pan

class选择器

.bd{ background-color:red; } 
<div class='bd'> </div>

id选择器

# id select{ background-color:red; } 
<div id='idselect' > </div>

# i1 
Id避免重复

关联选择器

# id select p{ background-color:red; } 
<div id='idselect' > <p> </p> </div>

<style>
 1、找class container
 2、class = .l
 3、claee = a
 空格 表示寻找当前标签的子元素（下一级）
 .container .l .a{
     background-color: red;
 }
</style>

组合选择器

input,div,p{ background-color:red; } 

.c1 #i1 a,b cc1,cc2 ===> ,为或

属性选择器

input[type='text']{ width:100px; height:200px; }

需求：
<div>
    <input type='text' name='username' />
    <input type='file' />
    <input type='password' />
    <input type='button' />
</div>

寻找指定标签：
<style>
.con input[type='text'][name='username']{
    border: 3ps solid red;
    }
</style>

Background

　　左上角坐标（0,0）

background-color

<li>background-color</li>
    <div style='background-color:red;'>&nbsp</div>

background-image

background-repeat（no-repeat;repeat-x;repeat-y）

background-position

border

<div id='t72'>
   <h2>border</h2>
   <div style='border:1px solid red; height: 10px;'></div>
   <br/>
   <div style='border:1px dotted red; height: 10px;'></div>
   <br/>
   <div style='border:1px dashed red; height: 10px;'></div>
</div>

Margin ===> 外边距：对方增加

    1——>
    2——> 上下左右
    4——> 顺时针
    居中——>margin: 0 auto;（父标签居中）

# 外边距：body{
margin: 0px;
}

<div id='t73'>
   <h2>margin</h2>
   <div style='border:1px solid red; height: 70px;'>
      <div style='background-color: green; height: 50px; margin-top:20px;'></div>
   </div>
   <br/>
</div>

Padding ===> 内边距：自增大小

<div id='t74'>
   <h2>padding</h2>
   <div style='border:1px solid red; height: 70px;'>
      <div style='background-color: green; height: 50px; padding-top: 20px;'></div>
   </div>
   <br/>
</div>

display

　　display:none  隐藏不显示

　　　　　original

　　display:block  变成块级标签

　　display:inline  变成内联标签

<div id='t75'>
   <h2>display</h2>
      <p><b>display:none</b></p>
      <div>original</div>
      <div style='display:none;'>none</div>
      <p><b>display:block</b></p>
      <span style='background-color: red;'>content</span>
      <span style='display: block; background-color: red;'>content</span>


      <p><b>display:inline</b></p>
      <div style='background-color: red;'>content</div>
      <div style='display:inline;background-color: red;'>content</div>

   <br/>
</div>

cursor

autohome 老衲

css提供的cursor值

　　　　pointer || help || wait || move || crosshair

伪造超链接

　　　　pointer

自定义(一般不用)

　　　　mine

<div id='t76'>
   <h2>cursor</h2>
      <a href="http://www.autohome.com.cn">autohome</a>
      <input type='text' />
      <span>老衲</span>

      <ul>
         <li>css提供的cursor值</li>
            <p>
               <span style='cursor:pointer;'>pointer</span> ||
               <span style='cursor:help;'>help</span> ||
               <span style='cursor:wait;'>wait</span> ||
               <span style='cursor:move;'>move</span> ||
               <span style='cursor:crosshair;'>crosshair</span>
            </p>
         <li>伪造超链接</li>
            <p><span style='cursor:pointer;color:blue;'>pointer</span></p>
         <li>自定义(一般不用)</li>
            <p>
               <span style='cursor:url(image/favicon.ico),auto;'>mine</span>
            </p>
      </ul>
   <br/>
</div>

Float 浮动

　　clear:both

<div id='t77'>
   <h2>浮动</h2>
   <div style='background-color: red;'>
      <div style='background-color: green;float: left'>left</div>
      <div style='background-color: blue;float:right'>right</div>
   </div>
   <br/>
   <br/><br/>
   <div style='background-color: red;'>
      <div style='background-color: green;float: left'>left</div>
      <div style='background-color: blue;float:right'>right</div>
      <div style='clear: both;'></div>
   </div>
</div>

Position 定位
    fixed:固定在浏览器窗口的位置
    relative:外层标签，包含absolute
    absolute:里层标签

<div style="postion:relative">
     <div style='postion: absolute;'></div>
</div>

1. position:static

所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。

一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。

#div-1 { position:static; }

2. position:relative

如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】

#div-1 { position:relative; top:20px; left:-40px; }

3. position:absolute

当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。

#div-1a { position:absolute; top:0; right:0; width:200px; }

4. position:relative + position:absolute

如果我们给 div-1 设置 relative 定位，那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位，就可以把 div-1a 移动到 div-1 的右上方。

#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }

5. 两栏绝对定位

现在就可以使用相对定位和绝对定位来做一个两栏布局了。

#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

6. 两栏绝对定位定高

一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合，因为一般我们不知道元素中会有多少文本，或者将要使用的精确的字号。

#div-1 { position:relative; height:250px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

7. 浮动

对于可变高度的列来说，绝对定位就不起作用了，以下是另外一个方案。

我们可以浮动一个元素，使它移动到左边/右边，并且是文本环绕着它。这主要用于图像，但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。

#div-1a { float:left; width:200px; }

8. 浮动列

如果我们把一个元素向左浮动，并且把第二个元素也向左浮动，they will push up against each other。

#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }

9. 清除浮动列

在浮动元素之后，我们可以清除浮动来使其他元素正确定位。

#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }

参考文档：http://www.cnblogs.com/Zigzag/archive/2009/04/16/1394356.html

透明度

　　opacity: 0.5;===>chrom
　　filter: alpha(opacity=50);===>IE
　　-moz-opacity: 0.5;===>firefox

overflow:auto(滚动条） hidden(隐藏)

默认样式改造

首页
菜单1
菜单2

z-index:加载图标
实例：加载框、后台布局（双层页面，第二层透明覆盖）
    1、建立遮罩层（覆盖整个页面==》上下左右间距均为0）
    2、调整遮罩层：加背景色——>调整透明度
    3、建立加载框（动态图片）：固定在页面中间位置==》水平、竖直均在中间：左50%，上50%
    4、精确调整加载框：看图片大小
    5、模态对话框：
    6、三层页面：底层页面——遮罩层——编辑层、加载层(看底层页面需将二三层隐藏==》diplay: none;跳转看二三层页面时再将隐藏去除即可）

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课后回顾</title>

    <!--去除页面的外边距-->
    <style>
        body{
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <!--页面左上角-->
    <a style="position: fixed; left: 30px; top: 30px;">返回顶部</a>
    <div id="content" style="height: 2000px; background-color: #ddd;">

        <!--修改数据-->
        <div style="position: relative; background-color: beige; width: 300px; margin: 0 auto; height：300px;">
            <h1>修改数据</h1>
            <a style="position: absolute; right: 0; bottom: 0;">asdddsa</a>
        </div>
    </div>

    <!--页面右下角的返回顶部-->
    <a style="position: fixed; right: 30px; bottom: 30px;" href="#content">返回顶部</a>

    <div style="background-color: red; height: 600px;">
        <div style="float: left;">111</div>
        <div style="float: left;">222</div>
        <!--clear设置背景色中的浮动漂移-->
        <div style="clear: both;"></div>
    </div>

    <div style="overflow: hidden; height: 100px; background-color: darkorange">
        asdfasdad <br/>
        asdfasdad <br/>
        asdfasdad <br/>
        asdfasdad <br/>
    </div>

    <!--遮罩层：双层页面-->
    <div style="z-index: 1; opacity: 0.7; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: grey; display: none;"></div>
    <div style="z-index: 2; position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -50px; display: none;">
        <!--加载框-->
        <!--<img src="loader.gif">-->

        <!--模态对话框-->
        <div style="background-color: white; width: 300px; height: 100px;">
            <input />
            <input />
            <input />
            <input />
        </div>
    </div>

</body>
</html>

CSS小练习：页面
布局页:整个页面做布局
    分为两大部分：
        头部
        页面
            左：菜单栏
            右：正文
知识点：样式、高度、宽度、浮动、滚动条
要求：左侧占200像素，右边占所有===》absolute绝对位置，顶部49，设置div相对于浏览器高度离top49,底部0，左边0，宽度200；右边也相同原理；

    overflow 属性规定当内容溢出元素框时发生的事情；
    这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

    默认值： visible
    继承性： no
    版本： CSS2
    JavaScript 语法： object.style.overflow="scroll"

    可能的值
    值描述
    visible 默认值。内容不会被修剪，会呈现在元素框之外。
    hidden 内容会被修剪，并且其余内容是不可见的。
    scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS页面</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-header{
            height: 49px;
            background-color: #1c94c4;
        }
        .pg-body .menu{
            background-color: grey;
/*          float: left;
            width: 20%;*/
            position: absolute;
            top: 53px;
            left: 0;
            bottom: 0;
            width: 200px;
        }
        .pg-body .content{
            background-color: pink;
/*          float: left;
            width: 80%;*/
            position: absolute;
            right: 0;
            bottom: 0;
            top: 53px;
            left: 205px;
            overflow: auto; /*未设置overflow前页面还会继续往下走，原因是由于content中的height为1000px，将左侧的内容冲起来了。
            overflow 属性规定当内容溢出元素框时发生的事情*/
        }
    </style>
</head>
<body>

    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="menu">
            <a>123</a>
            <a>123</a>
            <a>123</a>
        </div>
        <div class="content">
            adssdfkfdjkafdskjfdjksa
            <div style="height: 1000px;"></div>
        </div>
    </div>
</body>
</html>

posted @ 2016-02-14 21:12 korala！阅读(167) 评论(0) 收藏举报

korala！

Python学习进阶篇（七）

CSS

标签选择器

class选择器

id选择器

关联选择器

组合选择器

属性选择器

Background

border

Margin ===> 外边距：对方增加

Padding ===> 内边距：自增大小

display

cursor

Float 浮动

clear:both

1. position:static

2. position:relative

3. position:absolute

4. position:relative + position:absolute

5. 两栏绝对定位

6. 两栏绝对定位定高

7. 浮动

8. 浮动列

9. 清除浮动列

透明度

默认样式改造

公告

　　clear:both