任务目的

  • 深入掌握CSS中的字体、背景、颜色等属性的设置
  • 进一步练习CSS布局

任务描述

任务注意事项

  • 只需要完成HTML，CSS代码编写，不需要写JavaScript
  • 设计稿中的图片、文案均可自行设定
  • 在Chrome中完美实现符合标注中的各项说明
  • 有能力的同学可以尝试跨浏览器的兼容性
  • 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

任务完成及总结

这次任务只能说是切图仔入门，不得不说，真的是好繁琐，还有最好别全看标注图，头会晕。

问题1：没搞清楚盒子宽度=内容宽度+内边距宽度+外边距宽度+边框宽度，在这个地方纠结了一会儿。

问题2：三角形图标实现方法忘了

 小demo地址:

https://cruxf.github.io/BaiduTask/test6.html

任务六：通过HTML及CSS模拟报纸排版的更多相关文章

  1. 通过HTML及CSS模拟报纸排版总结

    任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...

  2. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  3. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  4. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  5. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  6. css模拟时钟

    css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appe ...

  7. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  8. 问题：table 可否实现对角线；结果：用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  9. HTML CSS + DIV实现排版布局

    HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...

随机推荐

  1. P2762 太空飞行计划问题

    传送门 经典的最大权闭合子图问题 实验有正的价值,仪器的价值为负 为了实验我们必须选择相应的仪器 所以从 S 连向实验,边权为实验的价值 实验与相应仪器之间连边,边权为 INF 仪器连向 T 边权为仪 ...

  2. BZOJ - 2157 树链剖分+线段树

    /*H E A D*/ int from[maxn<<1],to[maxn<<1],nxt[maxn<<1],cost[maxn<<1],head[ma ...

  3. jQuery序列化表单 serialize() serializeArray()

    1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 格式:var data = $(form).serialize(); 2.serializeArray()方法 描述: ...

  4. Hibernate 4 Second Level Caching With EHCache

    Hibernate 4 Second Level Caching With EHCache [From] http://www.codesenior.com/en/tutorial/Hibernate ...

  5. Linux中断分层--软中断和tasklet

    1. Linux中断分层 (1)上半部:当中断发生时,它进行相应的硬件读写,并“登记”该中断.通常由中断处理程序充当上半部.(一般情况下,上半部不可被打断) (2)下半部:在系统空闲的时候,对上半部“ ...

  6. linux 输出 之 nl 命令

    1．命令格式:nl [选项]... [文件]... 2．命令参数: -b  :指定行号指定的方式,主要有两种: -b a :表示不论是否为空行,也同样列出行号(类似 cat -n): -b t :如果 ...

  7. (转)Linux磁盘空间监控告警 && Linux磁盘管理

    Linux磁盘空间监控告警 http://blog.csdn.net/github_39069288/article/details/73478784-----------Linux磁盘管理 原文:h ...

  8. ElasticSearch 2.1.1学习及总结

    Install & Up cd elasticsearch-2.1.1/bin ./elasticsearch ./elasticsearch --cluster.name my_cluste ...

  9. [Scala] Pattern Matching(模式匹配)

    Scala中的match, 比起以往使用的switch-case有著更強大的功能, 1. 傳統方法 def toYesOrNo(choice: Int): String = choice match ...

  10. NetCDF 共享软件 中文

    NetCDF 共享软件   转载 在 Models-3 模式中,使用的数据存取接口称为 I/O API,其实就是 NetCDF 文件格式.而由于我们需要了解 Models-3 输出档案的数据情况,因此 ...