table of Contents
learning target
- CSS Introduction and basic grammar
- Bootstrap framework
- Bootstrap basic CSS styles
- Bootstrap components and plug-ins
Css- Introduction
- Definition: Cascading Style Sheets (Cascading Style Sheets), is mainly used to beautify page, landscaping and the HTML code, which enhances the reusability of code.
- The introduction of ways:
- 外部样式表：<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- grammar
- {Selector style attributes: value; style attribute: value;}
- table {background-color: red; font-size: large;}
Society query CSS Reference
Css- common selector
- Class Selector: .tclass
- Id selector: # selector
- Element selector: Table
Css common style properties
- size
- background
- frame
- Margin
- Padding
- float
- text
- Fonts
- Positioning: absolute positioning, relative positioning, fixed positioning fixed
Css- pseudo-class
- Unvisited selector: link
- Access Selector: visited
- Activate Selector: active
- Hover selector: hover
bootstrap Profile
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive layout, mobile devices WEB priority projects.
Copy and paste, can improve developer productivity.
What is responsive page?
Adapt to different display resolution different styles, to improve the user experience.
bootstrap Download: https://v3.bootcss.com/getting-started/#download
bootstrap- example of the entry
<!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- global CSS styles
- image
- Table - table of all tags are supported
- Form - layout, labeling, control state, extended controls
- Button - Color
bootstrap components, plug-ins
- Navigation, navigation bar assembly
- Paging component
- Carousel Figure component
- Frame mode widget
Exercise: Based on bootstrap complete a simple page layout
Screenshot operating results
2.html Code
<!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>
