当前位置：首页 > news >正文

3.26品优购

news 来源：原创 2025/5/11 3:43:36

favicon标签的制作

1.在比特虫制作favicon图标
2.把favicon图标放入根目录
3.在head标签添加：<link rel="shortcut icon" href="/favicon.ico">

使用tdk三个标签

<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物</title>

注意点：

 表示空格键

margin:上边距左右边距下边距;

在 <img> / <a> / <button>...........等标签中使用 title 属性，当鼠标悬停在图片上时，会显示指定的提示信息。

块级元素

块级元素具有很强的布局特性，这类元素无论其内容多少，都会独占一行，另起一行开始显示。在 CSS 样式设置中，我们可以自由设置块级元素的宽度和高度。如果不设置宽度，块级元素默认会占满父元素的宽度。不仅如此，在垂直方向上，块级元素的外边距（margin）和内边距（padding）都会正常生效。

常见的块级元素包括<div>、<p>、<h1> - <h6>、<ul>、<ol>、<li>等。以下面这段代码为例：

html

<!DOCTYPE html>
<html lang="en">

<body>
    <div style="background-color: lightblue;">这是一个div块级元素</div>
    <p style="background-color: lightgreen;">这是一个p块级元素</p>
</body>

</html>

在浏览器中打开该页面，<div>和<p>元素会各自独占一行显示，十分直观地体现了块级元素的特性。

行内元素

与块级元素不同，行内元素不会独占一行，多个行内元素能够在同一行内依次排列显示。行内元素的宽度和高度由其内容决定，无法通过 CSS 显式地设置宽度和高度。在 CSS 样式的作用上，水平方向上的外边距（margin）和内边距（padding）会生效，但垂直方向上的外边距设置通常无效。

<a>、<span>、<img>、<input>、<label>、<select>等是常见的行内元素。以下面代码为示例：

html

<!DOCTYPE html>
<html lang="en">

<body>
    <span style="background-color: lightblue;">这是一个span行内元素</span>
    <a href="#" style="background-color: lightgreen;">这是一个a行内元素</a>
</body>

</html>

运行代码后，<span>和<a>元素会在同一行显示。

行内块元素

行内块元素结合了行内元素和块级元素的部分特性。它可以和其他行内元素或行内块元素在同一行显示，不会强制换行。同时，我们能够像块级元素一样，通过 CSS 设置行内块元素的宽度和高度，并且在水平和垂直方向上，外边距（margin）和内边距（padding）都能正常生效。

<img>、<input>、<textarea>、<button>、<select>等都属于行内块元素。此外，我们还可以通过 CSS 将其他元素的display属性设置为inline-block，使其具有行内块元素的特性。下面的代码展示了行内块元素的效果：

html

<!DOCTYPE html>
<html lang="en">

<body>
    <input type="text" style="width: 150px; margin: 10px; background-color: lightblue;">
    <button style="width: 100px; margin: 10px; background-color: lightgreen;">按钮</button>
</body>

</html>

在浏览器中，<input>和<button>作为行内块元素，会在同一行显示，并且宽度和外边距都能按照设定显示。