测试开发进阶(十二)

CSS

负责页面显示的效果

CSS引入的方式

内联式：直接在标签上定义style

1	<div style="width: 200px;height: 100px;background-color: red">这个是div标签</div>

style1

嵌入式：在head中定义style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box1">这个是div2标签</div>
</body>
</html>

style2

外联式：link一个css文件

1	<link rel="stylesheet" href="css/0830.css">

css/0830.css文件：

/*注释*/
.box2 {
    width: 200px;
    height: 100px;
    background-color: blue;
}

style3

CSS的基本语法

CSS规则：选择器+一条或者多条声明

选择器通常是需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性：希望设置的样式属性，每个属性有一个值，属性和值被冒号分开

h1 {color:red;font-size:14px;}

h1:选择器

color:red;：声明

color：属性

red：值

选择器

标签选择器

<style type="text/css">
    body {
        background-color: blue;
    }
</style>

标签选择器

class选择器:.

1	<div class="box1">登录</div>

.box1 {
    background: rgba(255, 195, 160, 0.5);
    color: white;
    font: bold 22px/30px 'Monaco';
    text-align: center;
}

类选择器

id选择器:#

1	<div id="b2">div2</div>

#b2 {
    text-align: center;
    font: normal 36px/60px 'Monaco';
}

id选择器

属性选择器

1	<div name="div3">div3</div>

1
2
3

div[name]{
    color: red;
}

属性选择器

层级选择器

<div class="box2">
    <div>
        <span><i>Hello</i></span>
        <i>Python</i>
    </div>
</div>

1
2
3

.box2 div span{
    color: green;
}

层级选择

组选择器

选择多组元素

1
2
3

.box2, .box1 {
    font: normal 36px/60px 'Monaco';
}

伪选择器

active

focus

hover:重要

link

Visited

鼠标放上去生效

1
2
3

.box1:hover{
    color: red;
}

鼠标放上去之前

![鼠标放上去之后](../../../Library/Application Support/typora-user-images/image-20190830211642177.png)

属性

背景

背景色：background-color: blue;

背景图片：background-image: url("image/IMG_3609.JPG");

不平铺：background-repeat: no-repeat;

背景定位

水平居中：background-position: center;

顶部：background-position: top;

颜色

用单词表示颜色：blue
使用RGB的方式：rgb(111, 222, 333)
透明度的RGB方法rgba(111, 222, 333, 50)

http://tool.oschina.net/commons?type=3

16进制颜色表示法#FF0000

在Pycharm中直接选择

颜色选择器

文字

设置顺序：是否加粗字号/行高字体；

1	font: bold 22px/30px 'Monaco';

文字锁进

文字居中：text-align: center;

CSS模型框

规定了元素框处理元素内容，内边框，边框，外边距

CSS模型框

内边距：padding

外边距：margin

传入顺序：上右下左「顺时针」

边框线：border

.box1 {
            width: 300px;
            height: 150px;
            background: aqua;
            padding: 10px;
            border: solid 2px blue;
            margin: 80px;
        }

盒子显示

使用以上知识完成登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style type="text/css">
        body {
            background: #396b94 url("image/IMG_3609.JPG") center no-repeat;
        }

        .login_box {
            width: 520px;
            height: 300px;
            margin: 15% auto;
            background: rgba(0, 0, 0, 0.25);
            text-align: center;
            border-radius: 8px;
        }

        .login_title {
            color: #ffffff;
            font: bold 22px/40px 'Microsoft Sans Serif';
            padding-top: 20px;
        }

        .input_text {
            height: 40px;
            margin: 20px auto;
            width: 60%;
            border-radius: 8px;
        }

        .btn {
            height: 100%;
            width: 100%;
            font: bold 22px/40px 'Microsoft Sans Serif';
            background: #396b94;
            color: white;
            border: 0;
            border-radius: 8px;
        }

        .input {
            height: 100%;
            width: 100%;
            font: bold 18px/40px 'Microsoft Sans Serif';
            border-radius: 8px;
            border: solid 0.1px #57dbff;
            text-indent: 20px;

        }

    </style>
</head>
<body>
<div class="login_box">
    <div class="login_title">管理员登录</div>
    <form action="">
        <div class="input_text">
            <input type="text" class="input" placeholder="请输入账号">
        </div>
        <div class="input_text">
            <input type="password" class="input" placeholder="请输入密码">
        </div>
        <div class="input_text">
            <input type="submit" class="btn" value="点击登录">
        </div>
    </form>
</div>
</body>
</html>

登录页面