- 博客(162)
- 资源 (162)
- 收藏
- 关注
原创 电商前台首页结构分析
(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 493
原创 企业文化页布局的分析与实现
企业文化页面的整体结构与前面的企业简介页面基本一致,不同在于#main的内容是多行。我们复制flex布局版的首页进行改动。注:实际项目,里面会有很多公用样式,放到公用的css文件,这里方便大家学习,暂时不做抽取。同学们等两个页面完成后,请先自行分析有哪些公用内容、抽取公用样式。我们下个项目会专门讲解公用CSS文件的开发。
2024-06-25 05:52:27 619
原创 企业简介页的左侧导航菜单
加入左边栏,进行页面导航,通过菜单项的链接跳转到其它页面。第2列的下方区域未截取完整,包括交流方式区。前面学习的大多数标签,通过div、h1、h2、p,本身都占换行效果,即独立一行。现在主体内容区拆分成左右两列:第1列是菜单,第2列是原先内容。这是经典的列式布局。
2024-06-25 05:49:45 882
原创 Chrome开发者工具调试样式
Chrome开发者工具,选择相应元素。“element.style”表示我们通过style属性设置的样式;“用户代理样式表”表示浏览器自动为标签设置的样式。
2024-06-25 05:44:41 1126
原创 Invalid001:无width使margin auto无效
浏览器程序是由C++编写的程序,解析HTML代码与CSS代码进行页面显示,HTML代码与CSS代码相当于页面的配置文件。当前块元素没有设置width,会与外部块元素的width一致,内外两个块元素同样宽度,所以不存在水平居中。w3c官方对于页面显示提供一套完整的设计方案,这些规范规则属于它设计方案的一个部分,一定有它底层设计的合理逻辑。从这个角度看,CSS是一门规范规则性的语言,我们需要学习它的各项规范规则,通过开发者工具识别它,并理解它的底层设计逻辑。无法内容水平居中两边留白。去掉width设置。
2024-06-25 05:39:44 241
原创 查看HTML标签的基本特征
MDN介绍标签大多会介绍特征,MDN称作“技术总结”或“技术概要”。主要包括四项特性:内容分类、允许内容、标签省略、允许的父元素。以hr标签为例:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/hr。
2024-06-25 05:26:32 405
原创 Chrome开发者工具体验
掌握CSS要求必须掌握开发者工具。我们开发者写的代码可能出错,Chrome开发者工具帮助检查错误与调试代码的工具,非常强大。这里先用它来排查简单问题,后续几乎每项学习内容都会用它来调试。
2024-06-25 05:22:42 246
原创 CSS入门项目小步教程
详情请点击: CSS入门项目小步教程 | 小步教程教程包含4个项目的9个典型页面。建议:前3个项目的页面在电脑打开,最后一个项目的页面在手机或平板打开。(1)企业简介入门小项目企业简介首页(点击打开)企业文化页(点击打开)(2)电商前台首页前台首页(点击打开)(3)电商后台管理后台首页与主页(点击打开)用户列表页(点击打开)用户编辑页(点击打开)对话框(点击打开)(4)移动端M站首页M站首页(点击打开)通过学习这9个典型页面,同学们具备完成电商系统其它常用静态页面的能力。教程共分6篇20章。第1篇 目标篇第
2024-06-25 05:09:22 983
原创 第8章 hello首页的外部样式实现
本章将以上一章内联样式的项目代码为基础,进一步编写代码,调整为外部样式表。所以我们只要编写选择器名称,把具体样式内容复制过来即可。本章主要内容包括:新建CSS文件、桌面环境设置技巧、页头区选择器、主要内容区选择器、技术框选择器、页脚区选择器、样式统一设置。
2024-06-19 16:28:41 147
原创 第7章 hello首页的内联样式实现
本章将在上一章页面元素结构的基础上,通过元素的style属性实现页面样式。style属性设置样式的方式称为内联样式。本章主要内容包括:页头实现、主要内容区整体实现、关于区实现、原创区实现、页脚实现、开发者工具调试样式。
2024-06-19 16:27:32 160
原创 hello首页的整体分析与结构实现
详情链接地址: hello首页的整体分析与结构实现 | CSS入门项目小步教程 本篇开始完成hello项目:企业简介小项目。包括两个页面:首页(企业简介页)、企业文化页。本章主要内容包括:项目目标、页面分析、Emmet快速生成元素、页面结构实现、图片路径规范、设置标题栏图标、标签语义与默认样式。本章大纲第1节 项目目标第2节 新建项目与首页第3节 页面的整体分析第4节 Emmet快速生成元素第5节 元素结构分解实现第6节 理解图片路径第7节 加入图片第8节 设置标题栏图标第9节 开发者工具调试DOM树第10
2024-06-19 16:26:40 299
原创 第5章 页面的分析方法
学习CSS初期,觉得CSS属性非常重要;学习JS后,发现JS能够修改CSS,JS非常重要;再后来,觉得HTML代码的元素嵌套结构非常重要。本章主要内容包括:基本概念、生活化示例、代码示例、三要素的特点、页面的分析方法、两种开发顺序。
2024-06-19 16:25:41 188
原创 第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 134
原创 第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 117
原创 CSS入门项目 第2章 开发环境搭建
(2)3个VSCode插件。Chrome浏览器、VSCode开发工具。(4)【重点】制造常见错误、分析与定位问题。(5)VSCode项目的常见操作。(3)hello页面开发。
2024-06-19 16:22:23 130
原创 CSS入门项目小步教程 项目目标
链接地址: 项目目标 | CSS入门项目小步教程教程讲解4个项目共8个典型页面。注:目前仅发布第1个项目的部分内容一、hello项目hello项目是入门小项目“企业简介小项目”,包括2个页面:企业简介(项目首页)、企业文化页。(1)企业简介页(2)企业文化页第3篇讲解hello项目2个页面,通过hello项目学习简单页面的开发。二、前台项目前台项目讲解前台首页。前台首页较大,分区截图如下。首屏区秒杀区推荐区页脚区第4篇讲解前台项目首页, 通过前台首页学习复杂页面的开发。前台项目常用有16个页面,包括:首页、
2024-06-19 16:17:09 612
原创 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 575
原创 CSS入门项目小步教程 前言
二、教程特色(1)以项目为目标。讲解的每项内容(包括概念)具备可操作性。(2)体系化。体系化的项目、体系化的知识点、体系化的方法、体系化的工具讲解。(3)完整的图文教程。包括完整的目标、分析、代码、操作、运行效果、调试等。(4)小步。细致讲解每个步骤。(5)重在思路分析与设计。每个步骤都有对应的思路分析与设计说明。
2024-06-19 16:04:36 367
原创 CSS div布局 常见问题1 换行
盒子模型的box-sizing属性的默认值:content-box,表示width是内容宽度,而不是总宽度。将所有元素的box-sizing改整成border-box,表示width是总宽度。3个子div的完整宽度:内容宽度100px+左右边框宽度2px=102px。每个宽度100px。而外层div的内容宽度:300px,只够放两个子div。这个解决方法的缺点:还要算宽高,而且算出来是零碎值,累。将外层div的宽度改为306px。即:元素总宽度计算问题引起的换行。外部div1宽度300px;
2023-09-05 17:29:37 404
原创 CSS 定位 position
1)直角坐标系模型数学直角坐标系是二维平面,点定位是通过横坐标x与纵坐标y。两个要素:要素1:定位基准,即原点;要素2:偏量量,横坐标与纵坐标两个方向的移偏量(x,y)。2)HTML定位坐标模型因为一切HTML元素都是盒子,点对点的偏移变成了矩形对矩形的偏移。HTML页面里,元素的定位与直角坐标系定位的不同点:基准从原点一个点变成一个矩形(另一个元素的盒子);偏移量在水平方向可通过left与right进行坐标设置,垂直方向可通过top与bottom设置。
2023-09-05 17:26:43 161
原创 CSS div布局 嵌套
div id="div_xiaobuteach">被分成多列,外层需要加clearfix,内层需要加float:left。<div id="div2">被分成2列,所以它需要加clearfix,里层的div需要加float:left。<div id="div1">被分成3行,直接加3个div即可。声明2:为方便大家初学,样式我们不考虑公用,只公用了clearfix清除浮动,其余直接写style属性。声明4:为div加了边框、宽高、边距,为方便大家看出效果,并不是实际需要。第3步:第2列继续划分为2列;
2023-09-05 17:23:11 1268
原创 CSS 总结
CSS主要解决4个问题:针对哪些元素?设置哪些样式?在哪里设置?如何叠加?1)哪些元素?对应:8种常用选择器,本章重点;2)哪些样式?对应:第02章 简单标签—第7节 文本常用样式;第03章 盒子模型;3)在哪里设置?对应:3种引入方式;4)如何叠加?针对HTML页面元素的树状结构,整个CSS为叠加过程提供了4个基本原则: CSS的4个特性。
2023-09-02 16:09:55 30
原创 CSS 特性
当一个元素匹配多个样式规则时,如果样式属性名相同,则优先级高的会覆盖优先级低的,相同优先级时,后定义的会覆盖前定义的。子标签可以继承父标签的部分style属性:这部分样式称之为可继承;通过开发者工具(F12)查看,div2的样式里具有div1定义的字体大小与颜色两个属性。div2继承父标签div1的两个属性,font-size与color都是可继承的属性。不同类型的多个选择器定义相同的属性名不同属性值,会按照优先级顺充、采用优先级高的样式。标签具有父标签的样式属性,同时还有自己定义的样式属性,即继承性。
2023-09-02 16:07:46 34
原创 CSS 选择器
例:为页面所有div设置字体大小与颜色。div{基本语法选择器{样式内容根据选择器筛选出(选择)当前HTML页面的多个元素,对它们统一进行样式设置。样式内容可以设置多个样式,通常我们一个样式一行,提高代码可读性。优点以前我们通过style属性为每一个html元素设置样式,很多重复内容。通过选择器可以1次选择多个html元素,进行统一的样式设置,减少重复代码。理解选择器如何1次选择这多个html元素?这个规则的设置,即选择器类型。因为项目需求有各种不同的场景,所以CSS提供了多种选择器类型。
2023-09-02 16:03:14 36
原创 CSS基础 本章大纲
CSS基础 | 小步教程本章主要内容:第1节 CSS 简介第2节 CSS 选择器第3节 CSS 标签选择器第4节 CSS 类选择器第5节 CSS ID选择器第6节 CSS 注释第7节 CSS 样式调试第8节 CSS 后代选择器第9节 CSS 子元素选择器第10节 CSS 属性选择器第11节 CSS 逗号选择器第12节 CSS 连续选择器第13节 CSS 引入方式第14节 CSS 特性第15节 CSS 优先级第16节 CSS 伪类选择器第17节 CSS 链接伪类第18节 CSS 集合伪类第19节 CSS be
2023-09-02 15:58:20 37
原创 html 框架 iframe
现在需要在d10-iframe-p1.html的第3行 "页面1 CCCC"后放入 d10-iframe-p2.htm页面的内容。frameset是把多个已经有页面整合成一个新的页面,这个新页面并非普通页面:只有frameset,没有body。三个基础页面:d09-welcome,d09-page1.html,d09-page2.html,代码略。链接的target属性与iframe的name属性一致,表示点击链接时,在iframe的位置打开新页面。当点击页面1或页面2的链接时,下方显示相应页面。
2023-08-31 23:35:39 474
原创 html 链接 a
Ctrl+点击链接:新的TAB页打开链接,并且页面不跳转。搜索时,连续打开多个页面。不以斜杠/与http(s)开头的路径,表示当前网站的网页,相对当前html文件的路径。a标签的href属性的页面地址路径与img标签的src属性的地址路径规则一样。实际项目,通常会对上述各动作的样式进行定制,需要通过CSS的伪类技术实现。点击 链接内容,在target指定的位置打开href指定的页面。a默认不是只有一个样式,当不同的动作时,a有不同的样式。直接以http或https开头的路径,也称完整路径。
2023-08-31 23:25:27 388
原创 html 基础标签 本章大纲
html 基础标签 | 小步教程本章内容包括:第1节 html 列表第2节 html 无序列表 ul第3节 html 有序列表 ol第4节 html 定义列表 dl第5节 html 链接 a第6节 html 表格 table第7节 html 表格 跨行跨列第8节 html 表单与表单元素第9节 html 框架 frameset第10节 html 框架 iframe
2023-08-31 23:22:36 38
原创 html案例 网站简介 第1步 整体布局
实际页面请点击网站简介案例 第1步:整体布局。查看源码的方法:网页右键 — 查看网页源代码。根据网页内容与布局特点,整个页面分为三大块:1 头部区,2 主要内容区,3 尾部区。1 头部区(header区):占满页面整个宽度;其中内容为一级标题。2 主要内容区(main区):两边留白, 中间宽度固定为800px;其中包括3小块:关于、原创声明、交流。3 尾部区(footer区):包括底部那条横线,占满页面整个宽度;其中内容为版权说明。
2023-08-30 21:19:01 70
原创 html案例 网站简介页面 本章大纲
注释、文本标签、标签、段落、换行、行内标签、文本常用样式、图片、容器。查看源码的方法:网页右键 — 查看网页源代码。2)盒子模型:设置间距、边框、水平线。1)div容器:进行区块划分;:html基本结构。
2023-08-30 21:15:53 37
原创 html 盒子模型 浏览器查看盒子模型
元素面板下,选中相应节点,右侧切换到 计算样式 面板,下方即显示盒子模型。以Chrome为例,F12打开 开发者工具,或者右键 — 检查。
2023-08-28 16:10:03 199
原创 html 盒子模型 简单使用
设置宽度与高度、padding/border/margin的4个方向分别设置相同值。border 设置4个方向的边框:宽度40px、线型是实线、红色;padding 设置4个方向的内边距都是30px;margin 设置4个方向的外边距都是50px。width 设置内容宽度100px;height 设置高度80px;
2023-08-28 16:07:44 74
原创 html 盒子模型 本章大纲
1)盒子模型的值:14个值,17个属性;2)工具1:查看盒子模型。开发者工具查看各属性具体数值,查看相应颜色;3)工具2:QQ截图工具测试尺寸;4)设值情况:多方向统一设值;多方向分别设值;一次设置多个方向值;5)宽高为什么有时设置无效;6)如何让宽高设置从内容的宽高变成总的宽度;7)盒子模型的运用场景;8)养成研究习惯:搞清楚每一个像素的空白从哪里来。
2023-08-28 16:05:18 44
原创 html 容器 div简介
html 容器 div简介 | 小步教程div:动词divide,名词division;中文意思:划分。div标签用作容器,其中可以包含其它的html标签,div标签同时可以继续嵌套div标签。div标签里的内容既可以是文本,也可以嵌套其它标签,图片、视频、段落、标题、等。需求场景:需要通过一个容器包含多个段落<p>,然后容器加上灰色边框。分析:段落p里无法继续嵌套段落p,外部需要使用div作为容器。错误代码F12看浏览器如何解析的,将外层的p标签解析成了两个p标签,开始一个,结尾一个。简言之,
2023-08-28 16:03:09 328
仿动网风格的蓝色后台模板
2012-02-10
商务信息网后台模板+登录网页
2012-02-10
5UCMS紫色文章类网站模板
2012-02-10
知识问答社区网站绿色模板
2012-02-10
ACTCMS蓝色风格后台管理模板
2012-02-10
某网上办公系统的后台登录页模板
2012-02-10
软件公司产品推广类网站模板
2012-02-10
信息管理系统网页设计模板
2012-02-10
一个基于Ext UI界面的后台模板
2012-02-10
基于jquery的Ajax后台模板框架
2012-02-10
带登录页的WEB管理系统风格模板
2012-02-10
漂亮的学校网站后台管理模板及登录界面
2012-02-10
126邮箱界面的后台模板
2012-02-10
WEB企业信息管理系统的后台登录页及管理页模板
2012-02-10
Web版的超市管理系统后台网页模板
2012-02-10
Myoffice办公系统后台模板页面
2012-02-10
分享一个通用的WEB网站后
2012-02-10
蓝色风格的后台框架模板页
2012-02-10
漂亮网页信息系统后台管理模板
2012-02-10
图书馆管理系统测试分析报告
2012-02-10
化妆品公司网站建设方案
2012-02-10
移动公司改版网站方案
2012-02-10
网上支付可行性分析报告
2012-02-10
珠宝行业网站建设方案
2012-02-10
信息产业公司网站建设方案
2012-02-10
医药公司网站建设方案书
2012-02-10
MIS系统开发文
2012-02-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人