返回制作网站后台页......登陆

制作网站后台页面

过儿2019-02-12 16:42:05357

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

home.html

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">

<script src="layui/layui.js"></script>

<title>后台管理页面</title>

<style>

.header{

width: 100%;

height: 50px;

line-height: 50px;

background:#2168A6;

padding-left: 20px;

color: #fff;

font-size: 20px;

}

.userinfo{

float: right;

font-size: 15px;

margin-right: 10px;

}

.userinfo a{

color:#fff;

margin-right: 20px;

}

.menu{

width: 200px;

background:#323844;

position:absolute;

}

.layui-collapse{

border:none;

}

.layui-colla-item{

border-top: none;

}

.layui-colla-title{

background: #42485b;

color: #fff;

}

.layui-colla-content{

border:none;

padding: 0;

}

.main{

position: absolute;;

left:200px;

right:0;

}

</style>

</head>

<body>

<!-- 页面顶部 -->

<div class="header">

<span class="title">京东商城--后台管理系统</span>

<span class="userinfo">admin[系统管理员]<span><a href="">退出</a></span></span>

</div>

<!-- 左侧导航栏 -->

<div class="menu" id="menu">

<div class="layui-collapse">

<div class="layui-colla-item">

<h2 class="layui-colla-title">管理员管理</h2>

<div class="layui-colla-content layui-show">

<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">

<li class="layui-nav-item layui-nav-itemed">

<a href="javascript:;">默认展开</a>

</li>

<li class="layui-nav-item">

<a href="javascript:;">解决方案</a>

</li>

<li class="layui-nav-item"><a href="">云市场</a></li>

<li class="layui-nav-item"><a href="">社区</a></li>

</ul>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">权限管理</h2>

<div class="layui-colla-content layui-show">

<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">

<li class="layui-nav-item layui-nav-itemed">

<a href="javascript:;">默认展开</a>

</li>

<li class="layui-nav-item">

<a href="javascript:;">解决方案</a>

</li>

<li class="layui-nav-item"><a href="">云市场</a></li>

<li class="layui-nav-item"><a href="">社区</a></li>

</ul>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">系统设置</h2>

<div class="layui-colla-content layui-show">

<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">

<li class="layui-nav-item layui-nav-itemed">

<a href="javascript:;">默认展开</a>

</li>

<li class="layui-nav-item">

<a href="javascript:;">解决方案</a>

</li>

<li class="layui-nav-item"><a href="">云市场</a></li>

<li class="layui-nav-item"><a href="">社区</a></li>

</ul>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">系统设置</h2>

<div class="layui-colla-content layui-show">

<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">

<li class="layui-nav-item layui-nav-itemed">

<a href="javascript:;">默认展开</a>

</li>

<li class="layui-nav-item">

<a href="javascript:;">解决方案</a>

</li>

<li class="layui-nav-item"><a href="">云市场</a></li>

<li class="layui-nav-item"><a href="">社区</a></li>

</ul>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">系统设置</h2>

<div class="layui-colla-content layui-show">

<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">

<li class="layui-nav-item layui-nav-itemed">

<a href="javascript:;">默认展开</a>

</li>

<li class="layui-nav-item">

<a href="javascript:;">解决方案</a>

</li>

<li class="layui-nav-item"><a href="">云市场</a></li>

<li class="layui-nav-item"><a href="">社区</a></li>

</ul>

</div>

</div>

</div>

</div>

<!-- 主操作页面 -->

<div class="main">

<iframe src="welcome.html" onload="resetMainHeight(this)" style="width: 100%;height: 100%;"frameborder="0" scrolling="0" ></iframe>

</div>

</body>

</html>

welcome.html

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    <div style="text-align: center;color:gray;font-size: 20px;">

        <h1>欢迎使用后台管理系统</h1>

    </div>

</body>

</html>

QQ图片20190117120816.png

总结:制作过程中,出现了主题框里ifram无法显示的问题!最后发现是因为左侧导航处未设置position:absolute


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送