分类前端技术下的文章

2024-08-23

在HTML中，要修改某个字的颜色，通常需要使用CSS。你可以直接在元素的style属性中写入CSS代码，或者在<head>标签内的<style>标签中定义CSS规则，或者在外部CSS文件中定义。

以下是一个简单的例子，演示如何只修改一个特定单词的颜色：




<!DOCTYPE html>
<html>
<head>
<style>
  .red-text {
    color: red;
  }
</style>
</head>
<body>
 
<p>这是一个<span class="red-text">红色</span>的单词。</p>
 
</body>
</html>

在这个例子中，我们定义了一个叫.red-text的CSS类，并将其颜色设置为红色。然后我们在HTML中的<span>元素上应用这个类，从而只改变了“红色”这个词的颜色。其他文字保持不变。

- 阅读更多 -

【CSS3】flex布局实践篇 | 7种常见网页布局方案

System

2024-08-23

所有,css3




/* 通用样式 */
.container {
  display: flex;
  flex-direction: column; /* 默认为纵向排列 */
}
 
/* 布局一：顶部固定，底部固定，中间自适应 */
.header {
  height: 50px;
  background-color: lightblue;
}
 
.footer {
  height: 50px;
  background-color: lightcoral;
}
 
.main {
  flex: 1; /* 占据剩余空间 */
  background-color: lightgreen;
}
 
/* 布局二：侧边固定，主内容自适应 */
.sidebar {
  width: 200px; /* 固定宽度 */
  background-color: lightblue;
}
 
.content {
  flex: 1; /* 占据剩余空间 */
  background-color: lightgreen;
}
 
/* 布局三：1:2:1三等分 */
.container > div {
  flex: 1;
}
 
/* 布局四：主内容占据一定宽度，侧边自适应 */
.main-content {
  width: 80%; /* 主内容宽度 */
  background-color: lightgreen;
}
 
.side {
  flex: 1; /* 占据剩余宽度 */
  background-color: lightblue;
}
 
/* 布局五：顶部固定，底部固定，中间1:2分配 */
.header {
  height: 50px;
  background-color: lightblue;
}
 
.footer {
  height: 50px;
  background-color: lightcoral;
}
 
.main-content {
  flex: 2; /* 分配2/3空间 */
  background-color: lightgreen;
}
 
.side {
  flex: 1; /* 分配1/3空间 */
  background-color: lightcoral;
}
 
/* 布局六：上下结构，侧边固定，主内容自适应 */
.container {
  flex-direction: row; /* 改为横向排列 */
}
 
.sidebar {
  width: 200px;
  background-color: lightblue;
}
 
.content {
  flex: 1;
  background-color: lightgreen;
}
 
/* 布局七：上下结构，主内容占据一定宽度，侧边自适应 */
.main-content {
  width: 80%;
  background-color: lightgreen;
}
 
.side {
  flex: 1;
  background-color: lightblue;
}

这段代码展示了如何使用CSS Flexbox布局来创建7种常见的网页布局。每种布局都有其特定的应用场景，比如固定头尾和主内容的自适应布局，固定侧边和主内容的宽度占比布局等。通过这些实例，开发者可以快速掌握Flexbox布局的应用，提高页面布局的灵活性和可维护性。

- 阅读更多 -

HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册

System

2024-08-23

所有,css3

以下是实现3D旋转相册的核心HTML和CSS代码。这里只展示了实现相册的基本框架，实际应用中可能需要结合JavaScript来实现更复杂的动态效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D旋转相册</title>
<style>
  .carousel {
    width: 300px;
    height: 300px;
    perspective: 600px;
    margin: 50px auto;
  }
  .carousel-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
  }
  .carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
  }
  .carousel-item img {
    width: 100%;
    height: 100%;
    display: block;
  }
  @keyframes rotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
  }
</style>
</head>
<body>
<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item"><img src="image1.jpg" alt="Image 1"></div>
    <div class="carousel-item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="carousel-item"><img src="image3.jpg" alt="Image 3"></div>
    <!-- 更多相册项 -->
  </div>
</div>
</body>
</html>

这段代码定义了一个名为.carousel的容器，其中包含.carousel-inner用于放置旋转的相册项。.carousel-item代表每一个旋转的相册项，其中包含一个图片。CSS中定义了@keyframes rotate动画来实现持续的旋转效果。这只是一个基础的实现，实际使用时可能需要结合JavaScript来处理用户交互和更复杂的动画逻辑。

- 阅读更多 -

CSS样式表继承和优先级

System

2024-08-23

所有,css3

CSS样式表的继承和优先级是CSS的核心概念，它们决定了页面中元素最终的样式。

继承：

在CSS中，某些属性是可以继承的，意味着子元素将自动应用父元素的某些属性。例如，文本颜色（color）和字体大小（font-size）都是可以继承的属性。




/* 父元素的样式 */
p {
  color: blue;
  font-size: 16px;
}
 
/* 子元素将自动继承这些样式 */

优先级：

当同一个元素被多个选择器目标时，就会发生样式冲突。CSS通过一个优先级系统来确定应用哪个样式。

内联样式（行内样式）style属性。
内部样式表或<style>标签中的样式规则。
外部样式表文件。
浏览器默认样式。

优先级遵循的规则：

内联样式 > 内部样式表 > 外部样式表
更具体的选择器（ID选择器 > 类选择器 > 标签选择器）
如果选择器相同，则按照代码中的顺序（就近原则）
!important规则会提升优先级，但应谨慎使用，因为它破坏了CSS的可维护性




/* 内部样式表 */
#myDiv {
  color: red;
}
 
/* 外部样式表 */
div#myDiv {
  color: blue !important; /* 使用!important提升优先级 */
}
 
/* 内联样式 */
<div id="myDiv" style="color: green;">这是文本</div>

在这个例子中，由于内联样式的优先级最高，因此该<div>元素的文本颜色将是绿色。

注意：在实践中，我们应该尽量避免使用!important，除非是在特定情况下确实需要覆盖其他样式。优先考虑提升选择器的具体性和顺序来提升优先级。

- 阅读更多 -

HTML5 + CSS3 基础知识梳理

System

2024-08-23

所有,css3

HTML5和CSS3是现代网页设计和开发的核心技术。以下是HTML5和CSS3的基础知识点：

HTML5:

新的语义元素：<header>, <nav>, <section>, <article>, <aside>, <footer>。
表单控件增强：日期、时间、电话、邮件、URL、范围、数字输入。
媒体回放：<video> 和 <audio> 元素。
Canvas绘图：绘制图形、图表和动画。
地理定位API。
离线应用程序缓存。
存储机制：localStorage和sessionStorage。

CSS3:

边框、阴影、圆角。
渐变：线性、径向。
字体 @font-face。
转换：2D转换。
动画、变换。
多列布局。
多媒体查询。
盒模型：宽度、高度、边距、填充。

示例代码：

HTML5:




<header>
  <h1>我的网站</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</nav>
<section id="home">
  <h2>欢迎来到主页</h2>
  <p>这里是主页内容...</p>
</section>
<footer>
  <p>版权所有 &copy; 2023</p>
</footer>

CSS3:




body {
  background-color: #f2f2f2;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #333;
  color: #fff;
  padding: 1em;
}
 
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
nav li {
  display: inline;
  margin-right: 10px;
}
 
nav a {
  text-decoration: none;
  color: #fff;
}
 
section {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
}
 
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em;
}

这个示例展示了HTML5和CSS3的基本用法，包括语义元素、媒体元素、布局和样式。

- 阅读更多 -

css3实现动画无限循环

System

2024-08-23

所有,css3

在CSS3中，可以使用animation-iteration-count属性设置动画无限循环。将其值设置为infinite即可实现无限循环的动画效果。

以下是一个简单的例子，演示如何使用CSS3创建一个无限循环的动画：




/* 定义关键帧 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画到元素上 */
.element {
  animation-name: example;         /* 使用上面定义的关键帧名称 */
  animation-duration: 2s;          /* 动画时长为2秒 */
  animation-iteration-count: infinite; /* 动画无限循环 */
}




<div class="element">我会持续改变背景色！</div>

在这个例子中，.element类将会应用一个名为example的动画，该动画会在2秒内从红色过渡到黄色，并且这个动画会无限循环。

System

2024-08-23

所有,css3

在JavaScript中，可以使用alert()函数来创建一个简单的消息对话框。这个函数可以接受一个字符串作为参数，该字符串将显示在对话框中。

以下是一个使用alert()函数的例子：




// 显示一个简单的消息对话框
alert("这是一个消息对话框!");

当你在网页中运行这段代码时，浏览器会弹出一个对话框，对话框中会显示文本“这是一个消息对话框!”。用户只能点击“确定”按钮来关闭对话框。

- 阅读更多 -

【重识 HTML + CSS，html标签之列表标签

System

2024-08-23

所有,css

在HTML中，列表标签主要有三种：有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

有序列表（Ordered List）：使用<ol>标签创建，列表项用<li>标签定义，列表项会自动以数字进行排序。




<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>樱桃</li>
</ol>

无序列表（Unordered List）：使用<ul>标签创建，同样使用<li>标签定义列表项，列表项会自动以项目符号进行排序。




<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>樱桃</li>
</ul>

定义列表（Definition List）：使用<dl>标签创建，包含多个定义条目，每个条目由<dt>（定义术语）和<dd>（定义描述）组成。




<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言（Hyper Text Markup Language）</dd>
  <dt>CSS</dt>
  <dd>层叠样式表（Cascading Style Sheets）</dd>
</dl>

在CSS中，可以通过样式规则来修饰这些列表，使它们以更加美观的方式呈现。

- 阅读更多 -

CSS案例-6.浮动练习

System

2024-08-23

所有,css

以下是一个简单的HTML和CSS代码示例，展示了如何使用CSS的浮动属性来创建一个基本的导航栏。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动练习-导航栏</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  .nav li {
    float: left;
  }
  .nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .nav li a:hover {
    background-color: #111;
  }
</style>
</head>
<body>
 
<ul class="nav">
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码定义了一个简单的水平导航栏，使用了float: left;属性来让导航链接并排显示。同时，还包括了悬停链接时的背景颜色变化，为用户提供了良好的视觉反馈。这个示例是学习如何使用浮动进行基本布局的入门级练习。

- 阅读更多 -

基于 TailwindCss 的网页组件库站点 UIBak 上线说明

System

2024-08-23

所有,css

Tailwind CSS 是一个实用的、高度可定制的 CSS 框架，用于快速构建用户界面。UIBak 是一个基于 Tailwind CSS 构建的开源网站组件库，旨在为开发者和设计师提供一个简单易用的组件库，以加快网站开发过程。

在线上线说明中，通常会提供库的使用方法、安装指南、文档链接、在线演示等信息。以下是一个简单的示例，展示如何在现有的网站中引入 UIBak 组件库：

通过 CDN 引入 Tailwind CSS 和 UIBak 的 CSS 和 JavaScript 文件：




<!-- 引入 Tailwind CSS -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- 引入 UIBak CSS -->
<link href="https://cdn.uibak.com/uibak.css" rel="stylesheet">
 
<!-- 引入 UIBak JavaScript -->
<script src="https://cdn.uibak.com/uibak.js"></script>

在 HTML 中使用 UIBak 组件：




<div class="uibak-button">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>
</div>

确保你的 Tailwind CSS 配置文件（tailwind.config.js）中包含 UIBak 所需的 purge 指令，以避免在生产环境下包含不必要的样式：




module.exports = {
  purge: ['./index.html', './**/*.js'],
  theme: {
    // ...
  },
  variants: {},
  plugins: [],
};

以上代码展示了如何在现有的网页中引入 UIBak 组件库，并使用一个按钮组件作为示例。在实际使用中，你可以查阅 UIBak 的官方文档来了解所有可用的组件和它们的使用方法。

- 阅读更多 -