百度前端学院_小薇课堂_task_5

2024-04-22 17:28:34

小薇课堂_task_5

任务目的

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

任务描述

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

源码及效果图

百度前端学院_小薇课堂_task_5相关推荐

百度前端学院_小薇课堂_task_4
小薇课堂Task_4 在做这个任务前课参考这篇文章任务目标实践HTML/CSS布局方式深入了解position等CSS属性任务描述实现如示例图(点击打开) 的效果灰色元素水平垂直居中,有 ...
百度前端学院_小薇课堂_task2
任务目的针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法能够基于设计稿来合理规划HTML文档结构理解语义化,合理地使用HTML标签来构建页面掌握基本的 ...
百度前端学院_小薇课堂_task3
文末会附上任务三实现效果图.源码以及学习资料任务目标掌握HTML/CSS布局的概念掌握盒模型的概念掌握position与float的概念以及在布局时的用法任务描述使用 HTML 与 CSS ...
百度前端学院_小薇课堂_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手游...
<小冰冰传奇百度版>游戏的前身为火爆的手游<刀塔传奇>,由于一些问题而不得不改名,并且对游戏内的大量角色和原型都做了一定的改动.该游戏继承了<刀塔传奇>的基本玩法 ...

最新文章

热门文章