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

感受尽在代码中，布局真的脑壳疼，仅仅只整理了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. windows中修改IP映射的位置

    windows中修改IP映射的位置 置顶 2018年08月05日 14:42:44 wangxiaolong0 阅读数:1473   在安装linux之后,发现windows不能通过映射来访问linu ...

  2. leetcode算法笔记：二叉树，动态规划和回溯法

    在二叉树中增加一行 题目描述 给定一个二叉树,根节点为第1层,深度为 1.在其第 d 层追加一行值为 v 的节点. 添加规则:给定一个深度值 d (正整数),针对深度为 d-1 层的每一非空节点 N, ...

  3. 并发编程-深入浅出AQS

    AQS是并发编程中非常重要的概念,它是juc包下的许多并发工具类,如CountdownLatch,CyclicBarrier,Semaphore 和锁, 如ReentrantLock, ReaderW ...

  4. logback日志回顾整理--2018年8月8日

    几年前使用过logback作为项目的日志框架. 当时觉得这个框架比log4j更加好用. 所以系统的学习了一遍. 后来换了公司, 不再使用logback. 如今, 又有机会使用logback了, 所以, ...

  5. WordPress 添加title中的logo

    WordPress 添加title中的logo <!--网页标题左侧显示--> <link rel="icon" href="/favicon.png& ...

  6. hdu 5495 LCS (置换群)

    Sample Input231 2 33 2 161 5 3 2 6 43 6 2 4 5 1  Sample Output24 C/C++: #include <map> #includ ...

  7. 百度全景地图使用时提示flash版本过低 如何处理？

    从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效.关闭Enable Ephemeral Flash Permissions ,才能看到 “Add”按钮.解决方 ...

  8. Running serveral https server on a single IP address

    Nginx 在一个IP上配置多个https server时,默认只会发送默认server name的证书.这是由ssl 协议本身行为导致的:先建立ssl connection,后发送http请求.即n ...

  9. SCAU-1144 数星星-HDU-1166-树状数组的应用

    本文借鉴代码提供:https://www.cnblogs.com/geek1116/p/5566709.html树状数组详解:https://www.cnblogs.com/xenny/p/97396 ...

  10. PostGIS 安装教程（Linux）（二）

    ##接上篇,上篇讲述了Postgresql的安装,此篇介绍postgis的安装 ##附上上篇链接:https://www.cnblogs.com/giser-s/p/11195419.html 二.安 ...