1. 首页
  2. 标签
  3. css
【CSS系列】第二章 · CSS选择器
System
2024-08-15
所有,html5

在CSS中，选择器是一种模式，用于选择需要应用样式规则的元素。下面是一些常用的CSS选择器：

  1. 类选择器（Class Selector）：用于选择具有指定class的元素。



.my-class {
  color: red;
}
  1. ID选择器（ID Selector）：用于选择具有指定ID的单个元素。



#my-id {
  color: blue;
}
  1. 元素选择器（Element Selector）：用于选择指定类型的元素。



p {
  font-size: 16px;
}
  1. 属性选择器（Attribute Selector）：用于选择包含特定属性的元素，或者特定属性值的元素。



input[type="text"] {
  background-color: yellow;
}
  1. 伪类选择器（Pseudo-class Selector）：用于选择处于特定状态的元素。



a:hover {
  text-decoration: underline;
}
  1. 伪元素选择器（Pseudo-element Selector）：用于选择元素的特定部分。



p::first-letter {
  font-size: 200%;
}
  1. 子代选择器（Child Selector）：用于选择指定父元素的直接子元素。



div > p {
  color: green;
}
  1. 相邻选择器（Adjacent Sibling Selector）：用于选择紧跟在另一个元素后的元素，且两者有相同父元素。



h1 + p {
  margin-top: 0;
}
  1. 后代选择器（Descendant Selector）：用于选择指定父元素的后代（不仅限于直接子元素）。



div p {
  color: purple;
}
  1. 通配选择器（Universal Selector）：选择页面上的所有元素。



* {
  margin: 0;
  padding: 0;
}

选择器可以结合使用，以提供更具体的选择规则。例如，结合类选择器和属性选择器：




input.user-input[type="text"] {
  background-color: orange;
}

以上代码选择所有具有user-input类并且type属性为text的input元素，并应用背景颜色为橙色的样式。

- 阅读更多 -
html5写骰子 css
System
2024-08-15
所有,html5

要使用HTML5和CSS创建一个骰子，你可以使用HTML定义结构，CSS进行样式设计。以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dice with HTML5 and CSS</title>
<style>
  .dice {
    width: 100px;
    height: 100px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
  }
  .dice::before, .dice::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: #fff;
    border: 1px solid #ccc;
    top: 25%;
    left: 25%;
    border-radius: 50%;
  }
  .dice::before {
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
  }
  .dice::after {
    border-bottom: none;
    border-right: none;
    transform: rotate(-45deg);
  }
</style>
</head>
<body>
<div class="dice"></div>
</body>
</html>

CSS:




.dice {
  width: 100px;
  height: 100px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}
.dice::before, .dice::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background: #fff;
  border: 1px solid #ccc;
  top: 25%;
  left: 25%;
  border-radius: 50%;
}
.dice::before {
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.dice::after {
  border-bottom: none;
  border-right: none;
  transform: rotate(-45deg);
}

这段代码创建了一个简单的骰子形状，使用了CSS伪元素 ::before 和 ::after 来创建骰子的两个面。通过调整CSS属性，你可以进一步美化这个骰子。

- 阅读更多 -
编程笔记 html5&css&js 073 JavaScript Object数据类型
System
2024-08-15
所有,html5



// 定义一个名为User的JavaScript对象构造函数
function User(name, age) {
    this.name = name;
    this.age = age;
}
 
// 创建User对象实例
var user1 = new User('Alice', 25);
var user2 = new User('Bob', 30);
 
// 打印对象信息
console.log(user1); // 输出: { name: 'Alice', age: 25 }
console.log(user2); // 输出: { name: 'Bob', age: 30 }
 
// 检查对象的类型
console.log(typeof user1); // 输出: object
console.log(user1 instanceof User); // 输出: true
 
// 为User对象添加方法
User.prototype.greet = function() {
    return 'Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.';
};
 
// 使用新添加的方法
console.log(user1.greet()); // 输出: Hello, my name is Alice and I am 25 years old.

这段代码首先定义了一个名为User的JavaScript对象构造函数，接着创建了两个实例user1和user2。然后，使用console.log打印了这些对象的信息，包括它们的属性和方法。最后，演示了如何为User对象的原型添加一个新的方法greet，并通过创建的实例调用这个方法。这个例子有助于理解JavaScript中对象类型的使用，并展示了如何扩展对象的行为。

- 阅读更多 -
HTML+CSS实现个人简历
System
2024-08-15
所有,html5

以下是一个简单的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 {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
  .header {
    text-align: center;
    padding: 20px;
  }
  .section {
    margin-bottom: 10px;
  }
  .section-title {
    text-transform: uppercase;
    font-size: 14px;
    background-color: #f2f2f2;
    padding: 5px;
    margin-bottom: 5px;
  }
  .section-content {
    padding: 10px;
  }
  .contact-info {
    text-align: center;
    padding: 10px;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>张三</h1>
  <h3>个人简历</h3>
</div>
 
<div class="section">
  <div class="section-title">基本信息</div>
  <div class="section-content">
    <p>出生日期: 1990-01-01</p>
    <p>联系电话: +86 1234567890</p>
    <p>电子邮件: zhangsan@example.com</p>
    <p>居住地址: 123 Example Street, Example City</p>
  </div>
</div>
 
<div class="section">
  <div class="section-title">教育背景</div>
  <div class="section-content">
    <p>2009-2013: 大学名称, 本科, 专业名称</p>
    <p>2006-2009: 高中名称, 高中, 专业名称</p>
  </div>
</div>
 
<div class="section">
  <div class="section-title">技能</div>
  <div class="section-content">
    <p>HTML5</p>
    <p>CSS3</p>
    <p>JavaScript</p>
    <p>PHP</p>
  </div>
</div>
 
<div class="section">
  <div class="section-title">兴趣爱好</div>
  <div class="section-content">
    <p>运动</p>
    <p>旅游</p>
    <p>阅读</p>
  </div>
</div>
 
<div class="contact-info">
  <p>可通过提供的联系信息与我联系。</p>
</div>
 
</body>
</html>

这个简历使用了基本的HTML结构和CSS样式来展示个人信息和技能。你可以根据自己的需求添加更多的细节和信息。

- 阅读更多 -
html5的css使用display: flex进行div居中的坑！
System
2024-08-15
所有,html5

在HTML5中，CSS的display: flex属性被广泛使用来实现各种布局。要使用flexbox来居中一个div，通常有两种方法：

  1. 使用justify-content: center和align-items: center来水平和垂直居中子元素。
  2. 使用margin: auto来居中单个子元素。

以下是使用第一种方法居中div的示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full height of the viewport */
}
</style>
</head>
<body>
 
<div class="centered-container">
  <div>居中的内容</div>
</div>
 
</body>
</html>

在这个例子中，.centered-container是一个flex容器，它使用justify-content和align-items属性将其子div完全居中。

如果你遇到了使用flexbox居中div时的问题，请确保你的HTML结构正确，CSS属性被正确应用，并且没有其他样式干扰flexbox布局的效果。如果需要进一步的帮助，请提供具体的代码示例和问题描述。

- 阅读更多 -
HTML5+CSSday4综合案例二——banner效果
System
2024-08-15
所有,html5

以下是实现banner效果的核心HTML和CSS代码。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
  <div class="banner-content">
    <h1>欢迎来到我的网站</h1>
    <p>这里有你需要的所有信息。</p>
    <a href="#" class="btn">了解更多</a>
  </div>
</div>
</body>
</html>

CSS (style.css):




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: Arial, sans-serif;
}
 
.banner {
  width: 100%;
  height: 100vh;
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 25% 100%, 0 75vh);
}
 
.banner-content {
  position: absolute;
  bottom: 50px;
  left: 50px;
  color: white;
  max-width: 700px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
 
.banner-content h1 {
  font-size: 50px;
  margin-bottom: 10px;
}
 
.banner-content p {
  font-size: 20px;
  margin-bottom: 30px;
}
 
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: white;
  text-decoration: none;
  border: 1px solid #333;
  transition: background-color 0.3s;
}
 
.btn:hover {
  background-color: transparent;
  color: #333;
}

确保替换your-image.jpg为实际的图片文件路径。这个示例展示了如何创建一个带有图像背景和文本内容的切角式banner，并使用clip-path属性来剪裁不需要的部分，从而形成一种特殊的banner效果。

- 阅读更多 -
HTML5七夕情人节表白网页制作【canvas生日快乐文字烟花背景动画特效】HTML+CSS+JavaScript 生日快乐代码
System
2024-08-15
所有,html5

以下是一个使用HTML5 Canvas制作的七夕情人节表白页面的简化示例代码。这个示例包括了一个背景音乐、一段爱心文字和一个烟花弹的动画效果。




<!DOCTYPE html>
<html>
<head>
    <title>七夕情人节表白</title>
    <style>
        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<audio src="love_song.mp3" autoplay loop></audio>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const width = canvas.width = window.innerWidth;
    const height = canvas.height = window.innerHeight;
    const heart = new Image();
    heart.src = 'heart.png';
    let hearts = [];
 
    function Heart(x, y) {
        this.x = x;
        this.y = y;
        this.size = random(10, 20);
        this.speedX = random(-1, 1);
        this.speedY = random(1, 3);
        this.life = 1;
    }
 
    Heart.prototype.draw = function() {
        ctx.globalAlpha = this.life;
        ctx.drawImage(heart, this.x, this.y, this.size, this.size);
    };
 
    Heart.prototype.update = function() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.size -= 0.05;
        this.life -= 0.01;
        if(this.life <= 0) {
            hearts.shift();
        }
    };
 
    function random(min, max) {
        return Math.random() * (max - min) + min;
    }
 
    function loop() {
        ctx.clearRect(0, 0, width, height);
        for(let i = 0; i < hearts.length; i++) {
            hearts[i].draw();
            hearts[i].update();
        }
        requestAnimationFrame(loop);
    }
 
    function addHeart(e) {
        hearts.push(new Heart(e.clientX, e.clientY));
    }
 
    canvas.addEventListener('click', addHeart);
    canvas.addEventListener('touchstart', addHeart);
    loop();
</script>
</body>
</html>

在这个示例中，我们创建了一个简单的七夕情人节表白页面，当用户点击或触摸屏幕时，会在点击处产生一个心形图案。心形图案随机大小和速度，并随时间逐渐消失。背景音乐设置为循环播放。这个示例假设你有一个名为heart.png的

- 阅读更多 -
用HTML+CSS做一个漂亮简单大学生校园班级网页
System
2024-08-15
所有,html5

以下是一个简单的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 {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }
  .header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
  }
  .nav {
    float: left;
    width: 20%;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
  }
  .content {
    float: right;
    width: 80%;
    padding: 20px;
    box-sizing: border-box;
  }
  .footer {
    clear: both;
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 10px 0;
  }
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
</style>
</head>
<body>
 
<div class="header clearfix">
  <h1>大学生活</h1>
</div>
 
<div class="nav">
  <h2>班级信息</h2>
  <ul>
    <li><a href="#">班级活动</a></li>
    <li><a href="#">班级成员</a></li>
    <li><a href="#">班级规则</a></li>
  </ul>
</div>
 
<div class="content">
  <h2>欢迎来到我们的班级主页</h2>
  <p>这里有关于班级的所有信息，活动，规则等等。</p>
</div>
 
<div class="footer">
  <p>版权所有 &copy; 班级名称</p>
</div>
 
</body>
</html>

这个简单的网页包含了一个头部（Header），一个导航栏（Nav），主要内容区域（Content）和一个底部（Footer）。使用了float属性来构建一个基本的两列布局，同时使用了clearfix技巧来处理浮动元素导致的布局问题。CSS使用了box-sizing: border-box;使得内边距和边框包含在宽度和高度之内，避免了宽度计算上的问题。

这个示例提供了一个简单而又实用的大学校园班级网页模板，可以根据实际需求进行扩展和修改。

- 阅读更多 -
CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标
System
2024-08-15
所有,html5

以下是针对CSS精灵图、字体图标、HTML5新属性、界面样式和favicon图标的简化代码示例：




/* CSS精灵图 */
.icon {
    background-image: url('sprite.png');
    background-repeat: no-repeat;
}
.icon-home {
    width: 24px;
    height: 24px;
    background-position: 0 0;
}
.icon-user {
    width: 24px;
    height: 24px;
    background-position: -24px 0;
}
 
/* 字体图标 */
@font-face {
    font-family: 'MyIconFont';
    src: url('myicon.eot'); /* IE9 */
    src: url('myicon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('myicon.woff') format('woff'), /* 现代浏览器 */
         url('myicon.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('myicon.svg#MyIconFont') format('svg'); /* Legacy iOS */
}
.icon-home:before {
    font-family: 'MyIconFont';
    content: '\e001';
}
.icon-user:before {
    font-family: 'MyIconFont';
    content: '\e002';
}
 
/* HTML5新属性 */
/* 使用HTML5布尔属性 */
<input type="email" required>
<input type="url" pattern="https?://.">
<input type="date">
<input type="time">
<input type="number" min="0" max="10" step="1">
<input type="search">
<textarea rows="8" cols="48" required></textarea>
 
/* 为表单元素设置界面样式 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f9f9f9;
    border: 1px solid #c1c1c1;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 16px;
}
 
/* favicon图标 */
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

这个示例提供了如何在网页设计中使用CSS精灵图、字体图标、HTML5新属性和favicon图标的简化版代码。这些技术可以提高网页的可访问性、提升用户体验并改善搜索引擎优化。

- 阅读更多 -
HTML5生日祝福网页代码【粉色生日快乐模板】HTML+CSS+JavaScript
System
2024-08-15
所有,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: #e7c096; /* 粉色调背景 */
    font-family: Arial, sans-serif;
  }
  .greeting-container {
    text-align: center;
    color: white;
    padding: 20px;
    background-color: #b35c44; /* 深粉色 */
    border-radius: 10px;
  }
</style>
</head>
<body>
 
<div class="greeting-container">
  <h1>祝您生日快乐！</h1>
  <p>今天是您的特殊日子，希望这一天充满欢乐和幸福。</p>
</div>
 
<script>
// JavaScript 代码区域（如果需要的话）
</script>
 
</body>
</html>

这个简单的HTML页面使用了粉色调作为背景色，并在页面中央展示了祝福的文字，使用了简单的HTML结构和CSS样式。如果需要添加更多的交互或动画效果，可以在<script>标签中添加JavaScript代码。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号