Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
#6. box-model-position
7.comprehensive
img
README.md

README.md

HTML、CSS基础

任务编号TASK 0001

任务目的

掌握HTMLCSS基础知识、能够较为熟练地使用HTMLCSS编写页面

Start

6. 盒模型及定位

6.1 任务描述

task0001.html中,实践以下内容:

6.2 知识点总结

  • 掌握块状元素、内联元素、和内联块状元素的概念与区别:块状、行内与行内块状
  • 掌握盒模型的所有概念,学会如何计算各种盒模型相关的数值:margin、padding、border、负边距
  • 掌握position的相关知识:static、relative、absolute(脱离文档流)、fixed
  • 掌握float的相关知识:脱离文档流,清除浮动
  • 掌握基本的布局方式
  • 了解GridFlexbox等布局方式
  • BFC 原理

6.3 参考资料

7. 综合练习

7.1 任务描述

在您自己的Github中建立一个新的仓库,比如命名为task0001,在该目录下创建以下四个html文件:

  • index.html:对应task0001_1task0001_1_marked设计稿
  • blog.html:对应task0001_2task0001_2_marked设计稿
  • gallery.html:对应task0001_3task0001_3_marked设计稿
  • about.html:对应task0001_4task0001_4_marked设计稿

再创建一个css目录,在css目录中创建一个style.css用于编写样式。

再创建一个img目录,用于存放页面编写中会使用到的图片。

这时,你的文件夹结构应该是这样的:

文件结构

基于设计稿中的设计图及标志实现页面,里面的内容、图片、配色均可自定义。

  • 编码过程请尽可能遵守HTML、CSS的代码规范
  • 暂时不要使用lesssass等,这是后面的任务;
  • 不要使用任何样式框架。
  • 不需要写任何JavaScript,只需要关注HTML、CSS
  • 页面实际内容宽度为980px,头部背景、大图、底部背景均为100%宽,当浏览器宽度低于980px时,页面宽度不变,允许出现横向滚动条。右上角的Github图标在浏览器低于980px时消失。

任务关键执行步骤

  • 按照以上要求进行编码,先不需要关注页面中任何具体的图片和文字内容,都随意输入,注意力放在页面架构、布局、样式上;
  • 编码的同时,记录遇到的技术问题和疑惑;
  • 完成编码后,删掉它们,不留一丝痕迹;
  • 开始重(Chong)构(Xie),让自己的代码要比第一次有提升,尽可能地让第一次遇到问题和疑惑不再存在;
  • 在blog.html页面中真的写上2-3篇这次学习上的技术总结收获;
  • 初级班同学请在这里,按要求回复您的task0001的Github地址。

7.2 期望达成

  • 学会能够基于设计稿来合理规划HTML结构
  • 理解语义化,合理地使用HTML标签来构建页面
  • 能够较为熟练地使用HTML、CSS创建一个静态页面
  • 大概了解并实践企业中对于HTML及CSS的编码规范
  • 编写复用性高、可读性、可维护性好的代码

7.3 参考资料

8. 验证

经过上面的练习,您是否已经能够熟练到能够在一天甚至半天之内完成任务7的编码呢?或者不带任何犹豫地可以知道

  • doctype是什么,它是干啥用的
  • uloldl都适合用在什么地方
  • 能够娓娓道来你是怎么理解HTML语义化的
  • CSS选择器都有哪些
  • position都有什么值,区别是什么
  • 经典的清除浮动代码中每一行语句都是干什么用的,为什么少了它不行
  • 让一个HTML节点居中的各种实现方式
  • 神马圣杯布局、双飞翼布局都是些什么东西
  • 强大的负外边距都能干嘛
  • 不小心提起文档流的时候还能接着解释到底啥是文档流
  • ……

关于HTML、CSS,我们暂时到这里,下一个任务我们将进行JavaScript的一些基础训练。