发表于: 2018-08-14 23:23:54
1 748
今天完成的事情
任务七修改了下,开始做任务八,第一个页面整体框架出来了,样式还有很多问题
明天计划的事情
继续任务八稍微复杂一点的图片就切的有问题
遇到的问题
1.切图技术还有点问题
2.列表项如何排成一列,用了display:inline,小圆点消失了,改成左浮动,样式还是有点问题
3.中间大部分每列对齐感觉挺复杂
4.战略合作企业及优秀学员展示盒子的阴影
收获
1.visibility 属性规定元素是否可见。(即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。)
有四个值visible hiddle collapse inherit
visibility:visible,默认值,元素是可见的
visibility:hiddle元素是不可见的
visibility:collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
visibility:inherit 规定应该从父元素继承 visibility 属性的值
2.display 属性规定元素应该生成的框的类型。
display:none此元素不会被显示。
display:block此元素将显示为块级元素,此元素前后会带有换行符。
display:inline默认。此元素会被显示为内联元素,元素前后没有换行符。
display:list-item此元素会作为列表显示。
<div class="table">
<p class="date">123</p>
<p class="date">456</p>
<p class="date">123</p>
</div>
要让三个段落不显示或显示为内联元素:.date{display:none/inline},给.table设置是不起作用的
3.overflow 属性规定当内容溢出元素框时发生的事情。
值 :visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
4.box-shadow 属性向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 : h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。
.div{
width: 100px;
height: 100px;
background: yellow;
box-shadow: 20px 20px 10px red inset;
}
5.学会了简单运用网格布局
评论