标签 css 下的文章

2024-08-07




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落和格式化文本示例</title>
    <style>
        p.normal {
            font-size: 16px;
            line-height: 1.6;
            color: #333;
        }
        p.lead {
            font-size: 20px;
            line-height: 1.6;
            color: #555;
            font-weight: bold;
        }
        p.small {
            font-size: 12px;
            line-height: 1.2;
            color: #666;
        }
    </style>
</head>
<body>
    <p class="normal">这是一个普通段落。</p>
    <p class="lead">这是一个突出段落。</p>
    <p class="small">这是一个较小字体段落。</p>
</body>
</html>

这段代码展示了如何使用HTML创建不同的段落，并通过内联CSS样式为它们设置不同的格式。这包括字体大小、行高和文本颜色。这是一个基本的文本格式化示例，在实际的网页设计中，可以根据需要应用更复杂的样式。

- 阅读更多 -

CSS指定p标签开头自动空两格

System

2024-08-07

所有,html5

在CSS中，可以使用text-indent属性来指定段落<p>标签的首行缩进。如果你想让<p>标签的首行自动空两格，可以设置text-indent属性为等同于2个字符空格的长度。

通常情况下，一个空格大约等同于当前字体大小的宽度。因此，如果你的段落文本大小是16px，那么两个空格就是32px。

以下是CSS代码示例：




p {
  text-indent: 32px; /* 假设段落字体大小为16px */
}

如果你不确定段落的字体大小，或者想要一个更为通用的解决方案，你可以使用em单位来指定缩进，一个em等同于当前字体大小。




p {
  text-indent: 2em; /* 两个em等同于两个字体大小单位的空间 */
}

这样，无论段落的字体大小如何，首行缩进都会保持正确。

- 阅读更多 -

编程笔记 html5&css&js 091 JavaScript 表单对象

System

2024-08-07

所有,html5

在JavaScript中，表单对象是一个HTMLCollection，它包含了文档中所有的表单元素。你可以通过其name属性或者通过它们在文档中的位置来访问这些元素。

以下是一个简单的例子，展示了如何使用JavaScript访问和操作表单对象：

HTML:




<form id="myForm">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <input type="submit" />
</form>

JavaScript:




document.addEventListener('DOMContentLoaded', function() {
  var form = document.getElementById('myForm');
 
  // 通过name属性访问特定的表单元素
  var usernameField = form['username'];
  var emailField = form.elements['email'];
 
  // 添加事件监听器来处理表单提交
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
 
    // 获取表单数据
    var username = usernameField.value;
    var email = emailField.value;
 
    // 输出表单数据或者进行其他操作
    console.log('Username:', username);
    console.log('Email:', email);
  });
});

在这个例子中，我们首先通过ID获取表单元素，然后通过form['username']或form.elements['email']来访问特定的表单字段。我们还为表单添加了一个事件监听器，以便在表单提交时捕获数据，并且阻止了默认的提交行为。这样，我们就可以处理这些数据，例如在控制台中输出它们。

System

2024-08-07

所有,html5

在JavaScript中，BigInt是一种数字类型，用于安全存储大整数或任意精度的整数。它可以存储任意大的整数值，并且不会失去精度。

创建BigInt的方法很简单，只需在整数后面加上n即可。例如：




const largeNumber = 123456789123456789123456789n;
console.log(largeNumber); // 输出：123456789123456789123456789n

你也可以使用BigInt()构造函数创建BigInt：




const largeNumber = BigInt(123456789123456789123456789);
console.log(largeNumber); // 输出：123456789123456789123456789n

注意，使用BigInt()构造函数时，你需要确保传入的值可以被转换为一个字符串，这个字符串是一个有效的整数字面量，并且在字符串两侧加上一对空白符（例如空格，换行符等）以区分数字字面量和十六进制前缀。

BigInt与Number的转换：




const number = 123n;
const largeNumber = BigInt(number);
 
console.log(number); // 输出：123n
console.log(largeNumber); // 输出：123n

BigInt与Number之间不能进行直接的算术运算，需要先将BigInt转换为Number或将Number转换为BigInt。例如：




const largeNumber = 123456789123456789123456789n;
const smallNumber = 123;
 
// 将BigInt转换为Number
const largeNumberAsNumber = Number(largeNumber);
const smallNumberAsBigInt = BigInt(smallNumber);
 
// 进行算术运算
const sum = largeNumberAsNumber + smallNumber;
console.log(sum); // 输出：123456789123456790593n
 
const difference = largeNumber - smallNumberAsBigInt;
console.log(difference); // 输出：1234567891234567879859n

需要注意的是，JavaScript中的BigInt与Number是不同的类型，不能混用进行算术运算。在进行算术运算时，需要确保所有的数字都是同一种类型。

System

2024-08-07

所有,html5

以下是一个简单的HTML5生日快乐祝页面示例，使用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 {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    font-family: Arial, sans-serif;
  }
  .countdown {
    text-align: center;
    color: #333;
  }
  h1 {
    font-size: 3em;
    margin: 0.67em 0;
  }
  .timer {
    font-size: 2em;
  }
</style>
</head>
<body>
 
<div class="countdown">
  <h1>婚礼快到来啦！</h1>
  <div id="timer" class="timer"></div>
</div>
 
<script>
// 设置结婚的日期
const weddingDate = new Date('2023-08-08T20:00:00'); // 示例日期，请替换为你的结婚日期
 
function countdown() {
  const now = new Date();
  const distance = weddingDate - now;
 
  if (distance < 0) {
    clearInterval(intervalId);
    document.getElementById('timer').innerText = '欢喜庆祝！';
    return;
  }
 
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
  document.getElementById('timer').innerText = `${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
}
 
countdown();
const intervalId = setInterval(countdown, 1000);
</script>
 
</body>
</html>

这段代码会在网页上显示一个倒计时，直至结婚的日期。你需要替换weddingDate变量的值为你自己的结婚日期。这个简单的例子使用了JavaScript中的Date对象来计算时间差异，并通过ID为timer的元素显示剩余时间。

- 阅读更多 -

HTML5 CSS新增特性

System

2024-08-07

所有,html5

HTML5和CSS3的新增特性非常多，以下是一些主要的特性和示例代码：

语义化标签：HTML5提供了一些新的语义化标签，如<header>, <nav>, <section>, <article>, <aside>, <footer>等。




<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <header>头部内容</header>
    <nav>导航链接</nav>
    <section>
        <article>文章内容</article>
    </section>
    <aside>侧边内容</aside>
    <footer>底部内容</footer>
</body>
</html>

画布(Canvas)：使用JavaScript可以在网页上绘制图形和图像。




<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 150, 75);
</script>

视频和音频：HTML5提供了<video>和<audio>标签用于在网页上播放视频和音频。




<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 音频 -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

表单控件：HTML5引入了新的表单控件，如日期选择器、时间选择器、数字输入框等。




<form>
    生日: <input type="date">
    时间: <input type="time">
    数量: <input type="number" min="0" max="10">
    <input type="submit">
</form>

CSS3提供了更强大的选择器、背景和边框的装饰效果、阴影、变换、动画等。




/* 阴影效果 */
div {
    box-shadow: 10px 10px 5px #888888;
}
 
/* 圆角边框 */
div {
    border-radius: 25px;
}
 
/* 渐变背景 */
div {
    background: linear-gradient(to right, red , yellow);
}
 
/* 动画 */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
 
div {
    animation-name: example;
    animation-duration: 4s;
}

地理位置(Geolocation)：HTML5提供了获取用户地理位置的API。




navigator.geolocation.getCurrentPosition(function(position) {
    console.log("纬度: " + position.coords.latitude + 
    " 经度: " + position.coords.longitude);
});

本地存储：HTML5提供了本地存储机制，可以在客户端存储数据。




// 存储
localStorage.setItem("key", "value");
// 读取
var data = localStorage.getItem("key");
// 删除
localStorage.removeItem("key");
// 清除所有
localStorage.clear();

新的内容元素，如<main>、<details>、<summary>等。




<main>
    <details>
        <summary>点击查看详情</summary>

System

2024-08-07

所有,html5

以下是一个使用原生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>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
  }
  .heart-container {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  .heart-container .heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
    width: 200px;
    height: 200px;
    background: url('your-love-image.jpg');
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #ffc0cb;
  }
  @keyframes rotate {
    0% {
      transform: rotateX(0) rotateY(0);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="heart-container">
  <div class="heart"></div>
</div>
<script>
// JavaScript 代码区域，可以添加更多的交互逻辑或功能，但这里保持简洁
</script>
</body>
</html>

这段代码创建了一个简单的表白页面，使用CSS3动画制作了一个旋转的爱心，背景是用一张图片填充的，你需要替换your-love-image.jpg为你们之间的爱情宣言照片。这个页面可以通过Web服务器访问，并在七夕当天给你的女朋友或者男朋友看。

- 阅读更多 -

HTMLCSS新特性

System

2024-08-07

所有,html5

HTML5 的新特性包括：

语义化标签（如 <header>, <nav>, <section>, <article>, <aside>, <footer>）
表单控件增强（如数值输入、日期选择、时间输入、颜色选择）
多媒体标签（<video>, <audio>, 可以直接嵌入视频和音频）
画布（<canvas>）和 SVG 绘图
本地存储（localStorage, sessionStorage）
新的表单属性（如 required, pattern, placeholder）

CSS 的新特性包括：

边框、背景、文字效果（如圆角、阴影、渐变）
弹性布局（Flexbox）
网格布局（Grid）
行内块（Inline-block）
自定义属性和变量（Custom Properties）
混合模式（Blend modes）
过渡和动画（Transitions, Animations）

示例代码：

HTML5:




<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
    </ul>
  </nav>
</header>
<section>
  <article>
    <h2>Article Title</h2>
    <p>This is an article paragraph...</p>
  </article>
</section>
<footer>
  Copyright © 2023 My Website
</footer>

CSS:




body {
  background: linear-gradient(to right, #FF7E5F, #Feb47B);
  font-family: Arial, sans-serif;
  color: white;
}
 
header {
  display: flex;
  justify-content: center;
}
 
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
nav li {
  display: inline;
  margin-right: 10px;
}
 
article {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
 
footer {
  text-align: center;
  font-size: 0.8em;
}

以上代码展示了如何使用HTML5语义化标签以及CSS的一些新特性来改善页面的布局和样式。

System

2024-08-07

所有,html5

以下是一个简单的HTML5动漫网页示例，使用HBuilder制作，并包含了基本的HTML和CSS结构。




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小林家的龙女仆</title>
    <style>
        body {
            background-color: #f4f4f4;
            color: #333;
            font-family: 'Arial', sans-serif;
        }
        .header {
            text-align: center;
            padding: 20px;
        }
        .content {
            margin: 0 auto;
            max-width: 600px;
            padding: 20px;
        }
        img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>小林家的龙女仆</h1>
    </div>
    <div class="content">
        <p>故事设定在大唐朝，刘青叶是一名出身善良，但因家境贫穷而常常被人嘲笑的小村民。一天，她在村子的树林里发现了一个来自神秘世界的宝箱，宝箱打开后揭露了一个古老的传说，她将会成为救国除害的女战将。</p>
        <img src="dragon-lady-in-linjia.jpg" alt="小林家的龙女仆">
        <p>这个传说激发了刘青叶的内心，她开始接受武侠世界的训练，并开始了她的修炼之路。</p>
        <!-- 故事内容 -->
    </div>
</body>
</html>

这个示例包含了基本的HTML结构和一些简单的CSS样式，用于控制页面的布局和元素的外观。图片dragon-lady-in-linjia.jpg需要替换为实际的图片文件路径。这个示例提供了一个关于如何组织HTML和CSS的基础教程，并可以作为制作类似网页的起点。

- 阅读更多 -

HTML5新增表单元素和表单属性，CSS的三种基础选择器

System

2024-08-07

所有,html5

HTML5 新增的表单元素和表单属性：

新增的表单元素：

<datalist>：定义选项列表。请与<input>元素配合使用，来制作出现在文本框的自动完成建议。
<keygen>：定义生成密钥。
<output>：定义不同类型的输出，比如脚本的输出。

新增的表单属性：

placeholder：提供可描述输入字段预期值的提示信息（hint）。
required：此属性规定必须在提交表单之前填写输入字段。
pattern：规定用于输入字段的预期模式（正则表达式）。
min 和 max：为输入字段设置最小和最大值。
step：为输入字段设置合法的数字间隔。
autofocus：指定当页面加载时，输入元素应该自动获得焦点。
multiple：允许输入字段获取多个值。

CSS的三种基础选择器：

类选择器：以.开头，例如 .myclass 选择所有class包含myclass的元素。
ID选择器：以#开头，例如 #myid 选择所有id为myid的元素。
元素选择器：直接写元素名称，例如 p 选择所有<p>元素。

CSS代码示例：




/* 类选择器 */
.myclass {
  color: blue;
}
 
/* ID选择器 */
#myid {
  font-weight: bold;
}
 
/* 元素选择器 */
p {
  margin: 0;
}

- 阅读更多 -