15章边框样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div,img{
border-width: 1px;
border-style:solid;
border-color:blueviolet;
}
span{
border-top:10px dashed black;
border-bottom: 20px solid red;
border-left: 3px solid green;
border-right: 6px dashed darkgoldenrod;
}
</style>
</head>
<body>
<div>.Elbie勒索病毒如今成为网络世界中的一大威胁，其狡猾性让用户防不胜防。本文将深入介绍.Elbie病毒的特点、对数据的威胁，提供被感染文件的恢复方法，并详述一系列强化网络安全的预防措施，让您远离.Elbie勒索病毒的威胁。如不幸感染这个勒索病毒，您可添加我们的技术服务号（sjhf91）了解更多信息或寻求帮助。
</div>
<span>对抗反病毒软件的能力</span>
<img src="../img/6.jpg" alt="6" >
</body>
</html>
16章列表样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#dianyin{
list-style-type: lower-roman;
}
#fruit{
list-style-type: upper-alpha;
}
#shuiguo{
list-style-type: circle;
}
#circle{
list-style-type: none;
}
#huasuan{
list-style-type: circle;
}
#chaoshi{
list-style-image: url(../img/alibaba.jpg);
}
</style>
</head>
<body>
你们喜欢看的电影：
<ol id="dianyin">
<li>速8</li>
<li>返老还童</li>
<li>marvel</li>
</ol>
你们喜欢的水果：
<ol id="fruit">
<li>苹果</li>
<li>西瓜</li>
<li>荔枝</li>
<li>香蕉</li>
</ol>
你们喜欢吃的水果：
<ul id="shuiguo">
<li>苹果🍎</li>
<li>香蕉🍌</li>
<li>草莓🍓</li>
</ul>
某宝中点击按钮：
<ul id="circle">
<li>某猫</li>
<li id="huasuan">聚划算</li>
<li id="chaoshi">某猫超市</li>
</ul>
</body>
</html>
17章表格样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
caption-side: bottom;
border-collapse: collapse;
}
table,tr,td{
border:3px solid black;
}
</style>
</head>
<body>
<table>
<caption>成绩表</caption>
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>95</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
caption-side: bottom;
border-spacing: 5px;
}
table,tr,td{
border:3px solid black;
}
</style>
</head>
<body>
<table>
<caption>成绩表</caption>
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>95</td>
</tr>
</table>
</body>
</html>
18章图片样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 650px;
height: 400px;
border:5px solid orange;
}
div{
text-align: center;
}
#tupian{
vertical-align: bottom;
}
</style>
</head>
<body>
<div>hhhhh<img id="tupian" src="../img/huawei.jpg" alt="5"/>hhhhhhhh</div>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
float:right;
}
</style>
</head>
<body>
<img src="../img/off.gif" alt="off">
<p>11 月 16 日，小米集团董事长雷军在微博宣布，Xiaomi Vela 面向全球软硬件开发者正式开源。根据小米官方网站的介绍，Vela 是小米基于开源实时操作系统 NuttX 打造的物联网嵌入式软件平台，Vela 在各种物联网硬件平台上提供统一的软件服务，支持丰富的组件和易用的框架，打通碎片化的物联网应用场景。</p>
<p>此番测试的付费视频内容也不再局限于短剧这单一的短视频类目。抖音客服对此表示，遇到付费视频可能是作者开启了付费功能，如果不想看可以划走。据介绍，目前这一功能针对 10 万粉丝以上、账号状态正常、无违规情况、原创度高的部分个人开放内测，后续可等待内测范围逐步开放。（IT之家）</p>
<p>11 月 16 日，阿里巴巴发布了截至 2023 年 9 月 30 日的 2024 财年第二财季财报：营收为 2247.90 亿元，同比增长 9%。净利润为 266.96 亿元，而上年同期净亏损 224.67 亿元；Non-GAAP 净利润为 401.88 亿元，同比增长 19%；盒马鲜生的首次公开募股计划也已暂停（注：阿里财年与自然年不同步，每年 4 月 1 日至次年 3 月 31 日为一个财年）。阿里同日宣布，坚决加大对阿里云战略投入，不再推进完全分拆；同时，阿里巴巴将坚决加大对阿里云的持续战略投入。在财报电话会上，有投资者提问，阿里云的上市计划是「暂停」还是「永远取消」，并询问「市场形势有所变化后，会不会重新考虑阿里云的分拆」。针对这一问题，阿里集团董事会主席蔡崇信并未作出明确回答。</p>
</body>
</html>
19章背景样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
float:right;
}
p{
background-color: darkolivegreen;
background-image: url(../img/on.gif);
background-repeat: repeat-y;
background-position: 40px 40px;
width:400px;
height:400px;
}
</style>
</head>
<body>
<img src="../img/off.gif" alt="off">
<p>11 月 16 日，小米集团董事长雷军在微博宣布，Xiaomi Vela 面向全球软硬件开发者正式开源。根据小米官方网站的介绍，Vela 是小米基于开源实时操作系统 NuttX 打造的物联网嵌入式软件平台，Vela 在各种物联网硬件平台上提供统一的软件服务，支持丰富的组件和易用的框架，打通碎片化的物联网应用场景。</p>
<p>此番测试的付费视频内容也不再局限于短剧这单一的短视频类目。抖音客服对此表示，遇到付费视频可能是作者开启了付费功能，如果不想看可以划走。据介绍，目前这一功能针对 10 万粉丝以上、账号状态正常、无违规情况、原创度高的部分个人开放内测，后续可等待内测范围逐步开放。（IT之家）</p>
<p>11 月 16 日，阿里巴巴发布了截至 2023 年 9 月 30 日的 2024 财年第二财季财报：营收为 2247.90 亿元，同比增长 9%。净利润为 266.96 亿元，而上年同期净亏损 224.67 亿元；Non-GAAP 净利润为 401.88 亿元，同比增长 19%；盒马鲜生的首次公开募股计划也已暂停（注：阿里财年与自然年不同步，每年 4 月 1 日至次年 3 月 31 日为一个财年）。阿里同日宣布，坚决加大对阿里云战略投入，不再推进完全分拆；同时，阿里巴巴将坚决加大对阿里云的持续战略投入。在财报电话会上，有投资者提问，阿里云的上市计划是「暂停」还是「永远取消」，并询问「市场形势有所变化后，会不会重新考虑阿里云的分拆」。针对这一问题，阿里集团董事会主席蔡崇信并未作出明确回答。</p>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
float:right;
}
p{
background-color: darkolivegreen;
background-image: url(../img/on.gif);
background-repeat: repeat-y;
background-position: center center;
width:400px;
height:400px;
}
</style>
</head>
<body>
<img src="../img/off.gif" alt="off">
<p>11 月 16 日，小米集团董事长雷军在微博宣布，Xiaomi Vela 面向全球软硬件开发者正式开源。根据小米官方网站的介绍，Vela 是小米基于开源实时操作系统 NuttX 打造的物联网嵌入式软件平台，Vela 在各种物联网硬件平台上提供统一的软件服务，支持丰富的组件和易用的框架，打通碎片化的物联网应用场景。</p>
<p>此番测试的付费视频内容也不再局限于短剧这单一的短视频类目。抖音客服对此表示，遇到付费视频可能是作者开启了付费功能，如果不想看可以划走。据介绍，目前这一功能针对 10 万粉丝以上、账号状态正常、无违规情况、原创度高的部分个人开放内测，后续可等待内测范围逐步开放。（IT之家）</p>
<p>11 月 16 日，阿里巴巴发布了截至 2023 年 9 月 30 日的 2024 财年第二财季财报：营收为 2247.90 亿元，同比增长 9%。净利润为 266.96 亿元，而上年同期净亏损 224.67 亿元；Non-GAAP 净利润为 401.88 亿元，同比增长 19%；盒马鲜生的首次公开募股计划也已暂停（注：阿里财年与自然年不同步，每年 4 月 1 日至次年 3 月 31 日为一个财年）。阿里同日宣布，坚决加大对阿里云战略投入，不再推进完全分拆；同时，阿里巴巴将坚决加大对阿里云的持续战略投入。在财报电话会上，有投资者提问，阿里云的上市计划是「暂停」还是「永远取消」，并询问「市场形势有所变化后，会不会重新考虑阿里云的分拆」。针对这一问题，阿里集团董事会主席蔡崇信并未作出明确回答。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-image: url(../img/alibaba.jpg);
width:300px;
height:200px;
background-attachment:fixed ;
}
</style>
</head>
<body>
<div></div>
<p>金山办公宣布旗下具备大语言模型能力的人工智能办公应用 WPS AI 开启公测，AI 功能面向全体用户陆续开放体验。即日起用户可前往 WPS AI 官网(ai.wps.cn)申请权益，并下载最新版 WPS PC 客户端限时体验文字/智能文档、表格/智能表格、PPT 演示组件的 AI 能力，安卓、iOS 和 Mac 端将于 11 月底陆续开放。WPS AI 自今年 4 月 18 日首次对外亮相以来，持续优化产品体验。5 月 16 日，WPS AI 对外展示了类微软 Copilot 的能力。7 月 6 日，WPS AI 亮相 2023 世界人工智能大会宣布官网上线。9 月 20 日，金山办公在技术开放日上宣布 WPS AI 接入面向企业组织的一站式数字办公平台 WPS 365，并首次公布自研模型的最新进展，该模型基于开源底座，通过训练调优，助力 WPS AI 成为国内率先落地的 AI 办公应用。</p>
<p>在 2023 OPPO 开发者大会上，OPPO 推出自主训练、个性专属的大模型安第斯大模型 —— AndesGPT，同时发布全新 ColorOS 14。据介绍，AndesGPT 拥有对话增强、个人专属和端云协同三大技术特征，及知识、记忆、工具与创作四大核心能力。全新的小布助手也将接入 AndesGPT 大模型，支持智能摘要、智能消除、内容创作等功能。作为 ColorOS 十年之作，ColorOS 14 在自研潘塔纳尔系统、AndesGPT、ColorOS 超算平台三大技术加持下，进一步打破数据与服务的壁垒，带来以人为中心的智慧流畅新体验。</p>
<p>微软将 Bing Chat 改名为 Copilot，统一了旗下多个 AI 产品的品牌名称。Bing 将仍然提供搜索和聊天体验，想直接使用 Copilot 的用户可访问 https://copilot.microsoft.com/（不支持 Firefox 和 Safari 等非 Edge 浏览器）。微软表示，改名是为了统一 Copilot 体验。商业版的 Bing Chat Enterprise 也将改名为 Copilot Pro。Windows 11 v23H2、Microsoft 365, Edge 等都提供了统称为 Copilot 的 AI 助手功能。</p>
<p>金山办公宣布旗下具备大语言模型能力的人工智能办公应用 WPS AI 开启公测，AI 功能面向全体用户陆续开放体验。即日起用户可前往 WPS AI 官网(ai.wps.cn)申请权益，并下载最新版 WPS PC 客户端限时体验文字/智能文档、表格/智能表格、PPT 演示组件的 AI 能力，安卓、iOS 和 Mac 端将于 11 月底陆续开放。WPS AI 自今年 4 月 18 日首次对外亮相以来，持续优化产品体验。5 月 16 日，WPS AI 对外展示了类微软 Copilot 的能力。7 月 6 日，WPS AI 亮相 2023 世界人工智能大会宣布官网上线。9 月 20 日，金山办公在技术开放日上宣布 WPS AI 接入面向企业组织的一站式数字办公平台 WPS 365，并首次公布自研模型的最新进展，该模型基于开源底座，通过训练调优，助力 WPS AI 成为国内率先落地的 AI 办公应用。</p>
<p>在 2023 OPPO 开发者大会上，OPPO 推出自主训练、个性专属的大模型安第斯大模型 —— AndesGPT，同时发布全新 ColorOS 14。据介绍，AndesGPT 拥有对话增强、个人专属和端云协同三大技术特征，及知识、记忆、工具与创作四大核心能力。全新的小布助手也将接入 AndesGPT 大模型，支持智能摘要、智能消除、内容创作等功能。作为 ColorOS 十年之作，ColorOS 14 在自研潘塔纳尔系统、AndesGPT、ColorOS 超算平台三大技术加持下，进一步打破数据与服务的壁垒，带来以人为中心的智慧流畅新体验。</p>
<p>微软将 Bing Chat 改名为 Copilot，统一了旗下多个 AI 产品的品牌名称。Bing 将仍然提供搜索和聊天体验，想直接使用 Copilot 的用户可访问 https://copilot.microsoft.com/（不支持 Firefox 和 Safari 等非 Edge 浏览器）。微软表示，改名是为了统一 Copilot 体验。商业版的 Bing Chat Enterprise 也将改名为 Copilot Pro。Windows 11 v23H2、Microsoft 365, Edge 等都提供了统称为 Copilot 的 AI 助手功能。</p>
<p>金山办公宣布旗下具备大语言模型能力的人工智能办公应用 WPS AI 开启公测，AI 功能面向全体用户陆续开放体验。即日起用户可前往 WPS AI 官网(ai.wps.cn)申请权益，并下载最新版 WPS PC 客户端限时体验文字/智能文档、表格/智能表格、PPT 演示组件的 AI 能力，安卓、iOS 和 Mac 端将于 11 月底陆续开放。WPS AI 自今年 4 月 18 日首次对外亮相以来，持续优化产品体验。5 月 16 日，WPS AI 对外展示了类微软 Copilot 的能力。7 月 6 日，WPS AI 亮相 2023 世界人工智能大会宣布官网上线。9 月 20 日，金山办公在技术开放日上宣布 WPS AI 接入面向企业组织的一站式数字办公平台 WPS 365，并首次公布自研模型的最新进展，该模型基于开源底座，通过训练调优，助力 WPS AI 成为国内率先落地的 AI 办公应用。</p>
<p>在 2023 OPPO 开发者大会上，OPPO 推出自主训练、个性专属的大模型安第斯大模型 —— AndesGPT，同时发布全新 ColorOS 14。据介绍，AndesGPT 拥有对话增强、个人专属和端云协同三大技术特征，及知识、记忆、工具与创作四大核心能力。全新的小布助手也将接入 AndesGPT 大模型，支持智能摘要、智能消除、内容创作等功能。作为 ColorOS 十年之作，ColorOS 14 在自研潘塔纳尔系统、AndesGPT、ColorOS 超算平台三大技术加持下，进一步打破数据与服务的壁垒，带来以人为中心的智慧流畅新体验。</p>
<p>微软将 Bing Chat 改名为 Copilot，统一了旗下多个 AI 产品的品牌名称。Bing 将仍然提供搜索和聊天体验，想直接使用 Copilot 的用户可访问 https://copilot.microsoft.com/（不支持 Firefox 和 Safari 等非 Edge 浏览器）。微软表示，改名是为了统一 Copilot 体验。商业版的 Bing Chat Enterprise 也将改名为 Copilot Pro。Windows 11 v23H2、Microsoft 365, Edge 等都提供了统称为 Copilot 的 AI 助手功能。</p>
</body>
</html>
20章超链接样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wust</title>
<style type="text/css">
a{
text-decoration: none;
}
a:link{
color:gold;
}
a:visited{
color:chartreuse;
}
a:hover{
color:deeppink;
text-decoration: underline;
}
a:active{
color:midnightblue;
}
div:hover{
color:crimson;
text-decoration: underline;
}
img:hover{
border:6px solid orange;
}
#guanli{
cursor: pointer;
}
#yinxiao{
cursor: text;
}
</style>
</head>
<body>
<a href="https://som.wust.edu.cn/">hhh</a>
<div id="guanli">
信息管理系成立于2000年，2001年开始招收信息管理与信息系统专业的本科生，该专业2019年度入选省级一流本科专业建设点。现有教师15人，其中博士11人，教授5人，副教授7人，讲师3人。除了承担本科生教学任务之外，还承担管理科学与工程、MBA、MEM、物流工程等研究生专业的教学和研究生指导工作。曾经或正在主持10余项省级教学研究项目，获得省级教学研究成果奖3项。
</div>
<div id="yinxiao">
营销管理系立足湖北，贯彻理工与人文相结合的教学理念，依托武汉科技大学省级人文社科重点研究基地湖北产业政策与管理研究中心，服务科学与工程研究中心，服务地方经济，紧密围绕市场经济中的营销管理课题，在品牌传播、产业规划、企业运营、城市服务等咨询决策中起到重要作用。
</div>
<img src="../img/news_logo.png"/>
</body>
</html>
21章盒子模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
display: inline-block;
padding: 20px;
margin: 40px;
border:2px solid red;
background-color: chartreuse;
width:1000px;
height:100px;
}
span{
border:2px solid orchid;
}
</style>
</head>
<body>
<div>拥有 24 年编程经验的马勇，是一位妥妥的技术老兵，他做过软件工程师，深入安全领域，出来创过业，当过技术管理者，兼职担任研究生企业导师，出版过三本著译书籍，发明过多项专利，幕后也是一位顶级期刊审稿人......</div>
<br><span>在他的身上，丰富多彩的人生经历难以尽述，但在兴趣的驱使下，马勇依然不断开拓新的征程，目前正在基于大模型的 Agent 方向进行新技术的研究与落地。</span>
</body>
</html> 
padding属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
display: inline-block;
padding-left: 50px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 20px;
margin: 40px;
border:2px solid red;
background-color: chartreuse;
}
p{
padding:20px 40px 60px 80px;
border:2px dashed deeppink;
display: inline-block;
background-color: bisque;
}
</style>
</head>
<body>
<p>编程入门篇：学生时代的启蒙，兴趣成为最好的老师</p>
<div>拥有 24 年编程经验的马勇，是一位妥妥的技术老兵，他做过软件工程师，深入安全领域，出来创过业，当过技术管理者，兼职担任研究生企业导师，出版过三本著译书籍，发明过多项专利，幕后也是一位顶级期刊审稿人......</div>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#father{
display: inline-block;
border:5px solid black;
background-color: darkgreen;
}
#son1{
display: inline-block;
border:2px dashed purple;
padding:20px;
margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;
background-color: gold;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">
兴趣非常广泛的马勇，从未想过 1996 年还在沈阳上学时期的他自接触过学校最新的 486 计算机之后，便会在程序员这条路上一直走到今天。起初，“我的业余爱好是电子制作”，马勇回忆道。毕竟那时对世界充满好奇的青少年们，倘若亲自动手制作出一些东西时，成就感爆棚。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#father{
display: inline-block;
background-color: darkgreen;
}
#son1{
display: inline-block;
border:2px dashed purple;
padding:20px;
margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;
background-color: gold;
}
#son2{
display: inline-block;
padding:20px;
border:3px solid greenyellow;
background-color: cadetblue;
}
#son{
display: inline-block;
padding: 10px;
border: 2px soild brown;
background-color: tomato;
margin: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
当然，作为技术人，两种发展方向也可以兼得，马勇便是这样一步一个脚印走过来的。
</div>
<div id="son1">
兴趣非常广泛的马勇，从未想过 1996 年还在沈阳上学时期的他自接触过学校最新的 486 计算机之后，便会在程序员这条路上一直走到今天。起初，“我的业余爱好是电子制作”，马勇回忆道。毕竟那时对世界充满好奇的青少年们，倘若亲自动手制作出一些东西时，成就感爆棚。
</div>
<div id="son2">
遗憾的是，在上学期间，由于条件的限制，他的这个爱好没过多久便被搁置了。后来好在随着学龄的增长，也有机会接触到学校当时拥有的计算机设备，一切也都发生了改变。马勇发现计算机比电子制作更有吸引力，仿佛打开了通往新世界的大门。
</div>
</div>
</body>
</html>
中控台使用：
22章浮动布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style type="text/css">
#father{
background-color: bisque;
}
#son1{
background-color: aqua;
padding: 20px;
margin:10px;
float: left;
}
#son2{
background-color: lightsalmon;
padding: 20px;
margin: 10px;
float: left;
}
#son3{
background-color: chartreuse;
padding: 20px;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">
开源确实令人着迷。
</div>
<div id="son2">
我们对开源的价值有着坚定的信念
</div>
<div id="son3">
如果开源模型能够在轻量级的同时保持高质量。
</div>
</div>
</body>
</html>
清除浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style type="text/css">
#father{
background-color: bisque;
}
#son1{
background-color: aqua;
padding: 20px;
margin:10px;
float: left;
}
#son2{
background-color: lightsalmon;
padding: 20px;
margin: 10px;
float: left;
}
#son3{
background-color: chartreuse;
padding: 20px;
margin: 10px;
float: left;
clear: left;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">
开源确实令人着迷。
</div>
<div id="son2">
我们对开源的价值有着坚定的信念
</div>
<div id="son3">
如果开源模型能够在轻量级的同时保持高质量。
</div>
</div>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style type="text/css">
#father{
background-color: bisque;
}
#son1{
background-color: aqua;
padding: 20px;
margin:10px;
float: left;
clear: both;
}
#son2{
background-color: lightsalmon;
padding: 20px;
margin: 10px;
float: left;
clear: both;
}
#son3{
background-color: chartreuse;
padding: 20px;
margin: 10px;
float: left;
clear: both;
}
#null{
clear: both;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">
开源确实令人着迷。
</div>
<div id="son2">
我们对开源的价值有着坚定的信念
</div>
<div id="son3">
如果开源模型能够在轻量级的同时保持高质量。
</div>
<div id="null"></div>
</div>
</body>
</html> 
23章定位布局：
1.固定定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#first{
width:120px;
height:1800px;
border:2px solid red;
line-height: 20px;
background-color: blueviolet;
}
#second{
position: fixed;
top:30px;
left:160px;
width:90px;
height:200px;
border: 1px solid salmon;
background-color: darkkhaki;
}
</style>
</head>
<body>
<div id="first">ChatGPT的发布是语言大模型（LLM）发展史的转折点。</div>
<div id="second">ChatGPT及相关LLM模型让我们共同见证了AI的历史性变革</div>
</body>
</html> 
2.相对定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#first{
width:120px;
height:180px;
border:2px solid red;
line-height: 20px;
background-color: blueviolet;
}
#second{
width:90px;
height:200px;
position: relative;
top:20px;
left:40px;
border: 1px solid salmon;
background-color: darkkhaki;
}
</style>
</head>
<body>
<div id="first">ChatGPT的发布是语言大模型（LLM）发展史的转折点。</div>
<div id="second">ChatGPT及相关LLM模型让我们共同见证了AI的历史性变革</div>
</body>
</html> 
3.绝对定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#first{
width:120px;
height:180px;
border:2px solid red;
line-height: 20px;
background-color: blueviolet;
}
#second{
width:90px;
height:200px;
position: absolute;
top:20px;
right:40px;
border: 1px solid salmon;
background-color: darkkhaki;
}
</style>
</head>
<body>
<div id="first">ChatGPT的发布是语言大模型（LLM）发展史的转折点。</div>
<div id="second">ChatGPT及相关LLM模型让我们共同见证了AI的历史性变革</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
