![](https://img-blog.csdnimg.cn/a8bf867fab0d40f5a9751bb4e96e9611.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html5+css3
文章平均质量分 93
笔记
缘友一世
我是缘友一世博主,热爱技术、热衷于分享。我的博客专注于计算机科学和软件开发领域的学习和实践经验。在博客中,你可以找到各种编程语言的深入解析和实用技巧。我致力帮助读者更好地理解和应用技术。同时,我也关注技术行业的发展趋势和前沿研究。感谢您的关注和支持!部分文章内容辅助使用gpt等人工智能编辑,如果出现错误之处,请指正
展开
-
HTML5+css3课后习题【二】
HTML5+css3第5,6,7,8章课后习题原创 2022-11-05 17:09:43 · 12004 阅读 · 2 评论 -
HTML5+css3课后习题【一】
因为静态网页的访问速度快,所以现在互联网上的所有网站都是静态网页组成的。(✖️)大多数网页是动静混合模式。“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。(✔️ )在Web标准中,表现是指网页展示给访问者的外在样式。( ✔️)在网页中,层叠样式表指的是JavaScript。(✖️ )CSS所有的浏览器对同一个CSS样式的解析都相同,因此页面在不同浏览器下的显示效果完全一样。( ✖️)结果不一样。原创 2022-11-04 23:36:00 · 8701 阅读 · 1 评论 -
css选择器(详细讲解)
是不是有很不多小伙伴,在学习和使用选择器有记不清的情况呢?本文,便对此进行总结❤️❤️❤️❤️❤️❤️❤️❤️❤️文章目录一 属性选择器1.1 E[att^=value]属性选择器1.2 E[att$=value] 属性选择器1.3 E[att*=value]选择器二 关系选择器2.1 子代选择器2.2 兄弟选择器(+ ~)2.2.1 临近兄弟选择器2.2.2 普通兄弟选择器三 结构伪类选择器3.1 :root 选择器3.2 :not 选择器3.3 :only-child选择器3.4 :firs.原创 2022-03-31 16:31:39 · 212 阅读 · 0 评论 -
表单的基础梳理
文章目录一 创建表单formmethodname二 表单控件input控件定义:一个完整的表单通常由表单控件、提示信息和表单域3部分构成。在这里插入图片描述一 创建表单form<form></form>用于定义表单域,即创建一个表单。form会将所有的内容提价给服务器<form action="url地址" method="提交方式" name="表单名称"></form>action属性用于指定接受处理表单数据的服务器程序的url地址。原创 2022-03-16 22:59:25 · 1181 阅读 · 0 评论 -
vscode中自定义html5的框架
文章目录步骤第1步第2步第3步第4步步骤第1步按照下图操作【设置->用户点代码片段】第2步搜索框内输入html,打开html.json文件第3步打开如下,当然你们的是没有马赛克的,只是为了演示真实(你们的)情况***谅解***来张图安慰一下第4步将我的代码复制粘贴到{ }内,最后的情况如下: "h5 template": { "prefix": "vh", // 对应的是使用这个模板的快捷键 "body": [ "<!DOCTYPE html>原创 2022-03-02 20:15:51 · 357 阅读 · 0 评论 -
HTML5+CSS3笔记01(标签)
文章目录初识web第一章初识HTML51 标签1.1标签概述1.2标签的关系1.3标签属性1.4HTML5 文档头部相关标签2 文本控制标签2.1段落标签2.2水平线标签2.3换行标签3 文本样式标签3.1文本格式化标签4代码总结5 图片标签6路径的介绍7 音频标签8 视频标签9 链接标签10 列表标签vscode下载地址初识webWEB标准的构成:构成语言说明结构HTML页面元素与内容表现CSS网页元素的外观和位置等(页面元素)行为JavaScript原创 2022-02-04 17:28:18 · 387 阅读 · 0 评论 -
HTML5+CSS3 02(表格、表单标签、语义化,字符实体标签)
表格,表单,语义化标签,字符实体原创 2022-02-04 20:49:43 · 519 阅读 · 0 评论 -
css3学习(01认知,选择器,样式)
一 基础认知1.1 CSS的介绍CSS(层叠样式表)(Cascading style sheets)1.2 CSS语法规则css写在style标签中,style标签一般写在head标签里面,title标签下面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="原创 2022-02-06 17:40:58 · 685 阅读 · 0 评论 -
CSS学习(02选择器进阶,背景属性知识)
一 拓展1 常见颜色取值(了解)2 标签水平居中方法总结margin:0auto二 综合案例案例1案例2三 选择器的进阶3.1 后代选择器:空格3.2 子代选择器:>3.3 并集选择器:,3.4 交集选择器:紧挨着3.5 hover伪类选择器3.6 emmet语法四 背景相关知识4.1 背景颜色4.2 背景图片4.3 背景平铺4.4 背景位置4.5背景相关属性的连写形式4.6(拓展)img标签和背景图片的区别原创 2022-02-08 12:13:45 · 425 阅读 · 0 评论 -
CSS学习(03元素显示模式 css特性 盒子模型)
文章目录一 元素显示模式1.1 块级元素1.2 行内元素1.3 行内块元素1.4 元素显示模式转换一 元素显示模式1.1 块级元素显示特点:1.独占一行(一行只能显示一个)2.宽度默认是父元素的宽度,高度默认由内容撑开3.可以设置宽高代表标签:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.块:独占一行;宽度默认是父级100%;添加宽度都生效1.2 行内元素显示特点:1.一行可以显示多个2.宽度和高度默认由内容开3.不可以设原创 2022-02-10 21:45:04 · 303 阅读 · 0 评论 -
CSS学习(04盒子模型)
一 盒子模型1.1盒子模型的介绍盒子的概念1.页面中的每一个标签,都可看做是一个“盒子”,通过盒子的视角更方便的进行布局2.浏览器在汇染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子***盒子模型 ***CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是盒子模型记忆:可以联想现实中的包装盒<!DOCTYPE html><html lang=原创 2022-02-12 22:00:51 · 262 阅读 · 0 评论 -
CSS学习(05结构伪类选择器 浮动及清除)
一 结构伪类选择器1.1 作用与优势:1.2 选择器1.3 n的注意点二 伪元素2.1 区别:2.2 种类:2.3 注意点:三 标准流四 浮动4.1 浮动的产生4.2 浮动的作用4.3 浮动的代码4.4 浮动的特点4.5 (案例)网页布局案例4.6 (案例)小米模块案例4.7 (案例)网页导航案例五 清除浮动5.1 清除浮动的介绍5.2 清除浮动的方法 — ① 直接设置父元素高度5.2 清除浮动的方法 — ② 额外标签法5.3 清除浮动的方法 — ③ 单伪元素清除法原创 2022-02-14 22:21:24 · 493 阅读 · 0 评论 -
html学习(06)-网页制作【学成在线】
网页制作练习原创 2022-02-25 19:39:02 · 702 阅读 · 0 评论 -
CSS学习(07)定位
文章目录CSS布局◆ 定位1.1 网页常见布局方式1.2 定位的常见应用场景2.1使用定位的步骤3.1 静态定位4.1 相对定位5.1 绝对定位CSS布局◆ 定位◆ 装饰◆ 选择器拓展1.1 网页常见布局方式标准流块级元素独占一行 → 垂直布局行内元素/行内块元素一行显示多个 → 水平布局浮动可以让原本垂直布局的 块级元素变成水平布局定位可以让元素自由的摆放在网页的任意位置一般用于 盒子之间的层叠情况1.2 定位的常见应用场景,可以解决盒子与盒子原创 2022-03-05 13:49:42 · 159 阅读 · 0 评论 -
CSS(08装饰)
文章目录二 装饰二 装饰垂直对齐方式➢ 基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)垂直对齐方式➢ 属性名:vertical-align➢ 属性值:属性值效果baseline默认,基线对齐top顶部对齐middle中部对齐bottom底部双齐(拓展)项目中 vertical-align 可以解决的问题文本框和表单按钮无法对齐问题 <style> input { heigh原创 2022-03-08 22:48:42 · 286 阅读 · 0 评论 -
综合案例(09-小兔鲜项目)
文章目录一、项目样式补充1.1 精灵图的介绍1.3 精灵图的使用步骤一、项目样式补充1.1 精灵图的介绍Ø 场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图Ø 优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度Ø 例如:需要在网页中展示8张小图片• 8张小图片分别发送 → 发送8次• 合成一张精灵图发送 → 发送1次1.3 精灵图的使用步骤创建一个盒子通过PxCook量取小图片大小,将小图片的宽高设置给盒子将精灵图设置为盒子的背景图片通过PxCook原创 2022-03-10 22:51:01 · 4032 阅读 · 0 评论 -
html(10-小鲜兔儿项目)
文章目录综合项目小兔鲜项目一 分析1 Header 部分开发2Footer 部分开发3 网站入口 xtx-entry 部分开发4 新鲜好物面板 xtx-new-goods 部分开发5 生鲜商品面板 xtx-fresh-goods 部分开发二 项目结构三 代码实现3.1 index.html 代码3.2 base.css 代码3.3 common.css 代码3.4 index.css 代码四 效果综合项目小兔鲜项目一 分析1 Header 部分开发2Footer 部分开发原创 2022-03-12 21:35:45 · 10065 阅读 · 2 评论