发表于： 2018-11-27 23:25:58
1 781
今天完成的事：
一.今天完成了任务八-职位列表.psd图的还原设计。基本页面布局已完成。
二.战略合作伙伴.psd图完成切图，并开始进行页面框架布局.
任务过程中学习的知识：
.Bootstrap:
1. font-size 将全局 设置为 14px， line-height 设置为 1.428。这些属性直接赋予<body> 元素和所有段落元素。另外,<p>（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
2.鼠标悬
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
3.让内容块居中：为任意元素设置 dispiay-block 属性并通过margin属性让其中的内容居中.
4.清除浮动：通过为父元素添加 .clearfix 类可以很容易地清除浮动（ float）。
5.显示或隐藏内容
.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。
.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。
另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。
6.响应式工具：
为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
CSS遮罩层：
原理：
写一个遮罩功能div，宽度高度均为100%，设置背景色，设置透明度，设置z-index 值为倒数第二大，目的为了在倒数第二层，把页面显示的内容给盖住！
创建一个div盒模型 ，
定义css属性：
使用hover伪类标签属性：定义当鼠标悬浮在元素上方时向元素添加样式 并添加遮罩层：
效果图：
明天计划的事：完成任务八.九的静态页面制作。
遇到的问题:栅格系统自动添加了padding和margin 在页面布局的时候设置背景色中间没有空隙，导致页面不能正确还原。
收获：完成第二个页面的布局。学会了使用css遮罩层。
返回列表
评论