1200字范文 > Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面首页） #left＞

Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面首页） #left＞

时间：2020-04-28 19:43:15

【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程博客汇总表详细笔记】

目录

主页

#left>a:nth-child(4) {}

登录页

主页

#left>a:nth-child(4) {}

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" /><script src="jquery/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="bootstrap4/js/bootstrap.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>主页</title><style type="text/css">body {display: flex;flex-direction: column;min-height: 100vh;}header {height: 80px;background-color: #007FB0;display: flex;align-items: center;padding-left: 40px;}#main {flex-grow: 1;display: flex;}#left {background-color: #EEEEEE;/* border: 1px #004085 solid; */}#left {width: 200px;flex-shrink: 0;display: flex;flex-direction: column;}#left>p {height: 40px;padding: 0px;margin: 0px;display: flex;justify-content: center;align-items: center;background-color: #F5F5F5;border-bottom: 1px solid darkgrey;}#left>a {height: 50px;background-color: #EEEEEE;border-bottom: 1px darkgrey solid;border-right: 1px darkgrey solid;display: flex;justify-content: center;align-items: center;text-decoration: none;color: #007FB0;}#left>a:hover {background-color: white;}#left>a:nth-child(2) {background-image: url(img/icon_01.png);background-repeat: no-repeat;background-position: 40px 18px;}#left>a:nth-child(3) {background-image: url(img/icon_02.png);background-repeat: no-repeat;background-position: 40px 18px;}#left>a:nth-child(4) {background-image: url(img/icon_03.png);background-repeat: no-repeat;background-position: 40px 18px;}#content {flex-grow: 1;}</style></head><body><header><img src="img/tit.png" /></header><div id="main"><div id="left"><p>当前用户：管理员001</p><a href="pages/user_manager.html" target="myFrame">账户管理</a><a href="pages/item_manager.html" target="myFrame">栏目管理</a><a href="pages/news_manager.html" target="myFrame">新闻管理</a></div><iframe id="content" frameborder="0" name="myFrame"></iframe></div></body></html>

登录页

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" /><script src="jquery/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="bootstrap4/js/bootstrap.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>登录页面</title><style type="text/css">body {display: flex;flex-direction: column;}header {margin-top: 30px;margin-bottom: 40px;margin-left: 300px;}#main {width: 100%;height: 400px;background-image: url(img/banner.jpg);background-repeat: no-repeat;background-size: 100% 100%; /*设置背景图片铺满屏幕*/display: flex;flex-direction: row-reverse;}div#right {margin-top: 30px;margin-right: 300px;border: black 2px solid;background-color: white;width: 300px;height: 350px;}div#right>h5 {margin: 15px;}.input1, .input2 {margin: 10px;padding: 3px;width: 270px;height: 40px;}.input3 {margin: 10px;padding: 3px;width: 150px;height: 40px;}button {margin: 10px;padding: 3px;width: 280px;height: 40px;background-color: rgb(26, 112, 181);}footer {margin-top: 20px;margin-left: 300px;color: lightslategray;}</style><body><header><img src="img/logo.png"></header><div id="main"><div id="right"><h5>后台登录</h5><input type="text" placeholder="账号" class="input1"><br><input type="text" placeholder="密码" class="input2"><br><input type="text" placeholder="验证码" class="input3"><img src="img/img_code.jpg"><br><button type="button">登录</button></div></div><footer>版权所有@：新开普电子股份有限公司豫ICP备08102576号未经授权本站内容禁止私自转载使用！</footer></body></html>