01_04_JavaWEB01_HTMLCSS

一 HTML入门

参考尚硅谷再总结复习

1.1 HTML&CSS&JavaScript的作用

HTML 主要用于网页主体结构的搭建
CSS 主要用于页面元素美化
JavaScript 主要用于页面元素的动态处理

1.2 什么是HTML

HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容
HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。2014年10月28日，W3C发布了HTML5的最终版。

1.3 什么是超文本

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

1.4 什么是标记语言

说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

  • 双标签:标签是通过一组尖括号+标签名的方式来定义的：
<p>HTML is a very popular fore-end technology.</p>

这个例子中使用了一个p标签来定义一个段落，<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。

  • 单标签
<input type="text" name="username" />
  • 属性
<a href="http://www.xxx.com">show detail</a>

href=“网址” 就是属性，href是属性名，"网址"是属性值

1.5 HTML基础结构

1 文档声明

  • HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本
  • HTML4版本的文档类型声明是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • HTML5版本的文档类型声明是：
<!DOCTYPE html>
  • 现在主流的技术选型都是使用HTML5，之前的版本基本不用了。

2根标签

  • html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。

3头部元素

  • head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

4主体元素

  • body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

5注释

  • HTML注释的写法是
<!-- 注释内容 -->

1.6 HTML的入门程序

第一步 准备一个纯文本文件,拓展名为html
第二步 使用记事本打开网页,在网页内开发代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body>hello html!!!</body>
</html>

第三步 使用浏览器打开文件,查看显示的内容

1.7 HTML概念词汇解释

标签

  • 代码中的一个 <> 叫做一个标签,有些标签成对出现,称之为双标签,有些标签单独出现,称之为单标签

属性

  • 一般在开始标签中,用于定义标签的一些特征

文本

  • 双标签中间的文字,包含空格换行等结构

元素

  • 经过浏览器解析后,每一个完整的标签(标签+属性+文本)可以称之为一个元素

1.8 HTML的语法规则

  • 1 根标签有且只能有一个
  • 2 无论是双标签还是单标签都需要正确关闭
  • 3 标签可以嵌套但不能交叉嵌套
  • 4 注释语法为 ,注意不能嵌套
  • 5 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
  • 6 HTML中不严格区分字符串使用单双引号
  • 7 HTML标签不严格区分大小写,但是不能大小写混用
  • 8 HTML中不允许自定义标签名,强行自定义则无效

1.9在线帮助文档

http://www.w3school.com.cn

二 HTML常见标签

2.1 标题标签

标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题

  • 代码
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
  • 效果

2.2 段落标签

段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果

  • 代码
<body><p>记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。</p><p>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。</p><p> 近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。</p>
</body>
  • 效果

2.3 换行标签

单纯实现换行的标签是br,如果想添加分隔线,可以使用hr标签

  • 代码
<body>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。<br>国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。<hr>中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>
  • 效果

2.4 列表标签

有序列表 分条列项展示数据的标签, 其每一项前面的符号带有顺序特征

  • 列表标签 ol
  • 列表项标签 li
  • 代码
<ol><li>JAVA</li><li>前端</li><li>大数据</li>
</ol>
  • 效果

无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征

  • 列表标签 ul
  • 列表项标签 li
  • 代码
<ul><li>JAVASE</li><li>JAVAEE</li><li>数据库</li>
</ul>
  • 效果

嵌套列表 列表和列表之前可以签到,实现某一项内容详细展示

  • 代码
<ol><li>JAVA<ul><li>JAVASE</li><li>JAVAEE</li><li>数据库</li></ul></li><li>前端</li><li>大数据</li>
</ol>
  • 效果

2.5 超链接标签

点击后带有链接跳转的标签 ,也叫作a标签

  • href属性用于定义连接
    • href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点
    • href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
    • href中也可以定义完整的URL
  • target用于定义打开的方式
    • _blank 在新窗口中打开目标资源
    • _self 在当前窗口中打开目标资源
  • 代码
<body><!-- href属性用于定义连接href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点href中也可以定义完整的URLtarget用于定义打开的方式_blank 在新窗口中打开目标资源_self  在当前窗口中打开目标资源--><a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br><a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br><a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br>
</body>
  • 效果

2.6 多媒体标签

img(重点) 图片标签,用于在页面上引入图片

  • 代码
<!-- 
src用于定义图片的连接
title用于定义鼠标悬停时显示的文字
alt用于定义图片加载失败时显示的提示文字
-->
<img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />
  • 效果

audio 用于在页面上引入一段声音

  • 代码
   <!-- src用于定义目标声音资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放--> <audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
  • 效果

video 用于在页面上引入一段视频

  • 代码
<body><!-- src用于定义目标视频资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放--> <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>
  • 效果

2.7 表格标签(重点)

常规表格

  • table标签 代表表格
  • thead标签 代表表头 可以省略不写
  • tbody标签 代表表体 可以省略不写
  • tfoot标签 代表表尾 可以省略不写
  • tr标签 代表一行
  • td标签 代表行内的一格
  • th标签 自带加粗和居中效果的td
  • 代码
    <h3 style="text-align: center;">员工技能竞赛评分表</h3><table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th></tr><tr><td>1</td><td>张小明</td><td>100</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr></table>
  • 展示效果

单元格跨行

  • 通过td的rowspan属性实现上下跨行
  • 代码
    <h3 style="text-align: center;">员工技能竞赛评分表</h3><table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr><tr><td>1</td><td>张小明</td><td>100</td><td rowspan="3">前三名升职加薪</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr></table>
  • 效果

单元格跨行

  • 通过td的colspan属性实现左右的跨列
  • 代码
    <h3 style="text-align: center;">员工技能竞赛评分表</h3><table  border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr><tr><td>1</td><td>张小明</td><td>100</td><td rowspan="6">前三名升职加薪</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr><tr><td>总人数</td><td colspan="2">2000</td></tr><tr><td>平均分</td><td colspan="2">90</td></tr><tr><td>及格率</td><td colspan="2">80%</td></tr></table>
  • 效果

2.8 表单标签(重点)

表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一

  • form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签
    • action, form标签的属性之一,用于定义信息提交的服务器的地址
    • method, form标签的属性之一,用于定义信息的提交方式
      • get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
      • post post方式,数据会通过请求体发送,不会在缀到url后
  • input标签,主要的表单项标签,可以用于定义表单项
    • name, input标签的属性之一,用于定义提交的参数名
    • type, input标签的属性之一,用于定义表单项类型
      • text 文本框
      • password 密码框
      • submit 提交按钮
      • reset 重置按钮
  • 代码
   <form action="http://www.atguigu.com" method="get">用户名 <input type="text" name="username" /> <br>密&nbsp;&nbsp;&nbsp;码 <input type="password" name="password" /> <br><input type="submit"  value="登录" /><input type="reset"  value="重置" /></form>
  • 效果

2.9 常见表单项标签(重点)

单行文本框

  • 代码
个性签名：<input type="text" name="signal"/><br/>
  • 效果

密码框

  • 代码
密码：<input type="password" name="secret"/><br/>
  • 效果

单选框

  • 代码
你的性别是：
<input type="radio" name="sex" value="spring" />男
<input type="radio" name="sex" value="summer" checked="checked" />女
  • 效果
  • 说明
    • name属性相同的radio为一组，组内互斥
    • 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
    • 设置checked="checked"属性设置默认被选中的radio
    • 如果属性名和属性值一样的话，可以省略属性值，只写checked即可

复选框

  • 代码
你喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
  • 效果
  • 说明
    • 设置checked="checked"属性设置默认被选中的checkbox

下拉框

  • 代码
你喜欢的运动是：
<select name="interesting"><option value="swimming">游泳</option><option value="running">跑步</option><option value="shooting" selected="selected">射击</option><option value="skating">溜冰</option>
</select>
  • 效果
  • 说明
    • 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
    • name属性在select标签中设置,value属性在option标签中设置。
    • option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
    • 通过在option标签中设置selected="selected"属性实现默认选中的效果。

按钮

  • 代码
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>
  • 效果
  • 说明
    • 普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
    • 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
    • 提交按钮: 点击后提交表单

隐藏域

  • 代码
<input type="hidden" name="userId" value="2233"/>
  • 说明
    • 通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

多行文本框

  • 代码
自我介绍：<textarea name="desc"></textarea>
  • 效果
  • 说明
    • textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

文件标签

  • 代码
头像:<input type="file" name="file"/>
  • 效果
  • 说明
    • 不同浏览器显示的样式有微小差异

2.10 布局相关标签

div标签 俗称"块",主要用于划分页面结构,做页面布局

span标签 俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰

  • 代码
    <div style="width: 500px; height: 400px;background-color: cadetblue;"><div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;"><span style="color: blueviolet;">页面开头部分</span></div> <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;"><span style="color: blueviolet;">页面中间部分</span></div> <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;"><span style="color: blueviolet;">页面结尾部分</span></div> </div>
  • 展示效果

2.11 特殊字符

对于有特殊含义的字符,需要通过转移字符来表示

  • 代码
    &lt;span&gt;  <br>&lt;a href="http://www.atguigu.com"&gt;尚&nbsp;硅&nbsp;谷&lt;/a&gt; <br>&amp;amp;
  • 效果

三 CSS的使用

CSS 层叠样式表(英文全称：(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面

3.1 CSS引入方式

行内式,通过元素开始标签的style属性引入, 样式语法为 样式名:样式值; 样式名:样式值;

  • 代码
    <input type="button" value="按钮"style="display: block;width: 60px; height: 40px; background-color: rgb(140, 235, 100); color: white;border: 3px solid green;font-size: 22px;font-family: '隶书';line-height: 30px;border-radius: 5px;"/>
  • 效果
  • 缺点
    • html代码和css样式代码交织在一起,增加阅读难度和维护成本
    • css样式代码仅对当前元素有效,代码重复量高,复用度低

内嵌式

  • 代码
<head><meta charset="UTF-8"><style>/* 通过选择器确定样式的作用范围 */input {display: block;width: 80px; height: 40px; background-color: rgb(140, 235, 100); color: white;border: 3px solid green;font-size: 22px;font-family: '隶书';line-height: 30px;border-radius: 5px;}</style>
</head>
<body><input type="button" value="按钮1"/> <input type="button" value="按钮2"/> <input type="button" value="按钮3"/> <input type="button" value="按钮4"/> 
</body>
  • 效果
  • 说明
    • 内嵌式样式需要在head标签中,通过一对style标签定义CSS样式
    • CSS样式的作用范围控制要依赖选择器
    • CSS的样式代码中注释的方式为 /* */
    • 内嵌式虽然对样式代码做了抽取,但是CSS代码仍然在html文件中
    • 内嵌样式仅仅能作用于当前文件,代码复用度还是不够,不利于网站风格统一

连接式/外部样式表

  • 可以在项目单独创建css样式文件,专门用于存放CSS样式代码
  • 在head标签中,通过link标签引入外部CSS样式即可
<head><meta charset="UTF-8"><link href="css/buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body><input type="button" value="按钮1"/> <input type="button" value="按钮2"/> <input type="button" value="按钮3"/> <input type="button" value="按钮4"/> 
</body>
  • 说明
    • CSS样式代码从html文件中剥离,利于代码的维护
    • CSS样式文件可以被多个不同的html引入,利于网站风格统一

3.2 CSS选择器

元素选择器

  • 代码
<head><meta charset="UTF-8"><style>input {display: block;width: 80px; height: 40px; background-color: rgb(140, 235, 100); color: white;border: 3px solid green;font-size: 22px;font-family: '隶书';line-height: 30px;border-radius: 5px;}</style>
</head>
<body><input type="button" value="按钮1"/> <input type="button" value="按钮2"/> <input type="button" value="按钮3"/> <input type="button" value="按钮4"/> <button>按钮5</button>
</body>
  • 效果
  • 说明
    • 根据标签名确定样式的作用范围
    • 语法为 元素名 {}
    • 样式只能作用到同名标签上,其他标签不可用
    • 相同的标签未必需要相同的样式,会造成样式的作用范围太大

id选择器

  • 代码
<head><meta charset="UTF-8"><style>#btn1 {display: block;width: 80px; height: 40px; background-color: rgb(140, 235, 100); color: white;border: 3px solid green;font-size: 22px;font-family: '隶书';line-height: 30px;border-radius: 5px;}</style>
</head>
<body><input id="btn1" type="button" value="按钮1"/> <input id="btn2" type="button" value="按钮2"/> <input id="btn3" type="button" value="按钮3"/> <input id="btn4" type="button" value="按钮4"/> <button id="btn5">按钮5</button>
</body>
  • 效果
  • 说明
    • 根据元素id属性的值确定样式的作用范围
    • 语法为 #id值 {}
    • id属性的值在页面上具有唯一性,所有id选择器也只能影响一个元素的样式
    • 因为id属性值不够灵活,所以使用该选择器的情况较少

class选择器

  • 代码
<head><meta charset="UTF-8"><style>.shapeClass {display: block;width: 80px; height: 40px; border-radius: 5px;}.colorClass{background-color: rgb(140, 235, 100); color: white;border: 3px solid green;}.fontClass {font-size: 22px;font-family: '隶书';line-height: 30px;}</style>
</head>
<body><input  class ="shapeClass colorClass fontClass"type="button" value="按钮1"/> <input  class ="shapeClass colorClass" type="button" value="按钮2"/> <input  class ="colorClass fontClass" type="button" value="按钮3"/> <input  class ="fontClass" type="button" value="按钮4"/> <button class="shapeClass colorClass fontClass" >按钮5</button>
</body>
  • 效果
  • 说明
    • 根据元素class属性的值确定样式的作用范围
    • 语法为 .class值 {}
    • class属性值可以有一个,也可以有多个,多个不同的标签也可以是使用相同的class值
    • 多个选择器的样式可以在同一个元素上进行叠加
    • 因为class选择器非常灵活,所以在CSS中,使用该选择器的情况较多

3.4 CSS浮动

CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  • 浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。
  • 文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

浮动原理

  • 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
  • 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
  • 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

浮动的样式名:float
通过代码感受浮动的效果

  • 代码
<head><meta charset="UTF-8"><style>.outerDiv {width: 500px;height: 300px;border: 1px solid green;background-color: rgb(230, 224, 224);}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;float: left;}.d1{background-color: greenyellow;/*  float: right; */}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}</style>
</head>
<body><div class="outerDiv"><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div></div> 
</body>
  • 效果

3.5 CSS定位

position 属性指定了元素的定位类型。

  • 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

  • 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

静态定位

  • 说明
    • 不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列
  • 代码
<head><meta charset="UTF-8"><style>.innerDiv{width: 100px;height: 100px;}.d1{background-color: rgb(166, 247, 46);position: static;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}</style>
</head>
<body><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div>
</body>
  • 效果

绝对定位

  • 说明

    • absolute ,通过 top left right bottom 指定元素在页面上的固定位置
    • 定位后元素会让出原来位置,其他元素可以占用

  • 代码

<head><meta charset="UTF-8"><style>.innerDiv{width: 100px;height: 100px;}.d1{background-color: rgb(166, 247, 46);position: absolute;left: 300px;top: 100px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}</style>
</head>
<body><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div>
</body>
  • 效果

相对定位

  • 说明
    • relative 相对于自己原来的位置进行地位
    • 定位后保留原来的站位,其他元素不会移动到该位置
  • 代码
<head><meta charset="UTF-8"><style>.innerDiv{width: 100px;height: 100px;}.d1{background-color: rgb(166, 247, 46);position: relative;left: 30px;top: 30px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}</style>
</head>
<body><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div>
</body>
  • 效果

固定定位

  • 说明
    • fixed 失踪在浏览器窗口固定位置,不会随着页面的上下移动而移动
    • 元素定位后会让出原来的位置,其他元素可以占用
  • 代码
<head><meta charset="UTF-8"><style>.innerDiv{width: 100px;height: 100px;}.d1{background-color: rgb(166, 247, 46);position: fixed;right: 30px;top: 30px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}</style>
</head>
<body><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div>br*100+tab
</body>
  • 效果

3.6 CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

  • CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）
  • 说明：
    • Margin(外边距) - 清除边框外的区域，外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    • Content(内容) - 盒子的内容，显示文本和图像。
  • 代码
    <head><meta charset="UTF-8"><style>.outerDiv {width: 800px;height: 300px;border: 1px solid green;background-color: rgb(230, 224, 224);margin: 0px auto;}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;float: left;/* margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px; */margin: 10px 20px 30px 40px;}.d1{background-color: greenyellow;/* padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px; */padding: 10px 20px 30px 40px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}</style></head><body><div class="outerDiv"><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div></div> </body>
  • 效果
  • 在浏览器上,通过F12工具查看盒子模型状态

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/733073.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

筛选出等于1的式子

筛选出等于1的式子

然后统计和归类 归类分行归类方法 算术符号归类 数字大小排序算术符号归类 import randomdef generate_expression(num_range, num_count, operators):nums random.sample(range(num_range[0], num_range[1]1), num_count)ops random.choices(operators, knum_count-1)expre…
阅读更多...
ChatGPT 结合实际地图实现问答式地图检索功能基于Function calling

ChatGPT 结合实际地图实现问答式地图检索功能基于Function calling

ChatGPT 结合实际地图实现问答式地图检索功能基于Function calling ChatGPT结合实际业务&#xff0c;主要是研发多函数调用&#xff08;Function Calling&#xff09;功能模块&#xff0c;将自定义函数通过ChatGPT 问答结果&#xff0c;实现对应函数执行&#xff0c;再次将结果…
阅读更多...
List(CS61B学习记录)

List(CS61B学习记录)

问题引入 上图中&#xff0c;赋给b海象的weight会改变a海象的weight&#xff0c;但x的赋值又不会改变y的赋值 Bits 要解释上图的问题&#xff0c;我们应该从Java的底层入手 相同的二进制编码&#xff0c;却因为数据类型不同&#xff0c;输出不同的值 变量的声明 基本类型…
阅读更多...
强引用、软引用、弱引用、幻象引用 —— Java的四种引用类型解析

强引用、软引用、弱引用、幻象引用 —— Java的四种引用类型解析

强引用、软引用、弱引用、幻象引用 —— Java的四种引用类型解析 在Java中&#xff0c;对象的生命周期并不总是由我们直接控制。除了我们常见的强引用外&#xff0c;Java还提供了软引用、弱引用和幻象引用这三种引用类型&#xff0c;它们对对象生命周期的影响各不相同。理解这…
阅读更多...
一步到位！快速精通Git工作流及实战技巧详解

一步到位！快速精通Git工作流及实战技巧详解

Git是一个分布式版本控制系统。 1、git的应用场景 1.备份 小明负责的模块就要完成了&#xff0c;就在即将release之前的一瞬间&#xff0c;电脑突然蓝屏。硬盘光荣牺牲&#xff01;几个月来的努力付之东流。 场景二&#xff1a;代码还原 这个项目中需要一个很复杂的功能&…
阅读更多...
Linux下使用MD5SUM命令详解

Linux下使用MD5SUM命令详解

在Linux操作系统中&#xff0c;md5sum是一个非常实用的工具&#xff0c;用于生成和校验文件的MD5散列值。MD5是一种广泛使用的密码散列函数&#xff0c;可以产生一个128位&#xff08;16字节&#xff09;的散列值&#xff0c;常用来确保数据的完整性和一致性。 一、MD5SUM命令…
阅读更多...
【Java】＜Java类库＞ 与 ＜Java标准库＞

【Java】＜Java类库＞ 与 ＜Java标准库＞

Java标准库 和 Java类库 在某种程度上是相互关联的概念&#xff0c;但它们又有一些不同之处。 Java标准库&#xff1a; Java标准库是指Java平台提供的一组标准的类和接口的集合&#xff0c;用于实现Java程序的基本功能和常见任务。Java标准库是Java平台的一部分&#xff0c;包含…
阅读更多...
CVHub | 初识langchain，3分钟快速了解！

CVHub | 初识langchain，3分钟快速了解！

本文来源公众号“CVHub”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;初识langchain 1 什么是langchain langchain[1]是一个用于构建LLM-Based应用的框架&#xff0c;提供以下能力: 上下文感知&#xff1a;可以为LLM链接上下文…
阅读更多...
《Python源码剖析》之字符串拼接的一个效率问题

《Python源码剖析》之字符串拼接的一个效率问题

前言 我们常用的字符串拼接方法有两个&#xff0c;一个是通过“”号实现字符串的拼接&#xff0c;还一个就是通过join方法来实现拼接&#xff0c;前者在写法上更加便利&#xff0c;和数字之间的加法运算一样&#xff0c;通常只有两个运算对象&#xff0c;只不过他们的运算规则…
阅读更多...
XS2186 PSE控制器产品-八通道，兼容IEEE 802.3at/af

XS2186 PSE控制器产品-八通道，兼容IEEE 802.3at/af

XS2186 PSE控制器产品-八通道&#xff0c;兼容IEEE 802.3at/af 芯片特性&#xff1a; 八通道&#xff0c;兼容IEEE 802.3at/af 0.1Ω内置电流检测电阻 内置电源功率管 每个端口高达30W 10位端口电流和电压实时监测 兼容I2C&#xff0c;3线串口 支持独立供电操作 为遗…
阅读更多...
新贵Claude 3家族强势登场,AI领域掀起新一轮浪潮!

新贵Claude 3家族强势登场,AI领域掀起新一轮浪潮!

人工智能领域的风云再起,Anthropic公司日前放出狠招,推出了全新的大模型家族Claude 3系列。Claude 3由三款不同级别的大模型组成,分别是Claude 3 Haiku、Claude 3 Sonnet和Claude 3 Opus。这一系列产品的推出,不仅扩充了AI生态,更是对OpenAI的GPT-4等龙头产品发出了挑战。让我们…
阅读更多...
函数柯里化：JavaScript中的高级技巧

函数柯里化：JavaScript中的高级技巧

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
利用GPT开发应用005：Codex、Turbo、ChatGPT、GPT-4

利用GPT开发应用005：Codex、Turbo、ChatGPT、GPT-4

文章目录 一、GPT-3 Codex二、GPT-3.5 Turbo二、ChatGPT三、GPT-4 一、GPT-3 Codex 2022年3月&#xff0c;OpenAI 发布了 GPT-3 Codex 的新版本。 这个新模型具有编辑和插入文本的能力。它们是通过截至 2021 年 6 月的数据进行训练的&#xff0c;并被描述为比之前版本更强大。到…
阅读更多...
力扣爆刷第88天之hot100五连刷26-30

力扣爆刷第88天之hot100五连刷26-30

力扣爆刷第88天之hot100五连刷26-30 文章目录 力扣爆刷第88天之hot100五连刷26-30一、142. 环形链表 II二、21. 合并两个有序链表三、2. 两数相加四、19. 删除链表的倒数第 N 个结点五、24. 两两交换链表中的节点 一、142. 环形链表 II 题目链接&#xff1a;https://leetcode.…
阅读更多...
ospf静态路由实验简述

ospf静态路由实验简述

1、ospf静态路由实验简述 实验拓扑图 实验命令 r2: sys sysname r2 undo info enable int loopb 0 ip add 2.2.2.2 32 quit int e0/0/0 ip add 23.1.1.2 24 quit ospf 1 area 0 network 23.1.1.0 0.0.0.255 network 2.2.2.2 0.0.0.0 ret r3: sys sysname r3 undo info enable …
阅读更多...
C++vector简单实现

C++vector简单实现

由于我们之前已经详细讲解了string接口&#xff0c;而vector接口大都在string上有&#xff0c;所以大家只需自行翻阅前面文章就可以明白接口的使用了&#xff0c;所以&#xff0c;这里我们只实现vector&#xff0c;注意&#xff1a;vector会有迭代器失效的情况&#xff0c;大家…
阅读更多...
SuperNIC：用于人工智能的网络加速器

SuperNIC：用于人工智能的网络加速器

随着人工智能的复杂性和规模不断增长&#xff0c;传统的网络解决方案往往无法满足这些先进系统的数据密集型需求。为了解决人工智能工作负载所面临的问题&#xff0c;SuperNIC应运而生。在本文中&#xff0c;我们将探讨SuperNIC的变革能力&#xff0c;探索它如何革新网络性能&a…
阅读更多...
C语言经典算法题-2

C语言经典算法题-2

文章目录 11.字串核对12.双色、三色河内塔13.背包问题&#xff08;Knapsack Problem&#xff09;14.蒙地卡罗法求 PI15.Eratosthenes筛选求质数 11.字串核对 说明&#xff1a;今日的一些高阶程式语言对于字串的处理支援越来越强大&#xff08;例如Java、Perl等&#xff09;&am…
阅读更多...
python 蓝桥杯之动态规划入门

python 蓝桥杯之动态规划入门

文章目录 DFS滑行&#xff08;DFS 记忆搜索&#xff09; 思路&#xff1a; 要思考回溯怎么写&#xff08;入参与返回值、递归到哪里&#xff0c;递归的边界和入口&#xff09; DFS 滑行&#xff08;DFS 记忆搜索&#xff09; 代码分析&#xff1a; 学会将输入的数据用二维列表…
阅读更多...
变换，动画

变换，动画

面试题——需求&#xff1a;在不知道父元素与子元素的宽高时 如何让子元素在父元素内居中&#xff1f; 1.定位 父相子绝 2.子元素 top&#xff1a;50% left:50% 3.子元素 transform: translate(-50%,-50%) .parent{height: 500px;background-color: red;position: relative;}.c…
阅读更多...
最新文章

Copyright @ 2022~2023