HTML标签与CSS样式
2024-06-09 15:35:02
文本标签
h1-h6:标题
p:文字段落标签
b/strong:加粗
u:下划线
s:划去线
换行标签: br-----(第一个没有成对出现的标签)
水平分隔符标签: hr-----(第一个没有成对出现的标签)
预格式化文本标签(保留文本的原有格式): pre标签
上标和下标: sup， sub
块引用标签: blockquote
普通的文本: span — 行内标签
普通文本的标签:div------
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 style="color: green">标题1</h1><p>hello</p><hr>
<p>world</p>hello <br> <br><br>world
<h1 style="color: blueviolet">标题2</h1><pre>
击壤歌先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！
</pre><span>hello</span><span>world</span>
<div>hello</div><div>world</div><blockquote style="color: blueviolet">击壤歌先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！</blockquote>x<sup>2</sup>+2x+3 = 5
<br/>
这个方程的解： x<sub>1</sub>=3 x<sub>2</sub>=5</body>
</html>
超链接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--a标签--><!--1. 跳转到指定的url地址-->
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent"> 百度</a>
<!--新建一个浏览器窗口并打开-->
<a href="http://www.baidu.com" target="_blank"> 百度</a><!--2. 跳转到当前页面的指定位置（锚点）--><a href="#C1">第一个标题 </a>
<a href="#C2">第2个标题 </a>
<a href="#C3">第3个标题 </a>
<a href="#C4">第4个标题 </a><h1><a name="C1">第一个标题</a></h1>
2018 年，AI 行业持续走向技术落地和深入商业化的一年。回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，也更强调 AI 与每一垂直行业的深度融合，而 AI 创业公司除了频繁刷新行业高额融资外，也立足于自身优势，在应用场景中步步为营、累积了不少客户资源。当然，在热烈的欢呼声中，AI 泡沫论调依然在不时回响，但毋庸置疑的是，那些真正利用 AI 技术来创造出商业价值的企业自然会沉淀下来。优秀的商业落地产品/技术方案是判断一个企业商业价值的重要依据。基于此，AI科技大本营（ID:rgznai100）希望找到在汽车、金融、教育、医疗、安防、零售、家居、文娱、工业等 9 大行业的最佳 AI 应用案例 TOP 20，记录 AI 时代影响人类发展的变革性产品/解决方案。同时我们有理由相信，挖掘出的那些优秀先行者还会给不同 AI 行业领域带来启迪，进而推动整个 AI 行业的发展进程。好产品/技术方案值得记录，而不是被时代泡沫淹没。
征集内容详情：
案例范围征集 AI 技术在汽车、金融、零售、医疗、教育、安防、家居、文娱、工业等 9 大行业的应用案例（具体内容示例见下文）。
最佳案例评选标准技术性、创新性、前瞻性
案例分享者特别奖励1.50+ 以上媒体平台的联合宣传，各行业上榜的最佳应用案例还可能获得 AI科技大本营（ID:rgznai100）的专访报道，在极大提升企业技术品牌影响力的同时，有助于企业从 CSDN 社区吸纳优秀的技术人才；2.选出 20+ 最佳应用案例纳入由 CSDN 发布的《2018-2019 中国人工智能产业路线图》，以及由 CSDN 颁发的“2018 中国人工智能最佳应用案例奖”；3.入选 2018 最佳人工智能应用案例 TOP 20 的企业，将优先推荐加入由 CSDN 和 AICAMP 举办的 AI 开发者大会智能应用分论坛做应用案例技术分享，并享有全程会议通道；4.参与 2018 最佳人工智能应用案例 TOP 20 的企业将优先邀请 AI科技大本营线公开课的讲座或在线下技术沙龙上做分享。
活动时间2018 年 9-10 月：案例征集阶段
2018 年 11 月：TOP 20 案例公布及颁奖
联系人邮箱：Wangjx@csdn.net---------------------本文来自 AI科技大本营 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/dQCFKyQDXYm3F8rB0/article/details/82667066?utm_source=copy<h1><a name="C2">第2个标题</a></h1>
2018 年，AI 行业持续走向技术落地和深入商业化的一年。回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，也更强调 AI 与每一垂直行业的深度融合，而 AI 创业公司除了频繁刷新行业高额融资外，也立足于自身优势，在应用场景中步步为营、累积了不少客户资源。当然，在热烈的欢呼声中，AI 泡沫论调依然在不时回响，但毋庸置疑的是，那些真正利用 AI 技术来创造出商业价值的企业自然会沉淀下来。优秀的商业落地产品/技术方案是判断一个企业商业价值的重要依据。基于此，AI科技大本营（ID:rgznai100）希望找到在汽车、金融、教育、医疗、安防、零售、家居、文娱、工业等 9 大行业的最佳 AI 应用案例 TOP 20，记录 AI 时代影响人类发展的变革性产品/解决方案。同时我们有理由相信，挖掘出的那些优秀先行者还会给不同 AI 行业领域带来启迪，进而推动整个 AI 行业的发展进程。好产品/技术方案值得记录，而不是被时代泡沫淹没。
征集内容详情：
案例范围征集 AI 技术在汽车、金融、零售、医疗、教育、安防、家居、文娱、工业等 9 大行业的应用案例（具体内容示例见下文）。
最佳案例评选标准技术性、创新性、前瞻性
案例分享者特别奖励1.50+ 以上媒体平台的联合宣传，各行业上榜的最佳应用案例还可能获得 AI科技大本营（ID:rgznai100）的专访报道，在极大提升企业技术品牌影响力的同时，有助于企业从 CSDN 社区吸纳优秀的技术人才；2.选出 20+ 最佳应用案例纳入由 CSDN 发布的《2018-2019 中国人工智能产业路线图》，以及由 CSDN 颁发的“2018 中国人工智能最佳应用案例奖”；3.入选 2018 最佳人工智能应用案例 TOP 20 的企业，将优先推荐加入由 CSDN 和 AICAMP 举办的 AI 开发者大会智能应用分论坛做应用案例技术分享，并享有全程会议通道；4.参与 2018 最佳人工智能应用案例 TOP 20 的企业将优先邀请 AI科技大本营线公开课的讲座或在线下技术沙龙上做分享。
活动时间2018 年 9-10 月：案例征集阶段
2018 年 11 月：TOP 20 案例公布及颁奖
联系人邮箱：Wangjx@csdn.net---------------------本文来自 AI科技大本营 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/dQCFKyQDXYm3F8rB0/article/details/82667066?utm_source=copy<h1><a name="C3">第3个标题</a></h1>
2018 年，AI 行业持续走向技术落地和深入商业化的一年。回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，也更强调 AI 与每一垂直行业的深度融合，而 AI 创业公司除了频繁刷新行业高额融资外，也立足于自身优势，在应用场景中步步为营、累积了不少客户资源。当然，在热烈的欢呼声中，AI 泡沫论调依然在不时回响，但毋庸置疑的是，那些真正利用 AI 技术来创造出商业价值的企业自然会沉淀下来。优秀的商业落地产品/技术方案是判断一个企业商业价值的重要依据。基于此，AI科技大本营（ID:rgznai100）希望找到在汽车、金融、教育、医疗、安防、零售、家居、文娱、工业等 9 大行业的最佳 AI 应用案例 TOP 20，记录 AI 时代影响人类发展的变革性产品/解决方案。同时我们有理由相信，挖掘出的那些优秀先行者还会给不同 AI 行业领域带来启迪，进而推动整个 AI 行业的发展进程。好产品/技术方案值得记录，而不是被时代泡沫淹没。
征集内容详情：
案例范围征集 AI 技术在汽车、金融、零售、医疗、教育、安防、家居、文娱、工业等 9 大行业的应用案例（具体内容示例见下文）。
最佳案例评选标准技术性、创新性、前瞻性
案例分享者特别奖励1.50+ 以上媒体平台的联合宣传，各行业上榜的最佳应用案例还可能获得 AI科技大本营（ID:rgznai100）的专访报道，在极大提升企业技术品牌影响力的同时，有助于企业从 CSDN 社区吸纳优秀的技术人才；2.选出 20+ 最佳应用案例纳入由 CSDN 发布的《2018-2019 中国人工智能产业路线图》，以及由 CSDN 颁发的“2018 中国人工智能最佳应用案例奖”；3.入选 2018 最佳人工智能应用案例 TOP 20 的企业，将优先推荐加入由 CSDN 和 AICAMP 举办的 AI 开发者大会智能应用分论坛做应用案例技术分享，并享有全程会议通道；4.参与 2018 最佳人工智能应用案例 TOP 20 的企业将优先邀请 AI科技大本营线公开课的讲座或在线下技术沙龙上做分享。
活动时间2018 年 9-10 月：案例征集阶段
2018 年 11 月：TOP 20 案例公布及颁奖
联系人邮箱：Wangjx@csdn.net---------------------本文来自 AI科技大本营 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/dQCFKyQDXYm3F8rB0/article/details/82667066?utm_source=copy<h1>第4个标题</h1>
2018 年，AI 行业持续走向技术落地和深入商业化的一年。回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，也更强调 AI 与每一垂直行业的深度融合，而 AI 创业公司除了频繁刷新行业高额融资外，也立足于自身优势，在应用场景中步步为营、累积了不少客户资源。当然，在热烈的欢呼声中，AI 泡沫论调依然在不时回响，但毋庸置疑的是，那些真正利用 AI 技术来创造出商业价值的企业自然会沉淀下来。优秀的商业落地产品/技术方案是判断一个企业商业价值的重要依据。基于此，AI科技大本营（ID:rgznai100）希望找到在汽车、金融、教育、医疗、安防、零售、家居、文娱、工业等 9 大行业的最佳 AI 应用案例 TOP 20，记录 AI 时代影响人类发展的变革性产品/解决方案。同时我们有理由相信，挖掘出的那些优秀先行者还会给不同 AI 行业领域带来启迪，进而推动整个 AI 行业的发展进程。好产品/技术方案值得记录，而不是被时代泡沫淹没。
征集内容详情：
案例范围征集 AI 技术在汽车、金融、零售、医疗、教育、安防、家居、文娱、工业等 9 大行业的应用案例（具体内容示例见下文）。
最佳案例评选标准技术性、创新性、前瞻性
案例分享者特别奖励1.50+ 以上媒体平台的联合宣传，各行业上榜的最佳应用案例还可能获得 AI科技大本营（ID:rgznai100）的专访报道，在极大提升企业技术品牌影响力的同时，有助于企业从 CSDN 社区吸纳优秀的技术人才；2.选出 20+ 最佳应用案例纳入由 CSDN 发布的《2018-2019 中国人工智能产业路线图》，以及由 CSDN 颁发的“2018 中国人工智能最佳应用案例奖”；3.入选 2018 最佳人工智能应用案例 TOP 20 的企业，将优先推荐加入由 CSDN 和 AICAMP 举办的 AI 开发者大会智能应用分论坛做应用案例技术分享，并享有全程会议通道；4.参与 2018 最佳人工智能应用案例 TOP 20 的企业将优先邀请 AI科技大本营线公开课的讲座或在线下技术沙龙上做分享。
活动时间2018 年 9-10 月：案例征集阶段
2018 年 11 月：TOP 20 案例公布及颁奖
联系人邮箱：Wangjx@csdn.net---------------------本文来自 AI科技大本营 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/dQCFKyQDXYm3F8rB0/article/details/82667066?utm_source=copy</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--1. 插入图像并设置大小src指定图片的位置， 可以是url地址， 也可以是本地的图片;alt: 如果图片不能正常加载， 则显示alt里面的文字;
--><!--<img src="https://csdnimg.cn/cdn/content-toolbar/zq-logo.jpg" alt="这是csdn的logo图片">-->
<!--<img src="img01.jpg" alt="img01.jpg">-->
<!--<img src="img01.jpg" alt="img01.jpg" width="460px" height="96px">--><!--2. 设置图像的对齐方式(html中已弃用， 通过css样式实现功能)-->
AI会议即将开始: <img align="top" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
AI会议即将开始: <img align="middle" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
AI会议即将开始: <img align="bottom" src="img01.jpg" alt="img01.jpg" width="460px" height="96px"><!--3. 将图像浮动到文本的左侧和右侧-->
<br/>
<br/>
<br/>
<br/>
<br/>
AI会议即将开始: <img align="left" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
AI会议即将开始: <img align="right" src="img01.jpg" alt="img01.jpg" width="460px" height="96px"><!--4. 图像链接 a标签和img标签-->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/><a href="http://www.westos.org"> 西部开源技术中心</a>
<a href="http://www.csdn.net"> <img src="img01.jpg"></a></body>
</html>
序列化标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--1. 无序标签之ul和li--><h2>无序标签</h2><!--去掉ul里面的所有li标签里面的样式-->
<!--案例1： 实现水平导航栏
list-style-type: none ---- 去掉圆点
display: inline-block ---- 变为行内元素， 并且可以设置高度和宽度
width: -----可以使用300px表示， 也可以用百分比来表示； 20%
--><ul style="list-style-type: none"><li style="display: inline-block; width: 20%; background: azure;"><a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a></li><li style="display: inline-block; width: 20%; background: azure;">CSS</li><li style="display: inline-block; width:20%; background: azure;">JS</li><li style="display: inline-block; width: 20%; background: azure;">python</li>
</ul><!--案例2： 实现竖直导航栏-->
<ul style="list-style-type: none"><li style="display: block; width: 20%; background: azure;"></li><li style="display: block; width: 20%; background: azure;">CSS</li><li style="display: block; width:20%; background: azure;">JS</li><li style="display: block; width: 20%; background: azure;">python</li>
</ul><!--2. 有序标签之ol和li--><!--type可以指定有序列表符号的类型
text-decoration: none; ---去掉原有标签的文本装饰color: black： 设置字体颜色为黑色
-->
<ol type="A"><li><a href="http://www.baidu.com" style="text-decoration: none; color: black">html </a></li><li><a href="#"> CSS </a></li><li><a href="#"> JS </a></li><li><a href="#"> Python </a></li>
</ol><!--3. 嵌套标签之dl, dt和dd--><dl><dt>HTML</dt><dd>li</dd><dd>span</dd><dd>div</dd><dd>hr</dd><dd>sub</dd><dt>CSS</dt><dd>text-decoration</dd><dd>color</dd></dl></body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--
1. table代表一个表格
2. caption
3. td:
4. tr: row
5. cellpadding="3" -----设置表格的内边距
6. cellspacing="5" ----设置表格的外边距-->
<table style="width: 80%;" border="1px" cellpadding="5px" cellspacing="0px"><caption>表格的标题</caption><tr style="text-align: center"><!--第一行是表格的表头， 让自动加粗--><th>主机名</th><th>IP地址</th></tr><tr style="text-align: center"><td>server1</td><td>172.25.254.250</td></tr><tr><td>server1</td><td>172.25.254.250</td></tr><tr><td>server1</td><td>172.25.254.250</td></tr><tr><td>server1</td><td>172.25.254.250</td></tr><tr><td>server1</td><td>172.25.254.250</td></tr></table><table style="width: 80%; text-align: center;" cellpadding="3" border="1px"cellspacing="5"><caption>课程表</caption><tr><!--tr:一行内容--><!--td: 一列内容--><th>周一</th><th>周2</th><th>周3</th><th>周4</th><th>周5</th></tr><tr><td>周一</td><td>周2</td><td>周3</td><td>周4</td><td>周5</td></tr><tr><td>周一</td><td>周2</td><td>周3</td><td>周4</td><td>周5</td></tr><tr><td>周一</td><td>周2</td><td>周3</td><td>周4</td><td>周5</td></tr>
</table>
</body>
</html>
合并列单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table><tr><td>主机名</td><!--<td>IP</td>--><!--<td>IP</td>--><!--<td>IP</td>--><td colspan="3">IP</td></tr><tr><td>server1</td><td>172.25.254.2</td><td>172.25.254.2</td><td>172.25.254.2</td></tr><tr><td>server1</td><td>172.25.254.2</td><td>172.25.254.2</td><td>172.25.254.2</td></tr><tr><td>server1</td><td>172.25.254.2</td><td>172.25.254.2</td><td>172.25.254.2</td></tr></table></body>
</html>
合并行单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table><tr><td>主机名</td><td>server1</td><td>server2</td><td>server3</td></tr><tr><td rowspan="3">IP</td><td>172.25.254.2</td><td>172.25.254.2</td><td>172.25.254.2</td></tr><tr><td>172.25.254.2</td><td>172.25.254.2</td><td>172.25.254.2</td></tr><tr><td>172.25.254.2</td><td>172.25.254.2</td><td>172.25.254.2</td></tr></table></body>
</html>
表格嵌套标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table><tr><td><img src="img01.jpg"></td><td><ul><li>html</li><li>html</li><li>html</li></ul></td></tr><tr><td><pre>fkjrefretrgtrhryt</pre></td><td><strong>hdhefreg</strong></td></tr></table></body>
</html>
表单标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--<!– 1. form表单标签 –>-->
<!--<h1>个人信息</h1>-->
<!--<form method="get">--><!--<!–文本域–>--><!--<span>用户名: </span><input type="text"><br/>--><!--<!–密码域–>--><!--<span>密码:</span><input type="password">--><!--<br/>--><!--<!–文本域–>--><!--<span>个人简介:</span><textarea>--><!--</textarea><br/>--><!--<!–提交文件–>--><!--<span>个人简历：</span><input type="file"><br/>--><!--<!–日期–>--><!--<span>出生日期:</span><input type="date">--><!--<!–提交按钮–>--><!--<input type="submit" value="登陆">--><!--<input type="reset" value="重置">-->
<!--</form>--><h2>详细信息</h2><!--单选按钮-->
<span>性别:</span>
<!--name和value是为了将用户选择的信息传递给服务器， gender=1-->
<span style="font-size: small">男</span><input type="radio" name="gender" value="1">
<span style="font-size: small">女</span><input type="radio" name="gender" value="2">
<br/><!--多选按钮-->
<span>你喜欢的书籍:</span>
<ul><li><input type="checkbox" name="java"><span>java</span></li><li><input type="checkbox" name="python1"><span>python1</span></li><li><input type="checkbox"><span>python2</span></li><li><input type="checkbox"><span>python3</span></li></ul>
<!--下拉列表-->
<select><option>--选择省份--</option><option>陕西</option><option>山西</option><option>河南</option><option>河北</option>
</select><!--围绕数据的标签-->
<fieldset><legend>个人简介</legend><h1>用户登陆</h1><hr/>用户名: <input type="text"><br/><input type="submit" value="登陆">
</fieldset></body>
</html>
个人信息表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 align="center">个人信息</h1>
<table width="50%" border="1px" cellpadding="5" cellspacing="0"style=" margin: 0 auto; background: snow"><tr><td style="background: #c0ffff">姓名</td><td><input style="width: 95%; " type="text"></td><td>性别</td><td><select style="width: 95%"><option>男</option><option>女</option></select></td></tr><tr><td>手机号码</td><td><input style="width: 95%; " type="tel"></td><td>电子邮箱</td><td><input style="width: 95%; " type="email"></td></tr><tr><td>教育程度</td><td><input style="width: 95%; " type="text"></td><td>工作职位</td><td><input style="width: 95%; " type="text"></td></tr><tr><td>工作城市</td><td><input style="width: 95%; " type="text"></td><td>期望工资</td><td><input style="width: 95%; " type="text"></td></tr><tr><td>自我介绍</td><td colspan="3"><input type="text" style="width: 98%"></td></tr><tr><td>特长</td><td colspan="3"><input style="width: 95%; " type="text"></td></tr><tr><td>地址</td><td colspan="3"><input style="width: 95%; " type="text"></td></tr><tr><td colspan="4"><br/></td></tr><tr><td colspan="4" align="right"><input type="submit" value="添加"><input type="reset" value="关闭"></td></tr>
</table></body>
</html>
CSS和div和span的理解
div相关的技术:
- div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;
- span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;
CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一总结:
学习的行内标签和 块级元素分别有哪些?
行内标签:span, strong, a, img, input, textarea
块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td两者的区别与特性；
1).块级元素独占一行空间， 行内元素只占据自身宽度的空间;
2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
3). 块级元素可以设置宽和高， 行内元素设置的宽和高失效；如何让块级元素居中? 如何让行内元素居中?
1); 块级元素居中： margin: 0 auto
2> 行内元素居中: text-aligin:center
编写CSS样式_类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--CSS的标签选择器--><style>div{width:100px;height: 100px;border-radius:25px;border: 1px solid blueviolet;text-align: center;margin: 0 auto;padding-top: 20px;text-shadow: 5px 5px 5px gray;}/*选择div标签中类名为important的进行设置下面的样式*/.important {width: 20px;height: 20px;font-size: large;}</style>
</head>
<body><div class="important">1</div>
<div>2</div>
<div class="important">3</div>
<div>4</div>
<div class="important">5</div></body>
</html>
编写CSS样式_标签选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--CSS的标签选择器--><style>div{width:100px;height: 100px;border-radius:25px;border: 1px solid blueviolet;text-align: center;margin: 0 auto;padding-top: 20px;text-shadow: 5px 5px 5px gray;}</style>
</head>
<body><!--<span style=" border: 1px solid red; text-align:center">hello</span>-->
<!--<br/>-->
<!--<span style="width: 200px; height: 200px; border: 1px solid chartreuse">world</span>--><!--<div style="width: 100px; height: 100px; border-radius:25px;border: 1px solid blueviolet;--><!--box-shadow: 1px 1px 3px #888888;">hello</div>-->
<!--<div style="width: 100px; height: 100px; border: 1px solid aquamarine">world</div>--><div>1</div>
<div>2</div>
<div>3</div></body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--CSS的标签选择器--><style>#westos{width:100px;height: 100px;border-radius:25px;border: 1px solid blueviolet;text-align: center;margin: 0 auto;padding-top: 20px;text-shadow: 5px 5px 5px gray;}</style>
</head>
<body><div>1</div>
<div id="westos">2</div>
<div>3</div></body>
</html>
CSS练习 导航栏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width:80%;margin: 0 auto ;padding: 0;}ul {list-style-type: none}li {display: inline-block;width: 20%;background: snow;color: #333333;padding-top: 10px;padding-bottom: 10px;text-align: center;font-size: large;text-transform: capitalize;}li:hover {background: green;color: snow;}a:hover {color: snow;}</style></head>
<body><div><ul><li><a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a></li><li>CSS</li><li>JS</li><li>python</li></ul>
</div></body>
</html>
CSS练习分页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul {list-style-type: none;}li {text-decoration: none;display: inline-block;width: 10%;padding-top: 5px;padding-bottom: 5px;background: snow;color: #333333;text-align: center;font-size: large;text-transform: capitalize;}li:hover {background: green;color: snow;}a:hover {color: snow;}.active{background: gray;}#pageintor{width: 80%;margin: 0 auto;/*border: 1px solid red;*/}</style>
</head>
<body><div id="pageintor">
<ul><li><a href="#">上一页</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">...</a></li><li><a href="#">28</a></li><li><a href="#">下一页</a></li></ul></div>
</body>
</html>
层级选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul li a {color: red;}input[type='submit']{background: palevioletred;width: 200px;}</style></head>
<body><ol><li><a href="#" > 新闻1</a></li><li><a href="#"> 新闻2</a></li><li><a href="#"> 新闻3</a></li>
</ol><ul><li><a href="#"> 新闻1</a></li><li><a href="#"> 新闻2</a></li><li><a href="#"> 新闻3</a></li>
</ul><form>姓名: <input type="text"><br/>密码: <input type="password"><br/><input type="submit" value="注册">
</form></body>
</html>
CSS的引入方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>li {background: red;}</style><link rel="stylesheet" href="css/main.css"></head>
<body>
<!--引入方式:1). 行内引入: <a style="行内引入的样式">2). 内部引入: 写在head标签里面的style标签里面的样式;3). 外部引入: 将css样式独立成一个文件， 通过<link rel="stylesheet" href="css/main.css">与当前html文件链接在一起.三种引入方式的优先级: 就近原则-->
<div><ul><li style="background: blue"><a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a></li><li>CSS</li><li>JS</li><li>python</li></ul>
</div>
</body>
</html>
简易版唯品会登陆界面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.header {width: 100%;height: 100px;/*border: 1px solid red;*/}.header-logo {width: 125px;height: 80px;/*border: 1px solid blue;*/text-align: center;padding-top: 20px;margin-left: 20%;}.header-logo a {font-size: xx-large;color: #f10180;text-decoration: none;}.body {background-image: url("vip_background.jpg");width: 100%;height: 1000px;}#login {width: 360px;height: 360px;/*border: 1px solid red;*/float: right;margin-right: 60px;margin-top: 60px;background: white;}#login h3 {text-align: center;}#login h3:hover {color:#f10180; ;}hr{color: lightgray;}.a{width: 80%;padding-top: 10px;padding-left: 3px;margin-top: 5px;margin-left: 15px;}</style>
</head>
<body><div class="header"><div class="header-logo"><a href="#">唯品会</a></div>
</div><div class="body"><div id="login"><h3>账户登陆</h3><hr/><form action="#" method="get"><input class="a" type="text" placeholder="用户名/邮箱/电话"><br/><input class="a" type="password" placeholder="密码"><br/><input type="radio" name="choice" value="1"><span>记住用户名</span><br/><input type="submit" value="登陆"></form></div></div></body>
</html>
唯品会注册界面 -简易版
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.header {width: 100%;height: 100px;/*border: 1px solid red;*/}.header-logo {width: 125px;height: 80px;/*border: 1px solid blue;*/text-align: center;padding-top: 20px;margin-left: 20%;}.header-logo a {font-size: xx-large;color: #f10180;text-decoration: none;}.body {background-image: url("vip_background.jpg");width: 100%;height: 1000px;}#login {width: 360px;height: 360px;/*border: 1px solid red;*/float: right;margin-right: 60px;margin-top: 60px;background: white;}#login h3 {text-align: left;}#login h3:hover {color:#f10180; ;}hr{color: lightgray;}.a{width: 80%;padding-top: 10px;padding-left: 3px;margin-top: 5px;margin-left: 15px;}.b{width: 40%;padding-top: 10px;padding-left: 3px;margin-top: 5px;margin-left: 15px;}</style>
</head>
<body><div class="header"><div class="header-logo"><a href="#">唯品会</a></div>
</div><div class="body"><div id="login"><h3>会员注册</h3><hr/><form action="#" method="get"><input class="a" type="text" placeholder="请输入手机号码"><br/><input class="b" type="text" placeholder="请输入验证码"> <input type="submit" value="获取验证码"> <br/><input class="a" type="password" placeholder="密码由6-20位字母,数字和符号组成"><br><input class="a" type="password" placeholder="请再次输入上面的密码"><br><input type="checkbox" name="choice" value="1"><span>我已阅读并接受以下条款：《唯品会服务条款》《隐私条款》《唯品支付用户服务协议》《唯品信用服务协议》</span><br/><input type="submit" value="立即注册"></form></div></div>
HTML CSS总结
html , css , js1. html1). 文本标签: h1-h6, p, pre,b, i, u, s2). 链接标签: a3). 图片标签: img4). 表格标签:<table></table><caption> ---- 表格的标题<th> ------ 表头， 默认会加粗<td> ----列<tr> ---- 行5). 表单标签:<form> ---- 表单标签<input> ---- 输入框标签- 普通文本 --- type="text"- 密码文本 ---- type='password'- 单选框- 多选框- 下拉列表 代表一个空格2. css- css的几种选择器(选择给哪些内容添加样式)标签选择器:div{}类选择器:- 如何定义这个选择器? <span class="类名(一定是英文的)">- 如何对定义好的选择器设置样式? .类名{ 设置字体 设置背景颜色}id选择器:- <span id="id名(一定是英文的, 并且是唯一的)">- #id名{}层级选择器:- ul li a {color: red;}属性选择器:input[type='submit']{background: palevioletred;width: 200px;}2. 引入方式1). 行内引入: <a style="行内引入的样式">2). 内部引入: 写在head标签里面的style标签里面的样式;3). 外部引入: 将css样式独立成一个文件， 通过<link rel="stylesheet" href="css/main.css">与当前html文件链接在一起.三种引入方式的优先级: 就近原则
HTML标签与CSS样式相关推荐
- JS修改标签的css样式
JS修改标签的css样式 例:<span id='name'></span> js中修改id为name的span的样式 var name= document.getElemen ...
- css变成块级元素_设置标签的css样式代码为“display：block”，标签将变为块级元素。（ ）...
设置标签的css样式代码为"display:block",标签将变为块级元素.( ) 答:对 青藏高原常见垫状植物有( ? ? ). 答:垫状点地梅 甘肃蚤缀.垫状棘豆 垫状驼绒藜 ...
- java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言 针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...
- jq获取和设置标签的css样式、jq给标签增加或移除class属性
1.jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式,也可以设置样式,包括行内.内部.外部样式: 思路:先要选取这个标签,然后再获取或者设置样式: 获取css属性: ...
- HTML标签 链接 CSS样式
HTML 注释标签 您能够通过如下语法向 HTML 源代码添加注释: 实例 <!-- 在此处写注释 --> 注释:在开始标签中有一个惊叹号,但是结束标签中没有. 浏览器不会显示注释,但是能 ...
- html标签引入css样式的四种方式
总览 内联样式表 嵌入样式表 外联样式表 导入样式表 一.内联样式表 内联式(Inline Style):也叫内嵌式或行内式,在html代码中嵌入css样式,只对当前标签起作用. 基本语法: 缺点:只 ...
- Html基本标签与CSS样式基本使用
一.HTML语言 1.什么是HTML语言 HTML(英文Hyper Text Markup Language的缩写)中文译为"超文本标签语言",主要是通过HTML标签对网页中的文本 ...
- Vue为v-html中标签添加CSS样式
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template><div class="msgHtmlBox" v-htm ...
- 页面HTML标签与css样式
1.HTML基本 结构 <html> <head>...</head> <body>...</body> </html> 1.首 ...
最新文章
- VIM 必知必会12大类型操作
- C语言----求解N以内的素数的两种典型方法以及其优化
- 单元格自适应宽度_Dynamic Conv:自适应卷积内核有效提升网络模型的表征能力不增加模型深度和宽度，牺牲一点延迟...
- LeetCode 75. Sort Colors （python一次遍历，模拟三路快排）
- Direct Byte Buffer的操作
- 计算机学生工学交替报告书,工学交替学生守则
- 作者：吴章生（1980-），男，中国科学院计算机网络信息中心工程师；张杨（1982- ），男，中国科学院计算机网络信息中心工程师...
- maven清理缓存_mybatis源码初探【二】缓存的实现
- [paper reading] DenseNet
- LLDP(链路层发现协议)
- error: Unexpected trailing comma (comma-dangle) at src\components\Login.vue:99:4:
- JustView(Office、CAD)在线预览平台调用说明
- 2021-02-19
- Oracle开发专题之：OLAP 函数 （rows 2 preceding / unbounded preceding）
- 数字化大时代崛起的数据安全能力框架
- elastic serach学习
- 如何让VR全景创业之路走得轻松？
- 获得内核函数地址的四种方法
- 2019版颱風24、48小時警戒綫（附帶2010版）
- Java学习手册：大疆创新2020届校园招聘——软件类岗位B卷题一