首页页面（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倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
随机推荐
- 【LeetCode】912. Sort an Array 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 库函数排序 桶排序 红黑树排序 归并排序 快速排序 ...
- 【剑指Offer】滑动窗口的最大值 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 暴力求解 单调递减队列 日期 题目地址:https://www ...
- JSP的数据从数据库中获取导入type=date的input标签中
jsp 页面最开始加上 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> & ...
- 使用tomcat搭建HTTP文件下载服务器
使用tomcat搭建HTTP文件下载服务器, 有时我们的应用或者服务需要去外网下载一些资源, 但是如果在内网环境或者网络不好的情况下, 我们可以在内网提供文件下载服务, 将预先下载好的资源放在某个地方 ...
- centos6.5 搭建zabbix3.0
一.搭建LAMP平台 注意zabbix3.0需要php5.4以上的版本 (1)安装依赖包 httpd和mysql安装过程省略 rpm -e httpd --nodeps yum -y install ...
- python中的break 和continue的区别
break语句可以在循环过程中直接退出循环,而continue语句可以提前结束本轮循环 break的例子如图,当遇到的n为偶数时,直接退出循环,所以打印的结果只有1. continue例子如下图,当遇 ...
- 初识python： os 模块
偷下懒,直接看代码吧: #!/user/bin env python # author:Simple-Sir # time:2019/8/21 16:38 # os 模块 import os # os ...
- python 之 pip、pypdf2 安装与卸载
pip是个啥? pip 是一个现代的,通用的 Python 包管理工具.提供了对 Python 包的查找.下载.安装.卸载的功能. 第一步:pip 下载:https://pypi.org/projec ...
- Django_视图中的request对象详解（八）
本文参考:http://www.cnblogs.com/MnCu8261/p/5871085.html Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并 ...
- 使用Eclipse新建项目
如果图片损坏,点击查看: https://www.toutiao.com/i6496078011538866702/ 出现"新建"对话框,输入mavem 点击创建"简单M ...