今天完成的事情：
1.完成了任务八的第二张图。
2.对bootstrap菜单栏有所了解
明天的计划：
1.完成任务八
2.对任务八进行修改。
遇到的问题：
1.为什么在用
bootstrap做菜单栏的生活出现了问题。
<!doctype html>
<html>
<head>
<head>
<meta charset = "utf-8"/>
<meta name = "viewport" content = "width-device=width,initial = 1.0"/>
<!--bootstrap.css -->
<link href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>
<!-- bootstrap.js -->
<script src = "js/jquery-1.9.1.js"> </script>
<!-- bootstrap.js -->
<script src = "js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only">展开导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网站标题</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航标题1</a></li>
<li><a href="#">导航标题2</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">下拉菜单1</a></li>
<li class="divider"></li>
<li><a href="#">下拉菜单2</a></li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
收获：
1.完成了任务八的第二张图。
2.对企业布局有了一定的理解
转至元数据结尾
转至元数据起始
任务名称：css6
成果链接：http://www.mengxinhutao.xyz/task6/task6.html
任务耗时：2019-7-3-4-10
官方脑图：
个人导图：
今天完成的事情：
1.对任务五进行了修改。
2.对FLEX布局有了进一步的了解。
3.学习了盒子模型与元素水平
有三个元素水平分别是。block水平，inline-block水平，inline水平，三种元素各有不同的表现。block水平默认情况下，继承父级宽度，铺满整行。多个元素坚直方向排列，可以设置宽 高，坚直方向向上的padding,margin有效。inline元素水平排列，多个inline水平的元素，会在一行里排列，不可以设置宽高，坚直方向上的padding，margin无效。inline-block水平元素，用时具有block水平和inline水平的特点，多个元素水平排列成一行。可以设置宽高，坚直方向上的padding,margin有效。
在实现九宫格效果，必然不能是9个block水平的元素因为block会排成九列，而9个inline水平的元素，只能是inline-block的元素。使用引出第一种九宫格布局。inline-block布局。固定尺寸的九宫格布局。
明天计划的事情：
1.完成任务五。
2.如何使用IconFont？
3.HTML中dl、ul、ol用哪个比较好？
遇到的问题：
1.任务五中，自我介绍不能保持居中。
2.要用CSS制作大于号。
3.底部栏不能排序好
收获：
1.学习了px与%和VW，简述CSS单位
PX,%VW的不同之处
PX:绝对单位，页面按精确像素展示
VW：viewpoint-width，视窗宽度，1VW等于视窗宽度的1%。
VH：viewpoint-height,视窗高度，1vh等于视窗高度的1%。
%：百分比，以父级元素的尺寸为基准，乘以%后得到响应的尺寸。
2、关于浮动
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不管他本身是何种元素。
任务名称：css7
成果链接：http://www.mengxinhutao.xyz/task7/task7.html
任务耗时：2019-10-3-4-13
官方脑图：
个人脑图：
今天完成的事情：
1.对任务六进行了修改。
2.了解了ie盒子和标准盒子的区别。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="box-sizing: border-box;width:100px;height:100px;padding:20px;border:1px solid blue;margin:3px;">IE盒子</div>
<div style="box-sizing:content-box;width:100px;height:100px;padding:20px;border:1px solid blue;margin:3px;">W3c(标准)</div>
</body>
</html>
明天的计划：
1.完成任务六。
2.学会下拉菜单的使用。
遇到的问题：
1.不怎么会调试下拉菜单、
收获：
1.会使用css实现文字过长显示省略号
css实现网页中文字过长截取...
title class应该这样写：
.title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
说明：
1、宽度一定要设置，可以根据实际需求调整。
2、white-space:nowrap是禁止文字折行。
3、text-overflow表示当文本溢出时是否显示省略标记，有两个值：
clip：不显示省略标记（...），而是简单的裁切。
ellipsis：当对象内文本溢出时显示省略标记（...）
4、overflow:hidden表示溢出内容为隐藏。
评论