开发者学堂课程【移动 Web 前端开发：预约区域】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8464
预约区域
在 index.html 文件中写入：
预约
左浮动
//这两个是 bootstrap 里的常用类
现在有273人在排队，累计预约交易成功7571次。什么是预约投标?立即预约
右浮动
微金所企业宣传片
然后将内容拷贝上去。
刷新，仅仅看内容，已经对齐了。
还应该有两个图标：
在 index.css 里定义两个图标：
.wjs_icon_clock: : before{
content: "\e906";
}
.wjs_icon_video: : before{
content: "\e9o5" ;
}
左浮动写入：
右浮动写入：
class=.wjs_book_video>
立即预约链接：
class=“wjs jcon link>立即预约
刷新，图标有了，结构齐全后，在 index.css 中做修饰：
预约区块：
.wjs_book{(}
.wjs_book .wjs_icon_clock{}
.wjs_book .wjs_icon_video{}
.wjs_book .wjs_book_link{}
.wjs_ book .wjs book video{}
这些是需要的选择器，在选择器中写入：
.wjs_book{
padding: 30px 0;
border-bottom: 1px solid #ccc;
.wjs_book > .container{
width: 900px
}
.wjs_book .wjs_icon_clock{
font-size: 24px;
}
.wjs_book .wjs_icon_video{
font-size: 20px;
}
.wjs_book .wjs_book_link{
color: #e92322;
border-bottom: 1px dashed #e92322;
}
.wjs_book .wjs_book_video：hover{
color: #e92322;
}
刷新问题是区块没有对齐，所以让内容版心与上方对齐，在 index.css 里写入：
.wjs_book > .container{
Width：900px；
视频区块在小屏和超小屏中不显示，所以：
在 index.css 里，
在中等屏幕和大屏设备：
@media (min-width: 992px) {
.wjsbook > .containeri
width: 900px;
