随笔分类 -  前端

html--不透明度(rgba)与手势(cursor)与自适应宽高度写法
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 不透明度 rgba(0,0,0,0):给父元素设置rgba,子元素不会使用该属性 0,0,0 分别代表红绿蓝(255) 0 不透明度 opacity:给 阅读全文

posted @ 2022-01-10 06:53 爱前端的小魏 阅读(193) 评论(0) 推荐(0)

html--overflow(内容溢出)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 6.25rem; border: 1px solid #0000FF; /* overflo 阅读全文

posted @ 2022-01-09 17:03 爱前端的小魏 阅读(257) 评论(0) 推荐(0)

html--display(转化元素,block,inline,inline-block,none)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* #div1,#div2{ width: 100px; height: 100px; background-color: #FF0000; d 阅读全文

posted @ 2022-01-09 15:45 爱前端的小魏 阅读(173) 评论(0) 推荐(0)

html--标签样式(块,内联,内联块,按内容,按显示分类)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 一、按元素 black(块元素):div p ul ol li h1-h6 dl dt dd form table 独占一行 支持所有样式 不写宽的时候 阅读全文

posted @ 2022-01-09 15:21 爱前端的小魏 阅读(279) 评论(0) 推荐(0)

css盒子模型
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- css盒子模型组成: conter > padding > border > margin 物品 填充物 包装盒 盒子与盒子之间的间距 conter 内 阅读全文

posted @ 2022-01-05 18:29 爱前端的小魏 阅读(31) 评论(0) 推荐(0)

html-css优先级(style,id,class,tag,*,继承,!important)
摘要:层级优先级 1、权重比较(以下面标签中权重最大为准) 如: ul li .box p input() .box .hello span #elem{} #elem 2.约分比较(挑选出来以下标签不一致的,比较权重大小) ul li .box p input{} li p input .hello s 阅读全文

posted @ 2022-01-04 12:47 爱前端的小魏 阅读(1035) 评论(0) 推荐(0)

html--css继承(inherit)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> 文本相关的样式可以被继承 布局相关的样式不能被继承(默认不可以),但是可以通过继承(inherit),如下 <style> div{ width: 200px; 阅读全文

posted @ 2022-01-03 19:42 爱前端的小魏 阅读(315) 评论(0) 推荐(0)

html--结构伪类选择器
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> child 孩子 向下寻找时,没有找到指定元素,则不会在寻找 type 类型 向下寻找时,没有找到指定元素,继续往下寻找,直到找到 从(1)开始搜索 nth-ch 阅读全文

posted @ 2022-01-03 18:49 爱前端的小魏 阅读(85) 评论(0) 推荐(0)

html--伪类选择器(鼠标移入移出)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 针对a标签使用该元素 a:link 开始 a:visited 结束 n :hover 鼠标移入 n:active 鼠标点击 注意 : 当使用过visit 阅读全文

posted @ 2021-12-30 12:52 爱前端的小魏 阅读(959) 评论(0) 推荐(0)

html--基础知识层级选择器
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 后代 ul li{} 寻找父级元素下面的的元素(如:li,寻找父元素下面li标签) 父子 ul > li{} 寻找父级元素(如:ul,寻找子元素上面的u 阅读全文

posted @ 2021-12-30 12:51 爱前端的小魏 阅读(170) 评论(0) 推荐(0)

html--基础知识(字体粗细/倾斜效果)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> 1.font-weight= 字体的粗细效果 属性值有: normal 默认展示的字体,不加粗 bold 加粗 number:100-500 默认展示的字体,不加 阅读全文

posted @ 2021-12-27 21:47 爱前端的小魏 阅读(733) 评论(0) 推荐(0)

html--基础知识(border边框样式)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- border-style =边框线条 solid 实线 dashed 虚线 想要针对某一个单独位置设置边框颜色或大小等 如:border-left-st 阅读全文

posted @ 2021-12-24 08:54 爱前端的小魏 阅读(1141) 评论(0) 推荐(0)

html--基础知识(三种颜色写法)
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style>/* 颜色的三种写法: 1、英文单词写法:如 red 2.数字写法 由0-9,a-f组成 3.rgb三原色表示法 取值范围:0-255 */ div{ 阅读全文

posted @ 2021-12-23 12:52 爱前端的小魏 阅读(313) 评论(0) 推荐(0)

html--基础知识,两种引入css样式方式
摘要:1.使用link标签去引入css样式 2.使用@import直接去引用 如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- #引入两种css样式方法 1.在head里面使用link标签进行引用 r 阅读全文

posted @ 2021-12-23 09:00 爱前端的小魏 阅读(275) 评论(0) 推荐(0)

html基础知识-表格标签(form,input)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <title></title> form 、input form:表单最外层容器(如果没有form标签,其他功能点击没响应) input:用户搜索用户信息 如:输入框,密码框等 typ 阅读全文

posted @ 2021-12-20 13:52 爱前端的小魏 阅读(396) 评论(0) 推荐(0)

html--基础知识(table表格)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- table 表格写法 表单 tr 表格行 th 表头 td 表格单元 caption 表格标题 语义化标签:让标签更好记一些 thead/tFood t 阅读全文

posted @ 2021-12-17 19:49 爱前端的小魏 阅读(127) 评论(0) 推荐(0)

html--基础知识(列表排序ul,ol,dl)
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> ul 无序列表 属性type:circle实心圆 dist空心圆 square实心方块 ol 有序列表 属性type :A,1 …… 阅读全文

posted @ 2021-12-16 12:24 爱前端的小魏 阅读(180) 评论(0) 推荐(0)

调整锚点(点击可跳转对应位置,name,id)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 锚点:点击链接跳转对应位置 一般应用与返回顶部或,到达指定位置 两种写法: 一种如下面写法: id获取属性 如:<h2 i 阅读全文

posted @ 2021-12-16 11:07 爱前端的小魏 阅读(130) 评论(0) 推荐(0)

html--基础知识(br 换行)
摘要: 阅读全文

posted @ 2021-12-16 11:03 爱前端的小魏 阅读(78) 评论(0) 推荐(0)

html--基础知识(img 插入图片)
摘要:<!DOCTYPE html><html><head><meta charset="utf-8"><title>网页标题</title> </head><body> img:分为 绝对路径:完整的路径 相对路径 :上一层路径 src=路径 属性: alt=只有当图片损坏时,才会有该提示 title= 阅读全文

posted @ 2021-12-16 09:02 爱前端的小魏 阅读(681) 评论(0) 推荐(0)

导航