前端阿峰
web前端工程师
获得徽章 0
- 后代子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul li {
color: yellow;
}
ul p{
color: #0000FF;
}
ol li {
color: pink;
}
</style>
</head>
<body>
<ul>
<li>这是第一个无序列表
<p>这是第一个p标签</p >
</li>
<li>这是第二个无序列表
<p>这是第二个p标签</p >
</li>
<li>这是第三个无序列表
<p>这是第三个p标签</p >
</li>
<li>这是第四个无序列表
<ol>
<li>这是有序列表</li>
<li>这是有序列表</li>
<li>这是有序列表</li>
<li>这是有序列表</li>
</ol>
</li>
<li>这是第五个无序列表</li>
</ul>
</body>
</html>展开35 - 内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
}
p {
color: red;
}
h1 {
background-color: purple;
}
</style>
</head>
<body>
<div>这是第一个div</div>
<div>这是第二个div</div>
<p>这是一个p</p >
<h1>这是一个一级标题</h1>
</body>
</html>展开25 - 内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
</body>
</html>展开评论1 - CSS样式表特征
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink !important;
}
</style>
<link rel="stylesheet" type="text/css" href="css/02.css"/>
</head>
<body>
<div style="background-color: green;">这是一个div</div>
</body>
</html>展开76 - CSS的优先级
1.最近的祖先样式比其他祖先样式优先级高
2."直接样式"比"祖先样式"优先级高。
3.CSS 7 种基础的选择器：
ID 选择器， 如 #id{}
类选择器， 如 .class{}
属性选择器， 如 a[href="segmentfault.com"]{}
伪类选择器， 如 :hover{}
伪元素选择器， 如 ::before{}
标签选择器， 如 span{}
通配选择器， 如 *{}
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
4.计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
5.属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。展开610 - 表单原来是这样制作的
![[思考]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_15.f58c082.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="
www.baidu.com" method="post">
QQ号码：<input type="text" placeholder="QQ/号码/邮箱" /><br />
QQ密码：<input type="password" placeholder="密码"/><br />
<input type="submit" value="快来点我" />
<input type="reset" value="千万别点我" />
<input type="button" value="我是一个普通按钮" />
</form>
</body>
</html>
展开16 - 无序列表，有序列表和自定义列表的区别
![[奸笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_17.bcebf79.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>无序列表</h1><ul type="none">
<li>买二斤水果</li>
<li>买四斤猪肉</li>
<li>买十斤粉条</li>
</ul>
<h1>自定义列表</h1>
<dl>
<dt>今天是几号</dt>
<dd>今年是2023年</dd>
<dd>今天是2月</dd>
<dl>
<dt>今天是几号</dt>
<dd>今年是2023年</dd>
<dd>今天是2月</dd>
</dl>
<h1>有序列表</h1>
<ol type="i" start="9">
<li>第一步：冰箱门打开</li>
<li>第二步：大象放进去</li>
<li>第三步：冰箱门带上</li>
<li>第四步：插上电源</li>
</ol>
<ol>
<li>
<b>买二斤水果</b>
</li>
<li>买四斤猪肉</li>
<li>买十斤粉条</li>
</ol>
</body>
</html>
展开评论1 - 如何用网页制作计算器
![[互相关注]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_77.afd454e.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="212" height="266" bordercolor="bule" bgcolor="#8A6DE9">
<tr align="right" height="50">
<td colspan="5" >0</td>
</tr>
<tr>
<td>MC</td>
<td>MR</td>
<td>MS</td>
<td>M+</td>
<td>M-</td>
</tr>
<tr>
<td>←</td>
<td>CE</td>
<td>C</td>
<td>±</td>
<td>√</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>/</td>
<td>%</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
<td>1/x</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>-</td>
<td rowspan="5">=</td>
</tr>
<tr>
<td colspan="2">0</td>
<td>.</td>
<td>+</td>
</tr>
</table>
</body>
</html>
展开119 - 特殊符号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
几乎是对 hjkdsjk
5-2>1
<htm1>
<br />北京©北京科技有限公司
<!--
标题标签特点：
自带加粗效果
独占一行效果
h1最大h6最小====就到h6
h1======一篇标题的顶部logo
h2======大标题
h3======小区域标题
h4~h6===根据实际情况来使用
换行标签<br>======段内换行，单标签，不会调整间距
段落标签<p></p >===段落换行，双标签，会出现较大间距
空格的特殊符号
编辑器里面无论你敲多少个页面只能实现一个效果
如果实现多个？？？
尖叫号
<>
<=====<
>=====>
版权符号
©
图片标签的使用
img标签
src="图片路径"
路径：
相对路径：通过某一个文件之间的关系去查找对应的文件
绝对路径：通过某一个盘符去查找对应文件，互联网的地址也是绝对路径
做项目的时候：使用的相对路径
alt="图片提示文本"
默认情况下，图片文本不显示，图片加载失败，路径写错
alt方便浏览器爬虫抓取页面
title="提示文本"
当鼠标放在图面上的时候提示文本
-->
< img src="img/PM3.jpg" alt="这是电影封面" title="这是电影封面" />
</body>
</html>展开32 - <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<!--
背景颜色
bgcolor=""
单元格与单元格之间的距离
cellspacing=""
单元格与内容之间的距离
cellpadding=""
td合并单元格属性
水平合并单元格
colspan=""
垂直合并单元格
rowspan=""
align="center"表格水平对齐方式
center/left/right
bordercolor=""表格边框颜色
-->
</head>
<body>
<table border="1" bordercolor="red" align="center" width="300px" height="300px" bgcolor="aqua" cellspacing="50px" cellpadding="50px">
<!--
table表格标签
border=“表格的边框属性”
width=“300px”==px可加可不加
取值还可以是百分比
height="300px"==px可加可不加
高度一般不设置%单位
-->
<tr>
<!--
tr行标签
td单元格，列
-->
<td colspan="2">1</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>7</td>
<td colspan="2">8</td>
</tr>
</table>
</body>
</html>展开17
![[思考]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_15.f58c082.png)
www.baidu.com![[奸笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_17.bcebf79.png)
![[互相关注]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_77.afd454e.png)