百度前端学院_小薇课堂_task3
文末会附上任务三实现效果图、源码以及学习资料
任务目标
- 掌握
HTML/CSS布局的概念 - 掌握盒模型的概念
- 掌握
position与float的概念以及在布局时的用法
任务描述
- 使用
HTML与CSS按照 示例图（点击查看） 实现三栏式布局。 - 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项
- 尝试
position和float的效果，思考它们的异同和应用场景。 - 注意测试不同情况，尤其是极端情况下的效果。
- 图片和文字内容请自行替换，尽可能体现团队的特色。
- 调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。
- 改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。
- 其他效果图中给出的标识均被正确地实现。
可以参考下文来学习CSS的基础样式，完事再来做这个任务，相信你会有新的收获。
系统学习前端之HTML基础
系统前端学习之CSS基础
任务三实现效果图
任务源代码
总结：本节主要考察了对
CSS中基础样式的运用，暂时只用了float来布局，下次用position来布局试一下。
百度前端学院_小薇课堂_task3相关推荐
- 百度前端学院_小薇课堂_task_4
小薇课堂Task_4 在做这个任务前课参考这篇文章 任务目标 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有 ...
- 百度前端学院_小薇课堂_task2
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...
- 百度前端学院_小薇课堂_task_5
小薇课堂_task_5 任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标 ...
- 百度前端学院_小薇课堂_task_1
任务一目的 了解HTML的定义,概念.发展简史 掌握常用html标签的含义.用法 能够基于设计稿来合理规划html文档结构 理解语义化,合理地使用html标签来构建页面 任务注意事项 参考示例图 只需 ...
- 【百度前端学院学习笔记】Day9 圣杯布局和双飞翼布局
[百度前端学院学习笔记]Day9 圣杯布局和双飞翼布局 圣杯布局(古老而费解的方法) 双飞翼布局(圣杯的改进) 参考资料: In search of the Holy Grail - A list a ...
- 【百度前端学院学习笔记】Day6 浮动/BFC
[百度前端学院学习笔记]Day6 浮动/BFC 一.什么是浮动? 二.普通流 / 浮动 / 绝对定位 三.BFC/Flow Root 3.1 什么是BFC? 3.2 BFC 的特性 3.2.1 特性一 ...
- 当当elastic-job docker快速部署_[小Z课堂]－docker 快速部署 elasticsearch 和 kibana，一键部署...
各位小伙伴,小Z课堂来袭,每天只需看三分钟,你就能用docker 快速部署各种环境.今天就用docker 来部署 elasticsearch 和 kibana.docker的入门请上度娘学习,这里直接 ...
- 百度前端学院小薇学院task7笔记
1.纯css拉菜单默认样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- 百度for android v5.0,小冰冰传奇百度版下载_小冰冰传奇安卓版下载v5.0.137_3DM手游...
<小冰冰传奇 百度版>游戏的前身为火爆的手游<刀塔传奇>,由于一些问题而不得不改名,并且对游戏内的大量角色和原型都做了一定的改动.该游戏继承了<刀塔传奇>的基本玩法 ...
最新文章
- OSPF 协议中各种邻居状态的含义是什么?
- 安装Scrapy遇到Comand c:\users\lenovo\appdata\local\programs\python\python35\python.exe
- 使用 Linux 和 Hadoop 进行分布式计算
- Golang的导包和引用包的问题
- Smarty模板技术学习
- 孤傲授权系统网站源码
- centos6.8 mysql5.6_Centos6.8 Mysql5.6 安装配置教程(转)
- 交通流预测python代码_Python 3 amp; Keras 实现基于神经网络的交通流预测
- 测试远程服务器udp端口,udp端口怎么测试 - 全文
- 微信H5页面ios分享失效
- Kinect的Kinect Manager脚本简介
- 现代都市女性所爱的潮流搭!
- 揭秘“菲住布渴”中运用的黑科技：除了check in、坐电梯、开门...全部刷脸之外，还有什么？...
- python扫描器爬虫_Python扫描器-常用库-Request
- 错误码400原因总结
- vivado 2017.4安装步骤
- 从零学习Fluter(八):Flutter的四种运行模式--Debug、Release、Profile和test以及命名规范...
- Vue.js使用CSS美化
- NG Toolset开发笔记--5GNR Resource Grid（1）
- 【原创】大数据基础之Zookeeper（1）介绍、安装及使用