网络异常
请检查网络设置后重试
重新加载
CSS入门项目小步教程
7
成员
登录后加入频道即可发帖
0/1000
不选择版块
发表
全部
CSS入门项目小步教程|论坛
古今
2024-11-02
我这个table怎么无法居中,有大佬知道么
2
1
分享
小步教程
频道主
2024-06-19
第8章 hello首页的外部样式实现
本章将以上一章内联样式的项目代码为基础,进一步编写代码,调整为外部样式表。所以我们只要编写选择器名称,把具体样式内容复制过来即可。
本章主要内容包括:新建CSS文件、桌面环境设置技巧、页头区选择器、主要内容区选择器、技术框选择器、页脚区选择器、样式统一设置。
本章大纲
第1节 新建css文件
第2节 理解外部样式文件
第3节 桌面环境设置技巧
第4节 页头的选择器实现
第5节 主要内容区的选择器实现
第6节 三个技术框的选择器实现
第7节 页脚的选择器实现
第8节 全局设置
第9节 选择器优先级数值
第10节 常用选择器的使用场景
第11节 VSCode自定义折叠区
第12节 智能提示快捷键配置
第13节 本章总结
第14节 作业
1
评论
分享
小步教程
频道主
2024-06-19
第7章 hello首页的内联样式实现
本章将在上一章页面元素结构的基础上,通过元素的style属性实现页面样式。style属性设置样式的方式称为内联样式。
本章主要内容包括:页头实现、主要内容区整体实现、关于区实现、原创区实现、页脚实现、开发者工具调试样式。
本章大纲
第1节 页头实现
第2节 主要内容区整体实现
第3节 Invalid001-marginauto无效
第4节 CSS学习的浏览器角度思维
第5节 关于区域实现
第6节 Invalid002-inline使width等无效
第7节 其它两个技术项外框的实现
第8节 实现原创声明与交流方式
第9节 页脚实现
第10节 开发者工具调试样式
第11节 Emmet快速生成CSS属性值
第12节 本章小结
第13节 作业
点赞
评论
分享
小步教程
频道主
2024-06-19
第6章 hello首页的整体分析与结构实现
本篇开始完成hello项目:企业简介小项目。包括两个页面:首页(企业简介页)、企业文化页。
本章主要内容包括:项目目标、页面分析、Emmet快速生成元素、页面结构实现、图片路径规范、设置标题栏图标、标签语义与默认样式。
本章大纲
第1节 项目目标
第2节 新建项目与首页
第3节 页面的整体分析
第4节 Emmet快速生成元素
第5节 元素结构分解实现
第6节 理解图片路径
第7节 加入图片
第8节 设置标题栏图标
第9节 开发者工具调试DOM树
第10节 理解标签的语义与默认样式
第11节 项目已用标签的默认样式
第12节 本章小结
第13节 作业
点赞
评论
分享
小步教程
频道主
2024-06-19
第5章 页面的分析方法
学习CSS初期,觉得CSS属性非常重要;学习JS后,发现JS能够修改CSS,JS非常重要;再后来,觉得HTML代码的元素嵌套结构非常重要。
本章主要内容包括:基本概念、生活化示例、代码示例、三要素的特点、页面的分析方法、两种开发顺序。
本章大纲
第1节 页面三要素
第2节 生活化示例
第3节 代码示例
第4节 结构的特点
第5节 样式的特点
第6节 交互的特点
第7节 页面的分析方法
第8节 两种开发顺序
第9节 作业
点赞
评论
分享
小步教程
频道主
2024-06-19
第4章 CSS基础语法
本章主要内容包括:标签语法、标签属性语法、CSS属性语法、CSS选择器语法、CSS引入方式语法。
本章大纲
第1节 标签语法
第2节 项目常用标签
第3节 标签属性语法
第4节 CSS属性语法
第5节 项目常用CSS属性
第6节 CSS选择器
第7节 CSS引入方式
第8节 作业
点赞
评论
分享
小步教程
频道主
2024-06-19
第3章 官方前端技术网站MDN
本章主要内容包括:MDN简介、学习阶段、重点内容列表、标签的基本特征、CSS属性的基本特性、CSS属性间的制约关系、w3c规范官网。
本章大纲
第1节 MDN简介
第2节 搜索
第3节 MDN导航
第4节 6个重点内容列表
第5节 标签的基本特征
第6节 标签属性
第7节 CSS属性的基本特征
第8节 CSS属性间的制约关系
第9节 兼容性
第10节 w3c规范官网
第11节 其它
第12节 作业
点赞
评论
分享
小步教程
频道主
2024-06-19
第2章 开发环境搭建
本章主要内容包括:
(1)2个软件。Chrome浏览器、VSCode开发工具。
(2)3个VSCode插件。Live Server、CSS Peek、HTML to CSS autocompletion。
(3)hello页面开发。
(4)【重点】制造常见错误、分析与定位问题。
(5)VSCode项目的常见操作。
本章大纲
第1节 Chrome下载安装
第2节 VSCode下载安装
第3节 VSCode汉化
第4节 首选项设置
第5节 VSCode插件Live Server
第6节 新建项目与页面
第7节 常见错误与定位方法
第8节 Chrome开发者工具体验
第9节 项目常见操作
第10节 VSCode插件HTML to CSS autocompletion
第11节 VSCode插件CSS Peek
第12节 本章作业
点赞
评论
分享
小步教程
频道主
2024-06-19
第1章 项目目标与概述
本章主要内容:项目目标、项目知识体系、术语声明。
本章大纲
第1节 项目目标
第2节 项目知识体系
第3节 术语声明
第4节 建议学习方法
第5节 项目资源与素材下载
点赞
评论
分享
小步教程
频道主
2024-06-19
CSS入门项目小步教程 前言
详情地址:
https://www.xiaobuteach.com/css-proj/tutorial/perface.html
一、为什么写《CSS入门项目小步教程》
CSS入门同学经常有这些疑问。
我是零基础,能不能推荐一本CSS入门书籍?
哪里有一个完整的项目(包括素材、完整详细的分析方法、实现代码)?
一个项目的整体思路是什么?开发流程是什么?我们如何一步步分析与实现?
项目基本能实现,但思路混乱,怎么梳理?如何思路清晰的写出代码清晰的网页?
点赞
评论
分享
公告
暂无公告
直播
暂无直播