文档章节

css笔记06

zhchl2010
 zhchl2010
发布于 2014/11/26 21:03
字数 602
阅读 5
收藏 0
11 menu
<html>
    <head>
        <title>menu菜单</title>
        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
                font-size:12px;
            }
            #meun_bar{
                position:absolute;
                left:50px;
                top:50px;
                /* border:1px solid red;
                width:500px;
                height:500px; */
            }
            .menu{
                float:left;
                width:120px;
            }
            dl.menu dt,dl.menu dd{
                height:30px;
                background:#339;
                color:#fff;
                border-right:1px solid #fff;
                text-align:center;
            }
            dl.menu dt span{
                position:relative;
                top:10px;
            }
            dl.menu dd{
                background:#911;
                color:#fff;
                border-bottom:1px solid #fff;
                display:none;
            }
            dl.menu dd a{
                position:relative;
                top:5px;
            }
            a.menu_href:link,a.menu_href:visited{
                text-decoration:none;
                color:#fff;
            }
            dl.menu dd:hover {
                background:#393;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <div id="menu_bar">
            <dl class="menu">
                <dt><span>文件管理</span></dt>
                <dd><a href="" class="menu_href" class="menu_href">打开文件</a></dd>
                <dd><a href="" class="menu_href" class="menu_href">删除文件</a></dd>
                <dd><a href="" class="menu_href" class="menu_href">保存文件</a></dd>
                <dd><a href="" class="menu_href">关闭文件</a></dd>
                <dd><a href="" class="menu_href">退出</a></dd>
            </dl>
            <dl class="menu">
                <dt><span>编辑</span></dt>
                <dd><a href="" class="menu_href">重复操作</a></dd>
                <dd><a href="" class="menu_href">撤销操作</a></dd>
                <dd><a href="" class="menu_href">拷贝</a></dd>
                <dd><a href="" class="menu_href">粘贴</a></dd>
            </dl>
            <dl class="menu">
                <dt><span>视图</span></dt>
                <dd><a href="" class="menu_href">打印视图</a></dd>
                <dd><a href="" class="menu_href">浏览视图</a></dd>
                <dd><a href="" class="menu_href">开发视图</a></dd>
            </dl>
            <dl class="menu">
                <dt><span>窗口</span></dt>
                <dd><a href="" class="menu_href">上一个</a></dd>
                <dd><a href="" class="menu_href">下一个</a></dd>
                <dd><a href="" class="menu_href">显示</a></dd>
            </dl>
        </div>
    </body>
</html>

12 table 实现menu
<html>
    <head>
        <title>menu菜单</title>
        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
                font-size:12px;
            }
            body{
                padding:50px;
            }
            table.ct{
                /* border:1px solid #000; */
                border-left:1px solid #000;
                border-bottom:1px solid #000;
            }
            table.ct td{
                border-right:1px solid #000;
                border-top:1px solid #000;
                height:30px;
                text-align:center;
            }
            table.ct thead{
                background:#711;
                color:#fff;
            }
            tr.odd_ct{
                background:#ccc;
            }
        </style>
    </head>
    <body>
        <table width="900" cellpadding="0" cellspacing="0" class="ct">
            <thead>
                <tr>
                <td>用户标示</td>
                <td>用户姓名</td>
                <td>用户年龄</td>
                <td>用户性别</td>
                <td>用户代码</td>
                <td>用户操作</td>
            </tr>
            </thead>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td>001</td>
                <td>添加 删除</td>
            </tr>
            <tr class="odd_ct">
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td>001</td>
                <td>添加 删除</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td>001</td>
                <td>添加 删除</td>
            </tr>
            <tr class="odd_ct">
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td>001</td>
                <td>添加 删除</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td>001</td>
                <td>添加 删除</td>
            </tr>
            <tr class="odd_ct">
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td>001</td>
                <td>添加 删除</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td>001</td>
                <td>添加 删除</td>
            </tr>
        </table>
    </body>
</html>


© 著作权归作者所有

上一篇: css笔记07
下一篇: css笔记05
zhchl2010
粉丝 3
博文 80
码字总数 77710
作品 0
成都
程序员
私信 提问
Sass 入门篇 —— 学习笔记(二)

一、Sass 的基本特性 - 基础 变量 声明变量 Sass 的变量包括三个部分: 如: 普通变量与默认变量 body { font-weight: $fontWeight; } body { font-weight: $fontWeight; } 覆盖默认变量只需...

JikungJam
2018/10/26
0
0
【深入浅出Node.js系列十二】Nodejs日志管理log4js

深入浅出Node.js系列 【深入浅出Node.js系列一】什么是Node.js 【深入浅出Node.js系列二】Node.js&NPM的安装与配置 【深入浅出Node.js系列三】深入Node.js的模块机制 【深入浅出Node.js系列四...

陶邦仁
2016/01/19
254
0
Golang学习笔记目录

Golang 介绍 Go语言是谷歌2009发布的第二款开源编程语言。 Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全、支持并行进程。...

ChainZhang
2017/12/26
0
0
MySQL 5.7 重置 root 密码

MySQL 5.7 重置 root 密码 码蜂笔记2017-09-0613 阅读 数据库MySQL 以安全模式启动,这样登录不需要密码: 用 root 用户登录 更新密码、刷新权限: 退出安全模式,重新启动 MySQL 。 点赞 数...

码蜂笔记
2017/09/06
0
0
前端的学习

html笔记; 技术点关键词: DOM 标签元素 标签类型 节点 样式 属性 不同浏览器支持的差异性(很小一部分) 框架布局 弹窗 浮动 js笔记; 技术点关键词: 变量 方法 参数 对象 触发和调用 异步数据交...

noteman
2015/12/14
98
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
今天
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
8
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
9
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
7
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部