HTML5技术学习
关注
分享
扫一扫
文章平均质量分 86
上善若水
每天努力一点，就离大神们近一点。
展开
-
四十八、使用bootstrap中的实现网站底部区域
bootstrap参考链接https://v3.bootcss.com/javascript/#tooltipshttps://v3.bootcss.com/css/#grid-offsetting效果与代码效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte原创 2022-01-09 12:26:39 · 1787 阅读 · 0 评论 -
四十七、使用bootstrap中的选项卡制作产品特色页面
一、bootstrap参考链接参考链接：https://v3.bootcss.com/javascript/#tabs参考链接：https://v3.bootcss.com/components/#media参考链接：https://v3.bootcss.com/components/#breadcrumbs二、效果与代码效果兼容PC端、移动端代码index.html<!DOCTYPE html><html lang="en"><head原创 2022-01-08 12:26:57 · 1152 阅读 · 0 评论 -
四十六、使用bootstrap制作轮播图(carousel)
轮播图(carousel)1、适用于PC端参考链接：https://v3.bootcss.com/javascript/#carousel最终效果代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l原创 2022-01-06 18:49:51 · 1214 阅读 · 1 评论 -
四十五、使用bootstrap制作导航条
使用bootstrap制作导航条参考链接：https://v3.bootcss.com/components/#navbar项目结构工具使用：Bootstrap Button Generator通过Bootstrap Button Generator，你只需输入你想指定给新按钮的样式的CSS类，并简单调整图标的颜色，即可获得新的图标，然后复制代码，粘贴在任意你想要的地方即可。最终效果中等屏幕 桌面显示器 (≥992px) 、大屏幕 大桌面显示器 (≥1200px)：桌面显示器 (<原创 2022-01-06 18:49:37 · 2470 阅读 · 0 评论 -
四十三、项目实战—阿里百秀
案例：阿里百秀移动端首页技术选型方案：我们采取响应式页面开发方案技术：bootstrap框架设计图：本设计图采用1280px设计尺寸页面布局分析屏幕划分分析屏幕缩放发现 中屏幕和大屏幕布局时一致的，因此我们列 定义为col-md- 就可以了，md是大于等于970以上的。屏幕缩放发现 小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局。屏幕缩放发现 超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改变布局。策略：我们先布局 md以上的pc端布局，最后根据实际需求再修改小原创 2022-01-06 18:49:13 · 1890 阅读 · 0 评论 -
四十二、移动端web开发之响应式布局
一、移动端web开发1.1、响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：小于768的为超小屏幕（手机）768 ~ 992 之间的为小屏设备（平板）992 ~ 1200 之间的为中等屏幕（桌面显示器）大于1200的为宽屏设备（大桌面显示器）1.2、响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小， 再改变里面子元素的排列方式和大小，从而原创 2022-01-06 18:49:02 · 402 阅读 · 0 评论 -
四十一、CSS3的新特性（下）
一、CSS3的新特性1.1、CSS3盒子模型css3中可以通过box−sizing\color{red}{box-sizing}box−sizing来指定盒子模型，有2个值：即可指定为content−box\color{red}{content-box}content−box、border−box\color{red}{border-box}border−box，这样我们计算盒子大小的方式就发生了改变。可以分为两种情况：box-sizing:content-box 盒子大小为 width + pa原创 2022-01-06 18:48:44 · 85 阅读 · 0 评论 -
四十、CSS3的新特性（中）
一、CSS3的新特性1.1、伪元素选择器（重点）伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。选择符简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容注意：\color{red}{注意：}注意：before\color{red}{before}before和after\color{red}{after}after创建一个元素，但是属于行内元素新创建的这个元素在文档树中是找不到的，所原创 2022-01-06 18:48:15 · 121 阅读 · 0 评论 -
三十九、CSS3的新特性（上）
一、CSS3的新特性1.1、CSS的现状新增的CSS3特性有兼容性问题，ie9+才支持。移动端支持优于PC端。不断改进中。应用相对广泛现阶段主要学习：新增选择器\color{red}{新增选择器}新增选择器和盒子模型\color{red}{盒子模型}盒子模型以及其他特性\color{red}{其他特性}其他特性CSS3新增选择器CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。属性选择器结构伪类选择器伪元素选择器1.2 属性选择器属性选择器可以根据元素特定属原创 2022-01-06 18:48:04 · 194 阅读 · 0 评论 -
三十八、HTML5的新特性
一、HTML5的新特性HTML5\color{red}{HTML5}HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签\color{red}{新的标签}新的标签、新的表单\color{red}{新的表单}新的表单和新的表单属性\color{red}{新的表单属性}新的表单属性等。这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。声明：新特性增加了很多，但是我们专注于开发常用的新特性。基础班我们讲解部分新特性，到了就业办还会继原创 2022-01-06 18:47:53 · 300 阅读 · 0 评论 -
四十四、栅格系统实现(JavaScript原生脚本、媒体查询)
前言：我们在学习bootstrap前端框架技术的时候，会学到全局css样式：栅格系统。今天，我就用两种方式实现栅格系统，方式一：使用原生JavaScript脚本；方式二：媒体查询bootstrap栅格系统参数信息方式一：使用JavaScript原生脚本实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U.原创 2022-01-06 18:49:26 · 613 阅读 · 0 评论 -
三十七、CSS初始化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2022-01-06 18:47:34 · 73 阅读 · 0 评论 -
三十六、常见布局技巧
一、常见布局技巧1.1、margin负值运用让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框。鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位(保留位置)，如果有定位，则加z-index）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2022-01-05 09:14:11 · 91 阅读 · 1 评论 -
三十五、溢出的文字省略号显示
一、溢出的文字省略号显示1.1、单行文本溢出显示省略号—必须满足三个条件/* white-space: normal; *//* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */white-space: nowrap;/* 2.溢出的部分隐藏起来 */overflow: hidden;/* 3. 文字溢出的时候用省略号来显示 */text-overflow: ellipsis;<!DOCTYPE html><html lang="en"><原创 2022-01-05 09:13:57 · 98 阅读 · 0 评论 -
三十四、vertical-align属性应用
vertical-alignCSS的vertical−align\color{red}{vertical-align}vertical−align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。官方解释：用于设置一个元素的垂直对齐方式\color{red}{垂直对齐方式}垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。语法：vertical-align : baseline | top | middle | bottom值描述baseline默认原创 2022-01-05 09:13:45 · 337 阅读 · 0 评论 -
三十三、CSS三角的做法&用户界面样式
一、CSS三角网页中常见的一些三角形，使用CSS直接画出来就可以了，不必做成图片或者字体图标。一张图，你就知道CSS三角是怎么来的了，做法如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport原创 2022-01-05 09:10:47 · 150 阅读 · 0 评论 -
三十二、精灵图&字体图标
一、精灵图1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，\color{red}{为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，}为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术\color{red}{CSS精灵技术}CSS精灵技术（也称CSS Spri原创 2022-01-05 09:10:33 · 233 阅读 · 0 评论 -
三十一、综合案例—土豆网鼠标经过显示遮罩
案例：土豆网鼠标经过显示遮罩练习元素的显示与隐藏练习元素的定位核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2022-01-05 09:10:19 · 321 阅读 · 0 评论 -
三十、元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来\color{red}{让一个元素在页面中隐藏或者显示出来}让一个元素在页面中隐藏或者显示出来1. display属性display属性用于设置一个元素应如何显示。display：none；隐藏对象display：block；除了转换为块级元素之外，同时还有显示元素的意思display隐藏元素后，不再占有原来的位置。\color{red}{display 隐藏元素后，不再占有原来.原创 2022-01-05 09:10:00 · 120 阅读 · 0 评论 -
二十九、综合案例—淘宝焦点图布局
一、效果图二、布局解析大盒子我们类名为：tb-promo 淘宝广告里面先放一张图片。左右两个按钮 用链接就好了。左箭头 prev 右箭头 next底侧小圆点ul继续做。类名为 promo-nav三、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE原创 2022-01-05 09:09:11 · 457 阅读 · 0 评论 -
二十八、定位（下）
一、定位1.1、定位叠放次序 z-index在使用定位布局时，可能会出现盒子重叠的情况。此时， 可以使用z−index\color{red}{z-index}z−index来控制盒子的前后次序（z轴）语法：{ z-index:1; }数值可以是正整数、负整数或0，默认是 auto，数值越大，盒子越靠上。如果属性值相同，则按照书写顺序，后来居上。数字后面不能加单位只有定位的盒子才有z-index属性<!DOCTYPE html><html lang="en">原创 2022-01-05 09:08:58 · 134 阅读 · 0 评论 -
二十七、定位（上）
一、定位1.1 为什么需要定位提问：以下情况使用标准流或者浮动能实现吗？1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子\color{red}{1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子}1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的\color{red}{2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的}2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的。以上效果，标准流或浮动都无法快速实现，此时需要定原创 2022-01-05 09:08:44 · 128 阅读 · 0 评论 -
二十六、学成在线案例_底部模块
1、底部模块2、代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"原创 2022-01-04 11:06:32 · 127 阅读 · 0 评论 -
二十五、学成在线案例_精品推荐小模块
1、精品推荐小模块2、精品推荐大模块代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte原创 2022-01-04 11:02:38 · 139 阅读 · 0 评论 -
二十四、学成在线案例_banner部分
效果banner制作代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e原创 2022-01-04 09:37:14 · 198 阅读 · 0 评论 -
二十三、学成在线案例_头部区域
一、学成在线案例二、头部区域2.1、准备素材和工具学成在线PSD源文件。开发工具 = PS（切图）/ cutterman插件 + vscode（代码）+ chrome（测试）。2.2、案例准备工作我们本次采取结构与样式相分离思想：创建study目录文件（用于存放我们这个页面的相关内容）。用vscode打开这个目录文件夹。study目录内新建images文件夹，用于保存图片。新建首页文件index.html（以后我们的网站首页统一规定为index.html）.新建style.cs原创 2022-01-04 09:36:32 · 416 阅读 · 0 评论 -
二十二、浮动布局(练习)
练习1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title原创 2022-01-04 09:34:23 · 382 阅读 · 0 评论 -
二十一、PS切图
一、切图1.1、常见的图片格式1.jpg图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的\color{red}{产品类的图片经常用jpg格式的}产品类的图片经常用jpg格式的2.gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果\color{red}{实际经常用于一些图片小动画效果}实际经常用于一些图片小动画效果3.png图像格式是一种新兴的网络图形格式，结原创 2022-01-04 09:32:27 · 330 阅读 · 0 评论 -
二十、浮动（float）
一、浮动（float）1.1、传统网页布局的三种方式网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置。CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：普通流（标准流）浮动定位1.2、标准流（普通流/文档流）所谓的标准流：就是标签按照规定好默认方式排列。\color{red}{所谓的标准流：就是标签按照规定好默认方式排列。}所谓的标准流：就是标签按照规定好默认方式排列。块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、原创 2022-01-04 09:10:31 · 178 阅读 · 0 评论 -
十九、圆角边框&盒子阴影
一、 圆角边框（重点）在CSS3中，新增了圆角边框\color{red}{圆角边框}圆角边框样式，这样我们的盒子就可以变圆角了。border−radius\color{red}{border-radius}border−radius属性用于设置元素的外边框圆角。语法：border-radius:length;radius半径（圆的半径）原理：\color{red}{radius半径（圆的半径）原理：}radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。参数值可以为数值\c原创 2022-01-04 09:10:19 · 209 阅读 · 0 评论 -
十八、产品模块&新闻快报模块_案例
1、产品模块效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-01-04 09:10:05 · 169 阅读 · 0 评论 -
十七、padding应用-新浪导航
1、效果图：2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-01-04 09:09:51 · 66 阅读 · 0 评论 -
十六、盒子模型
一、盒子模型页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。1.1 看透网页布局的本质网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子box。利用CSS设置好盒子的样式，然后摆放到相应的位置。往盒子里面装内容。网页布局的核心本质：就是利用CSS摆盒子。1.2 盒子模型（Box Model）组成所谓盒子模型\color{red}{盒子模型}盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒原创 2022-01-03 21:20:42 · 421 阅读 · 0 评论 -
十五、CSS的三大特性
一、CSS的三大特性css有三个非常重要的三个特性：层叠性、继承性、优先级。1.1、层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）\color{red}{覆盖（层叠）}覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则：样式冲突，遵循的原则是就近原则\color{red}{就近原则}就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。1.2、继承性现实中的继承：我们继承了父亲的姓CSS中的继承：子标签会继承父标签的某些样式，如文本颜色原创 2022-01-03 21:11:59 · 413 阅读 · 0 评论 -
十四、CSS的背景
一、CSS的背景通过CSS背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1.1、背景颜色background−color\color{red}{background-color}background−color属性定义了元素的背景颜色background-color:颜色值;一般情况下元素背景颜色默认值是transparent\color{red}{transparent}transparent（透明），我们也可以手动指定背原创 2022-01-03 21:06:19 · 88 阅读 · 0 评论 -
十三、案例：简单的小米侧边栏
案例：简洁版小米侧边栏案例的核心思路分为两步：把链接a转换为块级元素，这样链接就可以独占一行，并且有宽度和高度。鼠标经过a给链接设置背景颜色。效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="原创 2022-01-03 21:00:08 · 473 阅读 · 0 评论 -
十二、CSS的元素显示模式
一、CSS的元素显示模式了解元素的显示模式可以更好的让我们布局页面。1.1、什么是元素的显示模式作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解它们的特点：可以更好的布局我们的网页\color{red}{可以更好的布局我们的网页}可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示\color{red}{元素（标签）以什么方式进行显示}元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。HTML元素一般分为原创 2022-01-03 19:48:18 · 340 阅读 · 0 评论 -
十一、CSS复合选择器
一、CSS的复合选择器1.1、什么是复合选择器在CSS中，可以根据选择器的类型把选择器分为基础选择器\color{red}{基础选择器}基础选择器和复合选择器\color{red}{复合选择器}复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素（标签）；复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等；1.2 后代选择器（重要）后代选择器\c原创 2022-01-03 19:37:52 · 129 阅读 · 0 评论 -
十、CSS引入方式
CSS的三种样式表按照CSS样式的书写的位置（或者引入的方式），CSS样式表可以分为三类：1.内部样式表（嵌入式）内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style> p { line-height: 26px; color: red; }</style><style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。原创 2022-01-03 19:13:17 · 202 阅读 · 0 评论 -
九、CSS字体属性与文本属性
一、CSS字体属性与文本属性1、CSS字体属性CSS Fonts（字体）属性用于定义字体系列\color{red}{字体系列}字体系列、大小、粗细、和文字样式（如斜体）。1.1、字体系列CSS使用 font−family\color{red}{font-family}font−family属性定义文本的字体系列。 p { font-family: "微软雅黑"; } div { font-family: Arial, "Microsoft Ya原创 2022-01-03 19:08:04 · 271 阅读 · 0 评论