在建站时，一个实用的代码小技巧是使用CSS的伪类选择器来增强网页的交互性。这里有一个简单的例子，展示如何使用 :hover 伪类来改变链接的样式，当鼠标悬停在链接上时：

/* 正常状态下的链接样式 */
a {
  color: #0000FF; /* 蓝色文本 */
  text-decoration: none; /* 去除下划线 */
}

/* 鼠标悬停时的链接样式 */
a:hover {
  color: #FF0000; /* 红色文本 */
  text-decoration: underline; /* 添加下划线 */
}

另一个实用的技巧是使用CSS的Flexbox布局。Flexbox可以简化布局的实现，使得元素在容器内的水平或垂直排列更加灵活。以下是一个基本的Flexbox布局示例：

/* 容器样式 */
.container {
  display: flex; /* 启用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 容器高度为视口高度 */
}

/* 子元素样式 */
.item {
  flex: 1; /* 子元素按比例分配空间 */
  margin: 10px; /* 子元素之间的间距 */
  padding: 20px; /* 子元素内边距 */
  background-color: #f2f2f2; /* 子元素背景颜色 */
}

HTML部分：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

使用Flexbox，你可以轻松地实现响应式布局，而无需编写大量的媒体查询代码。

还有一个技巧是使用HTML的 data-* 属性来存储私有的自定义数据，这些数据可以用于JavaScript操作，但不会在HTML文档中显示。例如：

<button data-message="Hello World">Click me!</button>

然后在JavaScript中，你可以这样访问这个自定义数据：

document.querySelector('button').addEventListener('click', function() {
  console.log(this.dataset.message); // 输出: Hello World
});

这些小技巧可以帮助你提高开发效率，同时提升网站的用户体验。