Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面、首页）、#left＞a:nth-child(4) {}】
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面、首页）、#left＞a:nth-child(4) {}】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
【Bootstrap4前端框架+MySQL數據庫】前后端綜合實訓【10天課程 博客匯總表 詳細筆記】
目? ?錄
主頁
#left>a:nth-child(4) {}
登錄頁
主頁
#left>a:nth-child(4) {}
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><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" /><!-- jQuery文件。務必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于彈窗、提示、下拉菜單，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><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><!-- 新 Bootstrap4 核心 CSS 文件 --><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" /><!-- jQuery文件。務必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于彈窗、提示、下拉菜單，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><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>今天下午，老師就講了主頁面的一部分。。。
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面、首页）、#left＞a:nth-child(4) {}】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap4+MySQL前后端综
- 下一篇： Bootstrap4+MySQL前后端综