响应式网站产品中，新闻、案例列表页面大多是图文列表相结合的显示，有时候我们上传的背景图片规格不同，在网页上会出现参差不齐、排版混乱的问题，而要在网页上整齐排列，这里我用CSS定位来达到我们想要的效果。
首先，我们创建一个包装图片的容器来放置我们的图片，然后从设计图列表页面中取出一张列表图片并倒入，设置长度和间距，因为它是响应式的，所以不需要设置高度html图片不显示，这样图片是自适应的;功效如右图所示
HTML 代码如下：
在上图中，
让包图片的li相对定位（位置：相对;），上图倒出的图片不是我们要在网页上展示的图片，所以我要做进一步的处理，如右图所示：
我们真正想要显示的图像被包裹在一个div（类名img）中并设置绝对定位（position：absolute;），放在li标签中html图片不显示，div（img）标签写入要实际显示的背景图像的路径。
CSS如图所示：
div （img） 标签设置 CSS 属性 （background-size：cover！important; ），以便背景图像填充整个 div （IMG） 标签。
最终效果如图所示：
我们要展示的两张图片的原始规格不同，经过我的处理，它们整齐地显示在网页上。
Web后端的三大核心技术：HTMLhtml设置边框，CSS，JS
1.HTML（超文本标记语言）：
HTML 是一种用于创建网页结构和内容的标记语言。它由一系列标签组成，每个标签都有特定的含义和功能。通过使用不同的HTML标签，您可以创建标题，段落，链接，列表，图像等元素来构建网页的结构。HTML 标记被尖括号 （） 包围，通常成对出现，带有开始标记和结束标记。例如，“”表示第一级标题的起始标记，而“”表示第一级标题的结束标记。HTML 可以指定元素的属性，例如“id”、“class”、“src”等，以进一步控制元素的样式和行为。
2.CSS（级联样式表）：
CSS 用于向 HTML 文档添加样式和布局。通过 CSS，您可以更改网页中元素的外观和排列方式。CSS 使用选择器来选择 HTML 元素，并按属性值设置它们的样式。例如，您可以选择标题元素 ''，然后通过 CSS 设置其颜色、字体大小、边距等。CSS 具有级联功能，即当多个规则同时应用于一个元素时，可以通过设置优先级来确定最终样式。据悉，CSS还支持响应式设计，可以通过媒体查询等技术，使网页在不同的设备和屏幕规格下具有不同的样式和布局。
3、JavaScript（JS）：
JavaScript 是一种脚本语言，用于向网页添加交互式和动态功能。它使网页能够响应用户的操作、处理数据并与服务器通信。通过JavaScript，您可以操作网页的各种元素，例如更改文本内容，处理表单数据，创建动漫效果，发送在线请求等。JavaScript 还具有强大的编程功能，例如面向对象编程、异步操作和模块化开发。它可以与HTML和CSS紧密集成，为网页提供越来越交互html设置边框，复杂的功能和功效。
这三项核心技术共同构成了现代 Web 后端开发的基础，它们相互协作和交互。HTML定义了网页的结构和内容，CSS负责网页的样式和布局，JavaScript实现了网页的动态功效和交互逻辑。它们一起可用于创建成熟的、用户友好的 Web 应用程序。
常用网页标签
1.~：定义标题，从一级标题到第六级标题，按降序排列，以指示标题的重要性。
<h1>This is a heading level 1</h1><h2>This is a heading level 2</h2><h3>This is a heading level 3</h3>
是
一级标题标签，文本显示为此推送的第一级标题变体。
阿拉伯数字。
：定义段落。
<p>This is a paragraph.</p>标签定义一个自动换行的段落。
3.：定义链接以创建指向其他页面、文件或位置的超链接。
<a href="https://www.example.com">Click here</a>标记创建一个超链接，“href”属性指定链接的目标地址。
4.
：定义图像以将图像插入网页。
<img src="image.jpg" alt="Description of Image">'
标记用于将图像插入网页，“src”属性指定图像的URL，“alt”属性向图像添加描述性文本。
5./：定义无序列表/有序列表。
<ul><li>Item 1</li><li>Item 2</li></ul><ol><li>Item 1</li><li>Item 2</li></ol>
标签定义无序列表，其中每个列表项由标签表示;标签定义有序列表，同样使用标签来表示列表项。
6.
：定义文档中的区块或容器。
<div><h2>Section Title</h2><p>Content goes here.</p></div>
标记用于定义块或容器，并可用于包装一组相关元素。
7.：在文本中定义区域或内联元素。
<p>My name is <span style="color: blue;">John</span>.</p>标记用于定义文本区域，并可用于添加变体或使用特定的内联元素。
8.：定义表。
<table><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Data 1</td><td>Data 2</td></tr></table>
标签定义一个表，表示
表的行，表示标题单元格，表示数据单元格。
9.：定义用于接收用户输入的表单。
<form><label for="name">Name:</label><input type="text" id="name" name="name" required><input type="submit" value="Submit"></form>
标签定义表单，用于标记表单数组并用于输入表单数据。
10.：定义键。
<button onclick="myFunction()">Click Me</button>标签定义了一个可以执行 JavaScript 功能或其他交互的按键按钮。
CSS 通用选择器
1. 元素选择器：按元素类型选择元素。
p {color: red;}
全选
元素，并将其文本颜色设置为黄色。
2. 类选择器：按类名选择元素。
.highlight {background-color: yellow;}
选择具有 Highlight 类的所有元素，并将其背景色设置为红色。
3.ID 选择器：按 ID 选择元素。
#logo {width: 200px;}
选择具有徽标 ID 的元素，并将其长度设置为 200 像素。
4. 后代选择器：选择元素的后代元素。
.container p {font-size: 16px;}
选择容器类内的所有元素
元素，并将其字体大小设置为 16 像素。5. 直接子元素选择
器：选择元素的直接子元素。
ul > li {list-style-type: square;}
选择直接位于元素内的所有元素，并将其列表变体设置为圆圈。
6. 伪类选择器：选择处于特定状态或位置的元素。
a:hover {color: purple;}
选择键盘悬停在
元素上的状态，并将其文本颜色设置为黄色。
7. 属性选择器：选择具有特定属性的元素。
input[type="text"] {border: 1px solid gray;}
选择类型属性值为文本的所有元素，并将其边框变体设置为黄色虚线。
鼓励
离开前喜欢它
预览时标签不可点击
