- 博客(24)
- 收藏
- 关注
RSS订阅原创 外部样式表的创建，那些你不知道的差别？
一、link方式：<link rel="stylesheet" type="text/css" href="css/index.css" />二、import方式：@import('相对路径下的文件全名');三、两者的差别：1、本质：link属于XHTML标签，而@import是CSS提供的一种方式。2、加载顺序：当一个页面被加载的时候（被浏览者浏览的时候），link引入的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@im
2021-12-07 10:48:31
523
原创 详细了解数组form方法——es6新特性,结合set实现数组去重
一、form方法介绍1、定义：Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。两类对象：1）类似数组的对象a.它必须是一个对象 b.它有 length 属性例如：let arrAlik1 = { name: 'code', age: 20, gex: '男', length: 3...
2021-07-20 15:35:36
963
原创 transform的使用以及实战案例
一、transform介绍1、位移 translatetransform: translateX(30px) / translateY(30px) / translateZ(30px)分别代表元素在水平方向/竖直方向/垂直屏幕的方向移动的位置大小特点其和position：relative一样，元素相对于自己改变位置，不会脱离文档流，translate位移时，默认原点时元素的中心位置2、放大与缩小scaletransform: scale(n)当n大于1时则为放大原来的n倍，当n小
2021-07-18 16:29:46
1669
原创 个性化定制复选框checkBox——通过本章你可以了解阴影和简单动画制作以及伪类选择器的使用
一、阴影效果box-shadow1、实现原理： 浏览器会在该元素的下方绘制一个和其形状一致的影子,通过对影子的移动完成阴影效果，最后对阴影设置模糊程度，此时的阴影效果更加的逼真了。2、box-shadow的取值案例1：设置影子的模糊值,box-shadow: 0px 0px 5px 0px black;案例2：设置影子的位移，box-shadow:5px 5px 0px 0px black;案例3：设置影子的扩大范围，box-shadow:0px 0px...
2021-07-18 14:54:19
599
原创 CSS高级选择器以及使用案例——电影排行榜
一、CSS高级选择器的几种写法1、xxx:first-child 选择第一个xxx元素2、xxx:nth-of-type(even) 选择序号同类型为偶数的xxx元素3、xxx:nth-of-type(odd) 选择序号同类型为奇数的xxx元素4、xxx:nth-of-type(index) 选择（同类型）序号为index的xxx元素5、xxx:nth-child(n) 选择序号（自然排序）为n的xxx元素二、实战案例1、效果：2、案例分析分析效果图可知：第.
2021-07-18 10:09:55
785
原创 CSS高级选择器的使用
一、选择器的种类1、伪类选择器： xxx: nth-of-type(index) index指同类型兄弟元素中的下标，选择同类型元素的第index个2、属性选择器：xxx[ attr = val ] attr指属性名称，val为属性值3、属性选择器：xxx[ href $= val ] $表示属性值的结尾4、属性选择器：xxx[ class ^= 'tap' ] ^表示属性值的开头，这里指class为tap开头的元素二、案例运用效果图：代码：<!DOCTYP.
2021-07-17 20:47:33
156
原创 overFlow的含义与巧妙使用
一、overFlow意义overflow：容器（满的）溢出，它有以下取值：1、visible（默认）溢出部分可见2、hidden溢出部分隐藏3、auto适当加入滚动条（当父元素高度固定，内容溢出，设置overflow: auto会出现滚动条）overflow-x和overflow-y也有这三种取值，分别代表水平或者垂直方向溢出的处理二、实现案例1、默认展示2、当鼠标悬浮在某一卷时，其他的内容隐藏，该卷展开，效果如下：3、代码<!DOCT...
2021-07-17 19:27:19
7720
2
原创 Web小案例——智能表单
一、完成效果二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>智能表单</title> </head> <style type="text/css"> * { margin: 0px; padding: 0px;} form{ background-color: #9ab106;overflow: .
2021-07-17 16:44:38
396
原创 HTML5特性——语义化标签
一、语义化标签有哪些？有什么含义？1、<header>...</header> 头部2、<footer>...</footer> 尾部3、<nav>...</nav> 导航4、<article>...</article> 文章（通常指数据内容）5、<aside>...</aside> 侧边栏6、<main>...</m...
2021-07-17 15:14:17
343
原创 元素的三大类型与盒子模型
一、三大类型的特点及标签类型 特征 标签 块元素 可以设置宽高大小 默认宽度100% 独占一行 p、ul li h1~h6、 div、form、table 内联（行内）元素 无法设置宽高 元素大小随内容变化 默认排一行 i、b、span、a 内联块元素 可以设置宽高大小 能够排在一行显示 img、inpu...
2021-07-17 10:58:35
326
原创 元素的浮动
1、浮动元素会脱离网页文档,与其他元素发生重叠但是，不会与文字内容发生重叠，如下面案例：1)通过元素的浮动，可以生成文字浮动的效果代码：<style type="text/css"> .d1{ height: 200px; width: 200px; background-color: red; float: left; } .d2{ height: 300px; width: 500px; background-color: sky...
2021-07-15 21:47:28
1025
原创 Web开发中常见的图片格式及区别，背景图的布局
一、图片种类及特性gif 支持动画，只有透明和不透明两种模式，只有256种颜色 jpg 有损压缩算法，体积较小，不支持透明，不支持动画 png 采用无损压缩算法，体积相对较小，支持背景透明，不支持动画 svg 记录图像的形状和颜色，不会失真，适合颜色和形状较为简单的图形 二、背景图在项目的img目录下存放dong.gif图片：1、background-img: url(image/dong.gif);默认平铺，重复效果：2.
2021-07-11 16:54:20
321
原创 样式层叠——选择器的权重
一、CSS的优先级1、案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #p1{ color: red; } .pp{ color: yellow; } p{ color: blue; } *{
2021-07-11 16:14:56
352
原创 CSS选择器小案例——商城主页
一、实现如下效果：1、分析页面层次1).页面架构可分为三部分，banner，nav和bottombanner：主要嵌套了图片，宽度占据页面100%nav：由多个超链接构成，分布在一行，且上下左右都有一定的间距bottom:文字居中，设置背景色二、实现代码<html> <head> <meta charset="utf-8"> <title></title> <style> html{
2021-07-11 15:10:44
359
原创 Web基础——容器的使用
一、span的使用1、span简要介绍：<span></span>只是一个容器，没有特殊意义，用于包裹文本，便于给文本增加样式。2、案例使用： 1）.“1、幸运，是另外一种实力”居中，设置文字的背景颜色以及文字的大小text-align：center;文字居中、background-color: aliceblue;背景色设置、font-size: 16px;文字大小、color：blue;文字颜色<p style="text-align: center.
2021-07-11 14:22:13
571
原创 浅谈get与post请求的区别
一、与服务器的数据交互1、get请求通常表示获取数据2、post请求通常表示提交数据二、数据形式1、get请求的数据都以query的形式展示在地址栏上，用户可见2、post请求发送的数据不会再地址栏上出现三、传输数据的容量1、get请求不能提交大量数据2、post可以，两者最好不要混用四、总结参考：https://blog.csdn.net/tryheart/article/details/107323671推荐：https://www.cnblogs.co.
2021-07-11 13:15:35
155
原创 Web案例——制作简历
一、分析简历的表格结构1、制作目标：2、分析表格结构表格总体呈6X7结构，6行7列，所有文字居中，标题“个人简历”加粗。特殊行列： 第一行：仅有一个单元格，宽度占据了7列 第二行第七列：照片这一单元格，长度占据了4行 第三行第四列：宽度占据3列 第四行第四列：宽度占据3列 第五行第四列：宽度占据5列 第六行第四列：宽度占据6列二、代码实现1、表格总体结构实现，边框为1像素，单元格边框...
2021-07-11 09:04:39
6826
2
原创 Web小案例——表格实现
一、绘制一个表格1、代码实现结构：table表示表格标签，tr表示行标签，td表示一个单元格,th表示表头的一个单元格（与td不同的是文字样式是加粗的）<table> <tr> <th>表头</th> <tr> <tr> <td>单元格</td> <tr></table>2、案例：<table&
2021-07-03 21:29:13
1689
原创 Web标签知识点补充
一、超链接跳转方式1、a标签默认在当前页面打开，target属性为_blank表示在新页面打开<a href="https://www.baidu.com/">在当前页面打开</a><a href="https://www.baidu.com/" target="_blank">新建窗口打开</a>二、列表属性1、ul无序列表属性，type的值可为：circle，square，disc，效果如下：2、ol有序列表的属性，type可为
2021-07-03 20:44:27
94
原创 Web中图片的使用，下载与切图
一、图片的使用1、图片在网页中的默认排列顺序<img src="img/1.jpg" /><img src="img/2.jpg" /><img src="img/3.jpg" /><img src="img/4.jpg" /><img src="img/5.jpg" /> 2、展示效果3、图片布局：默认从左到右排列，以底部对齐，如果页面一行展示不完所有图片，则会默认换行。4、设置图片大小，在img标.
2021-07-03 19:40:33
1373
原创 Web案例——博客
一、编写标题1、在body内输入标题“论web开发的重要性”（注：每次编辑完要及时保存，页面才能刷新最新更改的内容），运行效果如下图2、给标题加粗加大字号，在标题外加<h1></h1>标签（注：每个标签都应该具有闭合标签，成对出现，个别除外后续会有详细讲解）h1表示一级标题，效果如下：3、html默认有h1~h6，字号从大到小，h7等不是html5所定义的标签，所以没有任何样式效果，代码运行结果如下：4、完善标题内容，给时间加上斜体样式，使用<i>
2021-07-03 13:34:56
172
原创 网页开发准备工作
１、代码编写工具入门推荐：HbuilderX，（国产，轻量）官网下载地址：https://www.dcloud.io/hbuilderx.html2、创建一个Web项目点击【文件>新建>项目】，输入项目名称，并选择【基本HTML项目】，点击【创建】，如下图所示：3、运行项目点击【运行>运行到浏览器>Chrome】4、代码缩进当出现嵌套结构时（某个标签出现在另一个标签的内部），需要使用缩进使用键盘的Tab键进行缩进。5、代码结构文
2021-07-03 09:36:03
141
原创 前端开发常识
1、什么是网页？电脑浏览器，手机浏览器打开的页面，微信关注的公众号等都是由网页制作而成。2、浏览器是网页的载体，有哪些常用的浏览器？PC端：Opra 欧鹏，FireFox 火狐，Internet IE，Safari 苹果系统特有，Chrome 谷歌，QQ浏览器移动端：苹果系统 Safari，安卓系统：Chrome，微信：QQ浏览器3、网页的编程语言由谁制作并且更新维护的？W3C 万维网联盟（World Wide Web Consortium）非盈利组织，提出网页制作规范和标准官网
2021-07-03 08:34:57
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人