Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面、首页）、#left＞a:nth-child(4) {}】

绝地灬酷狼 2022-12-22 04:47 67阅读 0赞

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

***目   录***

主页

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

登录页

--------------------

# 主页 #

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

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

<!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>

# 登录页 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

<!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>

> 今天下午，老师就讲了主页面的一部分。。。

[Bootstrap4_MySQL_10_ _]: https://blog.csdn.net/weixin_44949135/article/details/109722002
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221120/3b7b5c42f45c4b5cb9672df8e6d80ff8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/8341af531333492b97afae02da263210.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/a98badfb1ceb4e9f991320424783f17c.png