标签 html5 下的文章

[HTML]Web前端开发技术10（HTMLCSSJavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页

2024-08-14




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS+DIV页面布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        .content {
            margin-top: 50px;
            padding: 10px;
        }
        .sidebar {
            float: left;
            width: 200px;
            height: calc(100vh - 50px);
            background-color: #f2f2f2;
            padding: 10px;
            overflow: auto;
        }
        .main-content {
            margin-left: 210px; /* 宽度为200px + 10px边距 */
            height: calc(100vh - 50px);
            background-color: #fff;
            padding: 10px;
            overflow: auto;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>页头</h1>
    </div>
    <div class="content">
        <div class="sidebar">
            <h2>侧边栏</h2>
            <p>侧边栏内容...</p>
        </div>
        <div class="main-content">
            <h2>主要内容</h2>
            <p>主要内容区域...</p>
        </div>
    </div>
    <div class="footer">
        <h1>页脚</h1>
    </div>
</body>
</html>

这个代码实例展示了如何使用CSS创建一个固定头部和底部的布局，并且使用DIV元素来构建一个两栏的主要内容区域。侧边栏使用了固定宽度并且能够在高度上自适应屏幕，主要内容区域则根据侧边栏宽度进行了适当的偏移。在这个简单的例子中，我们也看到了如何使用CSS的calc()函数来进行计算，以便于实现更复杂的布局。

System

2024-08-14

所有,css3

在HTML中，表格的边框颜色可以通过CSS来设置。如果你想设置表格的亮边框颜色和暗边框颜色，可以使用CSS的border-color和border属性。

以下是一个简单的例子，展示如何设置表格的亮边框颜色和暗边框颜色：




<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
    border-collapse: collapse; /* 移除表格之间的间隔 */
  }
  table, th, td {
    border: 1px solid black; /* 设置边框宽度和样式 */
  }
  th {
    height: 50px;
    background-color: #f2f2f2; /* 设置表头背景色 */
  }
  td {
    padding: 10px;
  }
  /* 设置亮边框颜色 */
  th, td {
    border-color: #555;
  }
  /* 设置暗边框颜色 */
  table tr:nth-child(odd) {
    background-color: #f9f9f9;
  }
  table tr:nth-child(even) {
    background-color: #fdfdfd;
  }
</style>
</head>
<body>
 
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  <!-- 更多行... -->
</table>
 
</body>
</html>

在这个例子中，我们使用CSS选择器为表格的表头(th)和数据单元格(td)设置了亮边框颜色，并且通过:nth-child伪类选择器为奇数行和偶数行设置了不同的背景色作为暗边框颜色。border-collapse: collapse; 属性用于移除表格单元之间的间隔，使得整个表格看上去有单一的边框。

- 阅读更多 -

h5导航跳色

System

2024-08-14

所有,css

在HTML5中，实现导航跳色通常意味着在用户悬停或点击时改变导航项的颜色。这可以通过CSS来实现。以下是一个简单的例子：

HTML:




<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品服务</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

CSS:




nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
nav li {
  display: inline;
  margin-right: 10px;
}
 
nav a {
  text-decoration: none;
  color: #000;
  transition: color 0.3s ease; /* 平滑过渡颜色 */
}
 
nav a:hover {
  color: #F00; /* 鼠标悬停时的颜色 */
}

这段代码中，我们使用了CSS的:hover伪类选择器来定义当用户将鼠标悬停在导航链接上时，链接的颜色会改变。transition属性确保了颜色的变化是平滑的。

- 阅读更多 -

html5——CSS高级选择器

System

2024-08-14

所有,css

在HTML5中，CSS提供了多种高级选择器，以下是一些常用的高级选择器及其使用示例：

属性选择器：可以根据元素的属性或属性值来选择元素。




/* 选择所有具有title属性的元素 */
[title] { color: blue; }
 
/* 选择title属性值为hello的所有元素 */
[title=hello] { font-weight: bold; }
 
/* 选择title属性值以hello开头的所有元素 */
[title^=hello] { text-decoration: underline; }
 
/* 选择title属性值以hello结尾的所有元素 */
[title$=hello] { text-transform: uppercase; }
 
/* 选择title属性值包含（正则表达式）hello的所有元素 */
[title*=hello] { font-style: italic; }

伪类选择器：用于选择元素的特定状态。




/* 选择所有被激活的链接 */
a:active { color: yellow; }
 
/* 选择所有悬停的链接 */
a:hover { text-decoration: none; }
 
/* 选择所有获得焦点的输入框 */
input:focus { border: 2px solid red; }

伪元素选择器：用于选择元素的特定部分（如第一个字母、第一行等）。




/* 选择每个段落的第一个字母 */
p::first-letter { font-size: 200%; }
 
/* 选择每个段落的第一行 */
p::first-line { color: green; }
 
/* 选择每个段落的前两个字符 */
p::before { content: "✨"; }

结构性伪类选择器：用于选择某种DOM元素（如父元素、子元素等）。




/* 选择每个无序列表的第一个<li>元素 */
ul li:first-child { color: purple; }
 
/* 选择每个无序列表中的最后一个<li>元素 */
ul li:last-child { text-transform: uppercase; }
 
/* 选择每个无序列表中的第一个<li>元素的直接子元素 */
ul li:first-of-type { font-weight: bold; }
 
/* 选择每个无序列表中的最后一个<li>元素的直接子元素 */
ul li:last-of-type { font-style: italic; }
 
/* 选择每个有note类的元素的第一个子元素 */
.note > :first-child { border-bottom: 1px solid black; }

伪元素选择器（与伪类选择器区分开来）：用于创建一些不在文档树中的元素，但可以用CSS样式格式化。




/* 选择每个段落的第一个字母 */
p::first-letter { font-size: 200%; }
 
/* 选择每个段落的第一行 */
p::first-line { color: green; }
 
/* 选择每个段落的前两个字符 */
p::before { content: "✨"; }

以上代码展示了如何使用不同的CSS高级选择器来选择和格式化HTML元素。在实际应用中，可以根据需要选择合适的选择器并结合其他CSS规则来创建复杂的样式表。

System

2024-08-14

所有,css

在CSS中，text-decoration属性用于设置或获取对象文本的装饰。这种装饰通常是下划线、上划线、删除线等。

以下是一些使用text-decoration的示例：

为文本添加下划线：




p.decoration {
  text-decoration: underline;
}

为文本添加上划线：




p.decoration {
  text-decoration: overline;
}

为文本添加删除线：




p.decoration {
  text-decoration: line-through;
}

为文本同时添加上划线和下划线：




p.decoration {
  text-decoration: underline overline;
}

在CSS中，selector是用来选择你要添加样式的HTML元素。例如，如果你想要选择所有的<p>元素，并为它们添加上划线的样式，你可以这样做：




p {
  text-decoration: underline;
}

这段代码会使得所有<p>元素的文本都显示为带有下划线的文本。

在实际开发中，你可以根据需要选择合适的选择器，并结合text-decoration属性来为你的网页添加各种样式。

- 阅读更多 -

h5音乐播放器实现

System

2024-08-14

所有,ajax

HTML5 提供了一个内置的 <audio> 标签，可以用来创建简单的音频播放器。以下是一个基本的 HTML5 音频播放器实现示例：




<!DOCTYPE html>
<html>
<body>
 
<audio id="myAudio" controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
 
<script>
// 获取 audio 元素
var myAudio = document.getElementById("myAudio");
 
// 播放按钮点击事件
function playAudio() {
  myAudio.play();
}
 
// 暂停按钮点击事件
function pauseAudio() {
  myAudio.pause();
}
</script>
 
<button onclick="playAudio()">播放音乐</button>
<button onclick="pauseAudio()">暂停音乐</button>
 
</body>
</html>

在这个例子中，<audio> 标签有一个 controls 属性，它会为音频播放器提供默认的播放控件。你也可以通过 JavaScript 访问和控制 <audio> 元素的各种属性和方法，如 play() 和 pause() 来实现更复杂的播放器功能。

请将 "your-audio-file.mp3" 替换为你的音频文件路径。如果你的音频文件是其他格式，比如 OGG 或 WAV，你可以添加额外的 <source> 标签来指定它们，浏览器会自动选择支持的格式播放音频。

System

2024-08-14

所有,vue.js




// manifest.json 中配置代理
{
  ...
  "h5" : {
    "devServer" : {
      "port": 8080,
      "proxy" : {
        "/api": {
          "target": "http://backend.example.com",
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
  ...
}




// vue.config.js 中配置代理
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

以上代码示例展示了如何在manifest.json和vue.config.js中配置代理，使得在开发环境下运行的UniApp项目可以通过代理服务器访问不同域的后端API。这有助于解决开发过程中的跨域问题，并允许开发者在本地进行调试。

- 阅读更多 -

iframe 与 h5 或其他vue页面传值，详解传递参数的方法和技巧

System

2024-08-14

所有,vue.js

在Vue中，iframe与父页面（H5或其他Vue页面）传值可以通过几种方式实现：

通过window.postMessage方法

window.postMessage是一个安全的跨文档消息传送API，可以实现跨文档、多窗口通信。

父页面发送消息给iframe：




const iframeWindow = this.$refs.myIframe.contentWindow;
iframeWindow.postMessage({ msg: 'Hello, I am from parent' }, '*');

iframe内接收消息：




window.addEventListener('message', (event) => {
  if (event.origin !== window.location.origin) return;
  console.log(event.data.msg); // 输出：Hello, I am from parent
});

通过window.parent属性
在iframe内部可以通过window.parent访问父页面的window对象，并可以访问父页面定义的全局变量或函数。
父页面定义全局函数：
```
window.receiveMessageFromIframe = function(msg) {
  console.log(msg); // 输出：Hello, I am from iframe
};
```
iframe内调用父页面函数：
```
window.parent.receiveMessageFromIframe('Hello, I am from iframe');
```

通过URL参数

如果要传递的数据量不大，可以通过修改iframe的src属性来传递参数。

父页面设置iframe的src：




<iframe :src="iframeUrl"></iframe>




data() {
  return {
    iframeUrl: 'http://example.com/iframe.html?param=value'
  };
}

iframe内部通过URLSearchParams或正则匹配获取参数：




const params = new URLSearchParams(window.location.search);
const paramValue = params.get('param'); // 输出：value

以上方法可以实现iframe与父页面的通信，但请注意安全性，例如防止跨站点脚本攻击（XSS）。

- 阅读更多 -

编程笔记 html5&css&js 038 CSS背景

System

2024-08-13

所有,html5

在HTML和CSS中，可以使用背景图像、颜色或渐变来装饰网页。以下是一些示例：

使用背景颜色：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-color"></div>
</body>
</html>

CSS (styles.css):




.background-color {
    width: 100%;
    height: 100vh;
    background-color: #ff0000; /* 红色背景 */
}

使用背景图像：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-image"></div>
</body>
</html>

CSS (styles.css):




.background-image {
    width: 100%;
    height: 100vh;
    background-image: url('background.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
}

使用背景渐变：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-gradient"></div>
</body>
</html>

CSS (styles.css):




.background-gradient {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #ff0000, #00ff00); /* 从左到右的红到绿渐变 */
}

以上代码示例展示了如何在HTML元素上设置背景样式。在实际应用中，可以根据需要选择使用背景颜色、图像或渐变。

System

2024-08-13

所有,html5

在JavaScript中，Number类型用于表示数字值。JavaScript Number 类型的值可以是整数或者浮点数，并且可以用科学计数法表示。

以下是一些操作JavaScript Number数据类型的示例代码：

创建一个Number类型的变量并赋值：




let num = 10; // 整数
let floatNum = 10.5; // 浮点数
let bigNum = 99999999999999; // 大数字

使用Number对象创建数字：




let numObj = new Number(10);

使用Number函数将其他数据类型转换为数字：




let stringToNum = Number("123"); // 123
let boolToNum = Number(true); // 1
let objectToNum = Number({}); // NaN

使用特殊的Number值：




let infinity = Number.POSITIVE_INFINITY; // 正无穷大
let negInfinity = Number.NEGATIVE_INFINITY; // 负无穷大
let nan = Number.NaN; // 非数字

使用Number对象的方法：




let num = 10;
let stringNum = num.toString(); // "10"
let numToFixed = num.toFixed(2); // "10.00"
let numToPrecision = num.toPrecision(2); // "1e+01"

使用Number的静态方法：




let stringToNum = Number.parseInt("123abc"); // 123
let floatToNum = Number.parseFloat("123.45abc"); // 123.45

使用Number的比较方法：




let num1 = 10;
let num2 = 20;
let maxNum = Math.max(num1, num2); // 20
let minNum = Math.min(num1, num2); // 10

以上代码展示了如何在JavaScript中使用Number类型的基本操作。

- 阅读更多 -