代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<!-- 当前文档的字符集编码为utf-8 -->
<meta charset="utf-8">
<meta name="author" content="disenQF" >
<meta name="keywords" content="CGI开发 H5模板 千锋教育 西安物联网">
<title>HTML5模板-弹性盒子</title>
<!-- 引入外联样式文件 -->
<link rel="stylesheet" href="/css/my.css">
<style>
/* 弹性盒子: 在盒子模型(width,height,padding,margin,border,border-radiu)基础之上,增强子元素的对齐方式 */
.img-circle{
width: 50px;
height: 50px;
border-radius: 50%;
}
.logo {
height: 45px;
}
/* display: flex; 将一个标签的类型修改为弹性盒子(对齐,自动计算子标签的所占空间-自动排列) */
/* justify- 主轴的对齐方式(row-水平轴为主, column-垂直轴为主)
align-items 副轴的对齐方式
content 代表子元素,items代表文本内容
*/
#toper{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 50px;
border-bottom: 1px solid lightgray;
}
/* flex-wrap: wrap; 一行不足排列时,自动换行, nowrap 不换行*/
.row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.row-vcenter{
align-items: center;
}
#userInfo{
margin: 0 10px;
}
#main{
height: 100%;
}
#footer{
height: 30px;
border-top: 1px solid lightgray;
text-align: center;
}
#container{
height: 96%;
display: flex;
flex-direction: column;
}
#menu{
width: 240px;
border-right: 1px solid lightgray;
}
#main > iframe {
height: 100%;
width: 100%;
}
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
margin: 10px;
}
li>a{
color: blue;
text-decoration: none;
}
li:hover{
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div id="toper">
<img class="logo" src="http://www.qfedu.com/images/index2021/logo-edu.png">
<div class="row row-vcenter">
<b id="userInfo">Disen</b>
<img id="userHead" src="/images/head.jpg" class="img-circle">
</div>
</div>
<div id="main" class="row">
<div id="menu">
<h3>我的功能模块</h3>
<!-- ul 无序列表, ol有序列表,列表项都是li -->
<ul>
<li>
<a target="content_frame" href="page1.html">页面1</a>
</li>
<li>
<a target="content_frame" href="page2.html">页面2</a>
</li>
<li>
<a target="content_frame" href="page3.html">页面3</a>
</li>
<li>
<a target="content_frame" href="page4.html">页面4</a>
</li>
</ul>
</div>
<!-- iframe 网页中的内嵌窗口,a标签的target属性中使用name的属性值
<a href="xxx" target="content_frame">xxx</a>
-->
<iframe name="content_frame" frameborder="0"></iframe>
</div>
<div id="footer">
<b>版本所有@千锋西安-IoT2402</b><br>
<i>2024-10-10</i>
</div>
</div>
<script>
window.onload = function(){
if(localStorage.getItem("uid") == null){
// 未登录
location.href = "/login.html";
}else{
userInfo.innerText = localStorage.nickname;
userHead.setAttribute("src", localStorage.head);
}
}
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。