![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS入门项目小步教程
文章平均质量分 58
小步教程
小步2023
展开
-
电商前台首页结构分析
(1)首页整体分为六大块:站点导航 site-nav、头部 header、主内容 main、秒杀 kill、推荐 recommend、页脚 footer。(2)每块具有子元素div.w设置内容宽度1190px、整体水平居中两边留白。(3)背景色。body整体背景色为浅灰色1;页头header的背景色是白色,而且白色是占整行;site-nav背景色为浅灰色2。如果删除div.w元素,那么直接六大块设置内容宽度与水平居中两边留白。原创 2024-06-25 05:54:30 · 477 阅读 · 0 评论 -
企业简介页的左侧导航菜单
加入左边栏,进行页面导航,通过菜单项的链接跳转到其它页面。第2列的下方区域未截取完整,包括交流方式区。前面学习的大多数标签,通过div、h1、h2、p,本身都占换行效果,即独立一行。现在主体内容区拆分成左右两列:第1列是菜单,第2列是原先内容。这是经典的列式布局。原创 2024-06-25 05:49:45 · 872 阅读 · 0 评论 -
Chrome开发者工具调试样式
Chrome开发者工具,选择相应元素。“element.style”表示我们通过style属性设置的样式;“用户代理样式表”表示浏览器自动为标签设置的样式。原创 2024-06-25 05:44:41 · 1012 阅读 · 0 评论 -
Invalid001:无width使margin auto无效
浏览器程序是由C++编写的程序,解析HTML代码与CSS代码进行页面显示,HTML代码与CSS代码相当于页面的配置文件。当前块元素没有设置width,会与外部块元素的width一致,内外两个块元素同样宽度,所以不存在水平居中。w3c官方对于页面显示提供一套完整的设计方案,这些规范规则属于它设计方案的一个部分,一定有它底层设计的合理逻辑。从这个角度看,CSS是一门规范规则性的语言,我们需要学习它的各项规范规则,通过开发者工具识别它,并理解它的底层设计逻辑。无法内容水平居中两边留白。去掉width设置。原创 2024-06-25 05:39:44 · 234 阅读 · 0 评论 -
企业简介页的整体分析
把页面划分成多个区域;如果一个区域内容很多,我们会进一步分解,直到最小粒度(末级元素)。原创 2024-06-25 05:36:04 · 355 阅读 · 0 评论 -
查看HTML标签的基本特征
MDN介绍标签大多会介绍特征,MDN称作“技术总结”或“技术概要”。主要包括四项特性:内容分类、允许内容、标签省略、允许的父元素。以hr标签为例:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/hr。原创 2024-06-25 05:26:32 · 398 阅读 · 0 评论 -
Chrome开发者工具体验
掌握CSS要求必须掌握开发者工具。我们开发者写的代码可能出错,Chrome开发者工具帮助检查错误与调试代码的工具,非常强大。这里先用它来排查简单问题,后续几乎每项学习内容都会用它来调试。原创 2024-06-25 05:22:42 · 239 阅读 · 0 评论 -
CSS入门项目小步教程
详情请点击: CSS入门项目小步教程 | 小步教程教程包含4个项目的9个典型页面。建议:前3个项目的页面在电脑打开,最后一个项目的页面在手机或平板打开。(1)企业简介入门小项目企业简介首页(点击打开)企业文化页(点击打开)(2)电商前台首页前台首页(点击打开)(3)电商后台管理后台首页与主页(点击打开)用户列表页(点击打开)用户编辑页(点击打开)对话框(点击打开)(4)移动端M站首页M站首页(点击打开)通过学习这9个典型页面,同学们具备完成电商系统其它常用静态页面的能力。教程共分6篇20章。第1篇 目标篇第原创 2024-06-25 05:09:22 · 973 阅读 · 0 评论 -
第8章 hello首页的外部样式实现
本章将以上一章内联样式的项目代码为基础,进一步编写代码,调整为外部样式表。所以我们只要编写选择器名称,把具体样式内容复制过来即可。本章主要内容包括:新建CSS文件、桌面环境设置技巧、页头区选择器、主要内容区选择器、技术框选择器、页脚区选择器、样式统一设置。原创 2024-06-19 16:28:41 · 140 阅读 · 0 评论 -
第7章 hello首页的内联样式实现
本章将在上一章页面元素结构的基础上,通过元素的style属性实现页面样式。style属性设置样式的方式称为内联样式。本章主要内容包括:页头实现、主要内容区整体实现、关于区实现、原创区实现、页脚实现、开发者工具调试样式。原创 2024-06-19 16:27:32 · 153 阅读 · 0 评论 -
hello首页的整体分析与结构实现
详情链接地址: hello首页的整体分析与结构实现 | CSS入门项目小步教程 本篇开始完成hello项目:企业简介小项目。包括两个页面:首页(企业简介页)、企业文化页。本章主要内容包括:项目目标、页面分析、Emmet快速生成元素、页面结构实现、图片路径规范、设置标题栏图标、标签语义与默认样式。本章大纲第1节 项目目标第2节 新建项目与首页第3节 页面的整体分析第4节 Emmet快速生成元素第5节 元素结构分解实现第6节 理解图片路径第7节 加入图片第8节 设置标题栏图标第9节 开发者工具调试DOM树第10原创 2024-06-19 16:26:40 · 289 阅读 · 0 评论 -
第5章 页面的分析方法
学习CSS初期,觉得CSS属性非常重要;学习JS后,发现JS能够修改CSS,JS非常重要;再后来,觉得HTML代码的元素嵌套结构非常重要。本章主要内容包括:基本概念、生活化示例、代码示例、三要素的特点、页面的分析方法、两种开发顺序。原创 2024-06-19 16:25:41 · 181 阅读 · 0 评论 -
第4章 CSS基础语法
链接详情地址: CSS基础语法 | CSS入门项目小步教程 本章主要内容包括:标签语法、标签属性语法、CSS属性语法、CSS选择器语法、CSS引入方式语法。本章大纲第1节 标签语法第2节 项目常用标签第3节 标签属性语法第4节 CSS属性语法第5节 项目常用CSS属性第6节 CSS选择器第7节 CSS引入方式第8节 作业原创 2024-06-19 16:24:42 · 128 阅读 · 0 评论 -
第3章 官方前端技术网站MDN
详情链接地址: 官方前端技术网站MDN | CSS入门项目小步教程本章主要内容包括: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 16:23:56 · 109 阅读 · 0 评论 -
CSS入门项目 第2章 开发环境搭建
(2)3个VSCode插件。Chrome浏览器、VSCode开发工具。(4)【重点】制造常见错误、分析与定位问题。(5)VSCode项目的常见操作。(3)hello页面开发。原创 2024-06-19 16:22:23 · 118 阅读 · 0 评论 -
CSS入门项目小步教程 项目知识体系
详情链接地址:本项目使用如下技术内容,属于必须完全掌握的知识点。原创 2024-06-19 16:19:40 · 372 阅读 · 0 评论 -
CSS入门项目小步教程 项目目标
链接地址: 项目目标 | CSS入门项目小步教程教程讲解4个项目共8个典型页面。注:目前仅发布第1个项目的部分内容一、hello项目hello项目是入门小项目“企业简介小项目”,包括2个页面:企业简介(项目首页)、企业文化页。(1)企业简介页(2)企业文化页第3篇讲解hello项目2个页面,通过hello项目学习简单页面的开发。二、前台项目前台项目讲解前台首页。前台首页较大,分区截图如下。首屏区秒杀区推荐区页脚区第4篇讲解前台项目首页, 通过前台首页学习复杂页面的开发。前台项目常用有16个页面,包括:首页、原创 2024-06-19 16:17:09 · 598 阅读 · 0 评论 -
CSS入门项目小步教程 教程大纲
链接地址: 教程大纲 | CSS入门项目小步教程 教程大纲第 1篇 项目目标篇第01章 项目目标与概述第 2篇 基础知识篇第02章 开发环境搭建第03章 官方前端技术网站MDN第04章 CSS基础语法第05章 页面的分析方法第 3篇 hello项目篇第06章 hello首页的整体分析与结构实现第07章 hello首页的内联样式实现第08章 hello首页的外部样式实现TODO 正在开发中...原创 2024-06-19 16:12:46 · 562 阅读 · 0 评论 -
CSS入门项目小步教程 前言
二、教程特色(1)以项目为目标。讲解的每项内容(包括概念)具备可操作性。(2)体系化。体系化的项目、体系化的知识点、体系化的方法、体系化的工具讲解。(3)完整的图文教程。包括完整的目标、分析、代码、操作、运行效果、调试等。(4)小步。细致讲解每个步骤。(5)重在思路分析与设计。每个步骤都有对应的思路分析与设计说明。原创 2024-06-19 16:04:36 · 358 阅读 · 0 评论