python_way day14 CSS，莫泰对话框

python_way day14 CSS

层叠样式表

一、CSS作用域：

二、css标签选择器

三、css样式

四、莫泰对话框：

一、css作用域：

基本用法：style="样式"

<body>
    <div style="background-color: crimson; color: aqua;">这是css效果</div>
</body> 

图示：

css应用范围： 1、当前标签，2、当前页面，3、所有文件

上面就是放在了div标签中，但是这样不可重用

当前页面使用

也可以写在head中，这样就可以被这个文件中的任意一个标签使用了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>　　　　　　　　　　#head中de style标签就是定义css样式的
        div{　　　　　　　　　 #指定想要使用的标签名
            background-color: crimson;
            color: aqua;
        }
    </style>
</head>
<body>
    <div >这是css1效果 ,重用的效果</div>　　　　　　#这里div标签都被适用了
    <div >这是css2效果 ,重用的效果</div>
    <div >这是css3效果 ,重用的效果</div>
</body>
</html>　

图示：

所有文件使用

link 就是引入文件

common.css

div{
      background-color: crimson;
      color: aqua;
     }

图示：

效果也是一样的

优先：标签内>头部>文件

二、css选择器

1、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="common.css">-->
    <style>
        div {　　　　　　　　　　　　　　　　　　　　#找到所有的div
            background-color: crimson;
            color: blue;
        }
 
    </style>
</head>
<body>
    <div>这是css1效果 ,重用的效果</div>　　　　　　#只要是div全部生效
    <div>这是css2效果 ,重用的效果</div>
    <div>这是css3效果 ,重用的效果</div>
</body>
</html>

2、id选择器

id唯一，不能重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="common.css">-->
    <style>
        div {　　　　　　　　　　　　　　　　　
            background-color: crimson;
            color: blue;
        }
        #i1 {　　　　　　　　　　　　　　　　#只找id = i1的
            font-size: 56px;
        }
    </style>
</head>
<body>
    <div>这是css1效果 ,重用的效果</div>
    <div>这是css2效果 ,重用的效果</div>
    <div id="i1">这是css3效果 ,重用的效果</div>
</body>
</html>

3、class选择器

class可以重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="common.css">-->
    <style>
        div {
            background-color: crimson;
            color: blue;
        }
        #i1 {
            font-size: 56px;
        }
        .c1{
            background-color: blue;
            color: azure;
        }
    </style>
</head>
<body>
    <div>这是标签选择器</div>
    <div class="c1">这是class选取器</div>
    <div id="i1">这是id选择器</div>
</body>
</html>

图示：

4、层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="common.css">-->
    <style>
        .c1{
            background-color: blue;
            color: azure;
        }
        span div p .c1{
            background-color: chartreuse;
            color: black;
        }
    </style>
</head>
<body>
    <div class="c1">我是class选择器</div>
    <span>
        <div>
            <p>
                <a class="c1">我也是c1，使用层级选择器更精准，而且不影响上面的c1
                    <br/> 但是由于class的优先级要高于标签，所以这里需要指定class=c1
                    <br/> 如果指定了a标签不好使，会被之前定义的class选择器抢先
                </a>
            </p>
        </div>
    </span>
</body>
</html>

图示：

从选择器里再进行挑选：

5、组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="common.css">-->
    <style>　　
        span div p .c1,h1{         　　　　　　　　 #用逗号 , 隔开，可以选择多个标签，这就是组合选择器
            background-color: chartreuse;
            color: black;
        }
    </style>
</head>
<body>
    <span>
        <div>
            <p>
                <a class="c1">我是c1，使用层级选择器更精准
                </a>
            </p>
            <h1>我是h1标签,组合选择器也把我穿上衣服了！</h1>
        </div>
    </span>
</body>
</html>

三、css样式

color：字体颜色

backgroup-color：北京颜色

backgroup-img: 　　引用图片

backgroup-repeat：图片是否重复

backgroup-position:　　图片坐标

border:边框

cursor：让鼠标变成个小手

display：隐藏标签

font-size ：字体大小

height： 50px 高度

width: 100% or 500px 宽度

float: left 往左飘

边距：

　　margin：外边距

　　padding：内边距

flost：漂浮

position：位置

　　relative
　　absolute     固定窗口的一个位置，但是滚动窗口还是会一定
　　fixed        固定，相对浏览器的窗口，想让他固定在哪里都可以。

opacity:透明度 1不透明，0透明

z-index:标签显示的层级，越大越靠前

第二种写法

　　background-color: rgba(0,0,0,.6); 前面3个数是颜色，后面的 .6是透明度

1、颜色

第一种：

backgroup-color：颜色可以写英文： chartreuse

第二种：

也可以写成rgb颜色 #ddd

第三种：

2：宽度

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
            background-color: fuchsia;
            /*color: black;*/
            width: 500px;      　　　　  #父亲500像素
       }
        .c1{
            width: 20%;　　　　　　　　　　#一个儿子占像素的20%
            background-color: chartreuse;
        }
        .c2{
            width: 80%;　　　　　　　　　　#一个儿子占500像素的80%
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>　　　　　　　　　　　　#父亲
        <div class="c1">这是20</div>    #儿子
        <div class="c2">这是80</div>
    </div>
</body>
</html>

图示：

两个儿子因为是div块级标签，所以就一人占一行。我们想要的效果是看他们分享父亲div的500像素

所以就用上了

float：left

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
            background-color: fuchsia;
            /*color: black;*/
            width: 500px;
       }
        .c1{
            width: 20%;
            background-color: chartreuse;
            float: left;
        }
        .c2{
            width: 80%;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1">这是20</div>
        <div class="c2">这是80</div>
    </div>
</body>
</html>

小知识点：

　　如果在div中的div使用了float，最外层的div没有定义高度，切最外层的div有边框，目的是想让内层的两个float的div将外层的边框撑起来。如果不做特殊的设置是不成的。

如图

但是不加特殊设置事实则是事与愿违：

<div style="border: solid 1px red">
    <div style="height: 20px;width: 20%;background-color: blue;float:left ">f</div>
    <div style="height: 20px;width: 70%; background-color: aqua; float: left">f</div>
    <div style="clear: both;"></div>       <!-- 就是个人设置可以撑起最外侧的边框 -->
</div>

实际上使用了float是标签飘起来在最上层，这样的话就脱离出来了整个页面。使用clear：both则是将脱离的标签拽回来

3、background-image: 图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c3{
            background-image: url('s1.jpg');
        }
    </style>
</head>
<body>
    <dev class="c3"></dev>
</body>
</html>

这样没有效果，因为相当于前面有一堵墙，我没有开洞，图片一直在墙后面

下面我们就要开洞了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c3{
            background-image: url('4.gif');
            height: 100px;       #开洞的高度
            width: 500px;        #开洞的宽度
        }
    </style>
</head>
<body>
    <div class="c3"></div>
</body>
</html>    

图示：

问题来了！怎么图片成平铺效果了！

如果不想重复

4、backgroup-repeat: no-repeat; 不重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c3{
            background-image: url('4.gif');
            height: 100px;
            width: 500px;
            background-repeat: no-repeat;   #这样就是不让他重复
        }
    </style>
</head>
<body>
    <div class="c3"></div>
</body>
</html>

　图示：

5、backgroup-position : 调整图片位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c3{
            background-image: url('2.jpg');
            height: 100px;
            width: 100px;
            background-repeat: no-repeat;
            background-position: 0 0;    #这就是现实图片的左上角
        }
    </style>
</head>
<body>
    <div class="c3"></div>
</body>
</html>

如果我们想调整图片的位置，只要调整postition的位置就可以了

6、background系列的命令可以写到一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c4{
            background: url("2.jpg") -263px -51px no-repeat;    #这里把所有关于background的参数都写到了一起。
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="c4"></div>
</body>
</html>

图示

7、border

1	`solid 实线<br>dotted 大虚线<br>dashed 小虚线`

<style>
        #i1{
            border: solid saddlebrown ;   #边框 实线 颜色
        }
        .c4{
            background: url("2.jpg") -263px -51px no-repeat;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <div id="i1">                                  <---------- 这里
        <div class="c4"></div>                 
    </div>

图示：

边框的范围：

左边边框：border-left

右边框：border-right

下边框：border-bottom

上边框：border-top 等等还有改变颜色，边框宽度都可以改变。

图示：

8、display：none 隐藏，并且不占位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            border: dashed saddlebrown ;
        }
        .c4{
            background: url("2.jpg") -263px -51px no-repeat;
            height: 50px;
            width: 50px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="i1">
        <div class="c4"></div>
    </div>
</body>
</html>

图示：图片没了并且位置也没了

display：block

将行内标签变为块级标签

display：inline

将块级标签变为行内标签

desplay：inline-block

内联标签，自己有多高多款就占多少，高度宽度不生效

如果想把内联标签设置高宽，哪我们就要用这个参数了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            border: dashed saddlebrown ;
            display: inline-block;　　　　　　　　　　#如果不写这个下面的高度宽度是不生效的，不生效中间的c4图片就不能显示出来
            height: 100px;
            width: 100px;
        }
        .c4{
            background: url("2.jpg") -263px -51px no-repeat;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <span id="i1">
        <div class="c4"></div>
    </span>
</body>
</html>

　图示：现在加上了 display: inline-block,就可以显示出来了。

9、visibility:hidden 隐藏，但是位置保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            border: dashed saddlebrown ;
        }
        .c4{
            background: url("2.jpg") -263px -51px no-repeat;
            height: 50px;
            width: 50px;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="i1">
        <div class="c4"></div>
    </div>
</body>
</html>

图示：图片没了但是为之保留

10、cursor 让鼠标放到图边上变成小手等图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c5{
            cursor: pointer;     #小手
        }
        .c6{
            cursor: wait;         #等待
        }
        .c7{
            cursor: cell;           #十字
        }
    </style>
</head>
<body>
    <ul>
        <li class="c5">首页</li>
        <li class="c6">产品</li>
        <li class="c7">销售</li>
    </ul>
</body>
</html>    

11、边距

margin：外边距，本身不增加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 70px;
            border: solid red;
        }
        .c2{
            height: 30px;
            background-color: aquamarine;
            margin-top: 20px;　　　　　　　　　　#给里面的颜色上面加上一个外边距
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
    </div>
</body>
</html>

图示：

padding:内边距，本身增加

图示：没有加padding时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            border: solid red;
        }
        .c2{
            height: 30px;
            background-color: aquamarine;
            margin-top: 20px;
        }
        .c3{
            height: 30px;
            background-color: cornflowerblue;
            padding-bottom: 10px;       #这里加上了下内边距
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
        <div class="c3"></div>
    </div>
</body>
</html>

图示效果：

12、flost 漂浮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 500px;                  #宽度是500px          
            background-color: cadetblue;
        }
        .c2{
            background-color: aquamarine;
            width: 30%;          #第一个儿子的宽度是c1的30%
        }
        .c3{
            background-color: cornflowerblue;
            width: 70%;          #第二个儿子宽度是c1的70    
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">g</div>
        <div class="c3">h</div>
    </div>
</body>
</html>                

　图示：

但是我们想要的是两个儿子都在父亲里面，这时就需要使用flost了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 500px;
　　　　　　  border: solid red;
        }
        .c2{
            background-color: aquamarine;
            width: 30%;
            float: left;            #让老大飘起来
        }
        .c3{
            background-color: cornflowerblue;
            width: 50%;          #这里我们让老二小一些，看一下效果，但是如果儿子相加超过了100%，那么就会撑破了，就漂不起来了。
            float: left;         #让老二飘起来
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">g</div>
        <div class="c3">h</div>
    </div>
</body>
</html>        

　图示：

但是问题来了，我们把父亲的高度给删了，按说父亲的红色外框应该是被两个儿子撑起来的。这会却没有。那我们怎么办？

1	`style="clear: both"`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 500px;
            border: solid red;
        }
        .c2{
            background-color: aquamarine;
            width: 30%;
            float: left;                           #孩子用上float
        }
        .c3{
            background-color: cornflowerblue;
            width: 50%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">g</div>
        <div class="c3">h</div>
        <div style="clear: both"></div>　　　　　　         #在父亲里面加上这句话
    </div>
</body>
</html>

图示：　

1	`float: right 就是靠右边飘<br><br>`

13、position

fixed：根据整个阅览器的窗口定位，拉动窗口位置不会变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 1000px;
            background-color: cadetblue;
        }
        .c2{
            position: fixed;        /*默认是在c1 div的外面*/
        }
        .c3{
            background-color: cornflowerblue;
            width: 50%;
            float: right;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">返回顶部</div>
</body>
</html>

图示：

调整

<title>Title</title>
    <style>
        .c1{
            height: 1000px;
            background-color: cadetblue;
        }
        .c2{
            position: fixed;       /*默认是在c1div的外面*/
            right: 200px;       # 我让c2的字体靠右      
            bottom: 0;           # 并且在最底部
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">返回顶部</div>
</body>
</html>    

图示：

absolute 放在浏览器的一个位置，滚动会跟着移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 2000px;
            background-color: cadetblue;   #只是这里做了修改
        }
        .c2{
            position: absolute;
            right: 200px;              
            bottom: 0;
        }
        .c3{
            background-color: cornflowerblue;
            width: 50%;
            float: right;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">返回顶部</div>
</body>
</html>

图示：位置还是在窗口的最底部，但是滑动窗口却会跟着窗口动。

relative 单独写没有什么效果，要和absolute 结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 500px;
            width: 500px;
            background-color: cadetblue;      
            position: relative;　　　　　　　　   #最终找到了这里
        }
        .c2{
            position: absolute;　　　　　　　　　　#对应的c2会一层一层的网上找，知道找到relative这个标签定位
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="c1">　　　　　　　　　　　　　　　　　　　　　　　　#因为relative在v1中，所以c2是根据c1定位
        <div style="background-color: blue;height: 100px">    #就算上层还有一个div，c2的absolute不会根据这个定位
            <div class="c2">返回顶部</div>
        </div>
    </div>
</body>
</html>

图示：

div边框圆角效果

<style type="text/css">
.a {
    background-color: #c7dec6;
    border: 1px solid #000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height:200px;
width:500px;
padding:20px;
}
</style>
</head>
<body>
<p class="a">
在HTML中如何把块的边框做成圆角
</p>
</body>
</html>

　莫泰对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>莫泰对话框</title>
    <style>
        .c1 {
            width: 100%;
            height: 1000px;
        }
        .dl {   /*登录按钮的位置永远会在模态框的右下角*/
            width: 45px;
            height: 20px;
            background-color: antiquewhite;
            position: absolute;
            right: 600px;
            top: 300px;
        }
        .model {    /*莫泰框的class*/
            width: 300px;
            height: 200px;
            background-color: coral;
            top: 300px;
            left: 600px;
            position: absolute;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 10;
        }
        .hide{    /*设置隐藏的class*/
            display: none;
        }
        .myinpyt {
            margin-left: 82px;
            margin-top: 20px;
        }
        .but{
            position: absolute;
            right: 30px;
            bottom:20px;
        }
        .zj{ /*中间遮罩层*/
            background-color: black;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 8;
            position: fixed;   /*只要想调整标签的位置就需要postition这个参数*/
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <div class="c1">
        <button class="dl">登录</button>
        <div class="zj">
        </div>
        <div class="model">
            <div class="myinpyt">
                <p>
                    <input name="user" placeholder="用户名">
                </p>
                <p>
                    <input name="password" placeholder="密码">
                </p>
                <button class="but">退出</button>
            </div>
        </div>
    </div>
</body>
</html>

莫泰对话框

posted @ 2016-08-10 00:51 wawahan 阅读(374) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

wawahan

python_way day14 CSS，莫泰对话框

python_way day14 CSS

一、css作用域：

二、css选择器

三、css样式

公告