发表于： 2018-11-21 21:25:16
2 803
今天完成的事情：
1、用absolute完成了上半部分背景图的实际操作。
html代码如下：
这里我用了两个div之间的嵌套，用class分开写样式，第一个盒子的类名backdrop是父级元素，我设置background背景图的size和url路径的生成，再对其设置相对定位relative，然后img和span等子元素以父元素为绝对定位。
然后第二个盒子类名box，用<span>包含文字，把img和span包裹在box里，这里box也是父级元素，同样给它设置相对定位，子元素绝对定位。
css代码如下：
运用了绝对定位，就不需要通过margin来调节间距，可以直接用上下左右的值来达到img的位置效果。
2、了解了background-image、size和repeat三个常用属性。
background标签定义：背景缩写属性可以在一个声明中设置所有的背景属性。可以设置下面的属性：
inherit：从父元素继承background-image属性的设置。
（2）background-repeat 设置如何平铺对象的 background-image的方向，垂直或水平方向。
值：
no repeat： background-image不会重复。
（3）background-size：属性指定背景图片大小。
3、了解了无序列表<ul>标签和<li>标签。
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签。
ul标签定义：设置列表样式类型为没有删除列表项标记，设置填充和边距0px（浏览器兼容性）。
li标签定义：<li> 标签定义列表项目。
<li> 标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。
明天的计划：
继续完成任务五，囧以为今天能完成的，高估我自己了，跟absolute今天杠上了。
遇到的问题：
1、对div的嵌套有点没弄清楚，对什么时候该设相对定位，什么时候该用绝对定位，有点晕。然后在后面通过调试总算是理解清楚了。
收获：
1、用div嵌套div完成了背景图和图片文字的设置。
2、对position中的absolute绝对定位有了进一步的了解，知道该怎么设置父级元素，来达到绝对定位的效果。
返回列表
评论