day07：bootstrap、旅游网案例、DDL（create ，show，character set,drop,alter）

精进的医生

 关注

阅读 54

2022-03-23

一 回顾

二 按钮  

导入对顺序要要求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<!-- Standard button -->
		<button type="button" class="btn btn-default">（默认样式）Default</button>
		
		<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
		<button type="button" class="btn btn-primary">（首选项）Primary</button>
		
		<!-- Indicates a successful or positive action -->
		<button type="button" class="btn btn-success">（成功）Success</button>
		
		<!-- Contextual button for informational alert messages -->
		<button type="button" class="btn btn-info">（一般信息）Info</button>
		
		<!-- Indicates caution should be taken with this action -->
		<button type="button" class="btn btn-warning">（警告）Warning</button>
		
		<!-- Indicates a dangerous or potentially negative action -->
		<button type="button" class="btn btn-danger">（危险）Danger</button>
		
		<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
		<button type="button" class="btn btn-link">（链接）Link</button>
	</body>
</html>

三 表格

①：table-responsive-响应式表格

②：table-striped-隔行条纹

③：table-hover-悬浮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<style >
			th{
				text-align: center;
			}
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table class="table <!--table-striped--> table-bordered table-hover table-responsive">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>爱好</th>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
		</table>
	</body>
</html>

四 表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</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">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
	</body>
</html>

五 图片

①img-responsive-响应式图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<img src="img/img/02.jpg" class="img-responsive" alt="...">
		<img src="img/img/01.jpg" alt="..." class="img-rounded">
		<img src="img/img/03.jpg" alt="..." class="img-circle">
		<img src="img/img/06.jpg" alt="..." class="img-thumbnail">
	</body>
</html>

六 导航条

<nav class="navbar navbar-default">
				  <div class="container-fluid">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    <div class="navbar-header">
				      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
				      <a class="navbar-brand" href="#">首页</a>
				    </div>
				
				    <!-- Collect the nav links, forms, and other content for toggling -->
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				      <ul class="nav navbar-nav">
				        <li class="active"><a href="#">JAVAEE <span class="sr-only">(current)</span></a></li>
				        <li><a href="#">JAVAERB</a></li>
				        <li><a href="#">云计算</a></li>
				        <li><a href="#">大数据</a></li>
				      </ul>
				    </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>

七 分页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<nav aria-label="...">
		  <ul class="pagination">
		    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
		    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
		    <li ><a href="#">2<span class="sr-only">(current)</span></a></li>
		    <li ><a href="#">3 <span class="sr-only">(current)</span></a></li>
		    <li class="disabled"><a href="#">4 <span class="sr-only">(current)</span></a></li>
		  </ul>
		</nav>
	</body>
</html>

八 轮播图

<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="img/img/banner_1.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				    <div class="item">
				      <img src="img/img/banner_2.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				   	
				   	<div class="item">
				      <img src="img/img/banner_3.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </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>

九 旅游网案例

代码

①图片自动填充父容器：style=“max-width:100%”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<style>
			.tv_input{
				width: 400px;
				height: 35px;
				border: solid 1px #ffc900;
				margin-top: 15px;
				padding-left: 5px;
				float: left;
			}
			.tv_a{
				width: 90px;
				height: 35px;
				float: left;
				background-color: #ffc900;
				border: solid 1px #ffc900;
				text-align: center;
				line-height: 35px;
				margin-top: 15px;
			}
			
		</style>
	</head>
	<body>
		<!--顶部-->
		<div class="container-fluid">
			<!--第一行-->
			<div class="row">
				<img src="img/img/top_banner.jpg" class="img-responsive" />
			</div>
			<!--第二行-->
			<div class="row">
				<div class="col-md-3">
					<img src="img/img/qian_logo.png" />
				</div>
				<div class="col-md-5">
					<input type="text" class="tv_input" placeholder="请输入路线"/>
					<a class="tv_a" href="#">搜素</a>
				</div>
				<div class="col-md-4">
					<img src="img/img/hotel_tel.png" />
				</div>
			</div>
			<!--第三行-->
			<div class="row">
				<nav class="navbar navbar-default">
				  <div class="container-fluid">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    <div class="navbar-header">
				      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
				      <a class="navbar-brand" href="#">首页</a>
				    </div>
				
				    <!-- Collect the nav links, forms, and other content for toggling -->
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				      <ul class="nav navbar-nav">
				        <li class="active"><a href="#">JAVAEE <span class="sr-only">(current)</span></a></li>
				        <li><a href="#">JAVAERB</a></li>
				        <li><a href="#">云计算</a></li>
				        <li><a href="#">大数据</a></li>
				      </ul>
				    </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>
			</div>
			<!--第四行-->
			<div class="row">
				<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="img/img/banner_1.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				    <div class="item">
				      <img src="img/img/banner_2.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
				   	
				   	<div class="item">
				      <img src="img/img/banner_3.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </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>
		</div>
		<!--主体部分-->
		<div class="container">
			<!--第一行-->
			<div class="row jx" style="margin-top: 20px;border-bottom: solid 2px #FFC900;padding: 8px;">
				<img src="img/img/icon_5.jpg" />
				<span>千锋精选</span>
			</div>
			<!--第二行-->
			<div class="row qf">
				<div class="col-md-3">
					<div style="padding: 4px;border: solid 1px #DDDDDD;margin-top: 20px;border-radius: 5px;">
						<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<font>699</font>
					</div>
				</div>
				<div class="col-md-3">
					<div style="padding: 4px;border: solid 1px #DDDDDD;margin-top: 20px;border-radius: 5px;">
						<img src="img/img/jiangxuan_1.jpg " style="max-width: 100%;"/>
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<font>699</font>
					</div>
					
				</div>
				<div class="col-md-3">
					<div style="padding: 4px;border: solid 1px #DDDDDD;margin-top: 20px;border-radius: 5px;">
						<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<font>699</font>
					</div>
				</div>
				<div class="col-md-3">
					<div style="padding: 4px;border: solid 1px #DDDDDD;margin-top: 20px;border-radius: 5px;">
						<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<font>699</font>
					</div>
				</div>
			</div>
			<!--第三行-->
			<div class="row gn" style="margin-top: 20px;border-bottom: solid 2px #FFC900;padding: 8px;">
				<img src="img/img/icon_6.jpg"/>
				<span>国内游</span>
			</div>
			<!--第四行-->
			<div class="row">
				<div class="col-md-4">
					<img src="img/img/guonei_1.jpg" />
				</div>
				<div class="col-md-8">
					<div class="row">
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
							
						</div>
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
						</div>
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
						</div>
					</div>
					<div class="row" style="margin-top: 30px;">
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
							
						</div>
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
						</div>
						<div class="col-md-4">
							<div style="border: solid 1px #DDDDDD;padding: 4px;border-radius: 4px;">
								<img src="img/img/jiangxuan_1.jpg" style="max-width: 100%;"/>
								<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
								<span color="red">¥699</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--尾巴部分-->
		<div class="container">
			<!--第一行-->
			<div class="row" style="margin-top: 20px;">
					<img src="img/img/footer_service.png" style="max-width: 100%;" />
			</div>
			<!--第二行-->
			<div class="row" style="background-color: #FFC900;height: 40px;text-align: center;line-height: 40px;">
				千锋教育 运营主体：北京千锋互联科技有限公司 ，属具备计算机技术培训资质的教育培训机构 
			</div>
		</div>
	</body>
</html>

十 数据库

10.1目前存储数据的方式

10.2 缺点

10.3 数据库简介

10.4 数据库的分类

10.5 数据库管理系统

十一 Mysql数据库安装

（5.5版本不需要删除注册表（命令窗口））

11.1 简介

11.2 特点

11.3 下载

11.4 卸载  

step01 找到控制面板

 step02 删除mysql配置文件

 step03 删除数据文件

 11.5 安装

step01 双击这个文件

 step02 下一步

 step03 同意协议

 step04 选择版本

 step05 安装的地址

①：注意这里不能选默认的x,要改为第一个选项

 step06 安装

step07 下一步

 step08 下一步

step09 完成

 step10 下一步

 step11 下一步

 step12 下一步

 step13 下一步

 step14 下一步

 step15 下一步

①设置并发人数，越多越好

 step16 下一步

 step17 设置编码格式

 step18

 step19 下一步

 step20

 十二 sql语句分类

十三 DDL-针对数据库操作

  • create database 数据库库名

  • create database if not exists 数据库的库名

  • create database 数据库的名称 character set 编码格式

  • show create database 数据库库名

  • show databases

  • alter database 数据库库名 character set 编码格式

13.1 创建数据  

 13.2 创建数据库判断是否存在

 13.3 创建数据设置编码格式

 13.4 查看数据库创建的格式

 13.5 修改数据库的编码格式

13.6 查看所有的数据库

 13.7 删除数据库

相关推荐

【Java SE进阶】Day07 等待与唤醒案例、线程池、Lamdba表达式

小黑Neo 92 0 0

精彩评论（0）

0 0 举报