标签 css 下的文章

[HTML]Web前端开发技术27（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页

2024-08-15

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        #paint-area {
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="paint-area"></div>
    <script>
        // 获取画布区域
        var paintArea = document.getElementById('paint-area');
        // 监听鼠标事件
        paintArea.addEventListener('mousedown', function(event) {
            var ctx = event.target.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(event.offsetX, event.offsetY);
            event.target.addEventListener('mousemove', function(event) {
                ctx.lineTo(event.offsetX, event.offsetY);
                ctx.stroke();
            }, { once: true });
        });
    </script>
</body>
</html>

这段代码创建了一个简单的鼠标绘画区域，当用户在#paint-area上按下鼠标时，开始绘制。鼠标移动时，绘制线条跟随鼠标。当用户释放鼠标按钮时，停止绘制。这个示例演示了如何使用JavaScript监听鼠标事件，并在画布上绘图。

- 阅读更多 -

CSS-9（2D转换+动画+3D转换）

System

2024-08-15

所有,css

CSS-9是一个示例代码，展示了如何结合2D转换、动画和3D转换来创建复杂的动画效果。以下是一个简化的代码实例：




.box {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 50px;
  /* 2D转换 */
  transform: rotate(45deg) scale(1.5);
  /* 动画 */
  animation: spin 2s infinite linear;
  /* 3D转换 */
  transform-style: preserve-3d;
  perspective: 1000px;
}
 
/* 定义动画 */
@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

这段代码定义了一个.box类，它将元素进行2D旋转、缩放，并应用一个无限循环的动画，使元素绕Y轴旋转。同时，它还启用了3D转换，包括3D空间的透视，使得旋转效果更加立体。

- 阅读更多 -

浅谈Vue基础使用，css前端开发学习

System

2024-08-15

所有,css




<template>
  <div id="app">
    <h1 class="title">Hello Vue!</h1>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
.title {
  color: #42b983;
  font-size: 2em;
}
</style>

这个Vue组件示例展示了如何在Vue应用中定义一个简单的模板，并使用CSS为其中的h1标签添加样式。这是学习Vue基础的一个很好的起点，同时也展示了如何在Vue组件中应用CSS。

- 阅读更多 -

CSS3双线边框：实现炫酷边框效果

System

2024-08-15

所有,css3




/* 定义基本的装饰线样式 */
.decoration-line {
    position: relative;
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
}
 
/* 定义装饰线上的线条样式 */
.decoration-line::before,
.decoration-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    border-top: 2px solid #333;
    border-bottom: 2px solid #555;
    background-image: linear-gradient(to right, rgba(255,255,255,.3), rgba(255,255,255,0));
}
 
/* 定义装饰线下的线条样式 */
.decoration-line::before {
    top: 50%;
    transform: translateY(-50%);
}
 
/* 定义装饰线下的线条样式 */
.decoration-line::after {
    top: 50%;
    transform: translateY(50%);
}

这段代码定义了一个具有炫酷双线边框效果的装饰线容器。它使用了CSS伪元素 ::before 和 ::after 来创建两条线，分别位于容器的上部和下部，从而形成一种双线边框的视觉效果。代码中使用了线性渐变和透明度来增强视觉效果，并通过CSS变换进行定位调整。

- 阅读更多 -

css实现多个loading动画效果

System

2024-08-15

所有,css3

在CSS中，可以使用不同的技术来创建多种加载动画。以下是一些常见的方法：

使用CSS动画制作旋转图形：




.loading-spinner {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 100%;
  margin: 50px;
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

使用CSS动画制作渐变背景的加载动画：




.loading-bar {
  width: 100px;
  height: 15px;
  background: linear-gradient(to right, #4facfe 50%, #00f2fe 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  animation: load 1s ease infinite;
}
 
@keyframes load {
  0% {
    background-position: right bottom;
  }
  100% {
    background-position: left bottom;
  }
}

使用CSS动画制作渐变颜色文字加载动画：




.loading-text {
  font-size: 20px;
  color: #333;
  animation: color-change 1s infinite alternate;
}
 
@keyframes color-change {
  0% {
    color: #333;
  }
  100% {
    color: #4facfe;
  }
}

这些示例展示了如何使用CSS动画创建简单的加载动画。你可以根据需要调整大小、颜色和其他属性来满足你的设计需求。

- 阅读更多 -

NKD: 轻量级响应式HTML5/SCSS Jekyll模板

System

2024-08-15

所有,html5

NKD是一个轻量级的响应式HTML5/SCSS Jekyll模板。Jekyll是一个静态站点生成器，可以用来将简单的文本转换为漂亮的网站。HTML5和SCSS为这个模板提供了最新的网页设计和布局。

如果你想使用NKD模板，你需要做以下几步：

安装Ruby环境和Jekyll。
克隆NKD模板到你的电脑。
在Jekyll中使用NKD模板。

以下是如何在Jekyll中使用NKD模板的示例代码：




# 1. 安装Jekyll
gem install jekyll
 
# 2. 克隆NKD模板到你的电脑
git clone https://github.com/nkdigital/nkd.jekyll-template.git your-site-name
 
# 3. 进入你的站点目录
cd your-site-name
 
# 4. 安装依赖
bundle install
 
# 5. 启动Jekyll服务器
bundle exec jekyll serve

在完成上述步骤后，你可以在本地服务器上看到你的网站。你可以在 _config.yml 文件中配置你的网站设置，在 _posts 文件夹中写作你的博客文章，在 _data 文件夹中编辑你的页面数据。

请注意，这只是一个基本的使用流程，实际使用可能需要根据模板的文档和你的需求进行相应的调整。

System

2024-08-15

所有,html5

由于原项目是基于小程序的，而HTML、CSS和JavaScript主要用于网页开发，它们与小程序的开发方式有所不同，比如数据绑定、事件处理等。因此，如果要使用HTML、CSS和JavaScript来模拟一个类似的页面，我们需要做一些调整和取舍。

以下是一个简单的HTML和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>
  /* 这里是CSS样式代码 */
</style>
</head>
<body>
<div id="app">
  <!-- 页面内容 -->
</div>
 
<!-- 这里是JavaScript代码 -->
</body>
</html>

对于JavaScript部分，我们可以使用一些现代JavaScript框架（如Vue.js）来帮助我们更好地管理数据和创建交互式应用。以下是一个简单的Vue.js示例，用于模拟一些页面交互：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>羊了个羊模拟页面</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
  /* 这里是CSS样式代码 */
</style>
</head>
<body>
<div id="app">
  <button @click="onClick">点击开始</button>
</div>
 
<script>
const app = Vue.createApp({
  data() {
    return {
      // 定义数据
    };
  },
  methods: {
    onClick() {
      // 点击按钮后的处理逻辑
    },
  },
});
 
const vm = app.mount('#app');
</script>
</body>
</html>

请注意，这只是一个简单的示例，实际的页面功能和交互将需要更复杂的代码实现。此外，由于原项目中可能包含一些特定的动画效果和小程序提供的API，这些在纯Web页面中可能需要使用其他库或手动实现。

- 阅读更多 -

编程笔记 html5&css&js 026 HTML输入类型（2/2）

System

2024-08-15

所有,html5

在HTML中，输入类型是由<input>标签的type属性定义的。以下是HTML5中常见的其他输入类型：

email - 用于应该包含电子邮件地址的输入字段。
url - 用于应该包含URL地址的输入字段。
number - 用于应该包含数值的输入字段。
range - 用于应该包含一定范围内数值的输入字段。
date - 用于应该包含日期的输入字段。
time - 用于应该包含时间的输入字段。
week - 用于应该包含周的日期的输入字段。
month - 用于应该包含月份的输入字段。
search - 用于搜索框，比如站点搜索。
color - 用于选择颜色。

CSS和JavaScript可以用来增强这些输入类型的功能和样式，并对用户的输入进行验证。以下是一个简单的例子，使用JavaScript验证电子邮件地址的输入：




<!DOCTYPE html>
<html>
<head>
<title>Email Input Example</title>
<script>
function validateEmail() {
    var email = document.getElementById("email").value;
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
 
    if (emailPattern.test(email)) {
        document.getElementById("emailError").innerHTML = "";
    } else {
        document.getElementById("emailError").innerHTML = "Please enter a valid email address.";
    }
}
</script>
</head>
<body>
 
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" onblur="validateEmail()">
  <span id="emailError"></span>
  <input type="submit">
</form>
 
</body>
</html>

在这个例子中，当用户离开电子邮件输入字段时，会触发onblur事件，调用validateEmail函数来验证电子邮件地址的格式。如果地址不正确，会在<span>元素中显示错误信息。

System

2024-08-15

所有,html5

由于篇幅所限，这里只提供了首页的HTML和CSS代码示例。其他页面的制作方法类似，只需更改相应的内容即可。




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公益关爱残疾人</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav class="navigation">
            <ul>
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="services.html">服务</a></li>
                <li><a href="gallery.html">图库</a></li>
                <li><a href="news.html">新闻</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
 
    <main>
        <!-- 主要内容 -->
    </main>
 
    <footer>
        <!-- 页脚内容 -->
    </footer>
</body>
</html>




/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}
 
header {
    background-color: #333;
    padding: 10px 0;
    color: #fff;
}
 
.navigation ul {
    list-style-type: none;
    display: flex;
}
 
.navigation li {
    margin-right: 10px;
}
 
.navigation li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid transparent;
}
 
.navigation li a.active,
.navigation li a:hover {
    border-color: #fff;
}
 
main {
    /* 主要内容的样式 */
}
 
footer {
    /* 页脚的样式 */
}

这个示例提供了一个简单的HTML和CSS框架，你可以在此基础上添加具体的页面内容和设计。记得为其他页面创建相应的HTML文件，并在<header>中的<nav>标签内更新正确的链接。

- 阅读更多 -

HTML5+css+js制作2048

System

2024-08-15

所有,html5

制作2048游戏涉及到的技术栈包括HTML、CSS和JavaScript。以下是一个简单的2048游戏实现示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048 Game</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="game-container">
<div id="game-message"></div>
<div id="score-container">
<span id="score">0</span>
<button id="restart-button">Restart</button>
</div>
<div id="grid-container">
<!-- Grid will be dynamically generated here -->
</div>
</div>
</body>
</html>

CSS (style.css):




#game-container {
  margin: 0 auto;
  padding-top: 50px;
  width: 400px;
  text-align: center;
}
 
#grid-container {
  width: 100%;
  margin: 0 auto;
  background-color: #bbada0;
  border-radius: 4px;
  position: relative;
}
 
.cell {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  float: left;
  background-color: #ccc;
  font-size: 50px;
  color: #fff;
  line-height: 100px;
  box-sizing: border-box;
}
 
#score-container {
  margin-bottom: 20px;
}
 
#score {
  font-size: 24px;
}
 
#restart-button {
  padding: 10px 20px;
  margin-left: 5px;
  background-color: #bbada0;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
#game-message {
  font-size: 24px;
  color: red;
}

JavaScript (script.js):




const gridSize = 4; // 可以修改为 3 或 5 等
const winScore = 2048;
const emptyCellValue = 0;
const generatedValues = [2, 4]; // 游戏开始时生成的两个数字
 
let gameOver = false;
let score = 0;
let grid = [];
 
function init() {
  // 初始化grid
  for (let i = 0; i < gridSize; i++) {
    grid.push([]);
    for (let j = 0; j < gridSize; j++) {
      grid[i].push(emptyCellValue);
    }
  }
 
  // 随机放入两个数字
  let randomIndex = Math.floor(Math.random() * (gridSize ** 2));
  grid[randomIndex % gridSize][Math.floor(randomIndex / gridSize)] = generatedValues[Math.floor(Math.random() * generatedValues.length)];
  randomIndex = Math.floor(Math.random() * (gridSize ** 2));
  grid[randomIndex % gridSize][Math.floor(randomIndex /

- 阅读更多 -