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

感受尽在代码中，布局真的脑壳疼，仅仅只整理了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. WIN7安装Docker Toolbox、制作镜像并发到阿里云

    一.安装Docker Toolbox,并配置国内源加速 WIndows7不支持Hyper-v,所以只能采用Docker Toolbox的方式使用Docker.传送门:http://mirrors.al ...

  2. 防火墙firewalld的基础操作

    防火墙Firewalld.iptables 1.systemctl模式 systemctl status firewalld #查看状态 2 systemctl start firewalld #启动 ...

  3. nyoj 803-A/B Problem

    803-A/B Problem 内存限制:64MB 时间限制:1000ms 特判: No 通过数:2 提交数:4 难度:3 题目描述: 做了A+B Problem,A/B Problem不是什么问题了 ...

  4. 系统信息命令（uname、dmesg、df、hostname、free）

    uname 显示计算机及操作系统相关的信息,uname -a显示全部信息,uname -r内核的发行号,各种信息可以有单独的选项分别指出 [lixn@Fedora24 ~]$ uname -a Lin ...

  5. windows下大数据开发环境搭建（1）——Hadoop环境搭建

    所需环境 jdk 8 Hadoop下载 http://hadoop.apache.org/releases.html 配置环境变量 HADOOP_HOME: C:\hadoop-2.7.7 Path: ...

  6. vscode在终端运行脚本时出现“因为在此系统上禁止运行脚本”

    首先关闭vscode,再以管理员的身份运行vscode,然后打开终端执行: get-ExecutionPolicy,显示的是Restricted,表示状态是禁止的; 再执行:set-Execution ...

  7. ArcGIS Server10.4安装教程

    准备内容 安装环境:win10*64位专业版 安装文件:ArcGIS_Server_Ent_Windows_1041_150998.iso 破解文件:Lic10.4.1.ecp #安装Server前, ...

  8. 微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法

    因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了.我的处理办法就是在键盘弹起和消失的时候,让页 ...

  9. 【CPLUSOJ】【USACO】【差分约束】排队（layout）

    [题目描述] Robin喜欢将他的奶牛们排成一队.假设他有N头奶牛,编号为1至N.这些奶牛按照编号大小排列,并且由于它们都很想早点吃饭,于是就很可能出现多头奶牛挤在同一位置的情况(也就是说,如果我们认 ...

  10. leetcode 114二叉树转换成链表

    解法一 可以发现展开的顺序其实就是二叉树的先序遍历.算法和 94 题中序遍历的 Morris 算法有些神似,我们需要两步完成这道题. 将左子树插入到右子树的地方 将原来的右子树接到左子树的最右边节点 ...