标签 css 下的文章

2024-08-09

在CSS中，创建菜单可以通过多种方式，以下是两种常见的方法：

方法一：使用列表（<ul>或<ol>）和列表项（<li>）来创建菜单。




/* 添加基础样式 */
ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
/* 为列表项添加样式 */
ul.menu li {
  float: left;
  margin-right: 15px;
}
 
/* 为链接添加样式 */
ul.menu li a {
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  display: block;
}
 
/* 为悬浮状态添加样式 */
ul.menu li a:hover {
  background-color: #f0f0f0;
}




<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

方法二：使用HTML的<div>元素和内联样式或内嵌样式。




<div class="menu">
  <div><a href="#">首页</a></div>
  <div><a href="#">产品</a></div>
  <div><a href="#">关于</a></div>
  <div><a href="#">联系</a></div>
</div>




/* 添加基础样式 */
.menu div {
  float: left;
  margin-right: 15px;
}
 
/* 为链接添加样式 */
.menu div a {
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  display: block;
}
 
/* 为悬浮状态添加样式 */
.menu div a:hover {
  background-color: #f0f0f0;
}

两种方法都可以创建一个基本的菜单，但第一种方法使用了无序列表(<ul>)，更适合用于菜单项目不需要顺序的情况，而第二种方法使用了<div>元素，提供了更多的自定义和灵活性。

- 阅读更多 -

java——HTML、css、JavaScript、jQuery 详细介绍

System

2024-08-09

所有,css

HTML、CSS、JavaScript和jQuery都是构建网页所需的关键技术。

HTML (Hypertext Markup Language):
HTML是用来创建网页结构的标准标记语言。它定义了网页的内容和结构。




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

CSS (Cascading Style Sheets):
CSS是用来控制网页样式的语言，比如颜色、字体、布局等。




body {
  background-color: lightblue;
}
 
h1 {
  color: navy;
  margin-left: 20px;
}

JavaScript:
JavaScript是一种编程语言，用于增加网页的交互性。它可以让网页对用户的操作做出反应。




function myFunction() {
  alert('Hello, World!');
}

jQuery:
jQuery是一个JavaScript库，它简化了JavaScript编程。它使得HTML文档 traversing, event handling, animation 和Ajax等操作更加简单。




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

以上代码展示了每种语言的基本用法和简单的实例，分别是创建一个简单的HTML页面，为页面添加一些基本的样式，添加一个简单的JavaScript函数，和添加一个简单的jQuery效果。

- 阅读更多 -

编程笔记 html5&css&js 092 JavaScript 表单控件

System

2024-08-09

所有,css




<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 表单控件</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        input[type="text"] {
            padding: 8px;
            margin: 8px 0;
            border: 1px solid #ccc;
        }
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>表单控件示例</h1>
    <form id="myForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        <input type="submit" value="提交">
    </form>
    <script>
        document.getElementById('myForm').onsubmit = function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            alert('用户名: ' + username + ', 密码: ' + password);
        };
    </script>
</body>
</html>

这个代码示例展示了如何使用HTML、CSS和JavaScript创建一个简单的登录表单，并在用户提交表单时使用JavaScript阻止默认的表单提交行为，并显示输入的用户名和密码。这是学习Web开发的一个基本示例，展示了如何处理和验证用户输入。

- 阅读更多 -

在CSS中实现文字逐渐显示

System

2024-08-09

所有,css

在CSS中，可以使用@keyframes规则和animation属性来实现文字逐渐显示的效果。以下是一个简单的例子：




@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
.fade-in-text {
  animation: fadeIn 2s ease-in-out forwards;
}

在HTML中使用这个类：




<div class="fade-in-text">这段文字将会渐显。</div>

在这个例子中，.fade-in-text类定义了一个名为fadeIn的动画，该动画从完全透明(opacity: 0)渐变至完全不透明(opacity: 1)。动画持续时间为2秒，并且在动画完成后会保持最终状态。ease-in-out表示动画的速度变化，forwards意味着动画完成后，元素将保持最终的样式。

- 阅读更多 -

CSS 让元素根据内容自适应宽度

System

2024-08-09

所有,css

在CSS中，要让元素根据其内容自适应宽度，可以使用width: max-content;、width: min-content;或width: fit-content;属性。

max-content：元素的自然大小，即足以包含元素内容的最小宽度。
min-content：元素的最大可能宽度，即足以包含元素内容的最大宽度。
fit-content：元素的最佳适应宽度，即既不小于内容所需最小宽度也不大于内容所需最大宽度。

以下是一个简单的例子，演示如何使用max-content和fit-content：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Based Width</title>
<style>
  .max-content-example {
    border: 1px solid #000;
    width: max-content;
    margin: 10px;
    padding: 10px;
  }
  
  .fit-content-example {
    border: 1px solid #000;
    width: fit-content;
    margin: 10px;
    padding: 10px;
  }
</style>
</head>
<body>
 
<div class="max-content-example">
  This div will have a width that fits its content.
</div>
 
<div class="fit-content-example">
  This div will have a width that fits its content and is constrained by the parent element.
</div>
 
</body>
</html>

在这个例子中，第一个div使用max-content，它将宽度设置为足以包含其内容的最小宽度。第二个div使用fit-content，它将宽度设置为既不小于内容所需最小宽度也不大于父元素的宽度。

System

2024-08-09

所有,css

在CSS中，position属性用于规定元素的定位方式，它的值可以是以下几种：

static：这是默认值，意味着元素遵循正常的文档流布局，不会被特殊定位。
relative：相对定位，元素相对于其正常位置进行定位。可以通过设置top、right、bottom、left属性来偏移元素。
absolute：绝对定位，元素相对于最近的非static定位的父元素进行定位。如果没有这样的父元素，则相对于文档体(body)进行定位。
fixed：固定定位，元素相对于浏览器窗口进行定位，并且不会随着页面滚动而移动。
sticky：粘性定位，元素在达到某个阈值前为相对定位，之后为固定定位。

示例代码：




/* 静态定位 */
.static-position {
  position: static;
  /* 其他样式 */
}
 
/* 相对定位 */
.relative-position {
  position: relative;
  top: 10px;
  left: 20px;
  /* 其他样式 */
}
 
/* 绝对定位 */
.absolute-position {
  position: absolute;
  top: 50px;
  right: 30px;
  /* 其他样式 */
}
 
/* 固定定位 */
.fixed-position {
  position: fixed;
  bottom: 0;
  right: 0;
  /* 其他样式 */
}
 
/* 粘性定位 */
.sticky-position {
  position: sticky;
  top: 0;
  /* 其他样式 */
}

在实际应用中，可以根据页面布局需求选择合适的定位方式。

- 阅读更多 -

css实现鼠标禁用（鼠标滑过显示红色禁止符号）

System

2024-08-09

所有,css

要实现当鼠标滑过元素时显示一个红色禁用符号，可以使用CSS的伪类:hover以及背景图片或者Unicode字符。以下是实现这个效果的CSS代码示例：




.disabled-element:hover {
  cursor: not-allowed;
  color: red;
  /* 使用背景图片的方式显示禁用符号 */
  /* background: url('path-to-your-disabled-icon.png') center left no-repeat; */
  /* 或者使用Unicode字符 */
  content: "❌";
  display: inline-block;
  padding-left: 5px; /* 根据需要调整间距 */
}

在HTML中，你可以这样使用：




<button class="disabled-element">Button</button>

将上述CSS类应用到你想要禁用的元素上，当鼠标滑过时，元素旁边会显示一个红色的禁用符号。

- 阅读更多 -

css中文本不换行显示省略号和换行后显示省略号

System

2024-08-09

所有,css

在CSS中，可以使用white-space属性来控制文本是否换行，并结合text-overflow和overflow属性来实现文本超出容器边界时显示省略号的效果。

以下是实现不换行文本显示省略号和换行后显示省略号的CSS代码示例：




.nowrap-ellipsis {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
 
.wrap-ellipsis {
  white-space: normal; /* 允许换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
}
 
.wrap-ellipsis::after {
  content: "..."; /* 在文本末尾添加省略号 */
  position: absolute; /* 绝对定位 */
  right: 0; /* 右对齐 */
  bottom: 0; /* 底部对齐 */
  background-color: white; /* 背景色与容器背景相同，以便省略号不再显示省略号 */
}

在HTML中使用这些类：




<div class="nowrap-ellipsis">这是一段不换行的文本，超出部分显示省略号...</div>
<div class="wrap-ellipsis">这是一段允许换行的文本，超出容器部分显示省略号</div>

对于换行后显示省略号，由于CSS本身不能直接判断是否换行，可以采用一些技巧，例如使用伪元素在最后手动添加省略号，并假设文本已经换行来展示省略号。这种方法并不是完美的，因为它不能真正地检测文本是否真的换行，但在大多数情况下，它可以近似实现所需的效果。

- 阅读更多 -

【CSS】writing-mode —— 文字方向（水平/垂直；左右/右左）

System

2024-08-09

所有,css

CSS的writing-mode属性用于设置文本的书写方向，它可以设置为水平或垂直方向，以及左右或右左方向的文本。

属性值：

horizontal-tb：默认值，水平方向自上向下。
vertical-rl：垂直方向，从上到下，从左到右。
vertical-lr：垂直方向，从上到下，从右到左。

示例代码：




/* 水平方向，从上到下 */
.horizontal {
  writing-mode: horizontal-tb;
}
 
/* 垂直方向，从上到下，从左到右 */
.vertical-lr {
  writing-mode: vertical-lr;
}
 
/* 垂直方向，从上到下，从右到左 */
.vertical-rl {
  writing-mode: vertical-rl;
}

HTML使用：




<div class="horizontal">这是水平方向的文本。</div>
<div class="vertical-lr">这是垂直方向，从左到右的文本。</div>
<div class="vertical-rl">这是垂直方向，从右到左的文本。</div>

以上代码将影响文本的显示方向，适用于不同语言的文字布局，如中文、日文等。

- 阅读更多 -

CSS 实现 flex布局最后一行左对齐的方案「多场景、多方案」

System

2024-08-09

所有,css




.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左对齐 */
  align-content: flex-start; /* 多行时每行左对齐 */
}
 
.item {
  flex: 0 0 auto; /* 根据需要设置宽度 */
  margin: 5px; /* 间距 */
  /* 其他样式 */
}

这段代码展示了如何使用flex布局实现容器中项目的左对齐排列，即最后一行左对齐。justify-content: flex-start;确保了水平方向上的左对齐，而align-content: flex-start;在多行的情况下确保了垂直方向每行的左对齐。

- 阅读更多 -