测试开发进阶(十二)
CSS
负责页面显示的效果
CSS引入的方式
- 内联式：直接在标签上定义
style
<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文件
<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选择器:
.
<div class="box1">登录</div>
.box1 {
background: rgba(255, 195, 160, 0.5);
color: white;
font: bold 22px/30px 'Monaco';
text-align: center;
}
类选择器
- id选择器:
#
<div id="b2">div2</div>
#b2 {
text-align: center;
font: normal 36px/60px 'Monaco';
}
id选择器
- 属性选择器
<div name="div3">div3</div>
div[name]{
color: red;
}
属性选择器
- 层级选择器
<div class="box2">
<div>
<span><i>Hello</i></span>
<i>Python</i>
</div>
</div>
.box2 div span{
color: green;
}
层级选择
- 组选择器
选择多组元素
.box2, .box1 {
font: normal 36px/60px 'Monaco';
}
- 伪选择器
active focus hover:重要 link Visited
鼠标放上去生效
.box1:hover{
color: red;
}
鼠标放上去之前
属性
背景
背景色：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
image-20190830203508938
- 16进制颜色表示法
#FF0000
在Pycharm中直接选择
颜色选择器
文字
设置顺序：是否加粗 字号/行高 字体；
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>
登录页面
举报
腾讯云开发者
