任务五:零基础HTML及CSS编码(二)
- 面向人群:
- 零基础或初学者
- 难度:
- 简单
重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。
课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。
任务目的
- 针对设计稿样式进行合理的HTML架构,包括以下但不限于:
- 掌握常用HTML标签的含义、用法
- 能够基于设计稿来合理规划HTML文档结构
- 理解语义化,合理地使用HTML标签来构建页面
- 掌握基本的CSS编码,包括以下但不限于:
- 了解CSS的定义、概念、发展简史
- 掌握CSS选择器的含义和用法
- 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式
任务描述
- 基于第一个任务“零基础HTML编码”的代码,参考 示例图(点击查看),在步骤一的代码基础上增加CSS样式代码的编写
- 头部和底部的黑色区域始终是100%宽
- 页面右侧部分为固定宽度,左侧保持与浏览器窗口变化同步自适应变化
- 左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化
- 10张图片需要永远都完整展现,所以会随着宽度变窄,从两行变成三行甚至更多,也有可能随着宽度变宽,变成一行
任务注意事项
- 只需要完成HTML,CSS代码编写,不需要写JavaScript
- 示例图仅为参考,不需要完全实现一致,其中的图片、文案均可自行设定
- 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
- HTML 及 CSS 代码结构清晰、规范
任务协作建议
- 团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
- 可以各自完成任务实践,也可以按照以下分模块然后各自分工完成
- 头部、底部及整体左右布局架构
- 右侧表单
- 前面两篇文章部分
- 图片部分
- 表格部分
- 交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
- 相互讨论,最后合成一份组内最佳代码进行提交
在线学习参考资料
任务五:零基础HTML及CSS编码(二)的更多相关文章
- 零基础HTML及CSS编码总结
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: * 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基 ...
- 任务五:零基础HTML及CSS编码练习加强版
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...
- 任务二:零基础HTML及CSS编码练习
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...
- 任务二:零基础HTML及CSS编码(一)
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
- 【转载】salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句
salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句 salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex ...
- salesforce 零基础学习(五十二)Trigger使用篇(二)
第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...
- salesforce零基础学习(八十二)审批邮件获取最终审批人和审批意见
项目中,审批操作无处不在.配置审批流时,我们有时候会用到queue,related user设置当前步骤的审批人,审批人可以一个或者多个.当审批人有多个时,邮件中获取当前记录的审批人和审批意见就不能随 ...
- 基础DOM和CSS操作(二)
元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...
- salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句
salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex语言和java很多的语法类似,今天总结的是一些简单的Apex的变量等知识. 有如下几种常 ...
随机推荐
- 详解Supervisor进程守护监控
Supervisor在百度百科上给的定义是超级用户,监管员.Supervisor是一个进程管理工具,当进程中断的时候Supervisor能自动重新启动它.可以运行在各种类unix的机器上,superv ...
- Unity3D NGUI UIPlayTween(原UIButtonTween)动画事件详解
http://blog.csdn.net/asd237241291/article/details/8507817 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 Unity3D引擎技术 ...
- Jquery下拉框左右选择
1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...
- 地址重用REUSEADDR
一个socket连接断开后会进入TIME_WAIT,大概有几十秒,这个时候端口是无法使用的,如果不设定地址重用,就会报错,说端口占用. 创建一个socket实例后,在对这个实例进行地址绑定前,要设定地 ...
- Fiddler抓取HTTPS设置
做App测试,用Fiddler进行抓包,以下操作记录如何用手机进行设置使其可以捕捉HTTPS协议. 一.电脑端设置 1.手机和电脑保持统一局域网内 2.配置fiddler允许监听到https 打开Fi ...
- Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) B
Description Bear Limak examines a social network. Its main functionality is that two members can bec ...
- JAVA常用设计模式(静态化调用和实例化调用的区别,编辑可见 )
用newInstance()与用new是区别的,区别在于创建对象的方式不一样,前者是使用类加载机制,后者是创建一个新类,且newInstance()只能调用无参构造函数. 最大的区别在于内存.静态方法 ...
- PHP fgets 函数
<?php $handle=fopen("../good/html/1.txt","r"); ; //打开一个远程文件 $content="&q ...
- Retrofit实现PUT网络请求,并修改Content-Type
@FormUrlEncoded @PUT(Constant.BOSS_HX_CHANGE_PHONE_INTERVIEW) Call<ResponseHxResultBean> handl ...
- solrJ的使用--覆盖创建索引,查询,删除索引【转自http://blog.sina.com.cn/s/blog_64ac3ab10100t3mq.html】
package com.xzhe.common.search; import java.util.ArrayList; import java.util.Collection; import java ...