分类 css3 下的文章

[HTML]Web前端开发技术17（HTMLCSSJavaScript ）textarea，checkbox，button，fieldset，option，radio——喵喵画网页

2024-08-10

在HTML5中，<textarea>元素用于定义多行文本输入控件，<button>元素用于定义按钮，而<input type="checkbox">用于定义复选框，<input type="file">用于定义文件选择控件。

以下是一些示例代码：

HTML5:




<!DOCTYPE html>
<html>
<body>
 
<textarea rows="4" cols="50">
在这里输入文本...
</textarea>
 
<br><br>
 
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car
 
<br><br>
 
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
 
<br><br>
 
<form action="/submit-form" method="post" enctype="multipart/form-data">
  <label for="fileToUpload">Select a File to Upload:</label>
  <input type="file" id="fileToUpload" name="fileToUpload">
  <input type="submit" value="Upload File" name="submit">
</form>
 
</body>
</html>

CSS3:




/* 示例样式 */
textarea {
  width: 300px;
  height: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}
 
input[type="checkbox"] {
  margin: 10px 0;
}
 
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
 
form {
  margin-top: 20px;
}
 
input[type="file"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 10px;
}

JavaScript:




// JavaScript可用于处理按钮点击事件或其他用户交互

以上代码提供了基本的HTML5元素使用示例，并附带了简单的CSS样式和JavaScript事件处理。

- 阅读更多 -

freecodecamp：通过编写猫咪相册应用学习html

System

2024-08-10

所有,css3

在freeCodeCamp学习HTML时，可以通过创建一个简单的猫咪图片库来提升对HTML的理解和应用。以下是一个简单的示例代码，展示了如何构建一个包含多张猫咪图片的相册。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Photo Gallery</title>
</head>
<body>
    <h1>Cat Photo Gallery</h1>
    <hr>
    <h2>Cat Photos</h2>
    <p>Click on any image to view in a larger size.</p>
    <div class="cat-photo-list">
        <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" target="_blank">
            <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
        </a>
        <!-- 其他猫咪图片链接和图片在此处重复上述格式 -->
    </div>
</body>
</html>

在这个例子中，我们使用了<h1>标签来设置页面标题，<h2>标签来设置图片集标题，<hr>标签来添加水平线，<p>标签来添加文本，<div>和<a>标签用于创建链接和包含图片，<img>标签用于显示具体的猫咪图片。

在实际应用中，你可以根据需要添加更多的猫咪图片，并且可以通过CSS进行样式的美化。这个简单的示例展示了如何用HTML创建一个基本的图片库，并且每张图片都可以点击查看更大的版本。

- 阅读更多 -

H5 页面拖动悬浮按钮

System

2024-08-10

所有,css3

要在H5页面中实现拖动悬浮按钮，你可以使用JavaScript监听鼠标事件来更新按钮的位置。以下是一个简单的实现示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Button</title>
<style>
  #floatButton {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    user-select: none;
  }
</style>
</head>
<body>
 
<div id="floatButton">+</div>
 
<script src="script.js"></script>
</body>
</html>

JavaScript部分 (script.js)：




let isDragging = false;
let dragButton = document.getElementById('floatButton');
 
dragButton.addEventListener('mousedown', function(e) {
  isDragging = true;
  offsetX = e.clientX - dragButton.offsetLeft;
  offsetY = e.clientY - dragButton.offsetTop;
});
 
window.addEventListener('mouseup', function() {
  isDragging = false;
});
 
window.addEventListener('mousemove', function(e) {
  if (isDragging) {
    dragButton.style.left = (e.clientX - offsetX) + 'px';
    dragButton.style.top = (e.clientY - offsetY) + 'px';
  }
});

这段代码会让页面中的圆形按钮可以被拖动。当鼠标点击按钮时，mousedown事件会被触发，并开始跟踪鼠标移动。在鼠标移动时，mousemove事件会更新按钮的位置。当鼠标松开时，mouseup事件会停止拖动操作。

System

2024-08-10

所有,css3

HTML5 基础：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>页面头部</header>
    <nav>导航栏</nav>
    <section>
        <article>
            <h1>文章标题</h1>
            <p>这里是文章内容...</p>
        </article>
    </section>
    <aside>侧边栏</aside>
    <footer>页面底部</footer>
</body>
</html>

CSS3 应用：




/* CSS 文件 */
body {
    background-color: #f3f3f3;
}
header, footer {
    background-color: #444;
    color: white;
    text-align: center;
    padding: 5px 0;
}
nav, aside {
    background-color: #f5f5f5;
    color: #333;
    padding: 10px;
}
section article {
    background-color: white;
    padding: 15px;
    margin-bottom: 10px;
}
section article h1 {
    color: #333;
    margin-bottom: 5px;
}

CSS3 动画（animations）应用：




/* 定义关键帧 */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
 
/* 应用动画 */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example; /* 使用动画名称 */
    animation-duration: 4s;  /* 动画时长 */
    animation-iteration-count: infinite; /* 动画无限次数播放 */
}

HTML 和 CSS 结合使用，CSS 中的动画效果会应用于一个 div 元素。这个 div 元素在页面加载时会从红色渐变到黄色，并且这个过程会无限循环。

System

2024-08-09

所有,css3

在flex布局中，align-items属性用于设置侧轴上的单行子元素的排列方式。




.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

align-items可以取以下值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: lightgrey;
  align-items: center; /* 垂直居中 */
}
 
.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: cornflowerblue;
  text-align: center;
  line-height: 100px; /* 使文字垂直居中 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container设置了align-items: center;，使得其中的.flex-item子元素垂直居中。

- 阅读更多 -

flex 布局设置最后一个元素靠右 margin-left: auto

System

2024-08-09

所有,css3

在Flex布局中，如果你想要让最后一个子元素靠右，可以不使用margin-left: auto，而是使用margin-left: auto配合margin-top: auto来对齐到容器的右上角。如果你只是想要让最后一个子元素靠右并且在垂直方向上紧跟其前面的元素，你可以使用justify-content: flex-end来达到这个效果。

以下是一个简单的Flex布局示例，其中最后一个子元素将显示在容器的右侧：




<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; /* 这会使子元素靠右 */
  }
 
  .flex-item {
    margin: 5px; /* 为了清楚地展示边距，这里添加了margin */
  }
</style>
 
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <!-- 最后一个元素将靠右显示 -->
  <div class="flex-item">Item 5</div>
</div>

在这个例子中，.flex-container是一个Flex容器，它通过设置justify-content: flex-end来确保最后一个子元素即Item 5将显示在容器的右侧。其他元素将根据容器的布局排列，最后一个元素靠右。

- 阅读更多 -

使用CSS伪元素制作动感超酷的hover动画

System

2024-08-09

所有,css3

以下是一个使用CSS伪元素制作动感Hover动画的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background: #3498db;
    margin: 50px;
    position: relative;
    overflow: hidden;
  }
 
  .box:hover:before {
    filter: blur(5px);
    transform: scale(1.2);
  }
 
  .box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

这段代码定义了一个.box类，它在悬停时会通过:before伪元素生成一个模糊效果，并且通过缩放来增加动感。悬停时的效果通过CSS过渡(transition)实现平滑的动画效果。

- 阅读更多 -

js 小技巧（根据不同的状态生成不同的颜色和状态）

System

2024-08-09

所有,css3

这个问题的解决方案取决于状态和颜色的具体规则。假设有一个简单的状态机制，我们可以使用一个对象来映射状态到颜色，然后通过一个函数来生成颜色。以下是一个示例代码：




// 状态颜色映射对象
const stateToColorMap = {
  'active': 'green',
  'inactive': 'red',
  'pending': 'yellow'
};
 
// 根据状态获取颜色的函数
function getColorByState(state) {
  return stateToColorMap[state] || 'black'; // 默认颜色
}
 
// 示例使用
const activeColor = getColorByState('active'); // 返回 'green'
const pendingColor = getColorByState('pending'); // 返回 'yellow'
const unknownStateColor = getColorByState('unknown'); // 返回 'black'

在这个例子中，stateToColorMap 定义了不同状态对应的颜色。getColorByState 函数接受一个状态作为参数，查询映射对象，并返回对应的颜色。如果状态未在映射中定义，则返回默认颜色black。

- 阅读更多 -

css踩坑记录——css控制强制打印背景

System

2024-08-09

所有,css3

在CSS中，可以使用@media print规则来控制打印时的样式，包括是否显示背景图片和颜色。




@media print {
  body, p, div, ul, li {
    color: #000 !important; /* 确保打印时文本是黑色 */
    background: none !important; /* 移除背景 */
    box-shadow: none !important; /* 移除阴影 */
  }
  
  a, a:visited {
    text-decoration: none !important; /* 移除下划线 */
    color: #000 !important; /* 确保链接是黑色 */
  }
  
  img {
    display: none !important; /* 移除图片 */
  }
}

这段代码将打印样式中的文本颜色设置为黑色，移除所有元素的背景，并且移除图片和超链接的装饰。在打印时，通常不需要背景图片和一些视觉装饰，以保证打印清晰和不影响阅读。

- 阅读更多 -

flex布局，换行的元素上下设置间距

System

2024-08-09

所有,css3

在Flex布局中，如果你想要在换行的元素之间设置间距，你可以使用gap属性（在支持的浏览器中，如Chrome、Edge等）。gap属性是row-gap和column-gap的简写形式，分别用于设置行间距和列间距。

以下是一个简单的例子，演示如何在Flex容器中设置行间距：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 设置行间距和列间距为20像素 */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <!-- ...更多的flex-item元素... -->
</div>
 
</body>
</html>

在这个例子中，.flex-container 类定义了一个Flex容器，其中的子元素 .flex-item 会根据需要自动换行。gap 属性设置为 20px，这将在每个项目下方和右方添加20像素的间距，从而在换行时生效。

- 阅读更多 -