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

感受尽在代码中，布局真的脑壳疼，仅仅只整理了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. java操作RabbitMQ添加队列、消费队列和三个交换机

    假设已经在服务器上安装完RabbitMQ.我写的教程 一.发送消息到队列(生产者) 新建一个maven项目,在pom.xml文件加入以下依赖 <dependencies> <depe ...

  2. shell配置文件

    个人配置主要集中在-/.profile文件中 打开新的交互式shell时,配置文件的执行顺序是/etc/profile  /etc/bashrc  ~/.profile   最后是~/.bashrc ...

  3. android逆向总结

    首先项目里的java文件,以及项目引用到的第三方jar或aar包里面的class,统统都编译成classes.dex放在apk包的根目录,项目的资源目录和AndroidManifest.xml被处理生 ...

  4. Redux第一节

    安装脚手架 npm i -g create-react-app 创建一个Dom create-react-app demo01 安装 Ant Design npm i antd --save 安装re ...

  5. Alibaba Nacos 学习（一）：Nacos介绍与安装

    Alibaba Nacos 学习(一):Nacos介绍与安装 Alibaba Nacos 学习(二):Spring Cloud Nacos Config Alibaba Nacos 学习(三):Spr ...

  6. Flex带Checkbox的Tree

    想把Flex自带的Tree控件改成带有checkbox的样式. 原本以为同DataGrid一样,添加一个ItemRenderer就行,结果发现行不通. 进Tree控件的源码看了一下,发现Tree在自己 ...

  7. Fabric1.4源码解析：Peer节点启动过程

    看一下Peer节点的启动过程,通常在Fabric网络中,Peer节点的启动方式有两种,通过Docker容器启动,或者是通过执行命令直接启动. 一般情况下,我们都是执行docker-compose -f ...

  8. React源码 React.Children

    children是什么意思呢?就是我们拿到组件内部的props的时候,有props.children这么一个属性,大部分情况下,我们直接把 props.children 渲染到 JSX 里面就可以了. ...

  9. JVM学习笔记（1）--运行时数据区域

    运行时数据区域 相对于c,c++.程序设计时,java并不需要手动释放或者创建内存用于存放程序,这的确使得java开发变得容易和轻松,一旦有一天出现了内存泄漏或者内存溢出的问题,如果不了解JVM虚拟机 ...

  10. 使用laravel快速构建vuepress管理器

    使用laravel快速构建vuepress管理器 介绍 刚刚学了下laravel感觉很方便,最近也在用vuepress做个人博客,但是感觉每次写文章管理文章不是特别方便,就使用laravel写了这个v ...