发表于: 2017-03-04 23:20:16
3 981
今天完成的事情/收获: 开始着手完成任务9 构思并写了大体布局
今天复习的属性:
1 overflwo属性,赋予一个值:hidden意思是内容会被修剪,但是浏览器不会显示 供查看内容的滚动条(我自己的理解就是有时候给代码的样式会让页面出现意想之 外的布局,但是只要给个样式overflwo:hidden 就会发现页面被修剪的特别端正)
2 box-sizing: border-box;为元素指定任何内边距和边框都将在已设定的宽度和高 度内进行绘制(有时候你向给一个元素的某一条边框设置线框 但是有时候不能用 border直接给样式 这时候用box-sizing:border-box;就没有你设置不了的线!)
3select表单元素 生成下拉列表
<select name="fruit">
<option value="1">苹果</option>
<option value="2">橘子</option>
<option value="3">香蕉</option>
</select
新认知的属性:
1 counter-reset:设置某个选择器出现次数的值 赋值:step;(创建步骤数字计数 器,就是元素会自动添加数字1~)
2 :before选择器和:after选择器 搭配content属性来指定在被选元素的内容前后插 入内容
3:z-index属性设置元素的堆叠顺序(比如说一个图片可以和一段文字重叠 出来 的效果就是背景图上面出现文字)
明天计划的事情:1做完任务10中的表单样式和底部导航栏并做响应式优化
2复习任务10遇到的代码
3认真学习表单元素,比如今天遇到的下拉菜单<select><optin>以及radio属性
4学会改变表单的默认样式,比如 radio等
遇到的问题:之前的表单忘了很多。做出的样式总是差强人意 。流程图我百度了做法 但是里面的有些 样式我还是理解的不够透彻,如下:
.steps { position: relative; margin-bottom: 30px; counter-reset: step; /*创建步骤数字计数器*/}
/*步骤描述*/.steps li { list-style-type: none; font-size: 12px; text-align: center; width: 25%; position: relative; float: left;
}
/*步骤数字*/.steps li:before { display: block; content: counter(step); /*设定计数器内容*/
counter-increment: step; /*计数器值递增*/
width: 32px; height: 32px; background-color: #019875; line-height: 32px; border-radius: 32px; font-size: 16px; color: #fff; text-align: center; font-weight: 700; margin: 0 auto 8px auto;
}
/*连接线*/.steps li ~ li:after { content: ''; width: 100%; height: 2px; background-color: #019875; position: absolute; left: -50%; top: 15px; z-index: -1; /*放置在数字后面*/}
/*将当前/完成步骤之前的数字及连接线变绿*/.steps li.active:before,.steps li.active:after { background-color: #019875;
}
/*将当前/完成步骤之后的数字及连接线变灰*/.steps li.active ~ li:before,.steps li.active ~ li:after { background-color: #777;
}
相应的HTML代码:
<ul class="steps">
<li>投递成功</li>
<li class="active">简历被查看</li>
<li>待沟通</li>
<li>面试</li></ul>
这些属性单个放出来大体意思还能理解。但是揉在一起就有点嚼不烂 。这点希望熟能生巧把!
评论