div+css登陆界面案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
margin: 0px;
padding:0px;
font-size:12px;
background-color: #1873aa;
text-align: center;
overflow: hidden;
}
#style1{
background-image: url(images/left1.gif);
width:165px;
height: 28px; color: #FFFFFF;
padding-top: 1px;
}
#style1 div{
margin-top:7px;
margin-left: -15px;
}
#container{
width:165px;
height: 500px;
background-color: #FFFFFF;
margin-left: 7px;
}
.style211{
background-image: url(images/left2.gif);
width: 152px;
height: 23px;
margin-left: 9px;
padding-top: 1px; }
.style211 div{
margin-top: 2px;
color: #FFFFFF;
margin-left: -25px; }
.style211 div a{
text-decoration: none;
color: #FFFFFF;
font-size: 13px; }
.style212{
border: 1px solid #95d6e4;
height: 120px;
width: 151px;
color: #033d61;
text-align: left;
font-size:15px;
margin-left: 7px;
}
.style212 li{
padding: 3px;
margin-left: -5px;
}
.style212 ul li a{
text-decoration: none;
color: #033d61;
}
.style212 ul li a:hover{
text-decoration: underline;
font-size: 16px;
}
</style>
<script type="text/javascript">
function hiddenDiv(div){
div.style.display=(div.style.display == 'none'?'block':'none');
}
</script>
</head>
<body>
<div id="container">
<div id="style1">
<div>管理菜单</div>
</div> <div id="style2">
<div class="style21">
<div class="style211">
<div><a href="javascript:void(0)" onclick="hiddenDiv(document.getElementById('style212'))">业务中心</a></div>
</div>
<div class ="style212" id="style212">
<ul>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
</ul>
</div>
</div>
<div class="style21">
<div class="style211">
<div><a href="javascript:void(0)" onclick="hiddenDiv(document.getElementById('style213'))">业务中心</a></div>
</div>
<div class ="style212" id="style213">
<ul>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
</ul>
</div>
</div> <div class="style21">
<div class="style211">
<div><a href="javascript:void(0)" onclick="hiddenDiv(document.getElementById('style214'))">业务中心</a></div>
</div>
<div class ="style212" id="style214">
<ul>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
<li><a href="">短信群发</a></li>
</ul>
</div>
</div>
</div>
</div> </body>
</html>
div+css登陆界面案例的更多相关文章
- div+css登陆界面案例2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- 登陆界面背景动画的css样式
为了达到更好的用户体验,登陆界面需要设计多张背景图进行动态切换 <!doctype html> <html lang="en"> <head> ...
- 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
- 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色
1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...
- HTML+CSS小实战案例
HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
- HTML写的第一个邮箱登陆界面
自己动手去写才会有收获,宁可模仿也不要全部复制粘贴 不说了,直接上代码.CSS有注释,适合新手. <!doctype html> <html> <head> < ...
- 一步一步实现web程序信息管理系统之一----登陆界面实现
一步一步实现web程序信息管理系统 在web程序中特别是信息管理系统,登陆功能必须有而且特别重要.每一个学习程序开发或以后工作中,都会遇到实现登陆功能的需求.而登陆功能最终提供给客户或展现给客户的最基 ...
- [终极巨坑]golang+vue开发日记【二】，登陆界面制作（一）
写在前面 本期内容是适合第一次使用vue或者golang开发的,内容会以实战的形式来讲解.看懂本段内容需要了解基础内容有html,css,最好可以看一下vue的基础.并且这里的每个知识点不可能详细解说 ...
随机推荐
- EL表达式隐含对象
EL表达式语言中定义了11个隐含对象,使用这些隐含对象可以很方便地获取web开发中的一些常见对象,并读取这些对象的数据. 语法:${隐式对象名称} :获得对象的引用 <%@ page lang ...
- 联系电话正则表达式（jquery表单验证）
一.实现的效果图: 二.CSS样式 /*验证样式*/ .onError{ vertical-align: middle; color: #ff0000; line-height: 22px; padd ...
- Centos中安装PHP的PDO MySQL扩展的教程
PHP Data Objects(PDO)扩展为 PHP 访问数据库定义了一个轻量级的一致接口.实现 PDO 接口的每个数据库驱动可以公开具体数据库的特性作为标准扩展功能.注意利用 PDO 扩展自身并 ...
- DOS删除服务
启动服务: net start 服务名 停止服务: net stop 服务名 卸载服务: 服务名 -uninstall 安装服务:sc create ser ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- Mybatis-Generator插件自动生成Dao、Model、Mapping相关文件
最近做项目,mapping 有点多而且容易写错,于是试着用了Mybatis-Generator 插件自动生成 dao, domain mapping 文件.感觉还挺好用.把相关配置分享,一边以后做项 ...
- sql临时表和表变量
1. 为什么要使用表变量 表变量是从2000开始引入的,微软认为与本地临时表相比,表变量具有如下优点: a.与其他变量的定义一样,表变量具有良好的定义范围,并会被自动清除: b.在存储过程中使用表 ...
- 转：Java HashMap实现详解
Java HashMap实现详解 转:http://beyond99.blog.51cto.com/1469451/429789 1. HashMap概述: HashMap是基于哈希表的M ...
- linux 关机方式
linux 关机命令: 1- init 0 关机. 具体详情接受可以 init --help 查询 如下: init [OPTIONS...] {COMMAND} Send control comm ...
- [转]AIX下调整分区大小
AIX下调整文件系统大小 - [work] 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://wangsuiri.blogbus.com/logs/35448074.htm ...