测试开发系列之—

学习目标

CSS简介和基本语法
Bootstrap的框架
Bootstrap基础CSS样式
Bootstrap组件和插件

Css-介绍

定义：层叠样式表（Cascading Style Sheets），主要是用来美化页面，将美化和HTML代码进行分离，提高代码复用性。
引入方式：

 - 外部样式表：<link rel="stylesheet" type="text/css" href="custom.css">- 内部样式表：<style type="text/css">table {background-color: blueviolet;}</style>- 内联样式：<table style="background-color: red"></table>

Css-语法

选择器{样式属性: 值; 样式属性: 值;}
table {background-color: red; font-size: large;}

学会查询CSS参考手册

Css-常用选择器

类选择器：.tclass
Id选择器：#选择器
元素选择器：Table

Css常用样式属性

尺寸
背景
边框
外边距
内边距
float
文本
字体
定位：绝对定位、相对定位、固定定位fixed

Css-伪类

未访问选择器：link
访问选择器：visited
激活选择器：active
悬停选择器：hover

bootstrap简介

Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

复制粘贴，能够提高开发人员的工作效率。

什么是响应式页面？
适应不同的分辨率显示不同样式，提高用户的体验。

bootstrap下载地址：https://v3.bootcss.com/getting-started/#download

bootstrap-入门例子

<!DOCTYPE html><head><title>bootstrap入门</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="bootstrap/jquery-3.4.1.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script></head><body><div class="container"><h1>Hello Bootstrap</h1></div></body>
</html>

bootstrap-全局CSS样式

图片
表格——表格所有标签都支持
表单——布局、标记、控件状态、扩展控件
按钮——颜色

bootstrap组件、插件

导航、导航条组件
分页组件
轮播图组件
模态框插件

练习：基于bootstrap完成简单页面布局

运行结果截图

2.html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="bootstrap/jquery-3.4.1.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script>
</head><body><head><div class="container"><!--<div class="navbar navbar-left"><img src="/images/logo-sun.jpeg" width="50" height="50"/></div>--><div class="text-center"><h2>沐 晴 测 试 平 台</h2></div><div class="navbar navbar-right"><!-- Button trigger modal --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">登录</button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-body"><form class="form-horizontal"><div class="form-group"><label for="inputAccount3" class="col-sm-2 control-label">账号</label><div class="col-sm-10"><input type="text" class="form-control" id="inputAccount3"placeholder="Account"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">密码</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3"placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">登录</button></div></div></form></div></div></div></div></div></head><nav class="navbar navbar-default"><ul class="nav nav-pills"><li role="presentation" class="active"><a href="#平台首页">平台首页</a></li><li role="presentation"><a href="#接口文档">接口文档</a></li><li role="presentation"><a href="#接口测试">接口测试</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">测试工具<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">测试工具1</a></li><li><a href="#">测试工具2</a></li><li><a href="#">测试工具3</a></li><li role="separator" class="divider"></li><li><a href="#">自动化测试工具</a></li><li role="separator" class="divider"></li><li><a href="#">性能测试工具</a></li></ul></li>            </ul></nav><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="/images/computer.jpeg" class="center-block" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="/images/computer.jpeg" class="center-block" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="/images/computer.jpeg" class="center-block" alt="..."><div class="carousel-caption"></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div>
</body>
</html>

测试开发系列之——css相关推荐

测试开发知识点整理（四）
Web自动化,接口测试和app测试 Web自动化 Web性能自动化 193. LoadRunner工具 194. 服务器性能监控工具(了解) 单元测试框架 195. JUnit框架 196. hamc ...
Java自动化测试系列[v1.0.0][TestNG测试开发环境配置]
基于之前写的一篇文章Java自动化测试系列[v1.0.0][Maven开发环境]的基础上,阐述如何配置单元测试框架TestNG的测试开发环境创建Maven项目启动IDEA,点击Create New ...
开发测试工程师系列课程
开发测试工程师系列课程: http://www.gdtesting.com/product.php?id=34
测试开发实践系列：为满足OTA及”大数据”更新的并行刷写和队列刷写分析
随着车载以太网总线技术在车内广泛地应用,车辆网络架构也在逐渐发生变化,传统的分布式架构正在逐渐被域/区域控制器架构所取代.主干网通信带宽的大幅度提升,为新的软件更新方式提供了基础条件.车辆智能化.个性 ...
Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
openresty开发系列40--nginx+lua实现获取客户端ip所在的国家信息
openresty开发系列40--nginx+lua实现获取客户端ip所在的国家信息为了实现业务系统针对不同地区IP访问,展示包含不同地区信息的业务交互界面.很多情况下系统需要根据用户访问的IP信息 ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
django 按钮的样式_【实战演练】Python+Django网站开发系列11-成绩查询与成绩录入...
#本文欢迎转载,转载请注明出处和作者终于做到最后一步了,选课.删除.已选展示.修改密码等功能都已经完成,剩下查询已选课程的成绩(学生界面)与成绩录入(老师界面).其中成绩查询的页面与之前做过的基本上 ...
Share Point 开发系列之一:开发方式的选择
Share Point 开发系列虽然做了一段时间的Share point开发,但Share point对于我来说还是新的东西,回想起当时刚开始接触Share point的时候,到处找资料,资料到是找 ...

测试开发系列之——css

目录

学习目标

Css-介绍

Css-语法

Css-常用选择器

Css常用样式属性

Css-伪类

bootstrap简介

bootstrap-入门例子

bootstrap-全局CSS样式

bootstrap组件、插件

练习：基于bootstrap完成简单页面布局

运行结果截图

2.html代码

测试开发系列之——css相关推荐

最新文章

热门文章