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

感受尽在代码中，布局真的脑壳疼，仅仅只整理了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. Hibernate中关于Query返回查询结果是类名的问题

    query.list返回的是一个装有类的信息的集合,而不装有数据库信息的集合.如下图 运行结果为:   因为得到的集合是类,所以要将list泛型设为那个类,并且将得到的集合进行.get(x).getx ...

  2. 过滤广告（只能发布 [a-zA-z0-9及汉字,;?.]） ，排除其他特殊符号

      /** * 过滤广告(只能发布 [a-zA-z0-9及汉字,;?.]) ,排除其他特殊符号 * Created by 1 on 2015/8/19. */ public class FilterA ...

  3. 创建和销毁对象——用私有构造器或者枚举类型强化Singleton属性

    参考资料:<Effective Java>.<Java核心技术 卷1>.https://www.cnblogs.com/zhaosq/p/10135362.html 基础回顾 ...

  4. .net画二叉树

    代码下载地址: 链接: https://pan.baidu.com/s/1bpHayoJ 密码: k6su 接下来看主要代码 1.先构建二叉树的类 public class Node { public ...

  5. VLAN实验（4）单臂路由

    1.选择1台Router路由器.2台S3700交换机和4台pc机,并根据实验编址完成此拓扑图. 2.对交换机mengyu-S2建立VLAN (1)建立两个VLAN,VLAN10和VLAN20,并添加描 ...

  6. 解放双手，在PC端进行Android真机调试

    scrcpy简介(拼写是scrcpy,非Python爬虫框架Scrapy) 简单地来说,scrcpy就是通过adb调试的方式来将手机屏幕投到电脑上,并可以通过电脑控制您的Android设备.它可以通过 ...

  7. API的描述语言--Swagger

    Swagger是一种Rest API的表示方式. 有时也可以作为Rest API的交互式文档,描述形式化的接口描述,生成客户端和服务端的代码. 一,描述语言:Spec Swagger API Spec ...

  8. 移动端vue项目的图片上传插件

    有一移动端项目,使用的vant-ui.可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能. 于是乎:在https://www.npmjs.com/查找发现找到 vue-upload ...

  9. [ch02-02] 非线性反向传播

    系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 2.2 非线性反向传播 2.2.1 提出问题 在上面的线 ...

  10. 使用Docker搭建maven私服 及常规使用方法

    安装-登录-配置 下载镜像 docker pull sonatype/nexus3 运行 docker run -d -p 9998:8081 --name nexus --restart=alway ...