分类前端技术下的文章

2024-08-15

Google的HTML/CSS风格指南是一个用于编写可维护和可读性高的HTML和CSS代码的指导手册。以下是一些关键点的简要概述和示例：

缩进与空白
- 使用两个空格进行缩进。
- 避免不必要的空格，例如在标签之间。
语法
- 属性名称不应该使用引号。
- 使用小写元素名称和属性名称。
元素
- 使用正确的闭合元素。
- 不要忘记结束标签。
属性
- 属性值应该被引号包围。
注释
- 使用HTML注释来描述区块内容。

示例代码：




<!-- Sections -->
<div id="navigation">
  <!-- Navigation links -->
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>
 
<div id="content">
  <h1>Page title</h1>
  <p>This is a paragraph of sample content.</p>
</div>
 
<!-- Comment describing the stylesheet -->
<link rel="stylesheet" href="styles.css">




/* Stylesheet for Google HTML/CSS style guide example */
#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
#navigation li {
  display: inline;
}
 
#content h1 {
  color: #333;
  font-size: 2em;
}
 
#content p {
  margin-bottom: 1.4em;
}

这个例子展示了如何使用合适的缩进和空格来提高代码的可读性，以及如何正确地注释和格式化HTML和CSS代码。

- 阅读更多 -

iframe嵌套其它网站页面及相关知识点详解

System

2024-08-15

所有,css

在Web开发中，有时需要在自己的网站页面中嵌入其他网站的页面，这通常通过使用iframe元素实现。以下是一个基本的iframe用法示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入其他网站页面</title>
</head>
<body>
    <iframe src="https://example.com" width="600" height="400">
        抱歉，您的浏览器不支持内嵌框架(iframe)。
    </iframe>
</body>
</html>

在这个例子中，iframe的src属性设置为想要嵌入的网页地址。width和height属性用来设置iframe的尺寸。

需要注意的是，由于同源策略（Same-origin policy），如果尝试嵌入的网页不是同源的（例如，不同的域名、协议或端口），则可能会遇到跨域问题，导致无法加载。解决这个问题通常需要目标网站的配合，可以通过设置iframe的sandbox属性来增加安全性，或者使用Content-Security-Policy（CSP）头部来限制iframe中内容的行为。

此外，iframe还有一些其他的属性和事件，例如：

sandbox：用于增加沙箱模式，限制iframe中的行为。
onload：当iframe中的内容加载完成时触发。
allowfullscreen：允许iframe中的内容全屏显示。

这些属性可以根据具体需求进行设置以提升安全性和用户体验。

- 阅读更多 -

CSS 实现文字渐变色

System

2024-08-15

所有,css

要在CSS中实现文字的渐变色，可以使用linear-gradient函数作为color属性的值。以下是一个简单的例子：




.gradient-text {
  /* 创建一个从左到右的线性渐变色 */
  color: linear-gradient(to right, #ff7e5f, #feb47b);
  /* 为了兼容性，添加一个正常颜色作为回退 */
  color: #ff7e5f;
  /* 为了在部分不支持渐变色的浏览器上显示某种颜色，可以添加一个正常颜色 */
}




<div class="gradient-text">这是一个渐变色的文本示例</div>

在这个例子中，.gradient-text 类应用于一个元素，使得其内的文本颜色是从左到右渐变的，从颜色 #ff7e5f 到 #feb47b。如果浏览器不支持CSS渐变，文本将显示为默认的颜色 #ff7e5f。

- 阅读更多 -

css中选择器的优先级

System

2024-08-15

所有,css

CSS中的选择器优先级基于选择器的特异性（specificity）来确定，特异性由四个级别组成：

内联样式：1,0,0,0
ID选择器：0,1,0,0
类选择器、属性选择器、伪类：0,0,1,0
元素选择器、伪元素：0,0,0,1

当两个或多个规则应用于同一个元素时，具有更高特异性的规则将被应用。

如果特异性相同，那么后定义的规则将会覆盖先定义的规则。

例子：




/* 特异性为：0,0,0,1 */
p { color: red; }
 
/* 特异性为：0,0,1,0 */
.my-class { color: blue; }
 
/* 特异性为：0,1,0,0 */
#my-id { color: green; }
 
/* 内联样式具有最高优先级，特异性为：1,0,0,0 */
<p style="color: black;">This text will be black.</p>

在这个例子中，内联样式因为它的特异性最高，所以会覆盖其他所有的规则。如果没有内联样式，ID选择器会覆盖类选择器，类选择器会覆盖元素选择器。

- 阅读更多 -

css transform 平移、旋转、缩放、倾斜元素

System

2024-08-15

所有,css

在CSS中，可以使用transform属性来平移、旋转、缩放和倾斜元素。以下是实现这些变换的CSS代码示例：




/* 平移 */
.translate {
  transform: translate(50px, 100px); /* 水平方向平移50px，垂直方向平移100px */
}
 
/* 旋转 */
.rotate {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}
 
/* 缩放 */
.scale {
  transform: scale(1.5, 0.8); /* 水平方向放大1.5倍，垂直方向缩小0.8倍 */
}
 
/* 倾斜 */
.skew {
  transform: skew(30deg, 20deg); /* 水平方向倾斜30度，垂直方向倾斜20度 */
}

将上述类应用到HTML元素上，例如：




<div class="translate">平移示例</div>
<div class="rotate">旋转示例</div>
<div class="scale">缩放示例</div>
<div class="skew">倾斜示例</div>

这些CSS类可以组合使用，以实现更复杂的变换效果。例如，要同时应用平移和旋转：




.translate-and-rotate {
  transform: translate(50px, 100px) rotate(45deg);
}

将这个类应用到一个元素上，它会首先平移然后旋转。

- 阅读更多 -

【CSS】css 整理 - 持续更新中ing

System

2024-08-15

所有,css

在CSS中，有许多的技巧和方法可以用来整理和优化代码，以提高效率和性能。以下是一些常见的CSS整理方法：

使用CSS预处理器：如Sass、LESS，它们可以让你写出结构更清晰、可维护性更高的CSS代码。




// Sass示例
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
  font-family: $font-stack;
  color: $primary-color;
}

合理使用CSS继承：尽可能利用选择器的继承特性，减少重复的代码。




/* 继承示例 */
body {
  font-family: Helvetica, sans-serif;
  color: #333;
}
 
p {
  /* 将继承body的字体和颜色 */
}

精简CSS：移除不必要的空格、注释、换行等，减小文件大小。




/* 精简前 */
#search-form input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}
 
/* 精简后 */
#search-form input[type="text"]{width:100%;padding:10px;margin-bottom:10px;}

使用CSS工具：如PostCSS、Autoprefixer，它们可以自动添加浏览器特定的前缀，并且还能提供其他优化。
模块化CSS：将页面拆分成多个模块，每个模块都写在单独的CSS文件中，然后再通过构建工具如Webpack进行打包。
使用CSS框架：如Bootstrap、Foundation，它们为你提供了预定义的样式和布局，可以减少自己从头开始的工作。
优化CSS选择器：避免使用标签名作为选择器的一部分，因为它的优先级太高，应尽可能使用类或ID。




/* 优化前 */
div#my-id {
  color: red;
}
 
/* 优化后 */
#my-id {
  color: red;
}

使用CSS性能分析工具：如PageSpeed Insights、WebPageTest，它们可以帮助你找到CSS性能瓶颈，并提出优化建议。
使用CSS命名规范：有助于代码的可读性和可维护性。
注意CSS文件的加载顺序：将通用的CSS如重置样式、布局样式等放在前面，将特定的样式放在后面，以提高浏览器的加载效率。

以上是一些常见的CSS整理方法，具体使用哪种或者组合使用哪种，取决于具体项目的需求和条件。在实际操作中，可以根据项目的具体情况，逐步应用这些方法来提高CSS的整体质量。

- 阅读更多 -

【CSS】CSS实现元素四周阴影

System

2024-08-15

所有,css

在CSS中，您可以使用box-shadow属性为元素添加四周阴影。这个属性允许您设置水平偏移、垂直偏移、模糊距离和阴影颜色。

以下是一个简单的例子，展示了如何给一个元素添加四周阴影：




.shadow-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊距离 颜色 */
}

HTML部分：




<div class="shadow-box"></div>

在这个例子中，.shadow-box类将会给div元素添加一个10像素模糊距离的阴影，阴影颜色为半透明黑色。您可以根据需要调整box-shadow属性的值。

- 阅读更多 -

CSS改变图片颜色的三种方法

System

2024-08-15

所有,css

在CSS中，可以通过以下三种方法来改变图片的颜色：

使用CSS滤镜（filter）属性：




img {
  filter: sepia() hue-rotate(90deg) saturate(3);
}

使用CSS混合模式（blend mode）：




img {
  mix-blend-mode: multiply;
}

使用CSS伪元素和线性渐变背景：




img {
  position: relative;
  display: inline-block;
}
 
img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, red, blue);
  mix-blend-mode: multiply;
}

每种方法都有各自的用途，第一种方法通过CSS的滤镜功能可以实现类似老照片的效果，第二种方法可以使图片与其他元素混合显示，第三种方法可以创建出炫丽的颜色渐变效果。

- 阅读更多 -

如何用HTML＋CSS编写灵活的Tab页，offer收割机

System

2024-08-15

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Tabs (1)</title>
<style>
  .tabs {
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
    padding: 10px;
  }
  .tab {
    padding: 10px;
    cursor: pointer;
    user-select: none;
  }
  .tab.active {
    border-bottom: 2px solid #333;
  }
  .content {
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
  }
</style>
</head>
<body>
 
<div class="tabs">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
</div>
 
<div class="content">Content for Tab 1</div>
 
<script>
  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
      // Remove active class from all tabs
      document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
 
      // Add active class to the clicked tab
      tab.classList.add('active');
 
      // Get the index of the clicked tab
      const index = [...document.querySelectorAll('.tab')].indexOf(tab);
 
      // Hide all content divs
      document.querySelectorAll('.content').forEach(content => content.style.display = 'none');
 
      // Show the content div corresponding to the active tab
      document.querySelectorAll('.content')[index].style.display = 'block';
    });
  });
</script>
 
</body>
</html>

这段代码使用了Flexbox布局让标签水平分布，并通过JavaScript处理标签的点击事件，显示对应的内容区域。这是一个简单的标签页实现，适合作为学习如何构建更复杂标签页系统的起点。

- 阅读更多 -

CSS实现文字不换行

System

2024-08-15

所有,css

要在CSS中实现文字不换行，可以使用white-space属性。设置white-space属性为nowrap可以阻止文本换行。

下面是实现文字不换行的CSS代码示例：




.no-wrap {
  white-space: nowrap;
}

然后在HTML中，将这个类应用到需要实现不换行的元素上：




<div class="no-wrap">这段文字不会换行，即使它很长。</div>

- 阅读更多 -