首页页面（html+css+js）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.menux p').click(function(){
$(this).siblings('ul').slideUp(200);
$(this).next('ul').slideToggle(200);
});
$('.menux ul a').click(function(){
$('iframe').attr("src",$(this).attr("url"));
$('.menu_title').html($(this).attr("title"));
});
})
</script>
</head>
<body>
<div class="header">
<div class="user"></div>
</div>
<div class="left">
<div class="title">系统功能</div>
<div class="menux">
<p>功能名称</p>
<ul>
<li><a href="javascript:void(0);" url="list.html" title="子功能1">子功能1</a></li>
<li><a href="javascript:void(0);" url="2.html" title="子功能2">子功能2</a></li>
<li><a href="javascript:void(0);" url="3.html" title="子功能3">子功能3</a></li>
</ul>
<p>功能名称</p>
<ul>
<li><a href="1.html">子功能1</a></li>
<li><a href="2.html">子功能2</a></li>
<li><a href="3.html">子功能3</a></li>
</ul>
<p>功能名称</p>
<ul>
<li><a href="1.html">子功能1</a></li>
<li><a href="2.html">子功能2</a></li>
<li><a href="3.html">子功能3</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="location">
<span class="menu_title">用户管理</span>
</div>
<iframe src="add.html" width="100%" height="90%" frameborder="0px"></iframe>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
font-size: 14px;
font-family: "microsoft yahei";
}
body{
background-color: #f8f8f8;
}
.header{
height: 70px;
background-color: #2196F3;
}
.left{
position: absolute;
top: 70px;
bottom: 0px;
left: 0px;
width: 200px;
float: left;
border: 1px solid #e1e1e1;
}
.left .title{
height: 48px;
line-height: 48px;
background-color: #e9e9e9;
border-bottom: 1px solid #E1E1E1;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.menux p{
height: 40px;
line-height: 40px;
background-color: #f8f8f8;
border-bottom: 1px solid #E1E1E1;
text-align: center;
}
.menux p:hover{
background-color: #2196F3;
color: white;
/* cursor: pointer; */
}
.menux ul{
list-style: none;
display: none;
}
.menux ul li{
line-height: 36px;
height: 36px;
border-bottom: 1px dotted #cccccc;
box-sizing: border-box;
}
.menux ul li a{
display: block;
padding-left: 50px;
color: black;
text-decoration: none;
}
.menux ul li a:hover{
background-color: #f7f2ff;
color: #467FE6;
cursor: pointer;
}
.main{
position: absolute;
top: 70px;
bottom: 0px;
left: 210px;
right: 0px;
float: right;
}
.location{
height: 40px;
line-height: 40px;
background-color: white;
border-bottom: 1px solid #E1E1E1;
border-right: 1px solid #E1E1E1;
border-left: 1px solid #E1E1E1;
padding-left: 10px;
box-sizing: border-box;
}
.condition{
background-color: #FFFFFF;
border: 1px solid #E1E1E1;
margin-top: 10px;
padding: 10px 5px;
color: #666666;
}
.condition input{
height: 25px;
border: 1px solid #E0E0E0 ;
border-radius: 4px;
}
.condition button{
margin-right: 10px;
background-color: #467fe6;
color: white;
border:1px solid #e0e0e0;
padding: 5px 5px;
font-size: 12px;
border-radius: 5px;
cursor: pointer;
}
.condition button:hover{
background-color: #2196F3;
}
.tablelist{
width: 100%;
border: 1px solid e0e0e0;
margin-top: 10px;
background-color: white;
border-collapse: collapse;
}
.tablelist th,td{
height: 30px;
border: 1px solid e0e0e0;
}
.tablelist th{
background-color: #F8F8F8;
}
.tablelist td{
padding:0px 2px;
}
.tablelist .edit{
color: #2196F3;
}.tablelist .remove{
color: #ff254d;
}
.tablelist .edit,.tablelist .remove{
background-color: transparent;
border: 1px solid transparent;
cursor: pointer;
margin: 5px;
}
.tablelist tr:nth-child(odd){
background-color: #FFFFFF;
}
.tablelist tr:nth-child(even){
background-color:S #F8F8F8;
}
.tablelist tr:hover{
background-color: #467FE6;
}
.page{
width: 100%;
border-bottom: 1px solid e0e0e0;
border-right: 1px solid e0e0e0;
border-top: 1px solid e0e0e0;
background-color: white;
border-collapse: collapse;
height: 35px;
padding-left:20px ;
}
.page button{
margin-right: 10px;
background-color: #467fe6;
color: white;
border:1px solid #e0e0e0;
padding: 3px 5px;
font-size: 12px;
border-radius: 5px;
cursor: pointer;
}
.page button:hover{
background-color: #2196F3;
}
.page-no{
width: 40px;
border-radius: 4px;
border: 1px solid #E1E1E1;
}
.add{
position: absolute;
border:1px solid #e0e0e0;
background-color: #FFFFFF;
bottom: 0px;
top: 10px;
right: 0px;
left: 0px;
}
.tableadd{
width: 100%;
margin: auto;
margin-top: 20px;
}
.tableadd td{
height: 35px;
padding-left: 2px;
color: #666666;
}
.tableadd td input{
height: 25px;
border: 1px solid #E0E0E0 ;
border-radius: 4px;
}
.tableadd td button{
margin-right: 10px;
background-color: #467fe6;
color: white;
border:1px solid #e0e0e0;
padding: 3px 5px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
首页页面（html+css+js）的更多相关文章
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
- 页面(html,css,js)上传到服务器后乱码
http://blog.csdn.net/u011606714/article/details/44649159 将文件使用记事本保存成ANSI格式或者UTF格式(根据需要)即可. 设置格式: htm ...
- MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
- CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- 前端小白页面开发注意事项及小工具（html\css\js）
技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
- HTML+CSS+JS设计注册页面
HTML实战--设计一个个人信息填写界面 应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用 效果图: 代码: <!DOCTYPE html&g ...
- HTML+CSS+JS简介
1.HTML与 CSS 1 1.1 HTML 1 1.2 HTML5 2 1.2.1 HTML5的特性 3 1.3 CSS 4 2.JavaScript 6 2.1特性 7 2.2编程 8 3.Sp ...
- jsp 引用css/js文件返回html网页问题
我的问题: 我直接在web.xml中匹配了 “/” ,以为能默认使用 “localhost:8080/news/” 这种方式,直接进入首页. 但是这样会匹配所有url 因此请求的 ***.js/*** ...
- 页面倒计时跳转页面效果，js倒计时效果
页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
随机推荐
- Linux c++编译总结（持续更新）
1. 没有定义的符号 这类的错误, 解决办法:A. 添加对应的头文件(源文件), B.前置声明 1.1 错误描述: error: variable has incomplete type 'class ...
- 【LeetCode】1013. Pairs of Songs With Total Durations Divisible by 60 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 【LeetCode】375. Guess Number Higher or Lower II 解题报告（Python）
[LeetCode]375. Guess Number Higher or Lower II 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://f ...
- 一文解析Apache Avro数据
摘要:本文将演示如果序列化生成avro数据,并使用FlinkSQL进行解析. 本文分享自华为云社区<[技术分享]Apache Avro数据的序列化.反序列&&FlinkSQL解析 ...
- 标准基座获取定位可以获取address城市，自定义基座获取不到address
正常的返回应该 { "type": "WGS84", "altitude": 0, "latitude": 31.830 ...
- 微信小程序--数据共享与方法共享
目录 全局数据共享 Mobox npm安装及其注意事项 小程序对 npm 的支持与限制 npm 依赖包的安装与使用 Mobox 1. 全局数据共享 2. 小程序中的全局数据共享方案 3. 使用mobx ...
- Pycharm_关闭PEP8函数名不能包含大写字母的规范
屏蔽PEP8告警 全是小写字母,可能与以往的习惯不大一样,将这样的警告忽略的方法如下: File →Settings→Editor→Inspections→Python→PEP 8 naming co ...
- Module 4 - Azure SQL
1) Migrate AdventureWorks database from SQL Server instance to Azure SQL using DMA.2) Update ...
- mysql数据库主从复制教程
mysql主从复制教程 架构规划: 192.168.201.150 master 主节点 192.168.201.154 slave 从节点 1. 修改mysql的配置文件(主节点,从节点都要修改) ...
- 第10组 Beta冲刺 (1/5)（组长）
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14012521.html ·作业博客:https://edu.cnblogs.co ...