任务六:通过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.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
随机推荐
- php 缓冲函数
php.ini中有两个关键参数会影响到php的缓存输出控制: output_buffering :on/off 或者整数 .设置为 on 时,将在所有脚本中使用输出缓存控制,不限制缓存的大小.而设置为 ...
- C++_新特性总结与未来的路
了解C++之后,可以阅读一些高级主题和面向对象编程相关的书籍: OOP有助于开发大型的项目,并提高其可靠性: OOP方法的基本活动之一就是发明能够模拟当前情况的类.当前情况被统称为问题域. 由于实际问 ...
- LeetCode记录之7——Reverse Integer
Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 Note:The ...
- HDU - 4699 对顶栈
Get到了全新O(1)替代部分伸展树功能的姿势 左栈stk1维护当前信息,右栈stk2维护历史删除信息 题目求的是严格的前缀和(且小于当前指针)那就每次左栈新增时再更新前缀和信息就好 即使把题面换成最 ...
- UESTC - 621
f[n]:sigma(i,n),i<n g[n]:sigmaf[i],i<=n #include<bits/stdc++.h> using namespace std; con ...
- [转] Scala 2.10.0 新特性之字符串插值
[From] https://unmi.cc/scala-2-10-0-feature-string-interpolation/ Scala 2.10.0 新特性之字符串插值 2013-01-20 ...
- poj1002 字典树+map+查询单词出现次数
487-3279 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 309235 Accepted: 55223 Descr ...
- es6 Null 传导运算符
Null 传导运算符 程实务中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在.比如,要读取message.body.user.firstName,安全的写法是写成下面这样. const ...
- Maven---pom.xml 详解(转)
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- shell 函数与内置变量
1,特殊shell变量 $# 传递到脚本的参数个数 $* 以一个单字符串显示所有向脚本传递的参数 $$ 脚本运行的当前进程ID号 $! 后台运行的最后一个进程的ID号 $@ 与$*相同,但是使用时加引 ...