前端学习02

1.CSS案例

1.1 内容回顾

1.1.1 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.sub-header{height: 100px;background-color: #b0b0b0;}.container{width: 1128px;margin: 0 auto;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;}.sub-header .menu-list{float: left;}.sub-header .search{float: right;}</style>
</head>
<body>
<div class="sub-header"><div class="container"><div class="ht logo">1</div><div class="ht menu-list">2</div><div class="ht search">3</div><div class="clear:both;"></div></div>
</div></body>
</html>
1.1.2 Logo区域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.sub-header {height: 100px;background-color: #b0b0b0;}.container {width: 1128px;margin: 0 auto;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;border: 1px solid red;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;}.sub-header .search {float: right;}</style>
</head>
<body>
<div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list">2</div><div class="ht search">3</div><div class="clear:both;"></div></div>
</div></body>
</html>
1.1.3 菜单部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.sub-header {height: 100px;}.container {width: 1128px;margin: 0 auto;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a{display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover{color: #ff6700;}.sub-header .search {float: right;}</style>
</head>
<body>
<div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div></body>
</html>

1.2 案例：顶部菜单 + 二级菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.container {width: 1226px;margin: 0 auto;}.header {background: #333;}.header .menu {float: left;color: white;}.header .account {float: right;color: white;}.header a {color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover{color: white;}.sub-header {height: 100px;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a {display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover {color: #ff6700;}.sub-header .search {float: right;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">开放平台</a></div><div class="account"><a href="https://www.mi.com/">登录</a><a href="https://www.mi.com/">注册</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div>
</div><div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div></body>
</html>
小结

  • a标签是行内标签，行内标签的高度、内外边距，默认无效。

  • 垂直方向居中

    • 本文 + line-height
    • 图片 + 边距

  • a标签默认有下划线。

  • 鼠标放上去之后hover

    .c1:hover{...
}
a:hover{}
1.2.1 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}img {width: 100%;height: 100%;}.container {width: 1226px;margin: 0 auto;}.header {background: #333;}.header .menu {float: left;color: white;}.header .account {float: right;color: white;}.header a {color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover {color: white;}.sub-header {height: 100px;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a {display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover {color: #ff6700;}.sub-header .search {float: right;}.slider .sd-img {width: 1226px;height: 460px;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">开放平台</a></div><div class="account"><a href="https://www.mi.com/">登录</a><a href="https://www.mi.com/">注册</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div>
</div><div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpeg" alt=""></div></div>
</div><div class="news"><div class="container"><div class="channel"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div></div>
</div></body>
</html>
1.2.2 案例的实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}img {width: 100%;height: 100%;}.left {float: left;}.container {width: 1226px;margin: 0 auto;}.header {background: #333;}.header .menu {float: left;color: white;}.header .account {float: right;color: white;}.header a {color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover {color: white;}.sub-header {height: 100px;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a {display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover {color: #ff6700;}.sub-header .search {float: right;}.slider .sd-img {width: 1226px;height: 460px;}.news{margin-top: 14px;}.news .channel {width: 228px;height: 164px;background-color: #5f5750;padding: 3px;}.news .channel .item {height: 82px;width: 76px;float: left;text-align: center;}.news .channel .item a{display: inline-block;font-size: 12px;padding-top: 18px;color: #fff;text-decoration: none;opacity: 0.7;}.news .channel .item a:hover{opacity: 1;}.news .channel .item  img{height: 24px;width: 24px;display: block;margin: 0 auto 4px;}.news .list-item {width: 316px;height: 170px;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">开放平台</a></div><div class="account"><a href="https://www.mi.com/">登录</a><a href="https://www.mi.com/">注册</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div>
</div><div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpeg" alt=""></div></div>
</div><div class="news"><div class="container"><div class="channel left"><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="clear:both"></div></div><div class="list-item left" style="margin-left: 14px"><img src="images/w1.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="images/w2.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="images/w3.jpeg"/></div><div class="clear:both"></div></div>
</div></body>
</html>
小结

  • 设置透明度

    opacity:0.5;    /* 0 ~ 1 */

2. CSS知识点

2.1 hover（伪类）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1 {color: red;font-size: 18px;}.c1:hover {color: green;font-size: 50px;}.c2 {height: 300px;width: 500px;border: 3px solid red;}.c2:hover {border: 3px solid green;}.download {display: none;}.app:hover .download {display: block;}.app:hover .title{color: red;}</style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div><div class="app"><div class="title">下载APP</div><div class="download"><img src="images/qcode.png" alt=""></div>
</div></body>
</html>

2.2 after（伪类）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1:after{content: "大帅哥";}</style>
</head>
<body><div class="c1">吴阳军</div><div class="c1">梁吉宁</div>
</body>
</html>

很重要的应用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.clearfix:after{content: "";display: block;clear: both;}.item{float: left;}</style>
</head>
<body><div class="clearfix"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>

2.3 position

  • fixed
  • relative
  • absolute
1. fixed

固定在窗口的某个位置。

案例：返回顶部
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.back{position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 10px;bottom: 50px;}</style>
</head>
<body><div style="height: 1000px;background-color: #5f5750"></div><div class="back"></div></body>
</html>
案例：对话框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.dialog {position: fixed;height: 300px;width: 500px;background-color: white;left: 0;right: 0;margin: 0 auto;top: 200px;z-index: 1000;}.mask {background-color: black;position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: 0.7;z-index: 999;}</style>
</head>
<body><div style="height: 1000px">asdfasdfasd</div><div class="mask"></div>
<div class="dialog"></div></body>
</html>
2. relative和absolute
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 300px;width: 500px;border: 1px solid red;margin: 100px;position: relative;}.c1 .c2{height: 59px;width: 59px;background-color: #00FF7F;position: absolute;right: 20px;bottom: 10px;}</style>
</head>
<body><div class="c1"><div class="c2"></div></div>
</body>
</html>
案例：小米商城下载app
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}img {width: 100%;height: 100%;}.left {float: left;}.container {width: 1226px;margin: 0 auto;}.header {background: #333;}.header .menu {float: left;color: white;}.header .account {float: right;color: white;}.header a {color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover {color: white;}.sub-header {height: 100px;}.sub-header .ht {height: 100px;}.sub-header .logo {width: 234px;float: left;}.sub-header .logo a {margin-top: 22px;display: inline-block}.sub-header .logo a img {height: 56px;width: 56px;}.sub-header .menu-list {float: left;line-height: 100px;}.sub-header .menu-list a {display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover {color: #ff6700;}.sub-header .search {float: right;}.slider .sd-img {width: 1226px;height: 460px;}.news {margin-top: 14px;}.news .channel {width: 228px;height: 164px;background-color: #5f5750;padding: 3px;}.news .channel .item {height: 82px;width: 76px;float: left;text-align: center;}.news .channel .item a {display: inline-block;font-size: 12px;padding-top: 18px;color: #fff;text-decoration: none;opacity: 0.7;}.news .channel .item a:hover {opacity: 1;}.news .channel .item img {height: 24px;width: 24px;display: block;margin: 0 auto 4px;}.news .list-item {width: 316px;height: 170px;}.app {position: relative}.app .download {position: absolute;height: 100px;width: 100px;display: none;}.app:hover .download{display: block;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/" class="app">下载app<div class="download"><img src="images/qcode.png" alt=""></div></a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">开放平台</a></div><div class="account"><a href="https://www.mi.com/">登录</a><a href="https://www.mi.com/">注册</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div>
</div><div class="sub-header"><div class="container"><div class="ht logo"><!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 --><a href="https://www.mi.com/"><img src="images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi红米</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a></div><div class="ht search"></div><div class="clear:both;"></div></div>
</div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpeg" alt=""></div></div>
</div><div class="news"><div class="container"><div class="channel left"><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="images/v1.png" alt=""><span>保障服务</span></a></div><div class="clear:both"></div></div><div class="list-item left" style="margin-left: 14px"><img src="images/w1.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="images/w2.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="images/w3.jpeg"/></div><div class="clear:both"></div></div>
</div></body>
</html>

2.4 border

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 300px;width: 500px;border: 1px solid red;border-left: 3px solid #00FF7F;margin: 100px;}</style>
</head>
<body><div class="c1"></div>
</body>
</html>

透明色：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 50px;width: 500px;margin: 100px;background-color: #5f5750;border-left: 2px solid transparent;}.c1:hover{border-left: 2px solid red;}</style>
</head>
<body><div class="c1">菜单</div>
</body>
</html>

2.5 背景色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 50px;width: 500px;margin: 100px;background-color: #5f5750;}</style>
</head>
<body><div class="c1">菜单</div>
</body>
</html>

注意：以上不是所有的CSS样式。

3.BootStrap

是别人帮我们已写好的CSS样式，我们如果想要使用这个BootStrap：

  • 下载BootStrap
  • 使用
    • 在页面上引入BootStrap
    • 编写HTML时，按照BootStrap的规定来编写 + 自定制。

3.1 初识

https://v3.bootcss.com/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- HTML注释：开发版本 --><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><!-- 生产版本 --><!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"> -->
</head>
<body><input type="button" value="提交" /><input type="button" value="提交" class="btn btn-primary" /><input type="button" value="提交" class="btn btn-success" /><input type="button" value="提交" class="btn btn-danger" /><input type="button" value="提交" class="btn btn-danger btn-xs" /></body>
</html>

3.2 导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.navbar {border-radius: 0;}</style>
</head>
<body><div 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="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">广西</a></li><li><a href="#">上海</a></li><li><a href="#">神州</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">四川</a></li><li><a href="#">上海</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</div></body>
</html>

3.3 栅格系统

https://v3.bootcss.com/css/#grid

  • 把整体划分为了12格

  • 分类

    • 响应式，根据屏幕宽度不同

      .col-lg-   1170px
.col-md-   970px
.col-sm-   750px

    • 非响应式

      <div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>

    • 列偏移

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body><div><div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div></div>
</body>
</html>

3.4 container

<div class="container-fluid"><div class="col-sm-9">左边</div><div class="col-sm-3">右边</div>
</div>

<div class="container"><div class="col-sm-9">左边</div><div class="col-sm-3">右边</div>
</div>

3.5 面板

<div class="panel panel-default"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div>
</div>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.account {width: 400px;border: 1px solid #dddddd;border-radius: 5px;box-shadow: 5px 5px 20px #aaa;margin-left: auto;margin-right: auto;margin-top: 100px;padding: 20px 40px;}.account h2 {margin-top: 10px;text-align: center;}</style>
</head>
<body>
<div class="account"><h2>用户登录</h2><form><div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"></div><input type="submit" value="登 录" class="btn btn-primary"></form>
</div>
</body>
</html>

案例：后台管理

  • 导航
  • 新建，按钮。
  • 表格，
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.navbar {border-radius: 0;}</style>
</head>
<body>
<div class="navbar navbar-default"><div class="container"><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="#">中国联通xx系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">广西</a></li><li><a href="#">上海</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div></div>
</div><div class="container"><div><input type="button" value="新 建" class="btn btn-primary"/></div><div style="margin-top: 20px"><table class="table table-bordered table-hover"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div></div></body>
</html>

案例：后台管理+面板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.navbar {border-radius: 0;}</style>
</head>
<body>
<div class="navbar navbar-default"><div class="container"><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="#">中国联通xx系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">广西</a></li><li><a href="#">上海</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div></div>
</div><div class="container"><div class="panel panel-default"><div class="panel-heading">表单区域</div><div class="panel-body"><form class="form-inline"><div class="form-group"><label class="sr-only" for="exampleInputEmail3">Email address</label><input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"></div><div class="form-group"><label class="sr-only" for="exampleInputPassword3">Password</label><input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"></div><button type="submit" class="btn btn-success">保 存</button></form></div></div><div class="panel panel-default"><div class="panel-heading">数据列表</div><!--<div class="panel-body">注意：以下我们经过筛选出来的重要数据。</div>--><table class="table table-bordered table-hover"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>操作</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td><a class="btn btn-primary btn-xs">编辑</a><a class="btn btn-danger btn-xs">删除</a></td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td><a class="btn btn-primary btn-xs">编辑</a><a class="btn btn-danger btn-xs">删除</a></td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td><a class="btn btn-primary btn-xs">编辑</a><a class="btn btn-danger btn-xs">删除</a></td></tr></tbody></table></div><ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></div></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/665154.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

js中常用数组去重方法

js中常用数组去重方法

js中常用去重方法 一、使用 Set ES6 提供了 Set 类型&#xff0c;它可以自动去重 const arr [1, 2, 2, 3, 3, 4]; const newArr Array.from(new Set(arr)); console.log(newArr ); // [1, 2, 3, 4]二、使用 filter 方法 const arr [1, 2, 2, 3, 3, 4]; const newArr ar…
阅读更多...
unity 导出H5

unity 导出H5

Unity 输出html5_mob649e8157aaee的技术博客_51CTO博客 Unity打包WebGL报Unable to parse Build/*.framework.js.gz This can happen if build compression was......._unable to load file build/out.framework.js.gz! che-CSDN博客
阅读更多...
ES6-对象的解构赋值

ES6-对象的解构赋值

一、区别一下数组的解构赋值 - 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的&#xff0c;变量的取值由它的位置决定&#xff1b;而对象的属性没有次序&#xff0c;变量必须与属性同名&#xff0c;才能取到正确的值二、说明 - 对象的解构赋值的内部机制&#…
阅读更多...
【Vitis】Vitis HLS学习系列笔记 ：第一个例程

【Vitis】Vitis HLS学习系列笔记 ：第一个例程

在学习vitis的过程中一定要跑几个例程试试看&#xff0c;这中间遇到了几个小问题&#xff0c;记录下 有干货&#xff0c;请注意查收&#xff1a;作为新手&#xff0c;跑例程大概率会遇到问题&#xff0c;这里记录几个问题&#xff0c;如果刚好你也遇到&#xff0c;一定会帮到你…
阅读更多...
XML详解

XML详解

文章目录 XML简介语法约束DTDSchema 解析Jsoup使用对象详解JsoupDocumentElementsElementNode XML 简介 概述&#xff1a;Extensible Markup Language 可扩展标记语言 可扩展&#xff1a;标签都是自定义的。 功能 数据存储&#xff1a;XML 可以用来存储结构化数据&#xff0c…
阅读更多...
HSRP配置指南

HSRP配置指南

实验大纲 第 1 部分&#xff1a;验证连通性 步骤 1&#xff1a;追踪从 PC-A 到 Web 服务器的路径 步骤 2&#xff1a;追踪从 PC-B 到 Web 服务器的路径 步骤 3&#xff1a;观察当 R3 不可用时&#xff0c;网络的行为 第 2 部分&#xff1a;配置 HSRP 主用和 备用路由器 步…
阅读更多...
rasa3.X 自定义action的注册问题

rasa3.X 自定义action的注册问题

rasa3.X 自定义action的注册问题 文章目录 rasa3.X 自定义action的注册问题前言一、问题重述二、问题解决 前言 幸好在这之前抽时间稍微看了一点django源码&#xff0c;让我对于python的导入机制有了一个概念。虽然还不是很确切的知道python import机制&#xff0c;不过在看到…
阅读更多...
QT学习日记 | 初始QT

QT学习日记 | 初始QT

目录 一、创建QT文件 二、目录结构讲解 1、.pro文件 2、源文件与头文件 3、编译运行 4、界面文件 三、梦开始的地方&#xff08;Hello World&#xff01;&#xff09; 1、代码方式 2、拖拽方式 四、Qt中的“容器” 五、Qt的对象树机制 1、对象树的引入 2、对象树…
阅读更多...
MySQL进阶之锁（全局锁以及备份报错解决）

MySQL进阶之锁（全局锁以及备份报错解决）

锁 全局锁 全局锁就是对整个数据库实例加锁&#xff0c;加锁后整个实例就处于只读状态&#xff0c;后续的DML的写语句&#xff0c;DDL语 句&#xff0c;已经更新操作的事务提交语句都将被阻塞。 其典型的使用场景是做全库的逻辑备份&#xff0c;对所有的表进行锁定&#xff…
阅读更多...
030-安全开发-JS应用NodeJS指南原型链污染Express框架功能实现审计

030-安全开发-JS应用NodeJS指南原型链污染Express框架功能实现审计

030-安全开发-JS应用&NodeJS指南&原型链污染&Express框架&功能实现&审计 #知识点&#xff1a; 1、NodeJS-开发环境&功能实现 2、NodeJS-安全漏洞&案例分析 3、NodeJS-开发指南&特有漏洞 演示案例&#xff1a; ➢环境搭建-NodeJS-解析安装&…
阅读更多...
MySQL知识点总结（三）——事务

MySQL知识点总结（三）——事务

MySQL知识点总结&#xff08;三&#xff09;——事务 事务事务的四大特性ACID原子性一致性隔离性持久性 脏读、幻读、不可重复读脏读不可重复读幻读 隔离级别读未提交读已提交可重复读串行化 事务的原理InnoDB如何实现事务的ACID事务的两阶段提交redo log与binlog的区别事务两阶…
阅读更多...
【DevOps】产品需求文档（PRD）与常见原型软件

【DevOps】产品需求文档（PRD）与常见原型软件

文章目录 1、PRD介绍1.1、概述1.2、前提条件1.3、主要目的1.4、关键内容1.5、表述方式1.6、需求评审人员1.7、一般内容结构 2、需求流程3、常见原型软件3.1、Word3.2、Axure3.2.1、详细介绍3.2.2、应用分类3.2.3、优缺点 3.3、摹客RP3.4、蓝湖3.5、GUI Design Studio 1、PRD介绍…
阅读更多...
业务流程自动化平台在制造业应用案例，助力业务自动化、智能化

业务流程自动化平台在制造业应用案例，助力业务自动化、智能化

捷昌驱动成立于2000年&#xff0c;并于2018年9月在上海证券交易所上市&#xff0c;是一家专注于线性驱动产品研发、生产及销售的科技集团。 公司整合全球资源&#xff0c;为智慧办公、医疗康护、智能家居、工业自动化等关联产业提供驱动及智能控制解决方案&#xff0c;以科技驱…
阅读更多...
C# 浅克隆与深克隆

C# 浅克隆与深克隆

在C#中&#xff0c;浅克隆&#xff08;Shallow Clone&#xff09;和深克隆&#xff08;Deep Clone&#xff09;是两种常见的对象克隆技术&#xff0c;用于创建对象的新副本。 它们的主要区别在于复制对象的层次和属性的处理方式。 浅克隆&#xff08;Shallow Copy&#xff09;…
阅读更多...
荣耀手机如何录屏？在线分享3个录屏方法

荣耀手机如何录屏？在线分享3个录屏方法

荣耀手机如何录屏&#xff1f;荣耀手机录屏是一项非常实用的功能&#xff0c;它可以帮助我们轻松记录手机屏幕上的内容&#xff0c;无论是游戏攻略、教育学习还是工作演示&#xff0c;都能够方便地进行录制。通过录屏&#xff0c;我们可以随时随地记录和分享自己的操作和见解。…
阅读更多...
探究Steam爆款游戏”幻兽帕鲁“：玩家评价揭秘

探究Steam爆款游戏”幻兽帕鲁“：玩家评价揭秘

探究Steam爆款游戏”幻兽帕鲁“&#xff1a;玩家评价揭秘 文章目录 探究Steam爆款游戏”幻兽帕鲁“&#xff1a;玩家评价揭秘1 背景描述2 数据说明3 数据来源4 问题描述5 数据探索与预处理5.1 数据加载5.2 数据清洗 6 数据分析6.1 评论分布分析6.2 评论内容情感分析6.3 地理分布…
阅读更多...
寒假作业1

寒假作业1

1、栈和队列的区别&#xff1f; 栈&#xff1a;先进后出&#xff0c;队列&#xff1a;先进先出栈&#xff1a;只允许在一端进行插入和删除队列&#xff1a;允许在队尾插入&#xff0c;队头删除的线性结构都是操作受限的线性表&#xff0c;插入和删除都只能在端点处进行&#xf…
阅读更多...
02-03

02-03

内核提供的通信方式 1、有名管道和无名管道 有名管道和无名管道都属于管道通信&#xff0c;通过在内核空间创建一个特殊的文件&#xff08;管道文件&#xff09;&#xff0c;一个进程将数据写入管道&#xff0c;另一个进程从管道中读取数据&#xff0c;从而实现通信。管道文件…
阅读更多...
力扣热门100题刷题笔记 - 2.两数相加

力扣热门100题刷题笔记 - 2.两数相加

力扣热门100题 - 2.两数相加 题目链接&#xff1a;2.两数相加 题目描述&#xff1a; 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。请你将两个数相加&#xff0c;并以相同形式返…
阅读更多...
图书|基于Springboot的图书管理系统设计与实现(源码+数据库+文档)

图书|基于Springboot的图书管理系统设计与实现(源码+数据库+文档)

图书管理系统目录 目录 基于Springboot的图书管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、个人中心 2、管理员管理 3、用户管理 4、图书出版社管理 5、公告类型管理 6、所在书架管理 7、图书类型管理 8、论坛管理 9、公告信息管理 10、图书信…
阅读更多...
最新文章

Copyright @ 2022~2023