HTML+CSS
关注
分享
扫一扫
文章平均质量分 93
HTML和CSS相关文章
imByte
三生三世十里桃花，一心一意百行代码
展开
-
Flex 弹性布局
目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，因此这里来介绍一下何为 Flex 弹性布局。Flex 布局可以为盒状模型提供最大的灵活性，自动弹性伸缩，合适适配不同大小的屏幕。说明当父盒子设置为 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。任何一种元素都可以指定为 flex 布局。.wrap { display: flex}/* 行原创 2022-04-08 20:42:35 · 1078 阅读 · 0 评论 -
Less 快速入门
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。Less 作为 CSS 的一种形式扩展，并没有减少 CSS 的功能，而是在现有的 CSS 语法上，添加了程序式语言的特性。原创 2021-12-08 13:43:29 · 847 阅读 · 0 评论 -
品优购项目——黑马程序员pink老师/完整源代码/项目讲解/内容补充完善
品优购项目规划1. 网站制作流程现阶段，主要是做前台页面设计2. 品优购项目整体介绍项目名称：品优购项目描述：品优购是一个电商网站，需求是完成 PC 端首页、列表页、注册页面 的制作3. 开发工具以及技术栈开发工具VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）技术栈利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式采取结构与样式相分离，模块化开发...原创 2021-09-09 17:34:41 · 26349 阅读 · 3 评论 -
品优购项目源代码
文章目录HTML 源代码1. index.html2. list.html3. register.htmlCSS 源代码1. base.css2. common.css3. index.css4. list.html5. register.cssHTML 源代码1. index.html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta原创 2021-09-09 17:31:37 · 13386 阅读 · 3 评论 -
HTML5和CSS3必须掌握的新特性「黑马pink」
HTML5 新特性HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性1. HTML5 新增的语义化标签以前布局，我们基本用 div 来做，但是 div 对于搜索引擎来说，是没有语义的。例如<div class=“header”> </div><div class=“nav”> </div>.原创 2021-09-02 19:52:43 · 534 阅读 · 0 评论 -
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
文章目录1. 精灵图1.1 为什么需要精灵图1.2 精灵图（sprites）的使用1.3 案例：拼出自己的名字1. 精灵图1.1 为什么需要精灵图精灵图的由来一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求，那么请求的次数将大大增加因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）核心原理将众多小图标合并到同一张图上，用来减轻 htt原创 2021-08-31 13:59:01 · 691 阅读 · 0 评论 -
CSS基础「六」元素的显示与隐藏
文章目录1. 元素的显示与隐藏本质：让一个元素在页面中隐藏或者显示出来1.1 display 属性 ☆☆1.2 visibility 可见性1.3 overflow 溢出2. 综合案例案例：鼠标经过显示遮罩1. 元素的显示与隐藏类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏1.1 display 属性 ☆☆display 属性用于原创 2021-08-20 12:23:45 · 271 阅读 · 0 评论 -
CSS基础「五」定位
文章目录1. 定位1.1 为什么需要定位1.2 定位的组成1.3 静态定位 static1.4 相对定位 relative1.5 绝对定位 absolute1.6 子绝父相1.7 固定定位 fixed1. 定位1.1 为什么需要定位提问： 以下情况使用标准流或者浮动能实现吗？NEW标签可以固定在盒子右上方，并且压住其他盒子当我们滚动窗口的时候，盒子是固定屏幕某个位置的以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：浮动可以让多个块级盒子一行没有缝隙排列显示原创 2021-08-20 11:54:06 · 601 阅读 · 0 评论 -
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写，文章讲解了学成在线首页的制作思路，并贴出了源代码，作为学习笔记分享给大家如有错误，欢迎指出。如有侵权，联系删除文章目录1. 案例准备工作2. CSS属性书写顺序3. 页面布局思路4. 确定版心5. 头部制作6. banner 制作7. 精品推荐小模块8. 精品推荐大模块9. 底部模块10. 完整源代码总体制作效果如下，完整源代码见文末1. 案例准备工作本案例采取结构与样式相分离思想images中存储所用图片index.h.原创 2021-08-14 01:12:16 · 7553 阅读 · 1 评论 -
CSS基础「四」浮动 \ 常见网页布局
文章目录1. 浮动1.1 传统网页布局三种方式1.2 浮动用法初体验1.3 浮动语法格式1.4 浮动特性1. 浮动1.1 传统网页布局三种方式网页布局的本质——用 CSS 来摆放盒子，把盒子摆放到相应位置。CSS 提供了三种传统布局方式（盒子的排列顺序）普通流（标准流）浮动定位标准流（普通流 / 文档流）标准流是最基本的布局方式，就是标签按照规定好默认方式排列。我们前面学习的就是标准流，如下块级元素会独占一行，从上向下顺序排列，如 <div>、<hr>原创 2021-08-13 13:00:47 · 760 阅读 · 0 评论 -
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
文章目录1. 盒子模型1.1 网页布局的本质1.2 盒子模型（Box Model）组成1.3 边框（border）1.4 表格的细线边框1.5 内边距（padding）1.5.2 补充：padding影响盒子的应用1.6 外边距（margin）1.7 外边距合并1.8 清除内外边距1. 盒子模型页面布局要学习三大核心：盒子模型、浮动 和 定位。学习好盒子模型能帮助我们布局页面1.1 网页布局的本质网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子 Box利用 CSS 设置好盒子原创 2021-07-29 18:28:09 · 1013 阅读 · 0 评论 -
CSS基础「二」复合选择器 / 元素显示模式 / 背景 / 三大特性
接上篇文章 CSS基础——CSS基础选择器/CSS字体属性/CSS文本属性/CSS三种样式表 前言：本文为跟随黑马pink老师自学 CSS 所写学习笔记，主要为后期查询时使用下面贴出学习时所用网站的链接https://www.bilibili.com/video/BV14J4114768?t=5&p=29https://www.w3school.com.cn如有侵权联系删除，如有问题欢迎指出。文章目录1. CSS 复合选择器1.1 后代选择器1.2 子元素选择器1.3.原创 2021-07-26 22:23:02 · 954 阅读 · 0 评论 -
Emmet语法——HTML和CSS快速生成代码/VS code如何快速格式化代码
前言：本篇文章简单讲述了HTML和CSS中的Emmet语法，更多详细语法内容可以参见此文章https://code.z01.com/Emmet/Emmet 语法Emmet语法的前身是Zen coding，它使用缩写来提高 HTML/CSS 的编写速度，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，下面介绍如何使用。1.1 快速生成HTML标签生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></d.原创 2021-07-24 18:00:48 · 638 阅读 · 0 评论 -
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言：本文为跟随黑马pink老师自学 CSS 所写学习笔记，主要为后期查询时使用下面贴出学习时所用网站的链接https://www.bilibili.com/video/BV14J4114768?t=5&p=29https://www.w3school.com.cn如有侵权联系删除，如有问题欢迎指出。文章目录1. CSS简介1.1 HTML 与 CSS1.2 CSS 语法规范1.3 CSS 代码风格2. CSS 基础选择器2.1 选择器分类2.2 标签选择器2.3 类选择器2.4 .原创 2021-07-24 16:55:30 · 622 阅读 · 0 评论 -
HTML基础——零基础必看
前言：本文为跟随黑马pink老师自学h5所写学习笔记，大部分来自课件及网络，如有侵权联系删除一、网页相关概念1. 网页概念网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.h.原创 2021-07-22 21:19:01 · 950 阅读 · 0 评论