发表于： 2017-03-10 23:39:03
1 599
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
任务6:护工列表页——一个最常见的移动端页面，需要使用bootstrap
收获什么： 1.解决垂直居中； 2.模拟下拉选框； 3.做出复杂的列表页
基本了解任务6?
初步了解Bootstrap?
Bootstrap一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。
从2.0版本开始，Bootstrap支持响应式网页设计(RWD)。页面布局可以根据显示网页的设备（桌面、平板电脑、手机）来进行动态调整。
从3.0版本开始，Bootstrap将移动设备优先作为设计方针，更加强调了响应式设计。
4.0 alpha版本添加Sass和Flexbox（英语：CSS Flex Box Layout）的支持 。
明天计划的事情：（一定要写非常细致的内容）
继续任务6
了解如何用css模拟下拉框?
查找资料了解什么是CSS Sprite雪碧图?并将用到的小图标制作成雪碧图在之后使用?
遇到的问题：（遇到什么困难，怎么解决的）
布局header，让header紧贴顶部?
布局列表头，让列表头紧贴header?
布局footer，让footer紧贴底部?
布局列表主体部分，高度始终在列表头和footer之间，超出部分自动出现滚动条?
给header添加居中的按钮组，居右的图标按钮?
通过搜索引擎查看如何用css模拟下拉框?
将列表头分做3列，分别模拟3个下拉选框?
给footer添加3个按钮?
制作列表主体，注意垂直居中，怎么实现屏幕过窄时，设置左边的文字被截断出现”…”省略号?
收获：（通过今天的学习，学到了什么知识）
解决垂直居中
基于 Flexbox 的解决垂直居中的最佳解决方案，因为 Flexbox（伸缩盒）（http://w3.org/ TR/css-flexbox）是专门针对这类需求所设计的。
先给这个待居中元素的父元素设置 display:flex，再给这个元素自身设置 margin: auto：
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
使用 Flexbox 时，margin: auto 不仅在水平方向上将元素居中，垂直方向上也是如此。
Flexbox 对于 紧贴底部的页脚问题是完美的选择。 首先，我们需要对 <body> 元素设置 display: flex，因
为它是这三个主要区块的父元素，当父元素获得这个属性之后，就可以对其子元素触发“伸缩盒布局模型”。如果将 flex-flow 设置为 column，子元素还会被水平排放在一行上
怎么实现屏幕过窄时，设置左边的文字被截断出现”…”省略号?
CSS text-overflow文本溢出省略号属性样式实现单行文本溢出显示省略号的写法：
html代码
<p class="title">A20 Banana Pi Development Board Module - Deep Blue</p>
CSS代码
.title{
width: 150px;
height: 25px;
line-height: 25px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
返回列表
评论