随笔分类 -  web前端基础

日常学习笔记
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 网页中将字体分为五大类 serif(衬线字体) • sans-serif(非衬线字体) • monospace (等宽字体 阅读全文
posted @ 2021-07-01 11:53 2237774566 阅读(342) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .p1{ /* 设置字体颜色 color设置颜色 font-size设置的并不是文字本身大小 页面中,每个文字都是 阅读全文
posted @ 2021-07-01 11:09 2237774566 阅读(170) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 使用十六进制的rgb值表示颜色 使用三组两位的十六进制数组表示一个颜色 语法:#红色绿色蓝色 十六进制 0 阅读全文
posted @ 2021-07-01 10:47 2237774566 阅读(583) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; /* 颜色单位 直接使用颜色单词表示不同颜 阅读全文
posted @ 2021-07-01 10:28 2237774566 阅读(1528) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 长度单位 像素 px - 像素是我们在网页中使用最多的一个单位 一个像素相当于屏幕中一个点 屏幕实际上由像素 阅读全文
posted @ 2021-07-01 10:01 2237774566 阅读(67) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 去掉项目符号 */ /* ul{ list-style: none; } */ </style> </hea 阅读全文
posted @ 2021-06-30 19:07 2237774566 阅读(442) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- <em> 表示一段内容中着重点(显示为斜体) <strong> 表示一个内容的重要性(显示粗体) 可以单独使用也可一起使用 阅读全文
posted @ 2021-06-30 16:34 2237774566 阅读(32) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 设计a的伪类4种 :link } :visited } 不能写在hover active下 :hover 不 阅读全文
posted @ 2021-06-30 15:00 2237774566 阅读(45) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器优先级</title> <style type="text/css"> .p1{ background-color: yellow; } p{ background-colo 阅读全文
posted @ 2021-06-30 14:50 2237774566 阅读(35) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>样式继承</title> </head> <body> <!-- 祖先元素上的样式 也会被后代元素继承 利用继承,可以将一些基本样式设置给祖先元素,所有后代元素都会继承这些样式 不 阅读全文
posted @ 2021-06-30 14:43 2237774566 阅读(45) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>否定伪类</title> <style type="text/css"> /* 为所有p元素设置背景为黄色,除了class为he 否定伪类 作用: 可以从已选中的元素中剔除某些元素 阅读全文
posted @ 2021-06-30 10:53 2237774566 阅读(39) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>兄弟元素选择器</title> <style type="text/css"> /* 为span后的一个p元素设置背景为黄色 后一个兄弟元素选择器 - 可以选中一个元素后紧挨着的指 阅读全文
posted @ 2021-06-30 10:49 2237774566 阅读(74) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子元素伪类</title> <style type="text/css"> /*为第一个p标签设置背景黄*/ /*:first-child 可以选中第一个子元素*/ /*:last 阅读全文
posted @ 2021-06-30 10:34 2237774566 阅读(175) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <style type="text/css"> /* 为所有具有title属性p元素设置背景颜色黄色 属性选择器 - 根据元素中的属性或属性值选取指定元 阅读全文
posted @ 2021-06-30 10:04 2237774566 阅读(42) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <style type="text/css"> /* 使用伪元素来表示元素中的一些特殊的位置 */ /* 为p中第一个字符设置特殊样式 */ p:first 阅读全文
posted @ 2021-06-29 21:58 2237774566 阅读(54) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪类选择器</title> <style type="text/css"> /* 伪类专用来表示元素的一种特殊状态 需要为处在特殊状态的元素设置样式 伪类四个样式 -link 正常 阅读全文
posted @ 2021-06-29 17:14 2237774566 阅读(53) 评论(0) 推荐(0)
摘要:常用选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <style type="text/css"> /* 设置颜色为红 元素选择器 p{ color: #FF0000; } id选择器 语法 #i 阅读全文
posted @ 2021-06-29 16:09 2237774566 阅读(217) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 块元素(独占一行):做页面布局 div p h1~h6 内联元素(行元素):设置样式 span(专门用来选中文字,为文字设 阅读全文
posted @ 2021-06-29 15:33 2237774566 阅读(34) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS</title> <!-- <style type="text/css"> p{ color: red; font-size: 30px; } </style> --> <l 阅读全文
posted @ 2021-06-29 15:30 2237774566 阅读(26) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习</title> </head> <body> <!-- center标签中的内容会默认在页面居中 --> <center> <a href="#nn" >底部</a> <!- 阅读全文
posted @ 2021-06-29 11:58 2237774566 阅读(44) 评论(0) 推荐(0)