获得徽章 0
web前端工程师
web前端工程师
web前端工程师
赞了这篇沸点
后代子代选择器
<!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>
展开
用户3190762806719于2023-02-07 23:12发布的图片
3
赞了这篇沸点
内部样式表
<!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>
展开
用户3190762806719于2023-02-07 23:13发布的图片
2
赞了这篇沸点
内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
</body>
</html>
展开
用户3190762806719于2023-02-07 23:15发布的图片
评论
赞了这篇沸点
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>
展开
用户3190762806719于2023-02-07 23:18发布的图片
7
赞了这篇沸点
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 判断优先级。
展开
6
赞了这篇沸点
表单原来是这样制作的[思考]
<!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>
展开
用户3190762806719于2023-02-04 17:05发布的图片
1
赞了这篇沸点
无序列表,有序列表和自定义列表的区别[奸笑]
<!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>
展开
用户3190762806719于2023-02-04 17:07发布的图片
评论
赞了这篇沸点
如何用网页制作计算器[互相关注]
<!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>
展开
用户3190762806719于2023-02-04 17:48发布的图片
11
赞了这篇沸点
特殊符号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>

几乎是对&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hjkdsjk
5-2&gt;1
&lt;htm1&gt;
<br />北京&copy;北京科技有限公司
<!--
标题标签特点:
自带加粗效果
独占一行效果
h1最大h6最小====就到h6
h1======一篇标题的顶部logo
h2======大标题
h3======小区域标题
h4~h6===根据实际情况来使用
换行标签<br>======段内换行,单标签,不会调整间距
段落标签<p></p >===段落换行,双标签,会出现较大间距
空格的特殊符号
编辑器里面无论你敲多少个页面只能实现一个效果
如果实现多个???
&nbsp;
尖叫号
<>
<=====&lt;
>=====&gt;
版权符号
&copy;
图片标签的使用
img标签
src="图片路径"
路径:
相对路径:通过某一个文件之间的关系去查找对应的文件
绝对路径:通过某一个盘符去查找对应文件,互联网的地址也是绝对路径
做项目的时候:使用的相对路径
alt="图片提示文本"
默认情况下,图片文本不显示,图片加载失败,路径写错
alt方便浏览器爬虫抓取页面
title="提示文本"
当鼠标放在图面上的时候提示文本
-->
< img src="img/PM3.jpg" alt="这是电影封面" title="这是电影封面" />
</body>
</html>
展开
3
赞了这篇沸点
<!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>
展开
1
赞了这篇沸点
#新人报道# <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
基本语法
所有的标签都放在<>
双标签:标签成对出现,又开始,有结束,结束/
<标签 属性1="属性值1" 属性2="属性值2"></标签>
单标签:只有开始,没有结束。
<标签 属性1="属性值1" 属性2="属性值2">

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--
标题标签:
自带加粗效果
独占一行效果
h1最大h6最小===就到h6
h1======一篇标题的顶部logo
h2======大标题
h3======小区域标题
h4~h6===根据实际情况来使用
-->
<h1>这是一级标签</h1>
<h2>这是一级标签</h2>
<h3>这是一级标签</h3>
<h4>这是一级标签</h4>
<h5>这是一级标签</h5>
<h6>这是一级标签</h6>
我叫李勇闪电借款归还借款还款金砂东路半小时就开车v的
</body>
</html>
展开
4
赞了这篇沸点
超链接和超链接的路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
超链接标签
a标签
href="打开网页的路径"===跳转的地址
target="打开方式"
-self=====在本页面内中打开
-blank====空白页面打开,打开了一个新的页面
如果访问的文件与本文件同级关系,直接访问名字和后缀名即可
如果访问的文件父级与本文件同级关系,先进入父级文件夹然后查找对应文件
如果访问的文件父级与本文件父级同级关系,先返回上一级(../)然后进入对应文件夹中查找对应文件

-->
<b><a href=" " target="_blank">新闻</a ></b>
<b><a>hao123</a ></b>
<b><a>视频</a ></b>
<b><a>地图</a ></b>
<a href="无序列表.html">无序列表</a >

</body>
</html>
展开
用户3190762806719于2023-02-01 20:04发布的图片
评论
赞了这篇沸点
无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>无序列表</h1>
<!--
无序列表:
没有顺序性
列表项目符号默认以黑色实心圆显示
如何更改项目类型
ul属性
disc=====默认值,黑色实心圆点
circle===空心圆
square===正方形黑色实心
none=====取消列表项目符号
自定义列表:
di一般放一组dd和一组dt中
可以出现多个dd;dd对dt的解释说明


-->
<ul type="none">
<li>买二斤水果</li>
<li>买四斤猪肉</li>
<li>买十斤粉条</li>
</ul>
</body>
</html>
展开
用户3190762806719于2023-02-01 20:04发布的图片
1
web前端工程师
下一页
个人成就
文章被点赞 60
文章被阅读 20,784
掘力值 558
收藏集
1
关注标签
28
加入于