2021年01月_I am the sun?

原创解决css字体图标如何下载使用

步骤一：建立一个文件夹，因为文件有点多，怕搞乱然后里面建立一个html文件。我建立的名字是iconfont.html。如下图：步骤二：从网上下载字体图标。http://icomoon.io（免费的）步骤三：将文件解压到和你html文件相同级上，如下图（另外这些都是解压出来的文件文件夹）：步骤四：用记事本的方式打开style.css的内容，复制一下内容：步骤五：粘贴到html的style样式里面，如下图:步骤六:打开文件夹里面的如下网页，因为我们下载的字体图标都在里面：步骤七：

2021-01-31 17:33:28 839

原创 css精灵图如何取图

css精灵技术：将网页中的一些背景图像整合到一张大图中，减少请求服务器的次数。精灵图的使用：假如我想取这张图片的 q 出来，应该怎么办呢？步骤一：打开firewords，将图片导入。步骤二：点击右上角，如下图，将图片锁住，这样图片位置才不怕被移动。步骤三：如下图步骤四：观察左下方这些数值。前期工作做好啦接下来，搞代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF

2021-01-31 17:00:02 2911

原创 css盒子遮罩层显示与隐藏

实现效果要如图显示：素材：两张图片步骤一：制作一个盒子，记住它的尺寸和大小代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子遮罩层的显示与隐藏</tit

2021-01-31 09:23:14 1602

原创 css中元素的显示与隐藏

1.display属性display:none；【隐藏元素】未加display属性时：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl

2021-01-30 09:10:58 444

原创运用css+html制作简单的淘宝轮播案例图

要让最后显示结果如下方图片：有兴趣的话就跟我一起学吧~我把这个轮播图首页布局这么设置：图片+左箭头+右箭头+下边小圆点1.因为图片大小和盒子一样大，我们div一个盒子出来，并且宽高和图片一样大。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

2021-01-30 08:23:08 3393

原创 css中绝对定位和固定定位的区别

首先我们制作两个标准块级元素，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>

2021-01-29 18:37:43 303

原创 css实现行内元素设置宽高，块级元素取消宽高

1、如何让行内元素设置宽高呢，这里又有一个方法,先引入一个普通的行内元素，代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位特殊特性</title>

2021-01-29 18:15:48 1645

原创 css中让绝对定位的盒子水平或者垂直居中！！

这是一个标准流盒子，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现绝对定位的盒子水平居中</title> <style>

2021-01-29 17:12:53 433

原创 css中的定位叠放次序z-index

我们知道，绝对定位是不占用位置的，那我假如有三个绝对定位的一模一样的盒子，那哪个浮在最上面呢？看看下面代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<

2021-01-29 11:27:43 269

原创 css绝对定位之对齐居中版心内容

假如我想让一个盒子固定在我中部版心位置，应该怎么办呢？方法如下：没有定位之前，他们是普通的两个盒子，html代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum

2021-01-25 13:23:39 900

原创 css中的固定定位例子超详细！！！

固定定位是什么呢？固定定位是元素固定于浏览器可视区的位置。主要作用是可以在浏览器页面滚动时元素的位置也不会改变。语法：{position:fixed;}例子举起来~还没加固定定位的html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in

2021-01-25 12:05:51 922

原创 css中的子绝父相具体例子

子绝父相是什么呢？子级是绝对定位的话，父级要用相对定位。1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。2.子盒子的运动范围必须在父盒子里面移动，因此此时父盒子需要加定位（相对或绝对或固定定位）。3.因为父盒子需要占有位置，放子盒子能浮在上面，因此父盒子应该是相对定位。现在我先做一个例子。背景：html代码如下：<!DOCTYPE html><html lang="en"><head> <meta

2021-01-25 08:50:05 2642

原创 css中的绝对定位

今天来讲css中绝对定位：绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的{position:absolute;}1. 情况一：没有父盒子，即父盒子就是浏览器html代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

2021-01-24 19:53:46 5758 4

原创解答vscode如何画圆

首先，让我们先画一个正方形:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div

2021-01-18 16:38:21 1794

原创解决css父子盒子同时移动的问题~

当盒子嵌套，同时移动的同时该怎么办，如下图，我先制作一对父子盒子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st

2021-01-18 07:19:29 1083

原创使用vscode时如何自动对齐代码（格式化代码）

如果是某一次，直接右键格式化代码就好了如果要设置保存的时候自动格式化代码，，并且每一次都能自动格式化代码，步骤如下：

2021-01-15 23:13:55 33063 9

原创 CSS中用emmet快速生成css代码！！

css基本采取单词简写形式就可以了以前写的line-height:20px;只需要简写成lh20,再摁下回车键就可以了以前写的width：200px;只要写w200就可以了

2021-01-15 10:17:28 95

原创 CSS中用Emmet语法快速生成HTML标签！！！

1.1快速生成html结构的语法生成标签：直接输入div，然后摁回车或者Tab键就行（别的标签也是，包括双标签和单标签）同时生成多个标签如：生成5个段落标签，则p*5，再摁回车或tab键就行生成父子级标签。例如：快速生成无序列表，用ul>li就行，在按回车快速生成兄弟级标签例如：段落p和盒子div要同时生成：p+div生成带有类名或id名的标签例如：div有个类名是demo：用div.demo或者.demo(因为默认就是生成div)再举类似

2021-01-15 10:07:46 301

fighting_dream的博客