标签 css 下的文章

WEB前端静态网页（div+css）

2024-08-19

所有,css3

为了创建一个简单的WEB前端静态页面，我们可以使用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 {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            width: 80%;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的静态页面</h1>
        <p>这是一个简单的静态页面示例，展示了如何使用HTML、CSS和JavaScript创建一个静态的网站部分。</p>
    </div>
</body>
</html>

这个例子展示了如何使用HTML定义页面结构，使用CSS进行样式设计，并且保持了JavaScript的简单性。这是创建静态网页的基本方法，适用于教育目的和简单的展示性页面。

【Web前端】京东商城项目实战HTML+CSS+JavaScript

2024-08-19

由于篇幅所限，我将提供一个简化版的HTML和CSS样式代码示例，以展示如何使用HTML和CSS创建一个简单的京东商城首页布局。JavaScript代码将不包括在内，因为它涉及到复杂的交互逻辑，而这不是我们讨论的重点。




<!DOCTYPE html>
<html lang="zh-CN">
<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;
        }
        .header {
            background-color: #424242;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        .content {
            margin: 0 auto;
            max-width: 1200px;
            padding: 20px;
        }
        /* 更多样式 */
    </style>
</head>
<body>
    <div class="header">
        <h1>京东商城</h1>
    </div>
    <div class="content">
        <!-- 这里放置商品列表等内容 -->
        <h2>热门商品</h2>
        <div class="product">
            <!-- 商品详情 -->
        </div>
        <!-- 更多商品 -->
    </div>
</body>
</html>

在这个简化版的代码中，我们定义了一个.header类来创建一个黑色的头部区域，并在其中放置了京东商城的标题。.content类用于创建一个居中的内容区域，其中可以包含商品列表和其他信息。

请注意，实际的京东商城项目会涉及到更复杂的布局和交互，并且需要使用JavaScript来实现动态功能。上述代码仅展示了如何使用HTML和CSS创建一个简单的静态页面布局。

简单的html+CSS+JS搭建电影网页

2024-08-19

以下是一个简单的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 { font-family: Arial, sans-serif; }
  .movie { border: 1px solid #ccc; margin-top: 10px; padding: 10px; }
  .movie-title { font-size: 1.2em; }
  .movie-genre { text-transform: uppercase; }
  .movie-rating { color: #fff; background-color: #5cb85c; padding: 5px; border-radius: 5px; }
</style>
</head>
<body>
 
<div class="movie">
  <h3 class="movie-title">《阿凡达》</h3>
  <span class="movie-genre">科幻, 冒险, 剧情</span>
  <span class="movie-rating">9.3分</span>
  <p>一个故事关于一个群星的探险，寻找人类的起源。</p>
</div>
 
<div class="movie">
  <h3 class="movie-title">《复仇者联盟》</h3>
  <span class="movie-genre">动作, 科幻, 超能力</span>
  <span class="movie-rating">8.5分</span>
  <p>在同一天，一个著名的危险团伙和一个神秘军队开始对抗一个强大的外星威胁。</p>
</div>
 
<!-- 更多电影信息... -->
 
<script>
// 这里可以添加JavaScript代码，实现更复杂的功能，比如电影信息的动态添加、用户交互等。
</script>
 
</body>
</html>

这个示例展示了如何使用HTML定义电影信息的结构，使用CSS为电影信息添加样式，使之更具可读性和吸引力。JavaScript可以用于添加交互功能，比如通过用户事件动态更新电影信息或提供用户评分等。

编程笔记 html5&css&js 011 HTML内连框架

2024-08-19

在HTML中，可以使用<iframe>标签来创建内连框架（iframe），以便在当前页面中嵌入另一个页面。以下是一个简单的HTML示例，展示了如何使用内连框架：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内连框架示例</title>
</head>
<body>
    <h1>主页面</h1>
    <!-- 内连框架 -->
    <iframe src="inner-page.html" width="500" height="400" frameborder="0"></iframe>
</body>
</html>

在这个例子中，<iframe>标签的src属性指定了嵌入页面的URL。width和height属性设置了iframe的尺寸。frameborder属性设置为0，可以隐藏边框，给人一个无缝融合的视觉效果。

确保inner-page.html文件与包含iframe的HTML文件位于同一目录中，或者提供正确的相对或绝对路径。

编程笔记 html5&css&js 085 JavaScript 内置函数

2024-08-19

JavaScript 内置函数是语言本身提供的，非常基础且常用的函数。以下是一些常见的 JavaScript 内置函数及其简单示例：

parseInt(string, radix)：将字符串转换为整数。如果不能转换，返回 NaN。radix 参数定义了要解析的数字的基数。




let num = parseInt("123", 10); // 返回 123

parseFloat(string)：将字符串转换为浮点数。如果不能转换，返回 NaN。




let num = parseFloat("123.45"); // 返回 123.45

isNaN(value)：检查某个值是否是非数字值。如果值是 NaN 或非数字值，返回 true；否则返回 false。




let result = isNaN(NaN); // 返回 true
result = isNaN("123"); // 返回 false，因为 "123" 可以转换为数字 123

eval(string)：计算字符串参数，并执行它包含的 JavaScript 代码。




let result = eval("1 + 2"); // 返回 3

encodeURI(uri)：将字符串编码为 URI。




let uri = encodeURI("https://www.example.com/?query=Hello World");
// 返回 "https://www.example.com/?query=Hello%20World"

decodeURI(uri)：将编码的 URI 解码成正常的字符串。




let uri = decodeURI("https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World");
// 返回 "https://www.example.com/?query=Hello World"

encodeURIComponent(uriComponent)：将字符串编码为 URI 组件。




let uriComponent = encodeURIComponent("https://www.example.com/?query=Hello World");
// 返回 "https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World"

decodeURIComponent(uriComponent)：将编码的 URI 组件解码。




let uriComponent = decodeURIComponent("https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World");
// 返回 "https://www.example.com/?query=Hello World"

这些函数是 JavaScript 中最基本的内置函数，在日常开发中经常使用。

HTML5-Canvas画布，技术详细介绍，CSS浮动的使用与清除

2024-08-19

HTML5 Canvas是一个强大的技术，可以用于创建动画、游戏、数据可视化等。以下是一些关于HTML5 Canvas的使用方法的详细解释和示例代码。

创建Canvas元素并设置其样式：




<canvas id="myCanvas" width="200" height="100" style="background-color: #f3f3f3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

使用JavaScript绘制图形：




var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);

使用CSS浮动属性对Canvas进行布局：




#myCanvas {
  border: 1px solid #000000;
  float: left;
}

清除Canvas上的内容：




context.clearRect(x, y, width, height);

例如，要清除整个Canvas：




var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);

以上是HTML5 Canvas的基本使用方法，可以根据具体需求进行拓展和应用。

2024-08-19

以下是一个简单的HTML5七夕情人节表白网页示例，包含了自定义的文字和烟花特效。




<!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;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    text-align: center;
  }
  h1 {
    color: #ff0000;
    font-size: 48px;
    font-weight: bold;
  }
</style>
</head>
<body>
<h1>你的名字</h1>
<canvas class="fireworks" style="position: absolute; width: 100%; height: 100vh;"></canvas>
 
<script>
  // 烟花效果的JavaScript代码，这里使用的是现成的库，实际使用时需要引入相应的js文件
  // 例如: <script src="path/to/your/fireworks.js"></script>
</script>
</body>
</html>

在实际应用中，您需要引入提供烟花效果的JavaScript库，例如fireworks.js。这个库会处理烟花的逻辑和渲染，您可以在网上找到很多这样的资源。

请注意，为了保持答案的简洁，烟花效果的实现代码没有包含在内。实际使用时，您需要找到一个符合您需求的烟花效果库，并将其引入您的HTML页面中。

2024-08-19

以下是一个使用HTML、CSS和JavaScript创建的简单七夕情人节表白网页示例，其中包含一个Canvas绘制爱心和相册的简单功能。




<!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;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
  }
  canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #album {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  #album img {
    width: 100px;
    height: 100px;
    margin: 0 10px;
    opacity: 0.5;
    cursor: pointer;
  }
  #album img.active {
    opacity: 1;
  }
</style>
</head>
<body>
<canvas id="heartCanvas" width="400" height="400"></canvas>
<script>
  // 爱心绘制函数
  function drawHeart(ctx, x, y, scale) {
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(scale, scale);
    var dx = 100, dy = 100, s = 1.5;
    ctx.beginPath();
    ctx.moveTo(-dx, -dy);
    ctx.bezierCurveTo(-dx, -dy - s * dy, -dx + s * dx, -dy, -dx + dx, -dy);
    ctx.bezierCurveTo(-dx + s * dx, -dy - s * dy, -dx, s * dx, -dx, dy);
    ctx.bezierCurveTo(-dx, s * dy + dx * tan(PI / 4), -dx - s * dx, dy, -dx - dx, dy);
    ctx.bezierCurveTo(-dx - s * dx, dy, -dx, dy - s * dy, -dx, dy - dx * tan(PI / 4));
    ctx.closePath();
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.restore();
  }
 
  // 绘制函数调用
  window.onload = function() {
    var canvas = document.getElementById('heartCanvas');
    var ctx = canvas.getContext('2d');
    setInterval(function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawHeart(ctx, canvas.width / 2, canvas.height / 2, 1);
    }, 100);
  };
</script>
 
<!-- 相册图片展示 -->
<div id="album">
  <img src="photo1.jpg" alt="Photo 1" class="active">
  <img src="photo2.jpg" alt="Photo 2">
  <img src="photo3.jpg" alt="Photo 3">
  <!-- 更多图片可以添加在此处 -->
</div>
 
<script>
  // 相册图片点击事件
  document.querySelectorAll('#album img').forEach(img => {
    img.addEventListener('click', function() {
      document.querySelector('#album .active').classList.remove('active');
      this.classList.add('active');
    });
  });
</script>
</body>
</html>

在这个示例中，使用了HTML来定义结构，CSS来控制样式，以及

前端css+jquery记一个特效动画

2024-08-19

所有,jquery

以下是一个使用CSS和jQuery创建的简单动画特效的示例。这个特效会在鼠标悬停时触发，使得元素放大并显示出来。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画特效示例</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: transform 0.5s ease-in-out;
    transform: scale(0);
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('.box').hover(function(){
      $(this).css('transform', 'scale(1)');
    }, function(){
      $(this).css('transform', 'scale(0)');
    });
  });
</script>
 
</body>
</html>

这段代码中，.box 类定义了一个方框并设置了过渡效果。当鼠标悬停在 .box 元素上时，jQuery 的 .hover 方法被触发，通过改变 transform 属性的值来触发放大缩小动画。