任务目的

  • 针对设计稿样式进行合理的HTML架构,包括以下但不限于:

    • 掌握常用HTML标签的含义、用法
    • 能够基于设计稿来合理规划HTML文档结构
    • 理解语义化,合理地使用HTML标签来构建页面
  • 掌握基本的CSS编码,包括以下但不限于:
    • 了解CSS的定义、概念、发展简史
    • 掌握CSS选择器的含义和用法
    • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

  • 基于第一个任务“零基础HTML编码”的代码,参考 示例图(点击查看),在步骤一的代码基础上增加CSS样式代码的编写
  • 头部和底部的黑色区域始终是100%宽
  • 页面右侧部分为固定宽度,左侧保持与浏览器窗口变化同步自适应变化
  • 左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化
  • 10张图片需要永远都完整展现,所以会随着宽度变窄,从两行变成三行甚至更多,也有可能随着宽度变宽,变成一行

任务注意事项

  • 只需要完成HTML,CSS代码编写,不需要写JavaScript
  • 示例图仅为参考,不需要完全实现一致,其中的图片、文案均可自行设定
  • 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
  • HTML 及 CSS 代码结构清晰、规范

任务完成及总结

这次的任务主要是延伸了任务二,没啥难度,只要增加左右两个盒子,修改下相关像素之类的就完成了。我猜这次任务考察的应该是旧代码的复用性。

小demo地址:

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

任务五:零基础HTML及CSS编码练习加强版的更多相关文章

  1. 零基础HTML及CSS编码总结

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: * 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基 ...

  2. 任务五:零基础HTML及CSS编码(二)

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

  3. 任务二:零基础HTML及CSS编码练习

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...

  4. 任务二:零基础HTML及CSS编码(一)

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

  5. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  6. 前端零基础 --css转换--skew斜切变形 transfor 3d

    前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急

  7. 任务一:零基础HTML编码

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

  8. 2019年最新超级有趣好玩的html+css网页布局课程,前端入门基础,html5+css3零基础入门课程-黑马程序员pink老师精心录制

    大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣 ...

  9. 零基础:如何快速学习JavaScript,html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而 ...

随机推荐

  1. Qt 学习之路 2(52):使用拖放

    Qt 学习之路 2(52):使用拖放 豆子 2013年5月21日 Qt 学习之路 2 17条评论 拖放(Drag and Drop),通常会简称为 DnD,是现代软件开发中必不可少的一项技术.它提供了 ...

  2. C++_类和动态内存分配4-有关返回对象的说明

    返回方式: 返回指向对象的引用: 指向对象的const引用: const对象:  =============================================== 返回指向const对象 ...

  3. MNIST数据集分类简单版本

      import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #载入数据集 mnist = ...

  4. A - TOYS(POJ - 2318) 计算几何的一道基础题

    Calculate the number of toys that land in each bin of a partitioned toy box. 计算每一个玩具箱里面玩具的数量 Mom and ...

  5. 使用手淘flexible.js适配移动端布局

    下载flexible: https://github.com/amfe/lib-flexible //未压缩版 (function flexible (window, document) { var ...

  6. apche 配置

    http://www.tootoogo.org/wordpress/?p=230 apache的配置由httpd.conf 文件配置. 1.基本配置 ServerRoot "/mnt/sof ...

  7. PIE SDK微分锐化

    1.算法功能简介 微分锐化通过微分使图像的边缘或轮廓突出.清晰.导数算子具有突出灰度变化的作用,对图像运用导数算子,灰度变化较大的点处算得的值较高,因此我们将图像的导数算子运算值作为相应的边界强度,所 ...

  8. proxyee down源码分析

    proxyee down下载速度不错, 底层使用netty+多线程,最近在看netty网络方面的应用,正好这是个案例 源代码地址 https://github.com/proxyee-down-org ...

  9. java中的线程(3):线程池类 ThreadPoolExecutor「线程池的类型、参数、扩展等」

    官方文档: https://docs.oracle.com/javase/7/docs/api/java/util/concurrent/ThreadPoolExecutor.html 1.简介 pu ...

  10. CentOS初试

    由于实在是对ubuntu不太感冒,加上买的鸟哥又是拿CentOS做的例子,所以我就把ubuntu换成了CentOS6.5.依旧win7,CentOS 双系统,具体过程参照http://www.cnbl ...