任务六:通过HTML及CSS模拟报纸排版
任务目的
- 深入掌握CSS中的字体、背景、颜色等属性的设置
- 进一步练习CSS布局
任务描述
- 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致
- 页面中的各字体大小,内外边距等可参看 标注图(点击查看)
- 页面宽度固定(定宽)
任务注意事项
- 只需要完成HTML,CSS代码编写,不需要写JavaScript
- 设计稿中的图片、文案均可自行设定
- 在Chrome中完美实现符合标注中的各项说明
- 有能力的同学可以尝试跨浏览器的兼容性
- 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
任务完成及总结
这次任务只能说是切图仔入门,不得不说,真的是好繁琐,还有最好别全看标注图,头会晕。
问题1:没搞清楚盒子宽度=内容宽度+内边距宽度+外边距宽度+边框宽度,在这个地方纠结了一会儿。
问题2:三角形图标实现方法忘了
小demo地址:
https://cruxf.github.io/BaiduTask/test6.html
任务六:通过HTML及CSS模拟报纸排版的更多相关文章
- 通过HTML及CSS模拟报纸排版总结
任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
- css模拟时钟
css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appe ...
- 巧妙使用div+css模拟表格对角线
首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...
- 问题:table 可否实现对角线;结果:用div+css模拟表格对角线
首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...
- HTML CSS + DIV实现排版布局
HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- P2762 太空飞行计划问题
传送门 经典的最大权闭合子图问题 实验有正的价值,仪器的价值为负 为了实验我们必须选择相应的仪器 所以从 S 连向实验,边权为实验的价值 实验与相应仪器之间连边,边权为 INF 仪器连向 T 边权为仪 ...
- BZOJ - 2157 树链剖分+线段树
/*H E A D*/ int from[maxn<<1],to[maxn<<1],nxt[maxn<<1],cost[maxn<<1],head[ma ...
- jQuery序列化表单 serialize() serializeArray()
1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 格式:var data = $(form).serialize(); 2.serializeArray()方法 描述: ...
- Hibernate 4 Second Level Caching With EHCache
Hibernate 4 Second Level Caching With EHCache [From] http://www.codesenior.com/en/tutorial/Hibernate ...
- Linux中断分层--软中断和tasklet
1. Linux中断分层 (1)上半部:当中断发生时,它进行相应的硬件读写,并“登记”该中断.通常由中断处理程序充当上半部.(一般情况下,上半部不可被打断) (2)下半部:在系统空闲的时候,对上半部“ ...
- linux 输出 之 nl 命令
1.命令格式:nl [选项]... [文件]... 2.命令参数: -b :指定行号指定的方式,主要有两种: -b a :表示不论是否为空行,也同样列出行号(类似 cat -n): -b t :如果 ...
- (转)Linux磁盘空间监控告警 && Linux磁盘管理
Linux磁盘空间监控告警 http://blog.csdn.net/github_39069288/article/details/73478784-----------Linux磁盘管理 原文:h ...
- ElasticSearch 2.1.1学习及总结
Install & Up cd elasticsearch-2.1.1/bin ./elasticsearch ./elasticsearch --cluster.name my_cluste ...
- [Scala] Pattern Matching(模式匹配)
Scala中的match, 比起以往使用的switch-case有著更強大的功能, 1. 傳統方法 def toYesOrNo(choice: Int): String = choice match ...
- NetCDF 共享软件 中文
NetCDF 共享软件 转载 在 Models-3 模式中,使用的数据存取接口称为 I/O API,其实就是 NetCDF 文件格式.而由于我们需要了解 Models-3 输出档案的数据情况,因此 ...