每日踩着晨光,走在路上,总是感觉世界平静而温柔。
尽管北京的地铁依然拥挤,人流依然比车更加川流不息,到西二旗下车的人依然是整个列车。却仍然不影响我的脚步。
原来有着明确目标是这样的感觉。
感觉整个人的安静下来,不再浮躁,不再焦虑。路就在那里,只需一步一步前进就好。
真好。
路口转角居然看到有开在寒风里的花。
感觉惊讶极了,这看着很像迎春的小黄花开在这个时间里真的没毛病吗?
今天做了两个粉粉嫩嫩的作业,主题依然是浮动。两个练习花了我六个小时........
写完作业时候,我真的挺想问问:这时间它为什么过的这么快.......
2017年11月16日就剩最后几分钟了,来来来,赶紧上代码上代码,求指点,求吐槽。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <link rel="stylesheet" href="../css/index.css" />
- <!-- 伪代码: 大盒子 section#box 头部区域 herder.head LOGO 内容区域 content 上方区域top-content
- 模块标题 h3.title 列表项ul.li list 左侧区域 lift-list 标题 封面 list-cover img 右侧区域 right-list
- 文字 书名 book 简介 intro 按钮 button 购买 buy 预览 preview 下方区域bottom-content 列表ul.li
- bottom-list 图片 bottom-cover 书名 bottom-book -->
- </head>
- <body>
- <section id="box">
- <header class="head">
- </header>
- <div class="content">
- <div class="top-content">
- <h3 class="title">
- <a href="">
- 本周主打
- </a>
- </h3>
- <ul class="list clearfix">
- <li class="left-list">
- <a href="" class="list-cover">
- <img src="../img/1-1.png" alt="" />
- </a>
- <div class="right-list">
- <div class="book clearfix">
- <a href="">
- 妙用性格
- </a>
- </div>
- <div>
- 讲师:张勤
- </div>
- <div>
- 技术:共12集全
- </div>
- <div>
- 类型:生活
- </div>
- <div class="button">
- <a href="" class="buy">
- <img src="../img/buy.png" alt="" />
- </a>
- <a href="" class="preview">
- <img src="../img/preview.png" alt="" />
- </a>
- </div>
- </div>
- </li>
- <li class="left-list">
- <a href="" class="list-cover">
- <img src="../img/1-1.png" alt="" />
- </a>
- <div class="right-list">
- <div class="book clearfix">
- <a href="">
- 妙用性格
- </a>
- </div>
- <div>
- 讲师:张勤
- </div>
- <div>
- 技术:共12集全
- </div>
- <div>
- 类型:生活
- </div>
- <div class="button">
- <a href="" class="buy">
- <img src="../img/buy.png" alt="" />
- </a>
- <a href="" class="preview">
- <img src="../img/preview.png" alt="" />
- </a>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="bottom-content">
- <ul class="clearfix">
- <li class="bottom-list">
- <a href="">
- <img src="../img/2-1.png" />
- </a>
- <div class="clearfix">
- <a href="" class="bottom-book">
- 未来简史
- </a>
- </div>
- </li>
- <li class="bottom-list">
- <a href="">
- <img src="../img/2-1.png" />
- </a>
- <div class="clearfix">
- <a href="" class="bottom-book">
- 未来简史
- </a>
- </div>
- </li>
- <li class="bottom-list">
- <a href="">
- <img src="../img/2-1.png" />
- </a>
- <div class="clearfix">
- <a href="" class="bottom-book">
- 未来简史
- </a>
- </div>
- </li>
- <li class="bottom-list-noMargin">
- <a href="">
- <img src="../img/2-1.png" />
- </a>
- <div class="clearfix">
- <a href="" class="bottom-book">
- 未来简史
- </a>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </section>
- </body>
- </html>
- body,
- {
- margin: 0;
- }
- ul,
- li {
- margin: 0;
- padding: 0;
- list - style: none;
- }
- a {
- font: 14px "宋体";
- color: #000;
- text - decoration: none;
- line - height: 24px;
- }
- img {
- vertical - align: top;
- border: none;
- }.clearfix: after {
- content: "";
- display: block;
- clear: both;
- }#box {
- width: 680px;
- height: 428px;
- background: #ff80ab;
- padding: 35px 60px 37px 60px;
- }#box.head {
- width: 680px;
- height: 43px;
- background: url(.. / img / logo.png) no - repeat 248px 0px;
- margin - bottom: 37px;
- }#box.content {
- width: 641px;
- height: 354px;
- background: #fff;
- padding - left: 19px;
- padding - right: 20px;
- }#box.content.top - content {
- float: left;
- width: 641px;
- height: 212px;
- border - bottom: 1px solid#fae3bc;
- }
- #box.content.left - list {
- float: left;
- width: 301px;
- height: 131px;
- margin - right: 10px;
- /*background:#A4005B;*/
- }
- #box.content.left - list a {
- float: left;
- font: 16px "宋体";
- color: #e7788d;
- }#box.content.left - list.cover {
- float: left;
- /*margin-right:20px;*/
- }
- #box.content.right - list {
- float: left;
- width: 150px;
- height: 131px;
- }
- #box.top - content.title {
- width: 641px;
- height: 23px;
- background: url(.. / img / huo.png)
- /*#00BFFF*/
- no - repeat 0 0;
- }#box.top - content.title a {
- font: 22px "微软雅黑";
- text - decoration: none;
- color: #000000;
- margin - left: 23px;
- line - height: 23px;
- }
- #box.top - content.right - list {
- float: left;
- line - height: 24px;
- margin - left: 20px;
- }#box.content.left - list.buy {
- float: left;
- margin - top: 6px;
- }#box.content.left - list.preview {
- float: right;
- margin - top: 6px;
- }#box.content.bottom - content {
- float: left;
- width: 641px;
- height: 141px;
- /*background:#fdf6ea;*/
- }#box.content.bottom - content.bottom - list {
- float: left;
- width: 145px;
- height: 121px;
- /*background:#00BFFF;*/
- margin - top: 20px;
- margin - right: 20px;
- }
- #box.content.bottom - content.bottom - book {
- float: left;
- margin - left: 42px;
- margin - top: 5px;
- }#box.content.bottom - content.bottom - list - noMargin {
- float: left;
- width: 145px;
- height: 121px;
- /*background:#00BFFF;*/
- margin - top: 20px;
- margin - right: 0px;
- }
虽说只是作业上的巧合,但是看到未来简史这几个字,我真的想说一下,《未来简史》这本书,真心是本好书。同时并列推荐的还有《人类简史》。
如果谁要是有什么不开心和想不开的心结,真心建议去读一下这两本书。
这两本书不是心灵鸡汤,也不是什么醒世格言。但它是能让你用全新角度思考问题的巨著。
满网络都是心灵鸡汤,喝完就忘。唯独这些经典之作,读一遍,有一遍的收获。看一次,有一次的震惊。
将视线拉长,高度拔升,离开眼前的蝇营狗苟,跟随作者的眼光,在一个全新的角度上去看待这个世界和我们本身,再让自己落到实处去生活,就会真的明白,我们站在这里,有万般不易,若是不够珍惜,真的是极大的损失。但同时,所有的得到与失去,却也无需挂怀,等回头去看,也不过是烟尘一般,轻的无足挂齿。
聊完这个,说第二个。
话说我觉得今天这两个作业都有萌点,除了上面的未来简史,还有下面的一个大萌点,看官们猜猜看是哪一个?
........一张照片上传了半个小时,居然都没有成功。我也是醉了。
还给我见识了一下前端网的404界面,飘着小雨的蓝色背景上,超大的黑体404......
你厉害,害我的预习时间都浪费在这一张图片的问题里了。
我明天就搬家。搬到简书去。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <link rel="stylesheet" href="../css/indext.css" />
- <!-- 伪代码: 模块盒子 section#box 头部区域 header#head logo 内容区域 content 上虚线框 top-border
- 下虚线框 bottom-border 左侧区域 left-content 标题 title 副标题 sub-title 内容区域 左侧图片区域
- big-img 右侧文字区域 word 更多详情 more 右侧区域 right-content 小区域 little-box 列表区域 ul.li
- listfile 子项 list 图片 little-img 名称 neme 分割线 span 标签 tag -->
- </head>
- <body>
- <section id="box">
- <header class="head">
- </header>
- <div class="content">
- <div class="top-border">
- </div>
- <div class="left-content">
- <div class="title">
- <a href="">
- 湄公河行动
- </a>
- </div>
- <div class="sub-title">
- <a href="">
- Operation Mekong
- </a>
- </div>
- <div class="big-img">
- <a href="">
- <img src="../img/1-1.png" />
- </a>
- </div>
- <div class="word">
- <div>
- 上映:2016-09-30
- </div>
- <div>
- 类型:动作犯罪警匪
- </div>
- <div>
- 导演:林超贤
- </div>
- <div>
- 主演:张涵予 彭于晏
- </div>
- <div>
- 地区:中国大陆
- </div>
- <div>
- 影片简介:电影《湄公河行动》改编自2011年发生在湄公河金三角流域的中国 上船遇袭案,当时13...
- <a href class="more">
- 更多详情>>
- </a>
- </div>
- </div>
- </div>
- <div class="right-content">
- <div class="little-box">
- <ul class="listfile clearfix">
- <li class="list">
- <a>
- <img src="../img/2-1.png" />
- </a>
- <div class="name">
- <a href="">
- 琅琊榜
- </a>
- </div>
- <div>
- <a href="">
- - - - - - - - - -
- </a>
- </div>
- <div>
- <a href="">
- [熊出没.奇幻空间]
- </a>
- </div>
- </li>
- <li class="list-noMargin">
- <a>
- <img src="../img/2-2.png" />
- </a>
- <div class="name">
- <a href="">
- 琅琊榜
- </a>
- </div>
- <div>
- <a href="">
- - - - - - - - - -
- </a>
- </div>
- <div>
- <a href="">
- [熊出没.奇幻空间]
- </a>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="bottom-border">
- </div>
- </div>
- </section>
- </body>
- </html>
- body{
- margin:0;
- }
- a{
- font:12px "宋体";
- text-decoration:none;
- color:#000;
- }
- ul,li{
- margin:0;
- padding:0;
- list-style:none;
- }
- .clearfix:after{
- content: "";
- display: block;
- clear: both;
- }
- #box{
- width:710px;
- height:447px;
- background:#ff80ab;
- padding:35px 45px 18px 45px;
- }
- #box .head{
- width:710px;
- height:43px;
- background:/*#00BFFF*/ url(../img/logo.png) no-repeat 263px 0px;
- margin-bottom:18px;
- }
- #box .content{
- width:710px;
- height:377px;
- background:#ffffff;
- }
- #box .content .top-border{
- float:left;
- width:710px;
- height:12px;
- background:url(../img/dian.png);
- margin-top:6px;
- margin-bottom:22px;
- }
- #box .content .left-content{
- float:left;
- width:320px;
- height:302px;
- /*background:#99DFFF;*/
- margin-left:29px;
- }
- #box .content .left-content .title a{
- /*float:left;*/
- font:24px "微软雅黑";
- color:#ff0000;
- line-height:34px;
- }
- #box .content .left-content .sub-title a{
- /*float:left;*/
- font:12px "微软雅黑";
- color:#000;
- line-height:24px;
- /**/
- }
- #box .content .left-content .sub-title{
- margin-bottom:4px;
- }
- #box .content .left-content .big-img{
- float:left;
- }
- #box .content .left-content .word{
- float:left;
- width:139px;
- margin-left:10px;
- font:12px "宋体";
- color:#000;
- line-height:24px;
- }
- #box .content .left-content .word a{
- float:right;
- font:14px "宋体";
- color:#ff0000;
- line-height:24px;
- }
- #box .content .right-content{
- float:right;
- width:300px;
- height:302px;
- background:#fff;
- margin-right:30px;
- margin-bottom:16px;
- }
- #box .content .right-content .little-box{
- float:right;
- width:270px;
- height:220px;
- background:#ff80ab;
- margin-top:52px;
- padding:15px;
- }
- #box .content .right-content .list{
- float:left;
- width:130px
- height:220px;
- /*background:#05B600;*/
- margin-right:10px;
- }
- #box .content .right-content .list-noMargin{
- float:left;
- width:130px;
- height:220px;
- /*background:#05B600;*/
- }
- #box .content .right-content .listfile a{
- float:left;
- font:14px "宋体";
- color:#fff;
- line-height:22px;
- }
- #box .content .right-content .listfile .name{
- float:left;
- margin-left:37px;
- }
- #box .content .bottom-border{
- float:left;
- width:710px;
- height:12px;
- background:url(../img/dian.png);
- margin-bottom:6px;
- }
来源: http://www.qdfuns.com/notes/48012/e39177a3ecb67951dc9941ce074e3c01.html