今天完成的事情：任务六完成提交了。修改了一些细节 例如颜色  边距  宽度 位置。

明天计划的事情：接了任务七，看一下任务7的 任务要求，以及需要的一些东西。CSS先学会样式，大概搭一个框架。在慢慢填东西，记好笔记。

遇到的问题和收获：因为自己修改了电脑浏览器字号大小的问题，导致自己做出来的任务，在别人的电脑上都崩掉了。需要从新设置font-size。

属性编写顺序

- 显示属性：display/list-style/position/float/clear …
- 自身属性（盒模型）：width/height/margin/padding/border
- 背景：background
- 行高：line-height
-
文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
- 其他：cursor/z-index/zoom/overflow
- CSS3属性：transform/transition/animation/box-shadow/border-radius
- 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- /
std的顺序进行添加，标准属性写在最后。
- 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active

任务六总结：

自己的脑图：

任务总结：

1.向下三角行的制作。

sjx {

height: 0; width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;

}

2.下拉框的的制作和hover效果。

.dropdown-content {

display: none;

position: absolute;

top: .41rem;

width: 100%;

padding: 0;

background-color: #f9f9f9;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

3.如果屏幕过窄时，设置左边的文字被截断出现”…”省略号

需要设置  overflow:hidden; 内容会被修剪，并且其余内容是不可见的。

 ellipsis： 当对象内文本溢出时显示省略标记（...）

white-space:nowrap; 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

4，雪碧图 css sprites

CSS雪碧图即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。