任务二:零基础HTML及CSS编码练习
任务目的
- 针对设计稿样式进行合理的HTML架构,包括以下但不限于:
- 掌握常用HTML标签的含义、用法
- 能够基于设计稿来合理规划HTML文档结构
- 理解语义化,合理地使用HTML标签来构建页面
- 掌握基本的CSS编码,包括以下但不限于:
- 了解CSS的定义、概念、发展简史
- 掌握CSS选择器的含义和用法
- 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式
任务描述
- 基于第一个任务“零基础HTML编码”的代码,参考 示例图(点击查看),在步骤一的代码基础上增加CSS样式代码的编写
任务注意事项
- 只需要完成HTML,CSS代码编写,不需要写JavaScript
- 示例图仅为参考,不需要完全实现一致,其中的图片、文案均可自行设定
- 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
- HTML 及 CSS 代码结构清晰、规范
任务完成及总结
这次的任务练习总得来说没太大的难度,也没有遇到什么问题,就是太繁琐了,特别是表单那块,在那里差不多用了50%的时间用来调试像素。
小demo的亮点:
采用固定布局,当屏幕缩小时,不会发生坍塌现象。
小demo的不足之处:
对我而言,就是时间耗费太多了,将近用了四个小时。
小demo地址:
https://cruxf.github.io/BaiduTask/test2.html
有不足的地方希望大家多多指出!
任务二:零基础HTML及CSS编码练习的更多相关文章
- 零基础HTML及CSS编码总结
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: * 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基 ...
- 任务二:零基础HTML及CSS编码(一)
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
- 任务五:零基础HTML及CSS编码练习加强版
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...
- 任务五:零基础HTML及CSS编码(二)
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
- 零基础JavaScript编码(二)
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- 前端零基础 --css转换--skew斜切变形 transfor 3d
前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急
- 任务一:零基础HTML编码
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
- 2019年最新超级有趣好玩的html+css网页布局课程,前端入门基础,html5+css3零基础入门课程-黑马程序员pink老师精心录制
大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣 ...
随机推荐
- javascrip 词法分析详解
JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬 ...
- Hibernate学习笔记(一)—— Hibernate概述及入门
一.Hibernatea概述 1.1 什么是Hibernate? 在介绍什么是Hibernate之前,我们先讨论一下什么是框架?框架是用来提高开发效率的,框架封装好了一些功能,我们需要使用这些功能时, ...
- ubuntu系统下如何切换输入法
如何切换输入法:ctrl+空格键 输入中文时如何翻页:键盘上的 - +两个键 super表示:美式键盘中的Win键
- CF E2 - Array and Segments (Hard version) (线段树)
题意给定一个长度为n的序列,和m个区间.对一个区间的操作是:对整个区间的数-1可以选择任意个区间(可以为0个.每个区间最多被选择一次)进行操作后,要求最大化的序列极差(极差即最大值 - 最小值).ea ...
- [转] 在body中没有元素把高度撑开的情况下,设置全屏
[From] https://segmentfault.com/q/1010000006182839 html,body { margin:; padding:; min-height: 100vh; ...
- win7和centos7双系统--转
转自http://blog.chinaunix.net/uid-30867756-id-5758575.html 参考:http://blog.csdn.net/hsg77/article/detai ...
- C语言中的输入方式
在c语言中,有gets().scanf().getchar()等输入方式,但是不同的方式处理的方式不同. scanf()读取时遇见tab.space.enter时会结束读取,不会舍弃最后的回车符(即回 ...
- sed命令——批量修改文件内容
批量替换单个文件内容 命令格式:sed -i 's/旧内容/新内容/g' 文件路径 sed -i 's/oldString/newString/g' file 例如:我想替换cwx.txt文件中的 j ...
- Oracle RAC集群搭建(六)--ASM创建oradata的磁盘组
一,查看实例环境 su - grid env|grep ORA 发现连接空实例 改环境 到这里检测就完成了 二,配置安装 grid 用户输入asmca ASM数据盘就创建好了
- 从指定Dictionary中移除指定值项
void Removeltems(Dictionary<int, ltem> _dicltemMap, ltem _item) { List<ltem> keys=new Li ...