学习了一天，然后整理内容到现在，感觉昨天的学习效率有点差，哎！

感受尽在代码中，布局真的脑壳疼，仅仅只整理了CSS中的list：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>折叠菜单</title>

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

    </head>

    <body>

        <ul id="main">

            <li id="part1">

                <a href="#">菜单一</a>

                <ul class="menuPart">

                    <li>菜单一11</li>

                    <li>菜单一22</li>

                    <li>菜单一33</li>

                    <li>菜单一44</li>

                </ul>

            </li>

            <li id="part2">

                <a href="#">菜单二</a>

                <ul class="menuPart">

                    <li>菜单二11</li>

                    <li>菜单二22</li>

                    <li>菜单二33</li>

                    <li>菜单二44</li>

                </ul>

            </li>

            <li id="part3">

                <a href="#">菜单三</a>

                <ul class="menuPart">

                    <li>菜单三11</li>

                    <li>菜单三22</li>

                    <li>菜单三33</li>

                    <li>菜单三44</li>

                </ul>

            </li>

            <li id="part4">

                <a href="#">菜单四</a>

                <ul class="menuPart">

                    <li>菜单四11</li>

                    <li>菜单四22</li>

                    <li>菜单四33</li>

                    <li>菜单四44</li>

                </ul>

            </li>

        </ul>

    </body>

</html>
/**{

    padding: 0;

    margin: 0;

}*/

a{

    text-decoration: none;

    font-size: 20px;

    width: 30px;

    height: 200px;

    color: blue;

    float: left;

/*    background-color: burlywood;*/

}

#main{

    list-style: none;

    height: 400px;          /*只设置height,width默认最大,不能只设置width而不设置heigth*/

    width: 400px;

}

#main>li{

    float: left;

    margin: 20px 0 20px 0;     /*不能有左右参数,否则滑动切换不顺畅*/

/*    background-color: red;*/

}

#main ul{

    display: none;

    /*width: 30px;*/       /*ul的框架默认子类li的总体大小*/

    font-size: 20px;

    /*width: 26px;*/       /*只需要设置padding就行了*/

    float: left;

    padding: 20px 20px 0 5px;

    margin: 0 5px 0 0;

/*    background-color: bisque;*/

}

#main ul>li{

    list-style: none;

    width: 26px;

    /*height: 80px;*/      /*不设置height默认装满content(信息,写的字为止)*/

    /*padding: 3px*/

    margin: 5px 5px 5px 5px;

    background-color: #7FFFD4;

}

#main>li:hover ul{

    display: block;

}

第二幅图是网上找到的，第一幅图mspaint自己整理的，加油，我的Web学习之旅！

HTML5学习第二天！的更多相关文章

  1. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  2. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  3. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  4. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  5. HTML5学习参考资料整理

    给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...

  6. Html5 学习系列（四）文件操作API

    原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...

  7. Html5学习导航

    给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持我们,让我们利用大家的力量收集更多的HTML5学习资料, ...

  8. Html5学习系列

    Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.26 ...

  9. HTML5学习第四天

    HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...

随机推荐

  1. python经典算法面试题1.5：如何找出单链表中的倒数第K个元素

    本题目摘自<Python程序员面试算法宝典>,我会每天做一道这本书上的题目,并分享出来,统一放在我博客内,收集在一个分类中. [微软笔试题] 难度系数:⭐⭐⭐ 考察频率:⭐⭐⭐⭐⭐ 题目描 ...

  2. jquery 用creatjs preloadjs的方法

    jquery 用creatjs preloadjs的方法<pre><!DOCTYPE html><html lang="en"><head ...

  3. Jquery才可以使用 this 指定当前DOM

    Jquery才可以使用 this 指定当前DOM jquery获取并设置它的元素 <div class="shop-item" style="line-height ...

  4. hdu 1509 Windows Message Queue (优先队列)

    Windows Message QueueTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  5. nyoj 78-圈水池 (凸包)

    78-圈水池 内存限制:64MB 时间限制:3000ms 特判: No 通过数:5 提交数:6 难度:4 题目描述: 有一个牧场,牧场上有很多个供水装置,现在牧场的主人想要用篱笆把这些供水装置圈起来, ...

  6. 在代码生成工具Database2Sharp中使用ODP.NET（Oracle.ManagedDataAccess.dll）访问Oracle数据库，实现免安装Oracle客户端，兼容32位64位Oracle驱动

    由于我们开发的辅助工具Database2Sharp需要支持多种数据库,虽然我们一般使用SQLServer来开发应用较多,但是Oracle等其他数据库也是常用的数据库之一,因此也是支持使用Oracle等 ...

  7. sql注入基本原理

    SQL注入基本原理 WEB技术发展日新月异,但是徒手拼SQL的传统手艺还是受相当多的开发者亲睐.毕竟相比于再去学习一套复杂的ORM规则,手拼更说方便,直观.通常自己拼SQL的人,应该是有听说过SQL注 ...

  8. android 网络异步加载数据进度条

    ProgressDialog progressDialog = null; public static final int MESSAGETYPE = 0; private void execute( ...

  9. nginx（二）：基本应用

    配置文件详解 event段配置 worker_connections #; 每个worker进程所能够响应的最大并发请求数量: nginx最大并发响应数=worker_proceses * worke ...

  10. scrapy抓取中国新闻网新闻

    目标说明 利用scrapy抓取中新网新闻,关于自然灾害滑坡的全部国内新闻:要求主题为滑坡类新闻,包含灾害造成的经济损失等相关内容,并结合textrank算法,得到每篇新闻的关键词,便于后续文本挖掘分析 ...