Python自动化开发学习15-css补充内容

时间  2021-01-30
标签 css html 浏览器 app ide 布局 学习 测试 字体 url 栏目 Python 繁體版
原文   原文链接

上节回顾

上一节学习的内容，有一下几点，能够注意一下。或者说推荐这么作。css

class能够设置多个值-css样式重用

能够给一个标签设置多个class值，这样咱们能够为每一个class应用一种样式。标签有多个class的话，就为这个标签应用了多个样式。而且以后别的标签要求重用其中的部分样式，只须要设置那个class就行了。
要设置多个class的值，只须要用空格隔开每一个值便可。下面的例子分别设置了背景色、高度、宽度、外框，而后div的设置了多个class：html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
        }
        .c2{
            height: 50px;
        }
        .c3{
            width: 200px;
        }
        .c4{
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div class="c1 c2 c3 c4"></div>
<div class="c1 c2 c4"></div>
</body>

div作页面布局的建议

把整个网页先从上到下分红若干块，每一块都按下面的思路。
先写第一层div，能够设置背景色，若是有须要设置高度（height）和垂直居中（line-height），设了高度就是固定的高度，咱们要确保内部的元素不会超出。不设高度，这个div的高度就靠内部的元素撑起来。
不要设置宽度。让它能够撑满一整块。
再写第二层div，这个设置一个像素的宽度。这样你整块的内容都限制在这个区域内。若是页面宽度过小，页面下方会出现滚动条，而不会致使这里面的内容会混乱。
第三层开始能够写你的内容，能够继续用div也能够用别的标签，宽度可使用百分比了。继续用像素也ok，不过若是第二次的宽度要调整，而且里面宽度用的是百分比的话，貌似就是自动调整好了。若是用了float，最后不要忘记clear。浏览器

<body>
<div class="lv1" style="background-color: #dddddd;height: 48px;line-height: 48px;">
    <div class="lv2" style="width: 800px;">
        <div style="width: 30%;float: left;">左边的内容</div>
        <div style="width: 70%;float: left;">中间的内容</div>
        <div style="clear: both;"></div>
    </div>
</div>
</body>

img标签的建议

在a标签里的img标签（图片），可能在IE上打开的时候，在最外面有一圈蓝色的边框。虽然我在本身的IE11上试了，并无，可能旧版本还有这个问题。这个边框的颜色应该就是超连接字体的颜色，咱们所要作的就是把img外面这个边框去掉。作法也很简单，写一个img的标签选择器，设置border为0就没有边框了。咱们能够老是在head里加上这么一个标签选择器来避免这个问题，而不用担忧对没有相似问题的客户端会有什么影响：app

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border: 0;
        }
    </style>
</head>
<body>
<a href="http://www.51cto.com/">
    <img src="logo.jpg" />
</a>
</body>

css补充

上一节的css内容并无讲完，这节继续讲后续的内容。ide

定位-position

position 属性定义创建元素布局所用的定位机制。布局

fixed-固定在窗口的某个位置

position: fixed; ：固定在窗口的某个位置。结合top、right、botom、left，肯定固定的位置。
在页面右下角放置一个返回顶部的按钮，用position定位：学习

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .gotop{
            width: 45px;
            height: 45px;
            background-color: black;
            color: yellow;
            position: fixed;
            right: 15px;
            bottom: 60px;
        }
    </style>
</head>
<body>
<div style="height: 2000px;background-color: #dddddd"></div>
<div class="gotop">返回顶部</div>
</body>

这里并不能实现返回顶部的效果，咱们还须要后面才会学的JavaScript才能实现点击以后返回页面顶部。
再来实现一个始终显示在页面顶部的菜单：测试

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar{
            height: 48px;
            line-height: 48px;
            background-color: red;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body style="margin: 0 auto">
<div class="bar">菜单</div>
<div class="bar" style="top: 50px;left: unset;right: unset;">菜单2</div>
<div style="height: 2000px;background-color: #dddddd;margin-top: 100px">主要内容</div>
</body>

和以前学的float同样，这里使用position样式以后，div也再也不撑满一整行了。咱们经过设置left和right属性，让他往两边都撑满了。下面的菜单2是没有设置left和right的效果。
另外，由于使用position，会有一个分层的效果。下面的div标签的内容也是从页面顶部开始显示的。为了避免让菜单盖住主要内容，咱们给下面的div设置了外边距（margin-top）。分开了两部分的内容。字体

absolute-绝对定位

这个和fixed都是决定定位。因此主要来看看和fixed的差异。把上面的返回顶部的例子里的position属性修改成absolute，看看效果。乍一看，貌似同样，可是若是滚动滚轮，就是发现，他会一块儿移动。也就是absolute绝对定位了以后，就会固定在父级元素之上。
把上面菜单的例子也改为absolute，菜单依然在页面顶上，可是往下流量页面 后，菜单就会向上滚出屏幕了。
ablolute单独的应用场景很少，主要是结合下面要将讲的相对定位一块儿使用。把一个元素绝对定位到另外一个相对定位的元素上。url

relative-相对定位

上面测试absolute的时候提到，他是绝对定位到它的父级元素上的。上面的例子中实际是决定定位在了整个页面上。若是要将它定位在另一个元素里，简单的在外层加上一个元素标签是没用的。还须要在元素上加上 position: relative; 这个属性，才会被识别为 absolute 的父级标签。

<body>
<div style="height: 50px;width: 100px;border: 1px solid black;position: relative;">
    <div style="background-color: red;position: absolute;bottom: 0;left: 0;right: 0;">相对定位</div>
</div>
</body>

设置偏移量：这里也有top、right、bottom、left属性。这里设置的偏移量。若是设置偏移属性，就是相对于其正常位置所进行的偏移。

定位在屏幕中间

用了position属性以后，经过 margin: 0 auto 没法实现居中了。那么如今居中要怎么作呢。
偏移量的属性不但可使用像素（px），也是可使用百分比的。设置为50%天然就居中了。可是这里定位是元素的起始位置，即左上角而不是中心。因此还得计算元素高度和宽度的一半，用外边距把元素撑回去：

<body>
<div style="background-color: red;height: 80px;width: 80px;
position: fixed;top: 50%;left: 50%;
margin-top: -40px;margin-left: -40px;">正中间</div>
</body>

分层（z-index）

元素应用了position属性以后，就会出现分层的状况。position元素会始终位于其余标准元素的上层。以下的例子，不管div的前后顺序如何，都是position元素在上层：

<body>
<div style="position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div>
<div style="height: 100px;width: 100px;background-color: blue;"></div>
</body>

如此，咱们就把页面分红了2层。那么有2层，就能有3层甚至多层。
z-index 属性，设置元素的堆叠顺序。仅能在定位元素上奏效（例如 position:absolute;）。数值越大，处于外层，能够是负数。不设置的话应该是0

<body>
<div style="z-index: 10;position: fixed;top: 30px;left: 30px;background-color: yellow;height: 50px;width: 50px;"></div>
<div style="z-index: 5;position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div>
<div style="height: 100px;width: 100px;background-color: blue;"></div>
</body>

例子中，若是不设置z-index，或者值设置的同样，那么层级的关系就是不肯定的。调整标签的顺序，效果会不同（后面的标签会盖住前面的）。设置了z-index后，咱们就能肯定定位元素的层级关系。

透明度-opacity

上面已经学了网页的层级，下层的页面会被上层的页面覆盖掉。这里咱们能够设置标签的opacity属性，使得上层页面不是彻底覆盖下面的内容，而是有一点的透明度。
opacity 属性，透明度。取值范围从 0.0 （彻底透明）到 1.0（彻底不透明）。

<body>
<div style="font-size: 48px">网页的内容</div>
<div style="opacity: 0.8;background-color: #dddddd;position: fixed;top: 0;left: 0;bottom: 0;right: 0"></div>
</body>

小结-综合应用

咱们能够设计一个这样的页面。平时显示正常的内容（这是第一层）。当咱们点击了一个按钮须要提交数据的时候，这时候须要屏蔽掉用户对以前的页面内容的操做。这时候出现一个第二层，半透明的覆盖层，就如透明度里的例子那样。而后再在页面的中间弹出一个表单（第三层），让用户提交数据。这三层的代码大概是这样的：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .lv1{
            background-color: aquamarine;
            font-size: 64px;
        }
        .lv2{
            background-color: #dddddd;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 2;
            opacity: 0.8;
        }
        .lv3{
            height: 50px;
            width: 100px;
            position: fixed;
            top: 30px;
            left: 50%;
            z-index: 3;
            margin-left: -50px;
        }
        .disappear{
            display: none;
        }
    </style>
</head>
<body>
<div class="lv1">网页的内容</div>
<div class="lv2 disappear">
    <!--覆盖掉网页的内容的半透明层-->
</div>
<div class="lv3 disappear">
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd" title="搜索内容" />
        <input type="submit" value="搜索" />
    </form>
</div>
</body>

直接打开页面，应该只显示了第一层的内容，另外两层暂时设置了 display :none; 隐藏了。这里JS还没学，网页的内容里能够加上一个按钮，触发一个JS，修改一下.disappear里的display属性，改为unset（就是没有设置）。这里咱们只能暂时先手动改一下看一下效果了。修改后，第二层和第三层的内容就都显示出来了。先覆盖掉页面的内容，此时用户没法在选择第一层的内容了。而后中间是弹出的交互界面，用户能够输入内容提交表单，或者是之后会学的其余交互内容。

溢出处理-overflow

先来看一下显示图片的例子。找一张大一点的图片，而后放在一个div里。div设置小一点的高度和宽度。效果以下：

<body>
<div style="height: 100px;width: 80px;">
    <img src="1.jpg" />
</div>
<div style="background-color: red;">看看这个内容在哪里</div>
</body>

这里虽然div设置了范围，可是div中的图片会按照正常尺寸显示出来，并无受到上一层div标签尺寸的限制，即溢出了。后面还加了一个div，能够看到是接在前一个div的范围后显示的。
要处理这个问题，咱们能够为图片也设置一个尺寸，好比：style="height: 100%" 。这样能够显示出整张完整的图片，可是会自适应一个尺寸。
这里要讲的是经过在div里设置overflow属性，来处理溢出内容的处理规则（图片尺寸不变）。
overflow: hidden; ：内容会被修剪，而且其他内容是不可见的。
overflow: auto; ：若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。
overflow: scroll; ：同上，和auto同样。
这里拿图片举例，可是实际应用中，各类可能会有溢出的状况均可以这么处理。通常图片的处理更多的应该是设置一个img的尺寸，作一下缩放。而在一个有限大小的区域内要显示不少的文字，更加适合用overflow：

<body>
<div style="background-color: #dddddd;height: 100px;width: 150px;overflow: auto;">
    这个属性定义溢出元素内容区的内容会如何处理。
    若是值为 scroll 或 auto，则会提供一种滚动机制。
    若是值为 hidden，则溢出的部分会被修剪并隐藏。
    默认值是 visible。
</div>

:hover 伪类

当鼠标移动到元素上时，才会生效的css属性。下面是一个菜单的例子，应用了hover实现了当鼠标放上去的时候，指向的那项会改变样式：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            background-color: blue;
        }
        .pg-body{
            margin-top: 48px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            color: white;
            /*默认行内标签不能设置高度，*/
            /*这里设置了display: inline-block;，*/
            /*这样标签就能有高度了*/
            /*这样a标签就撑满了整个区域。*/
            /*这里也没设置具体的高度，貌似默认就撑满了。*/
            display: inline-block;
            padding: 0 10px;
        }
        .pg-header .menu:hover{
            background-color: green;
            color: red;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="w">
        <a class="menu">文件</a>
        <a class="menu">编辑</a>
        <a class="menu">查看</a>
        <a class="menu">收藏</a>
    </div>
</div>
<div class="pg-body">
    <div class="w">主要的内容</div>
</div>
</body>

另外这里a标签样式的设置也值得参考。这里设置了 display: inline-block; ，使得a标签的高度能够撑满整个div的高度。若是注释掉display，a标签的高度就只有文字的那点高度（能够经过鼠标悬停看到效果）。横向的宽度这里推荐是用内边距（padding）撑开的。

背景图片-background

以前都是用background设置背景色，咱们也能够用图片当背景。代码以下：

<body>
<div style="background-image: url('1.jpg');height: 800px;width: 600px"></div>
</body>

这里的效果会重复使用这张图片平铺在整个区域中。图片的比例不变，多出的部分会裁剪掉。

网页渐变色背景

利用平铺的特性，能够实现渐变色背景的效果。作一个宽1像素，长1000像素的渐变图片，在这张图片里搞好渐变，而后做为背景图片。被平铺以后，就是一个渐变色背景了。这个方法应该是通用的。

限制平铺的方向

在上面的基础上，再增长一个background-repeat属性能够显示图片进行平铺。

<body>
<div style="background-image: url('1.jpg');height: 800px;width: 600px;background-repeat: no-repeat"></div>
</body>

background-repeat: no-repeat ：不容许平铺
background-repeat: repeat-x ：只能横向平铺
background-repeat: repeat-y ：只能纵向平铺

定位背景图（抠图）

有这么一张图：
Python自动化开发学习15-css补充内容
好吧，是不少个小图标拼成的一张图，如今要显示其中的一个图标。咱们能够这么作：

<body>
<div style="background-image: url('2.png');
background-repeat: no-repeat;
border: 1px solid black;
height: 20px;
width: 20px;"></div>
</body>

这样显示第一个图标没问题，若是要显示下面的图标，咱们须要把图片往上移，这就用到了background-position属性，给背景图作一个定位：

<body>
<div style="background-image: url('2.png');
background-repeat: no-repeat;
background-position: 1px -119px;
border: 1px solid black;
height: 20px;
width: 20px;"></div>
</body>

background-position-x 和 background-position-y 是单独调整x轴和y轴。
上面的background属性还能够简写成这样：background: url(2.png) 1px -119px no-repeat; ，图片路径、纵向位移、横向位移、是否平铺。
这样作的好处是，一次请求就得到了好几个图标，减小了客户端和服务端的交互次数。若是每个小图标都保存一张独立的图片，那么每次要获取到一个新图标可能还会发起一次请求。因此对于这种小图标能够拼接在一张图中使用。

小结-课堂练习

作一个右边有图标的input框，相似这样的：
Python自动化开发学习15-css补充内容

运用上面讲的定位和背景图片的方法，把图标定位到方框的右边。
这里要注意，input的文字的输入范围右边要小于整个边框的范围，不然最右边的内容会被图标挡住。

<body>
<div style="height: 24px;width: 150px;position: relative;">
    <input type="text" style="height: 24px;width: 125px;padding-right: 25px;" />
    <span style="background: url(2.png) 1px -119px no-repeat;
    display: inline-block;
    height: 20px;width: 20px;
    position: absolute;top: 5px;right: 0;"></span>
</div>
</body>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程