任务目的

  • 深入掌握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. JAVA Web从前端到后台常用框架介绍

    原博客:https://blog.csdn.net/u013142781/article/details/50922010 一.SpringMVC http://blog.csdn.net/evank ...

  2. Qt 学习之路 2（44）：QFileSystemModel

    Home / Qt 学习之路 2 / Qt 学习之路 2(44):QFileSystemModel Qt 学习之路 2(44):QFileSystemModel  豆子  2013年2月21日  Qt ...

  3. tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册

    tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册 引言 #在数据库,所谓表关系,只是人为认为的添加上去的表与表之间的关系,只是逻辑上认为的关系,实际上数据库里面的表之间 ...

  4. 小a与“204”------数列、排序

    链接:https://ac.nowcoder.com/acm/contest/317/B来源:牛客网 小a非常喜欢204204这个数字,因为′a′+′k′=204′a′+′k′=204. 现在他有一个 ...

  5. rabbitmq 事务消息

    事务消息主要用在发送方 在connection上加上事务属性, 发送方感知到本地事务执行失败, 需要通知broker将先前已经接收到的消息rollback,不要发给后面的消费者, 满足强一致性的要求 ...

  6. TCP/IP协议分为哪四层，具体作用是什么。

    TCP/IP通讯协议采用了4层的层级结构,每一层都呼叫它的下一层所提供的网络来完成自己的需求.这4层分别为: 应用层:应用程序间沟通的层,如简单电子邮件传输(SMTP).文件传输协议(FTP).网络远 ...

  7. 转帖 JS的基础语法

    1.变量 1)变量是用来存储信息的容器. 2)在javascript中使用var 运算符(variable 的缩写)加变量名定义的. varx = 10; vary = 10.1; varz = “H ...

  8. (转) Linux Shell经典实例解析

    原文:http://blog.csdn.net/yonggeit/article/details/72779955 该篇博客作为对之前Linux Shell常用技巧和高级技巧系列博客的总结,将以Ora ...

  9. PV和UV代表什么（转）

    PV(page view),即页面浏览量,或点击量;通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标.  高手对pv的解释是,一个访问者在24小时(0点到24点)内到底看了你网站几个页面.这 ...

  10. 2.3 js基础--DOM

    一.javascript组成         ECMAScript:核心解释器[为我们提供好了最基本的功能:变量声明.函数.语法.运算].   兼容性:完全兼容.           DoM:文档对象 ...