获得徽章 0
动态
文章
专栏
沸点
收藏集
关注
作品
赞
0
赞
0
返回
|
搜索文章
怪异盒模型
用户3190762806719于2023-02-19 22:20发布的图片
用户3190762806719于2023-02-19 22:20发布的图片
avatar
avatar
赞过
4
项目清单表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
h3{
height: 108px;line-height: 108px;
}
table{
margin:0 auto;
}
p{
width: 750px;margin: 0 auto;height: 30px;line-height: 30px;
}
</style>
</head>
<body>
<h3 align="center">

项目清单表</h3>
<table border="1" width="750" height="370" cellspacing="0">
<thead>
<tr height="30">
<th>序号</th>
<th>维修项目清单表</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>工时</th>
<th>合计</th>
<th>维修原因</th>
</tr>
</thead>
<tbody>
<tr height="40px">
<th rowspan="4">7</th>
<td></td>
<td colspan="2" rowspan="4"></td>

<td rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
</tr>
<tr height="40px">

<td></td>



</tr>
<tr height="40px">

<td></td>




</tr>
<tr height="40px">

<td></td>
展开
用户3190762806719于2023-02-18 19:09发布的图片
avatar
avatar
赞过
评论
表格表单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<table border="1"width="600"height="210"cellspacing="0">
<tr align="center">
<td width="134"rowspan="4">
总体信息
</td>
<td colspan="2">
用户信息
</td>

</tr>
<tr>

<td width="154" align="right">用户名:</td>
<td>
<input type="text" placeholder="填写用户名" />
</td>
</tr>
<tr>

<td align="right">密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>

<td colspan="2" align="center">
<input type="submit" />
<input type="reset" />
</td>

</tr>
</table>
</form>
</body>
</html>
展开
用户3190762806719于2023-02-18 18:56发布的图片
avatar
赞过
评论
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#jd{
background: paleturquoise;
font-size: 60px;
}
h3,h4,h5,.qm{
width: 200px;
height: 200px;
background-color: yellow;
font-size: 40px;
}
</style>
</head>
<body>
<h1 id="jd">京东京东京东京东京东</h1>
<h1>天猫天猫天猫天猫天猫</h1>
<h1 class="qm">七猫七猫七猫七猫七猫</h1>
<h3>淘宝淘宝淘宝淘宝淘宝</h3>
<h4>百度百度百度百度百度</h4>
<h5>知乎知乎知乎知乎知乎</h5>
</body>
</html>
展开
用户3190762806719于2023-02-16 18:35发布的图片
avatar
avatar
avatar
等人赞过
评论
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1{
width: 300px;
height: 100px;
background: pink;
color: white;
}
.ha{
background-color: lightskyblue;
color: blueviolet;
}
</style>
</head>
<body>
<h1 class="ha">京东京东京东京东京东</h1>
<h1>天猫天猫天猫天猫天猫</h1>
<h1>七猫七猫七猫七猫七猫</h1>
<h1>淘宝淘宝淘宝淘宝淘宝</h1>
<h1 class="ha">百度百度百度百度百度</h1>
<h1>知乎知乎知乎知乎知乎</h1>
</body>
</html>
展开
用户3190762806719于2023-02-16 18:34发布的图片
avatar
avatar
avatar
赞过
评论
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a:link{font-size: 30px;color: blanchedalmond;}
a:visited{font-size: 15px;background: red;}
a:hover{font-size: 100px;color: cyan;}
a:active{color: yellow;background: paleturquoise;}
</style>
</head>
<body>
<a href=" ">新闻</a >
</body>
</html>
展开
用户3190762806719于2023-02-16 18:33发布的图片
用户3190762806719于2023-02-16 18:33发布的图片
用户3190762806719于2023-02-16 18:33发布的图片
avatar
avatar
avatar
赞过
评论
通配符选择器后代子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.fa>p{
background: blueviolet;
}
</style>
</head>
<body>
<p>这是一个p标签</p >
<p>这是一个p标签</p >
<p>这是一个p标签</p >
<div>这是一个div标签</div>
<h1>这是一个一级标签</h1>
<div class="fa">
这是最外层的div
<p>这是div里的p标签</p >
<div>
这是最里层的div
<p>这是最里层的p标签</p >
</div>
</div>
</body>
</html>
展开
用户3190762806719于2023-02-16 18:31发布的图片
avatar
avatar
avatar
赞过
评论
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#nav{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="nav">
<div>
<div class="content"></div>
</div>
</div>
</body>
</html>
展开
用户3190762806719于2023-02-07 23:18发布的图片
评论
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发布的图片
avatar
avatar
avatar
等人赞过
7
内联样式
<!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发布的图片
avatar
赞过
评论
内部样式表
<!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发布的图片
avatar
avatar
avatar
等人赞过
2
后代子代选择器
<!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发布的图片
avatar
avatar
avatar
等人赞过
3
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 判断优先级。
展开
avatar
avatar
avatar
等人赞过
6
如何用网页制作计算器[互相关注]
<!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发布的图片
avatar
avatar
avatar
等人赞过
11
无序列表，有序列表和自定义列表的区别[奸笑]
<!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发布的图片
avatar
赞过
评论
表单原来是这样制作的[思考]
<!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发布的图片
avatar
avatar
avatar
等人赞过
1
特殊符号
<!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>
展开
avatar
avatar
赞过
3
无序列表
<!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发布的图片
avatar
赞过
1
超链接和超链接的路径
<!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发布的图片
avatar
赞过
评论
下一页
收藏集
0
关注标签
0
加入于