1.表单:在现实生活中,是用于提交数据的。
2.在网页中也可以使用表单,用于将本地的数据提交给远程的服务器。
使用form来创建表单;
3.action 指定表单要提交服务器的地址
（5）表单补充
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<form action="/bind">
<!--添加表单项
注意:文本要提交到服务器,必须指定一个name的值-->
<input type="text" placeholder="文本" name="name"
readonly/>
<input type="text" name="name1" value="禁用" disabled/>
<input type="text" name="name2" autofocus/>
<br><br>
<input type="password" name="password" />
<br><br>
<!--checked可以设置默认选中-->
性别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<br><br>
<!--多选框-->
<input type="checkbox" name="love" value="apple"/>apple
<input type="checkbox" name="love" value="orange"/>orange
<input type="checkbox" name="love" value="tomato"/>tomato
<br><br>
<!--下拉列表-->
<select name="downCheck">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>
<!--普通按钮-->
<input type="button" value="普通按钮" />
<br><br>
<!--重置按钮-->
<input type="reset" value="重置" />
<br><br>
<!--邮箱-->
<input type="email" />
<br><br>
<input type="submit" value="提交" />
<!--双结束标签写按钮-->
<button type="button"></button>
<button type="reset"></button>
<button type="submit"></button>
</form>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
1.表单补充说明
2.name/value
3.只读、填充、禁用、自动获取焦点
6.项目练习
（1）搭建
<!--自己定义的JS-->
<script src="./res/Controller.js" ></script>
<!--自己定义的CSS-->
<link rel="stylesheet" href="./res/Controller.css" />
<!--图标字体库-->
<link rel="stylesheet" href="./res/css/all.css"/>
/*
1.项目练习:
*/
/*------------------------------
默认的代码*/
*{
margin: 0px;
padding: 0px;
font: 14px "Microsoft YaHei UI";
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
（2）导航条结构
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>小米商城</title>
</head>
<body>
<!--创建顶部导航条-->
<!--顶部导航条外部容器-->
<div class="div-class-topBarWrapper">
<!--创建内容容器-->
<div class="div-class-topBar">
<!-- 左侧导航-->
<ul class="ul-class-service">
<li><a href="javascript:;">小米商城</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">IoT</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">资质证明</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">下载APP</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!--考虑到浮动布局-->
<!--购物车-->
<ul class="ul-class-shopCart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车
</a>
</li>
</ul>
<!--用户登录注册-->
<ul class="ul-class-userInfo">
<li><a href="javascript:;">登录</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
</body>
<!--自己定义的JS-->
<script src="./res/Controller.js" ></script>
<!--自己定义的CSS-->
<link rel="stylesheet" href="./res/Controller.css" />
<!--图标字体库-->
<link rel="stylesheet" href="./res/css/all.css"/>
</html>
/*
1.导航条
*/
/*设置一个类,表示中间容器的宽度*/
.w{
/*固定容易宽度*/
width: 1226px;
/*设置容器居中*/
margin: 0 auto;
/*不让宽度过小时,容器溢出*/
min-width: 1226px;
}
/*------------------------------
默认的代码*/
*{
margin: 0px;
padding: 0px;
font: 14px "Microsoft YaHei UI";
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
（3）导航条样式
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>小米商城</title>
</head>
<body>
<!--创建顶部导航条-->
<!--顶部导航条外部容器-->
<div class="div-class-topBarWrapper">
<!--创建内容容器-->
<div class="div-class-topBar w clearFix">
<!-- 左侧导航-->
<ul class="ul-class-service">
<li><a href="javascript:;">小米商城</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">IoT</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">资质证明</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">下载APP</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!--考虑到浮动布局-->
<!--购物车-->
<ul class="ul-class-shopCart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车(0)
</a>
</li>
</ul>
<!--用户登录注册-->
<ul class="ul-class-userInfo">
<li><a href="javascript:;">登录</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
</body>
<!--自己定义的JS-->
<script src="./res/Controller.js" ></script>
<!--自己定义的CSS-->
<link rel="stylesheet" href="./res/Controller.css" />
<!--图标字体库-->
<link rel="stylesheet" href="./res/css/all.css"/>
</html>
/*
1.导航条
*/
/*设置一个类,表示中间容器的宽度*/
.w{
/*固定容易宽度*/
width: 1226px;
/*设置容器居中*/
margin: 0 auto;
/*不让宽度过小时,容器溢出*/
min-width: 1226px;
}
/*顶部导航条容器*/
.div-class-topBarWrapper{
/*设置宽度全屏*/
width: 100%;
/*设置背景色*/
/*设置行高*/
height: 40px;
line-height: 40px;
background-color: #333333;
}
/*设置超链接的颜色*/
.div-class-topBar a{
font-size: 12px;
color: #cccccc;
display: block;
}
.div-class-topBar a:hover{
color: white;
}
.div-class-topBar .li-class-line{
color: #424242;
font-size: 12px;
margin: 0 8px;
}
/*清除a的下划线*/
a{
text-decoration: none;
color: #cccccc;
}
/*设置左侧导航栏*/
.ul-class-service,.div-class-topBar li{
float: left;
list-style: none;
}
/*神来之笔,自己牛批*/
.div-class-topBar li a{
display: block;
line-height: 40px;
}
.ul-class-shopCart,.ul-class-userInfo{
float: right;
}
/*设置购物车的样式*/
.ul-class-shopCart a{
width: 120px;
background-color: #424242;
text-align: center;
}
.ul-class-shopCart:hover a{
background-color: white;
color: #ff6700;
}
/*------------------------------
默认的代码*/
*{
margin: 0px;
padding: 0px;
font: 14px "Microsoft YaHei UI";
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
（4）二维码下拉
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>小米商城</title>
</head>
<body>
<!--创建顶部导航条-->
<!--顶部导航条外部容器-->
<div class="div-class-topBarWrapper">
<!--创建内容容器-->
<div class="div-class-topBar w clearFix">
<!-- 左侧导航-->
<ul class="ul-class-service">
<li><a href="javascript:;">小米商城</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">IoT</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">资质证明</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="li-class-line">|</li>
<li>
<a class="a-class-app" href="javascript:;">
下载APP
<div class="div-class-qrCode">
<img src="./server/小米.jpg" />
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!--考虑到浮动布局-->
<!--购物车-->
<ul class="ul-class-shopCart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车(0)
</a>
</li>
</ul>
<!--用户登录注册-->
<ul class="ul-class-userInfo">
<li><a href="javascript:;">登录</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
</body>
<!--自己定义的JS-->
<script src="./res/Controller.js" ></script>
<!--自己定义的CSS-->
<link rel="stylesheet" href="./res/Controller.css" />
<!--图标字体库-->
<link rel="stylesheet" href="./res/css/all.css"/>
</html>
/*
1.导航条
*/
/*设置一个类,表示中间容器的宽度*/
.w{
/*固定容易宽度*/
width: 1226px;
/*设置容器居中*/
margin: 0 auto;
/*不让宽度过小时,容器溢出*/
min-width: 1226px;
}
/*顶部导航条容器*/
.div-class-topBarWrapper{
/*设置宽度全屏*/
width: 100%;
/*设置背景色*/
/*设置行高*/
height: 40px;
line-height: 40px;
background-color: #333333;
}
/*设置超链接的颜色*/
.div-class-topBar a{
font-size: 12px;
color: #cccccc;
display: block;
}
.div-class-topBar a:hover{
color: white;
}
.div-class-topBar .li-class-line{
color: #424242;
font-size: 12px;
margin: 0 8px;
}
/*清除a的下划线*/
a{
text-decoration: none;
color: #cccccc;
}
/*设置左侧导航栏*/
.ul-class-service,.div-class-topBar li{
float: left;
list-style: none;
}
/*神来之笔,自己牛批*/
.div-class-topBar li a{
display: block;
line-height: 40px;
}
.ul-class-shopCart,.ul-class-userInfo{
float: right;
}
/*设置购物车的样式*/
.ul-class-shopCart a{
width: 120px;
background-color: #424242;
text-align: center;
}
.ul-class-shopCart:hover a{
background-color: white;
color: #ff6700;
}
/*设置下载APP的下拉*/
.a-class-app .div-class-qrCode{
position: absolute;
width: 124px;
height: 148px;
background-color: white;
line-height: 1;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,.3);
left: -38px;
display: none;
}
li:hover>.a-class-app .div-class-qrCode{
display: block;
}
/*设置二维码的图片*/
.a-class-app .div-class-qrCode img{
width: 90px;
margin: 17px;
}
/*设置二维码的文字*/
.a-class-app .div-class-qrCode span{
color: black;
font-size: 14px;
}
/*给app开启相对定位*/
.a-class-app{
position: relative;
}
/*设置app下的小三角*/
li:hover .a-class-app::after{
/*设置四个边框为透明颜色*/
content: '';
/*开启绝对对位*/
position: absolute;
display: block;
width: 0;
height: 0;
border: 10px solid transparent;
/*去除上边框*/
border-top: none;
border-bottom-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*------------------------------
默认的代码*/
*{
margin: 0px;
padding: 0px;
font: 14px "Microsoft YaHei UI";
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
（5）添加过渡效果
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>小米商城</title>
</head>
<body>
<!--创建顶部导航条-->
<!--顶部导航条外部容器-->
<div class="div-class-topBarWrapper">
<!--创建内容容器-->
<div class="div-class-topBar w clearFix">
<!-- 左侧导航-->
<ul class="ul-class-service">
<li><a href="javascript:;">小米商城</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">IoT</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">资质证明</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="li-class-line">|</li>
<li>
<a class="a-class-app" href="javascript:;">
下载APP
<div class="div-class-qrCode">
<img src="./server/小米.jpg" />
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!--考虑到浮动布局-->
<!--购物车-->
<ul class="ul-class-shopCart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车(0)
</a>
</li>
</ul>
<!--用户登录注册-->
<ul class="ul-class-userInfo">
<li><a href="javascript:;">登录</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
</body>
<!--自己定义的JS-->
<script src="./res/Controller.js" ></script>
<!--自己定义的CSS-->
<link rel="stylesheet" href="./res/Controller.css" />
<!--图标字体库-->
<link rel="stylesheet" href="./res/css/all.css"/>
</html>
/*
1.导航条
*/
/*设置一个类,表示中间容器的宽度*/
.w{
/*固定容易宽度*/
width: 1226px;
/*设置容器居中*/
margin: 0 auto;
/*不让宽度过小时,容器溢出*/
min-width: 1226px;
}
/*顶部导航条容器*/
.div-class-topBarWrapper{
/*设置宽度全屏*/
width: 100%;
/*设置背景色*/
/*设置行高*/
height: 40px;
line-height: 40px;
background-color: #333333;
}
/*设置超链接的颜色*/
.div-class-topBar a{
font-size: 12px;
color: #cccccc;
display: block;
}
.div-class-topBar a:hover{
color: white;
}
.div-class-topBar .li-class-line{
color: #424242;
font-size: 12px;
margin: 0 8px;
}
/*清除a的下划线*/
a{
text-decoration: none;
color: #cccccc;
}
/*设置左侧导航栏*/
.ul-class-service,.div-class-topBar li{
float: left;
list-style: none;
}
/*神来之笔,自己牛批*/
.div-class-topBar li a{
display: block;
line-height: 40px;
}
.ul-class-shopCart,.ul-class-userInfo{
float: right;
}
/*设置购物车的样式*/
.ul-class-shopCart a{
width: 120px;
background-color: #424242;
text-align: center;
}
.ul-class-shopCart:hover a{
background-color: white;
color: #ff6700;
}
/*设置下载APP的下拉*/
.a-class-app .div-class-qrCode{
position: absolute;
width: 124px;
/*height: 148px;*/
height: 0;
background-color: white;
line-height: 1;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,.3);
left: -38px;
overflow: hidden;
/*display: none;*/
/* transition:用于设置过渡效果*/
transition: height 0.3s;
}
/*设置二维码的图片*/
.a-class-app .div-class-qrCode img{
width: 90px;
margin: 17px;
}
/*设置二维码的文字*/
.a-class-app .div-class-qrCode span{
color: black;
font-size: 14px;
}
/*给app开启相对定位*/
.a-class-app{
position: relative;
}
.a-class-app:hover .div-class-qrCode,
.a-class-app:hover::after{
display: block;
height: 148px;
}
/*设置app下的小三角*/
/*li:hover .a-class-app::after*/
.a-class-app::after{
/*设置四个边框为透明颜色*/
display: none;
content: '';
/*开启绝对对位*/
position: absolute;
width: 0;
height: 0;
border: 10px solid transparent;
/*去除上边框*/
border-top: none;
border-bottom-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*li:hover>.a-class-app .div-class-qrCode{
display: block;
}*/
/*------------------------------
默认的代码*/
*{
margin: 0px;
padding: 0px;
font: 14px "Microsoft YaHei UI";
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
（6）头部
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>小米商城</title>
</head>
<body>
<!--创建顶部导航条-->
<!--顶部导航条外部容器-->
<div class="div-class-topBarWrapper">
<!--创建内容容器-->
<div class="div-class-topBar w clearFix">
<!-- 左侧导航-->
<ul class="ul-class-service">
<li><a href="javascript:;">小米商城</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">IoT</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">资质证明</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="li-class-line">|</li>
<li>
<a class="a-class-app" href="javascript:;">
下载APP
<div class="div-class-qrCode">
<img src="./server/小米.jpg" />
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!--考虑到浮动布局-->
<!--购物车-->
<ul class="ul-class-shopCart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车(0)
</a>
</li>
</ul>
<!--用户登录注册-->
<ul class="ul-class-userInfo">
<li><a href="javascript:;">登录</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
<!--创建一个头部的外部容器-->
<div class="div-class-headerWrapper">
<div class="div-class-header w clearFix">
<h1 class="h1-class-logo" title="小米">
小米官网
<a class="a-class-home" href="/vue">
</a>
<a class="a-class-mi" href="/vue">
</a>
</h1>
</div>
</div>
</body>
<!--自己定义的JS-->
<script src="./res/Controller.js" ></script>
<!--自己定义的CSS-->
<link rel="stylesheet" href="./res/Controller.css" />
<!--图标字体库-->
<link rel="stylesheet" href="./res/css/all.css"/>
</html>
/*
1.导航条
*/
/*设置一个类,表示中间容器的宽度*/
.w{
/*固定容易宽度*/
width: 1226px;
/*设置容器居中*/
margin: 0 auto;
/*不让宽度过小时,容器溢出*/
min-width: 1226px;
}
/*顶部导航条容器*/
.div-class-topBarWrapper{
/*设置宽度全屏*/
width: 100%;
/*设置背景色*/
/*设置行高*/
height: 40px;
line-height: 40px;
background-color: #333333;
}
/*设置超链接的颜色*/
.div-class-topBar a{
font-size: 12px;
color: #cccccc;
display: block;
}
.div-class-topBar a:hover{
color: white;
}
.div-class-topBar .li-class-line{
color: #424242;
font-size: 12px;
margin: 0 8px;
}
/*清除a的下划线*/
a{
text-decoration: none;
color: #cccccc;
}
/*设置左侧导航栏*/
.ul-class-service,.div-class-topBar li{
float: left;
list-style: none;
}
/*神来之笔,自己牛批*/
.div-class-topBar li a{
display: block;
line-height: 40px;
}
.ul-class-shopCart,.ul-class-userInfo{
float: right;
}
/*设置购物车的样式*/
.ul-class-shopCart a{
width: 120px;
background-color: #424242;
text-align: center;
}
.ul-class-shopCart:hover a{
background-color: white;
color: #ff6700;
}
/*设置下载APP的下拉*/
.a-class-app .div-class-qrCode{
position: absolute;
width: 124px;
/*height: 148px;*/
height: 0;
background-color: white;
line-height: 1;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,.3);
left: -38px;
overflow: hidden;
/*display: none;*/
/* transition:用于设置过渡效果*/
transition: height 0.3s;
}
/*设置二维码的图片*/
.a-class-app .div-class-qrCode img{
width: 90px;
margin: 17px;
}
/*设置二维码的文字*/
.a-class-app .div-class-qrCode span{
color: black;
font-size: 14px;
}
/*给app开启相对定位*/
.a-class-app{
position: relative;
}
.a-class-app:hover .div-class-qrCode,
.a-class-app:hover::after{
display: block;
height: 148px;
}
/*设置app下的小三角*/
/*li:hover .a-class-app::after*/
.a-class-app::after{
/*设置四个边框为透明颜色*/
display: none;
content: '';
/*开启绝对对位*/
position: absolute;
width: 0;
height: 0;
border: 10px solid transparent;
/*去除上边框*/
border-top: none;
border-bottom-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*li:hover>.a-class-app .div-class-qrCode{
display: block;
}*/
/*设置中间的header*/
.div-class-header{
height: 100px;
background-color: #669900;
}
.div-class-header .h1-class-logo{
float: left;
margin-top: 22px;
width: 55px;
height: 55px;
position: relative;
overflow: hidden;
/*为了让写的小米官网不显示,但是要写*/
text-indent: -9999px;
}
.div-class-header .h1-class-logo a{
/* display: block;*/
position: absolute;
width: 55px;
height: 55px;
background-color: #ff6700;
background-image: url("../server/logo.jpg");
background-position: center;
background-repeat: no-repeat;
transition: left 0.3s;
left: 0;
}
.div-class-header .h1-class-logo .a-class-home{
left: -55px;
background-image:url("../server/home.jpg") ;
}
/*设置图标引入后的位置*/
.div-class-header .h1-class-logo:hover .a-class-mi{
left:55px;
}
.div-class-header .h1-class-logo:hover .a-class-home{
left: 0px;
}
/*------------------------------
默认的代码*/
*{
margin: 0px;
padding: 0px;
font: 14px "Microsoft YaHei UI";
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
（7）头部导航条
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>小米商城</title>
</head>
<body>
<!--创建顶部导航条-->
<!--顶部导航条外部容器-->
<div class="div-class-topBarWrapper">
<!--创建内容容器-->
<div class="div-class-topBar w clearFix">
<!-- 左侧导航-->
<ul class="ul-class-service">
<li><a href="javascript:;">小米商城</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">IoT</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">资质证明</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="li-class-line">|</li>
<li>
<a class="a-class-app" href="javascript:;">
下载APP
<div class="div-class-qrCode">
<img src="./server/小米.jpg" />
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!--考虑到浮动布局-->
<!--购物车-->
<ul class="ul-class-shopCart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车(0)
</a>
</li>
</ul>
<!--用户登录注册-->
<ul class="ul-class-userInfo">
<li><a href="javascript:;">登录</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
<!--创建一个头部的外部容器-->
<div class="div-class-headerWrapper">
<div class="div-class-header w clearFix">
<h1 class="h1-class-logo" title="小米">
小米官网
<a class="a-class-home" href="/vue">
</a>
<a class="a-class-mi" href="/vue">
</a>
</h1>
<!--创建中间导航条的容器-->
<div class="div-class-navWrapper">
<!--创建导航条-->
<ul class="ul-class-nav clearFix">
<li>
<a class="a-class-allGoods" href="javascript:;">全部商品分类</a>
</li>
<li>
<a href="javascript:;">小米手机</a>
</li>
<li>
<a href="javascript:;">Red mi红米</a>
</li>
<li>
<a href="javascript:;">电视</a>
</li>
<li>
<a href="javascript:;">笔记本</a>
</li>
<li>
<a href="javascript:;">家电</a>
</li>
<li>
<a href="javascript:;">路由器</a>
</li>
<li>
<a href="javascript:;">智能硬件</a>
</li>
<li>
<a href="javascript:;">服务</a>
</li>
<li>
<a href="javascript:;">社区</a>
</li>
</ul>
</div>
</div>
</div>
</body>
<!--自己定义的JS-->
<script src="./res/Controller.js" ></script>
<!--自己定义的CSS-->
<link rel="stylesheet" href="./res/Controller.css" />
<!--图标字体库-->
<link rel="stylesheet" href="./res/css/all.css"/>
</html>
/*
1.导航条
*/
/*设置一个类,表示中间容器的宽度*/
.w{
/*固定容易宽度*/
width: 1226px;
/*设置容器居中*/
margin: 0 auto;
/*不让宽度过小时,容器溢出*/
min-width: 1226px;
}
/*顶部导航条容器*/
.div-class-topBarWrapper{
/*设置宽度全屏*/
width: 100%;
/*设置背景色*/
/*设置行高*/
height: 40px;
line-height: 40px;
background-color: #333333;
}
/*设置超链接的颜色*/
.div-class-topBar a{
font-size: 12px;
color: #cccccc;
display: block;
}
.div-class-topBar a:hover{
color: white;
}
.div-class-topBar .li-class-line{
color: #424242;
font-size: 12px;
margin: 0 8px;
}
/*清除a的下划线*/
a{
text-decoration: none;
color: #cccccc;
}
/*设置左侧导航栏*/
.ul-class-service,.div-class-topBar li{
float: left;
list-style: none;
}
/*神来之笔,自己牛批*/
.div-class-topBar li a{
display: block;
line-height: 40px;
}
.ul-class-shopCart,.ul-class-userInfo{
float: right;
}
/*设置购物车的样式*/
.ul-class-shopCart a{
width: 120px;
background-color: #424242;
text-align: center;
}
.ul-class-shopCart:hover a{
background-color: white;
color: #ff6700;
}
/*设置下载APP的下拉*/
.a-class-app .div-class-qrCode{
position: absolute;
width: 124px;
/*height: 148px;*/
height: 0;
background-color: white;
line-height: 1;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,.3);
left: -38px;
overflow: hidden;
/*display: none;*/
/* transition:用于设置过渡效果*/
transition: height 0.3s;
}
/*设置二维码的图片*/
.a-class-app .div-class-qrCode img{
width: 90px;
margin: 17px;
}
/*设置二维码的文字*/
.a-class-app .div-class-qrCode span{
color: black;
font-size: 14px;
}
/*给app开启相对定位*/
.a-class-app{
position: relative;
}
.a-class-app:hover .div-class-qrCode,
.a-class-app:hover::after{
display: block;
height: 148px;
}
/*设置app下的小三角*/
/*li:hover .a-class-app::after*/
.a-class-app::after{
/*设置四个边框为透明颜色*/
display: none;
content: '';
/*开启绝对对位*/
position: absolute;
width: 0;
height: 0;
border: 10px solid transparent;
/*去除上边框*/
border-top: none;
border-bottom-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*li:hover>.a-class-app .div-class-qrCode{
display: block;
}*/
/*设置中间的header*/
.div-class-header{
height: 100px;
background-color: #669900;
}
.div-class-header .h1-class-logo{
float: left;
margin-top: 22px;
width: 55px;
height: 55px;
position: relative;
overflow: hidden;
/*为了让写的小米官网不显示,但是要写*/
text-indent: -9999px;
}
.div-class-header .h1-class-logo a{
/* display: block;*/
position: absolute;
width: 55px;
height: 55px;
background-color: #ff6700;
background-image: url("../server/logo.jpg");
background-position: center;
background-repeat: no-repeat;
transition: left 0.3s;
left: 0;
}
.div-class-header .h1-class-logo .a-class-home{
left: -55px;
background-image:url("../server/home.jpg") ;
}
/*设置图标引入后的位置*/
.div-class-header .h1-class-logo:hover .a-class-mi{
left:55px;
}
.div-class-header .h1-class-logo:hover .a-class-home{
left: 0px;
}
/*头部的导航条*/
.div-class-header .div-class-navWrapper{
float: left;
margin-left: 7px;
}
/*设置导航条中的li*/
.div-class-navWrapper li{
float: left;
list-style: none;
height: 100px;
line-height: 100px;
}
/*设置导航条*/
.div-class-header .ul-class-nav{
/*width: 850px;*/
padding-left: 58px;
}
.div-class-navWrapper li a{
font-size: 16px;
margin-right: 20px;
color: #333333;
}
.div-class-navWrapper li a:hover{
color: #ff6700;
}
/*隐藏全部商品*/
.a-class-allGoods{
/*隐藏且占据位置*/
visibility: hidden;
}
/*------------------------------
默认的代码*/
*{
margin: 0px;
padding: 0px;
font: 14px "Microsoft YaHei UI";
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
（8）头部导航的下拉层
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>小米商城</title>
</head>
<body>
<!--创建顶部导航条-->
<!--顶部导航条外部容器-->
<div class="div-class-topBarWrapper">
<!--创建内容容器-->
<div class="div-class-topBar w clearFix">
<!-- 左侧导航-->
<ul class="ul-class-service">
<li><a href="javascript:;">小米商城</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">IoT</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">资质证明</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="li-class-line">|</li>
<li>
<a class="a-class-app" href="javascript:;">
下载APP
<div class="div-class-qrCode">
<img src="./server/小米.jpg" />
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!--考虑到浮动布局-->
<!--购物车-->
<ul class="ul-class-shopCart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车(0)
</a>
</li>
</ul>
<!--用户登录注册-->
<ul class="ul-class-userInfo">
<li><a href="javascript:;">登录</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="li-class-line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
<!--创建一个头部的外部容器-->
<div class="div-class-headerWrapper">
<div class="div-class-header w clearFix">
<h1 class="h1-class-logo" title="小米">
小米官网
<a class="a-class-home" href="/vue">
</a>
<a class="a-class-mi" href="/vue">
</a>
</h1>
<!--创建中间导航条的容器-->
<div class="div-class-navWrapper">
<!--创建导航条-->
<ul class="ul-class-nav clearFix">
<li>
<a class="a-class-allGoods" href="javascript:;">全部商品分类</a>
</li>
<li class="li-class-showGoods">
<a href="javascript:;">小米手机</a>
</li>
<li class="li-class-showGoods">
<a href="javascript:;">Red mi红米</a>
</li>
<li>
<a href="javascript:;">电视</a>
</li>
<li class="li-class-showGoods">
<a href="javascript:;">笔记本</a>
</li>
<li class="li-class-showGoods">
<a href="javascript:;">家电</a>
</li>
<li class="li-class-showGoods">
<a href="javascript:;">路由器</a>
</li>
<li class="li-class-showGoods">
<a href="javascript:;">智能硬件</a>
</li>
<li>
<a href="javascript:;">服务</a>
</li>
<li>
<a href="javascript:;">社区</a>
</li>
<!--创建一个弹出层-->
<div class="div-class-goodsInfo">
</div>
</ul>
</div>
</div>
</div>
</body>
<!--自己定义的JS-->
<script src="./res/Controller.js" ></script>
<!--自己定义的CSS-->
<link rel="stylesheet" href="./res/Controller.css" />
<!--图标字体库-->
<link rel="stylesheet" href="./res/css/all.css"/>
</html>
/*
1.导航条
*/
/*设置一个类,表示中间容器的宽度*/
.w{
/*固定容易宽度*/
width: 1226px;
/*设置容器居中*/
margin: 0 auto;
/*不让宽度过小时,容器溢出*/
min-width: 1226px;
}
/*顶部导航条容器*/
.div-class-topBarWrapper{
/*设置宽度全屏*/
width: 100%;
/*设置背景色*/
/*设置行高*/
height: 40px;
line-height: 40px;
background-color: #333333;
}
/*设置超链接的颜色*/
.div-class-topBar a{
font-size: 12px;
color: #cccccc;
display: block;
}
.div-class-topBar a:hover{
color: white;
}
.div-class-topBar .li-class-line{
color: #424242;
font-size: 12px;
margin: 0 8px;
}
/*清除a的下划线*/
a{
text-decoration: none;
color: #cccccc;
}
/*设置左侧导航栏*/
.ul-class-service,.div-class-topBar li{
float: left;
list-style: none;
}
/*神来之笔,自己牛批*/
.div-class-topBar li a{
display: block;
line-height: 40px;
}
.ul-class-shopCart,.ul-class-userInfo{
float: right;
}
/*设置购物车的样式*/
.ul-class-shopCart a{
width: 120px;
background-color: #424242;
text-align: center;
}
.ul-class-shopCart:hover a{
background-color: white;
color: #ff6700;
}
/*设置下载APP的下拉*/
.a-class-app .div-class-qrCode{
position: absolute;
width: 124px;
/*height: 148px;*/
height: 0;
background-color: white;
line-height: 1;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,.3);
left: -38px;
overflow: hidden;
/*display: none;*/
/* transition:用于设置过渡效果*/
transition: height 0.3s;
}
/*设置二维码的图片*/
.a-class-app .div-class-qrCode img{
width: 90px;
margin: 17px;
}
/*设置二维码的文字*/
.a-class-app .div-class-qrCode span{
color: black;
font-size: 14px;
}
/*给app开启相对定位*/
.a-class-app{
position: relative;
}
.a-class-app:hover .div-class-qrCode,
.a-class-app:hover::after{
display: block;
height: 148px;
}
/*设置app下的小三角*/
/*li:hover .a-class-app::after*/
.a-class-app::after{
/*设置四个边框为透明颜色*/
display: none;
content: '';
/*开启绝对对位*/
position: absolute;
width: 0;
height: 0;
border: 10px solid transparent;
/*去除上边框*/
border-top: none;
border-bottom-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*li:hover>.a-class-app .div-class-qrCode{
display: block;
}*/
/*设置中间的header*/
.div-class-header{
height: 100px;
background-color: #669900;
}
.div-class-header .h1-class-logo{
float: left;
margin-top: 22px;
width: 55px;
height: 55px;
position: relative;
overflow: hidden;
/*为了让写的小米官网不显示,但是要写*/
text-indent: -9999px;
}
.div-class-header .h1-class-logo a{
/* display: block;*/
position: absolute;
width: 55px;
height: 55px;
background-color: #ff6700;
background-image: url("../server/logo.jpg");
background-position: center;
background-repeat: no-repeat;
transition: left 0.3s;
left: 0;
}
.div-class-header .h1-class-logo .a-class-home{
left: -55px;
background-image:url("../server/home.jpg") ;
}
/*设置图标引入后的位置*/
.div-class-header .h1-class-logo:hover .a-class-mi{
left:55px;
}
.div-class-header .h1-class-logo:hover .a-class-home{
left: 0px;
}
/*头部的导航条*/
.div-class-header .div-class-navWrapper{
float: left;
margin-left: 7px;
}
/*设置导航条中的li*/
.div-class-navWrapper li{
float: left;
list-style: none;
height: 100px;
line-height: 100px;
}
/*设置导航条*/
.div-class-header .ul-class-nav{
/*width: 850px;*/
padding-left: 58px;
}
.div-class-navWrapper li a{
font-size: 16px;
margin-right: 20px;
color: #333333;
}
.div-class-navWrapper li a:hover{
color: #ff6700;
}
/*隐藏全部商品*/
.a-class-allGoods{
/*隐藏且占据位置*/
visibility: hidden;
}
.ul-class-nav .div-class-goodsInfo{
width: 100%;
height: 0px;
background-color: #0086b3;
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
transition: height 0.3s;
z-index: 9999;
}
/*goodsInfo的相对定位元素*/
.div-class-headerWrapper{
position: relative;
}
.ul-class-nav .li-class-showGoods:hover ~ .div-class-goodsInfo,
.div-class-goodsInfo:hover{
height: 228px;
border-top: 1px solid rgb(224,224,224);
box-shadow: 0 5px 3px rgba(0,0,0,.3);
}
/*------------------------------
默认的代码*/
*{
margin: 0px;
padding: 0px;
font: 14px "Microsoft YaHei UI";
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
HTML+CSS从入门到精通（二）
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/585606.html
如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！相关文章
实战—登录功能引发的逻辑漏洞
密码找回功能可能存在的漏洞
1.验证码发送后前端返回
2.验证码无次数限制可爆破
3.验证码可控/邮箱篡改为自己的接收短信验证码/手机号码篡改为自己的接收短信验证码
4.越权漏洞—>自己验证码通过改包然后修改他们密码
5.任意用户密码重置
6.密保问题在前端源码
实战…
Linux基础——Linux开发工具(上)_vim
前言：在了解完Linux基本指令和Linux权限后，我们有了足够了能力来学习后面的内容，但是在真正进入Linux之前，我们还得要学会使用Linux中的几个开发工具。而我们主要介绍的是以下几个： yum, vim, gcc / g, gdb, make / ma…
49. 字母异位词分组 128. 最长连续序列
49. 字母异位词分组 128. 最长连续序列 把集合里面的所有元素都放入set容器里面
定义结果最大连续数量 ans
for循环遍历每个元素
先判断集合里面有没有比这个元素小1的
如果没有 说明这个元素就是序列的第一个元素
然后接着找集合里面有没有比这个元素大1的 while一直找
…
牛客NC353 回文子串的数量【中等 字符串，枚举，回文 C++/Java/Go/PHP 高频】
题目
题目链接： https://www.nowcoder.com/practice/3e8b48c812864b0eabba0b8b25867738
思路 参考答案C
class Solution {public:/*** 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可*** param str string字符串…
详解centos8 搭建使用Tor 创建匿名服务和匿名网站（.onion）
1 Tor运行原理：
请求方需要使用：洋葱浏览器（Tor Browser）或者Google浏览器来对暗，网网站进行访问 响应放需要使用：Tor协议的的Hidden_service
2 好戏来了 搭建步骤：
1.更新yum源
rpm -Uvh h…
OceanBase V4.3 发布—— 迈向实时分析 AP 的重要里程
OceanBase在2023年初，发布了4.x架构的第一个重要版本，V4.1。该版本采用了单机分布式一体化架构，并在该架构的基础上，将代表数据库可靠性的RTO降低至 8 秒以内，从而确保在意外故障发生后，系统能够在极短时间…
javafx如何一键打包成exe
javafx如何打包成exe JavaFX-Template-Native
集成jfoenix、commons-math、commons-lang3、netty，方便一些和底层做通信使用，不需要可以自行pom中去掉依赖当前使用的jdk17，理论上jdk14都支持采用模块化，支持一键打包生成很小的ex…
Threejs制作服务器机房冷却结构
这节再绘制一个机房的结构，因为内容比较简单，就只使用一个章节来介绍，
先来一张效果图，
需要两个模型：一个冷却设备，一个服务器机箱，我这里是从网上找来的，首先我们搭建一个场景&a…
solidworks出现slderrresu.dll错误如何解决？亲测有效
通过近来给客户安装SolidWorks发现，SolidWorks2010、SolidWorks2012、SolidWorks2014、SolidWorks2015、SolidWorks2016、SolidWorks2017都会出现这个slderrresu.dll安装错误问题： 其实这个错误很好解决,主要是因為安裝中文版solidworks沒有選擇安裝中文…
.NET操作 Access （MSAccess）
注意：新项目推荐 Sqlite ，Access需要注意的东西太多了，比如OFFICE版本，是X86还是X64
连接字符串
ProviderMicrosoft.ACE.OleDB.15.0;Data Source"GetCurrentProjectPath"\\test.accdb//不同的office版本 连接字符串有…
Linux 虚拟主机切换php版本及参数
我使用的Hostease的Linux虚拟主机产品,由于网站程序需要支持高版本的PHP,程序已经上传到主机，但是没有找到切换PHP以及查看PHP有哪些版本的位置，因此咨询了Hostease的技术支持，寻求帮助了解到可以实现在cPanel面板上找到此切换PHP版本的按钮&…
亚马逊商品详情API接口：解锁亚马逊商品信息的全面视野
亚马逊商品详情API接口：解锁亚马逊商品信息的全面视野
在跨境电商和电商数据分析领域，亚马逊作为全球领先的电商平台，其商品信息对商家、开发者以及市场分析师来说至关重要。为了更高效地获取亚马逊平台上的商品详情，亚马逊商品详…
哨兵-1A与DInSAR技术监测尼泊尔地震前后地表形变
辽宁抚顺是一座以煤而兴的重工业城市，建国初期抚顺被誉为“煤都”，这里有闻名全国享誉世界的亚洲最大的露天煤矿——抚顺西露天矿。抚顺西露天矿地处抚顺煤田西部，矿坑东西长6.6公里，南北宽2.2公里，最终开采垂直深度47…
释放人工智能潜力，Polkadot 再掀区块链技术革命
来源：https://polkadot.network/blog/unleashing-the-potential-of-ai-with-polkadot/
编译：OneBlock
区块链技术开辟了一个充满可能性的世界，这一点在新兴崛起的人工智能（AI）领域最为明显。
Polkadot 生态处于这场…
Go Web开发【xorm 框架】
1、xorm
1.1、xorm 简介
xorm 是一个简单而强大的Go语言ORM库. 通过它可以使数据库操作非常简便。
特性
支持 struct 和数据库表之间的灵活映射，并支持自动同步事务支持同时支持原始SQL语句和ORM操作的混合执行使用连写来简化调用支持使用ID, In, Where, Limit,…
【JavaWeb Day 2 - JS 】
JavaWeb Day 2 - JS JS背景故事1. JS 引入方式2. JS 基本语法2.2 变量2.3 数据类型2.4 运算符 3. JS 函数4. JS 对象4.1 Array对象4.2 String对象4.3 JSON对象4.4 BOM对象4.4.1 windows 对象4.4.2 location 对象 4.5 DOM 对象DOM 案例 5. JS 事件监听5.1 JS 事件绑定 及 常见事…
JavaScript底层原理(栈、堆、主线程、任务队列、事件循环机制)
1. 栈(heap)和堆(stack)
栈是栈内存的简称，堆是堆内存的简称。顾名思义，内存是干啥的？内存就是用来存放数据的。
栈
栈只有一个入口，同时也是出口，数据遵循先进后出、后进先出的原则。 栈用于存放基本类型数据和引用…
牛客热题：合并K个升序链表
📟作者主页：慢热的陕西人 🌴专栏链接：力扣刷题日记 📣欢迎各位大佬👍点赞🔥关注🚓收藏，🍉留言 文章目录 牛客热题：合并K个升序链表题目链接&#…
最新文章
- 基于振幅跟踪技术监测Inylchek冰川(吉尔吉斯斯坦)的冰流表面速度
- 程序员的实用神器之——通义灵码
- 【FFmpeg】解码链路上主要函数的简单分析
- 机器人非线性阻抗控制系统
- [链表专题]力扣141, 142
- git 基础
- 南京江宁通报男子买鱼遇鬼秤被管理方抢摔手机：立案调查
- 奥运资格赛第二比赛日：中国选手表现抢眼，瞄向下一场
- wpf 使用DragDrop 类进行拖拽和接收
- 12个乒乓球，有一个次品，不知轻重，用一台无砝码天平称三次，找出次品，告知轻重?
- 28、Flink 为管理状态自定义序列化
- 深度学习UNet网络
- Spring AOP和IOC
- QT自适应界面 处理高DPI 缩放比界面乱问题
- MongoDB聚合运算符：$week
- Nginx详解：高性能HTTP和反向代理服务器
- 【echarts】解决ECharts鼠标悬停（mouseover）事件触发范围问题
- JVM面试
- 【字符串】Leetcode 12. 整数转罗马数字【中等】
- springboot报错‘url’ attribute is not specified and no embedded datasource could
- 尽微好物：从0到10亿+的抖音电商的TOP1“联盟团长”，如何使用NineData实现上云下云
- 什么是IP地址？
- 问题与解决：element plus对话框背景色覆盖失效
- python 合并 pdf
- vue+element select筛选框表单重置resetFields()失效
- 单火线开关语音芯片AT6811
- 总结MySQL 的一些知识点：MySQL 选择数据库
- # Java NIO（一）FileChannel
- # 一些视觉-激光、加速度传感器类的铣削振动测试方法案例
- #langchain | RAG |富文本一致性解析 | NLP # langchain支持的9种PDF内容提取方式