标签 css 下的文章

2024-08-15

在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 /

System

2024-08-15

所有,html5

以下是一个简单的HTML页面示例，使用HTML、CSS和JavaScript来创建一个七夕情人节表白页面，其中包含星空背景和随机飘落的萤火虫动画。




<!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, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .stars {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .firefly {
    width: 3px;
    height: 3px;
    background: #F0DB4F;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
  }
</style>
</head>
<body>
<div class="stars"></div>
<script>
  const canvas = document.createElement('canvas');
  canvas.classList.add('stars');
  document.body.appendChild(canvas);
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext('2d');
  const fireflies = [];
 
  function Firefly() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = Math.random() * 1.5;
    this.speedX = (Math.random() - 0.5) * 5;
    this.speedY = (Math.random() - 0.5) * 5;
    this.light = Math.random() * 0.9;
  }
 
  Firefly.prototype.draw = function() {
    ctx.save();
    ctx.globalAlpha = this.light;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.fillStyle = '#F0DB4F';
    ctx.fill();
    ctx.restore();
  };
 
  Firefly.prototype.update = function() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
    if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
    this.draw();
  };
 
  function init() {
    canvas.addEventListener('mousemove', (e) => {
      fireflies.push(new Firefly());
      fireflies[fireflies.length - 1].x = e.clientX;
      fireflies[fireflies.length - 1].y = e.clientY;
    });
    setInterval(animate, 1000 / 60);
  }
 
  function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    fireflies.forEach((firefly) => {
      firefly.update();
    });
  }
 
  init();
</script>
</body>
</html>

这段代码创建了一个全屏的HTML页面，其中包含一个固定位置的canvas元素，用于绘制星空背景。鼠标在页面上移动时，会产生新的萤火虫，随机飘落在页面上。背景的星空和飘落的萤火虫都是通过JavaScript动态生

- 阅读更多 -

HTML、CSS、Jquery综合练习之全选、全不选与反选

System

2024-08-15

所有,jquery




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选、全不选与反选示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#selectAll").click(function(){
    $(".checkBox").prop('checked', true);
  });
  $("#unselectAll").click(function(){
    $(".checkBox").prop('checked', false);
  });
  $("#reverseSelection").click(function(){
    $(".checkBox").each(function(){
      $(this).prop('checked', !$(this).prop('checked'));
    });
  });
});
</script>
</head>
<body>
 
<button id="selectAll">全选</button>
<button id="unselectAll">全不选</button>
<button id="reverseSelection">反选</button>
 
<form action="">
  <input type="checkbox" class="checkBox" name="option1" value="option1">选项1<br>
  <input type="checkbox" class="checkBox" name="option2" value="option2">选项2<br>
  <input type="checkbox" class="checkBox" name="option3" value="option3">选项3<br>
  <input type="checkbox" class="checkBox" name="option4" value="option4">选项4<br>
</form>
 
</body>
</html>

这段代码使用jQuery实现了全选、全不选和反选的功能。点击相应的按钮会对页面上的复选框进行相应的操作。这是一个简单的示例，但在实际开发中可以根据需要进行扩展和应用。

System

2024-08-15

所有,jquery

由于问题描述不具体，我无法提供针对其他页面的具体代码实现。但我可以提供一个简单的HTML页面模板，以及一些基本的CSS和JavaScript代码，供你参考和扩展。




<!-- 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>
    <style>
        /* 这里写入CSS样式 */
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <!-- 页面内容 -->
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
 
    <!-- 前端JavaScript代码 -->
    <script>
        // 这里写入JavaScript代码
        function showMessage() {
            alert('你好，这是一个弹窗消息！');
        }
    </script>
</body>
</html>

在这个模板中，你可以根据需要添加更多的HTML元素、CSS样式和JavaScript代码来完善页面的其他功能。记得在实际开发中，应当保持代码的简洁性和可维护性。

- 阅读更多 -

CSS结构伪类选择器之否定伪类:not()

System

2024-08-15

所有,css

CSS的:not()伪类选择器是一个否定伪类选择器，它可以选择所有不满足参数选择器的元素。这个选择器可以用来排除某些特定的元素，或者只选择那些不符合特定条件的元素。

例如，如果你想要选择除了第一个子元素之外的所有<p>元素，你可以使用:not()选择器和:first-child伪类选择器来实现。

CSS代码如下：




p:not(:first-child) {
  color: red;
}

这段代码会将除了第一个<p>元素之外的所有<p>元素的文本颜色设置为红色。

另一个例子，如果你想要选择除了最后一个子元素之外的所有<li>元素，你可以使用:not()和:last-child选择器来实现。

CSS代码如下：




li:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

这段代码会将除了最后一个<li>元素之外的所有<li>元素底部边框设置为1px的灰色虚线。

这些例子都展示了如何使用:not()选择器来排除某些特定的元素。这个选择器在实际开发中非常有用，可以用来创建更加灵活和复杂的样式规则。

- 阅读更多 -

jQuery全屏滚动插件fullPage，CSS块元素

System

2024-08-15

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏滚动示例</title>
    <link rel="stylesheet" href="path/to/jquery.fullPage.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #fullpage {
            height: 100%;
        }
        .section {
            width: 100%;
            height: 100vh;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section">第一页</div>
        <div class="section">第二页</div>
        <div class="section">第三页</div>
        <div class="section">第四页</div>
    </div>
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jquery.fullPage.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage();
        });
    </script>
</body>
</html>

这个代码示例展示了如何使用jQuery fullPage插件创建一个简单的全屏滚动网站。它包括了引入必要的CSS和JavaScript文件，定义了一个包含四个部分的全屏网站，并初始化了fullPage插件。每个部分都是一个CSS块元素，并通过vh单位自动占满全屏。

- 阅读更多 -

jQuery的使用方法用JQuery修改CSS样式

System

2024-08-15

所有,jquery

在jQuery中，你可以使用.css()方法来修改元素的CSS样式。这个方法可以用两种方式使用：一种是传入一个属性和值来改变一个样式属性，另一种是传入一个包含多个键值对的对象来同时改变多个样式属性。

以下是使用.css()方法的一些示例：

修改单个样式属性：




$('#elementId').css('color', 'red');

同时修改多个样式属性：




$('#elementId').css({
  'color': 'red',
  'background-color': 'blue',
  'border': '1px solid black'
});

在这些例子中，#elementId是你想要修改样式的元素的ID。你可以通过元素的ID、类、标签名或其他选择器来选择元素。

- 阅读更多 -

轮播图原生代码（HTML+CSS+JQuery）

System

2024-08-15

所有,jquery

以下是一个简单的原生HTML、CSS和jQuery实现的轮播图示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
  }
  .slider img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .slider img.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img class="active" src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <!-- 更多图片... -->
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  var currentIndex = 0;
  const images = $('.slider img');
  const imageCount = images.length;
 
  setInterval(function(){
    images.eq(currentIndex).removeClass('active');
    currentIndex = (currentIndex + 1) % imageCount;
    images.eq(currentIndex).addClass('active');
  }, 3000); // 时间间隔可以根据需要调整
});
</script>
 
</body>
</html>

这段代码实现了一个简单的轮播图功能。setInterval函数负责每隔一定时间切换当前活跃的图片（通过添加或移除active类）。你需要将image1.jpg, image2.jpg, image3.jpg等替换成你的实际图片路径。

- 阅读更多 -