![](https://img-blog.csdnimg.cn/20210412195518875.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html+css
记录html和css复习
广东码农
这个作者很懒,什么都没留下…
展开
-
84CSS实现三角形
我们先来看看边框<!DOCTYPE html><html lang="ch"><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"> <tit原创 2021-06-21 13:40:04 · 66 阅读 · 0 评论 -
83导航条基本样式
index.html<!DOCTYPE html><html lang="ch"><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"> <原创 2021-06-21 12:53:27 · 300 阅读 · 0 评论 -
82导航条结构的搭建
我们在实际开发的时候,都会拿到一个设计图。正常的一般都是拿到一个psd的分层文件。下面开始开发本节这节有一个新的东西min-width。我们在缩小网页的时候,body的宽度也会缩小,缩小到一定程度后,会影响我们整个页面的布局。这时候我们就可以设置min-width,在缩小到min-width值后,body就不会继续缩小了。<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"&g原创 2021-06-19 16:45:50 · 67 阅读 · 0 评论 -
81项目搭建
现在开始就正式用项目来作为练习了;这里练习我们选择小米官网,我们可以写它个几遍,5遍左右,因为同一个项目每次写你的感受是不一样的(大一的时候就写过了…);写完之后还可以写其他的网站,大部分这样的网站的结构都是雷同。项目结构css存放css文件的文件夹base.css实际开发中很多个网页(十几个几十个)中用到的公共样式index.css对应index.htmlreset.css重置样式fontawesome图标字体iconfont图标字体imgs存放图片index.html网站htm转载 2021-06-19 15:36:23 · 45 阅读 · 0 评论 -
80表单补充
<!DOCTYPE html><html lang="ch"><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>表单补原创 2021-06-19 15:11:43 · 65 阅读 · 0 评论 -
79表单简介
1原创 2021-06-19 14:48:36 · 56 阅读 · 0 评论 -
78表格的样式
现在不要使用表格进行布局!除非真的要弄一个表格!<!DOCTYPE html><html lang="ch"><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"原创 2021-06-17 15:43:53 · 45 阅读 · 0 评论 -
77长表格
<!DOCTYPE html><html lang="ch"><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>长表格原创 2021-06-17 12:32:53 · 62 阅读 · 0 评论 -
76表格的简介
<!DOCTYPE html><html lang="ch"><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>表格的原创 2021-06-17 12:24:09 · 42 阅读 · 0 评论 -
74径向渐变
<!DOCTYPE html><html lang="ch"><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>径向渐原创 2021-06-17 11:45:16 · 48 阅读 · 0 评论 -
73线性渐变
<!DOCTYPE html><html lang="ch"><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>线性渐原创 2021-06-16 17:04:43 · 43 阅读 · 0 评论 -
72雪碧图(css-sprite)
为了解决上节的缺点问题,所以诞生了雪碧图雪碧图就是把多个图片合成一张,这样浏览器就不会请求多次了<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device原创 2021-06-16 15:31:47 · 49 阅读 · 0 评论 -
71背景练习2(有点好玩)
用到的图片代码<!DOCTYPE html><html lang="ch"><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"> <原创 2021-06-16 10:42:57 · 66 阅读 · 0 评论 -
70背景练习1
这里用到这个图片<!DOCTYPE html><html lang="ch"><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"> <ti原创 2021-06-16 09:58:53 · 39 阅读 · 0 评论 -
69背景(二)
<!DOCTYPE html><html lang="ch"><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>背景2原创 2021-06-16 09:41:18 · 36 阅读 · 0 评论 -
68背景(一)
<!DOCTYPE html><html lang="ch"><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>背景1原创 2021-06-16 09:16:57 · 37 阅读 · 0 评论 -
67导航条练习
1原创 2021-06-16 08:31:34 · 144 阅读 · 0 评论 -
66其他的文本样式
<!DOCTYPE html><html lang="ch"><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>其他原创 2021-06-15 10:01:23 · 42 阅读 · 0 评论 -
64字体的简写属性
我们之前设置字体的属性主要有以下几种font-sizefont-familyfont-weight(加粗)font-style(斜体)line-heightcolor现在我们可以简写成一个属性font<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg原创 2021-06-14 15:05:34 · 148 阅读 · 0 评论 -
63行高(line-height)
<!DOCTYPE html><html lang="ch"><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>行高&原创 2021-06-14 12:14:14 · 71 阅读 · 0 评论 -
62iconfont
注意font awsome虽然图标丑,图标数量少,但是用上面的免费图标,版权没有问题。iconfont虽然图标多、好看,但是版权不明确,如果实际工作中需要用到的话,最好是先联系下作者,确定版权没问题再用。iconfont使用来到iconfont官网,然后找到我们想要的图标,然后点击加购物车选择所有想要的图标之后,我们点击右上角的购物车图标,然后点击下载代码(当然也可以点击添加至项目,不过会麻烦一点,要再去我的项目那里下载代码)下载代码之后,解压出来,是下面这样的一个文件夹原创 2021-06-14 11:45:40 · 200 阅读 · 0 评论 -
61图标字体的其他使用方式
我们查font awesome文档找到一个我们想要用的图标然后它的编码是\f70c,font-family属于Font Awesome 5 Free,然后font-weight是多少的话去all.css里面查font-face;<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont原创 2021-06-14 11:20:34 · 49 阅读 · 0 评论 -
60图标字体
<!DOCTYPE html><html lang="ch"><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"> <link rel="st原创 2021-06-14 10:49:57 · 55 阅读 · 0 评论 -
59字体族
<!DOCTYPE html><html lang="ch"><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>字体族原创 2021-06-13 15:23:09 · 616 阅读 · 0 评论 -
58轮播图练习
imgs<!DOCTYPE html><html lang="ch"><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"> <tit原创 2021-06-13 14:39:29 · 78 阅读 · 0 评论 -
57元素的层级
<!DOCTYPE html><html lang="ch"><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>元素的原创 2021-06-13 10:24:04 · 113 阅读 · 0 评论 -
56绝对定位元素的位置
<!DOCTYPE html><html lang="ch"><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>绝对定原创 2021-06-13 09:45:54 · 80 阅读 · 0 评论 -
55粘滞定位
新出的定位方式,兼容性不是很好粘滞定位就是说它在某些范围内是可以动,但是到了某些条件,它就固定了<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-原创 2021-06-13 09:15:25 · 93 阅读 · 0 评论 -
54固定定位
<!DOCTYPE html><html lang="ch"><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>固定定原创 2021-06-13 09:05:52 · 90 阅读 · 0 评论 -
53绝对定位
绝对定位有很多特点跟相对定位不一样,比如说这个开启绝对定位会脱离文档流;定位原点(top:0;left:0)是相对于包含块,而不是本身原来的位置<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-06-13 08:58:20 · 55 阅读 · 0 评论 -
52相对定位
使各个盒子水平排列(与本节内容关系不大)<!DOCTYPE html><html lang="ch"><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">原创 2021-06-09 18:17:35 · 45 阅读 · 0 评论 -
51clearfix
外边距重叠问题<!DOCTYPE html><html lang="ch"><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"> <titl原创 2021-06-09 16:32:35 · 54 阅读 · 0 评论 -
50使用after伪类解决高度塌陷问题
重现高度塌陷问题<!DOCTYPE html><html lang="ch"><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"> <tit原创 2021-06-09 14:50:51 · 597 阅读 · 0 评论 -
49clear
clear用于清除浮动元素对本元素的影响<!DOCTYPE html><html lang="ch"><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">原创 2021-06-09 10:42:21 · 39 阅读 · 0 评论 -
48BFC的演示
脱离文档流导致布局混乱<!DOCTYPE html><html lang="ch"><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"> <原创 2021-06-09 10:27:55 · 142 阅读 · 1 评论 -
47高度塌陷和BFC
高度塌陷正常状态<!DOCTYPE html><html lang="ch"><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"> <ti原创 2021-06-09 08:11:01 · 63 阅读 · 0 评论 -
46网页的布局
现在要做下面这样一个布局的网页<!DOCTYPE html><html lang="ch"><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">原创 2021-06-08 15:48:08 · 65 阅读 · 0 评论 -
45导航条练习
做的是w3cschool的导航条<!DOCTYPE html><html lang="ch"><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">原创 2021-06-08 15:03:58 · 96 阅读 · 0 评论 -
44.浮动的其他特点
没设置浮动<!DOCTYPE html><html lang="ch"><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"> <titl.原创 2021-06-08 14:07:04 · 44 阅读 · 0 评论 -
43.浮动
这样设置的话,box1的float默认值为none,所以必须遵守那个水平布局的公式,所以它会有右外边距,所以box2会自动换行。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte.原创 2021-06-08 14:06:48 · 38 阅读 · 0 评论