今天完成的事情：
1、完成了任务中的下半部分和底部footer页脚的设置。
（1）下半部分的制作我运用的是<ul>标签包裹<li>来设置无序列表。然后底部的border边框线显示我用div包含每一个<li>标签，分别用盒子div来隔开。
html代码如下：
<ul>
<div class="box1">
<li class="line"><b>专业技能</b></li>
</div>
<div class="box2">
<li class="line2">
<img class="star" src="images/xing1.png">
<span>住家</span>
<img class="star2" src="images/xing2.png">
<span >不含餐</span></li>
</div>
我做了6个单独的div，分开写css样式，所以用class类名比较多，感觉代码有点繁琐。后来我想了像，也可以用<li>标签来做容器同样是块级元素，下次可以尝试换个写法。
每一个class对应需要的样式；这里我截取div box1的css代码写法如下：
.box1{
border-bottom: 1px solid #e1e5e7;
height:35px;
margin-top: 18px;
padding-left: 15px;
}
.line{
border-left: 2px solid #5fc0cd;
padding-left: 10px;
}
因为是用li标签标示的无序列表，所以前面会显示小圆点，有点多余，我们需要去掉小圆点，这里用下面这个方法可以解决。
（2）在做footer页脚的时候，也是分开来思考，先把每个的轮廓写出来，然后你就清楚接下来该添加什么属性来达到你要的效果。
html代码如下：
<footer>
<button class="liu">留言</button>
<button class="phone">电话联系</button>
</footer>
css样式代码如下：
.liu{
line-height: 40px;
color: #5fc0cd;
width: 42%;
border: 1px solid;
margin-left: 20px;
margin-right: 15px;
border-radius: 5px;
background-color: white;
}
背景颜色，字体颜色，使用border设置边框，还有button元素的line-height行高，一个大体的结构就出来了，还有在宽度上之前用的是px像素值，但是发现在拉伸页面是不能随着网页的宽度来变化，后来就尝试用百分比来调试，发现是可以的。
2、任务五完成的差不多了，就差一点细节需要调试。如：在上拉滚动条的时候header头部信息固定不动。
3、学习了新标签。
（1）ul标签：定义无序列表。（有序列表是有1/2/3这种的）
使用说明： 将 <ul> 标签与 <li> 标签一起使用，创建无序列表。 （2）li标签：定义 列表项目。
（3）button标签：定义一个按钮。
使用说明： 在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
（4）footer标签：定义文档或者文档的一部分区域的页脚。
使用说明：<footer> 元素应该包含它所包含的元素的信息。在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个 <footer> 元素。
（5）在做页脚footer的时候，怎么让border的边角有弧度，查资料发现border-radius（半径）属性进行设置
border-radius属性：定义是一个最多可指定四个 border -*- radius 属性的复合属性。
使用说明： 这个属性允许你为元素添加圆角边框。
明天的计划：
完成任务五的提交审核；回顾自己学习的知识点，然后开始做任务六。
问题：
1、我用margin-top值想把div盒子里<li>标签里的文字挤到中间，后来发现<ul>标签自带margin：14px的值，怎么调height和margin值都不行。
解决方案：给ul设置margin：0，就能解决。
2、<li>标签是块级元素，永远都是新起一行。所以在设置border-left：px solid color；值的时候我是给<span>设置的，给li设在网页上没有作用的，通过给<span>这个行内元素的容器设置border-left来实现左边的边框效果。
3、在把所有的div盒子设置好后，发现用border设的边框线不能延伸到最左边，如下图：
原来是<ul>标签除了自带margin上下：14px值，还自带padding左边：40px值。
解决方案：给ul设置padding值为0。
4、从第二排文字开始要让文字排列在后面，这里我用了padding-left来控制左边的间距，但是div里的border边框并没有跟着移动，只是文字因为padding往右移动了。不知道怎么把border也可以和文字一样右移？
解决方案：给div设置margin-left值就能解决border边框线右移。我在box里设的是padding-left值，当时只是想着让文字右移，再解决border边框右移，其实一个margin值就能解决，让div整个右移。对margin和padding运用的还不熟悉。。
5、最后一个div里，因为字数过多，所以文字就挤出到下一排，怎么能让包裹这一段介绍文字的<span>独占一块？在div里怎么让两个span元素并列一行。
解决方案：用position中的定位属性来解决。给其中一个<span>设置成display：inline-block行内块元素，因为文字比较多的原因，需要给span设宽。因为absolute绝对定位不会脱离文档流，会在文档流中正常左右上下移动，但是relative会脱离文档流，但原来位置还在。
<span>变成行内块元素后会让重新另起新的一行。变成上下的结构。如下图：
给<span>设absolute绝对定位后就在正常的文档流中与另一个span重叠。如图：.png)
。
给<span>设置relative相对定位后就能让行内块元素的<span>与行内元素并列一排。
收获：
1、今天在设置百分比的时候发现，用百分比拉伸页面的时候，不管是设置装文字的容器元素的宽还是设置border的宽时，百分比会随着浏览器的宽度来变化。
2、对absolute和relative的使用还不是很熟练，在我做任务五中遇到的问题都可以用绝对定位来解决。
3、对于学习的知识还需要灵活运用，多写多理解。
返回列表
评论