标签 css 下的文章

2024-08-07

要实现文本超出部分隐藏，鼠标悬停时显示全部内容，可以使用CSS的text-overflow属性结合hover伪类。以下是实现这个效果的CSS代码示例：




/* 设置容器的宽度和省略样式 */
.text-container {
  width: 200px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  cursor: pointer; /* 将鼠标样式改为手指形状，提示可点击 */
}
 
/* 鼠标悬停时移除文本省略样式 */
.text-container:hover {
  overflow: visible; /* 悬停时文本不隐藏 */
  text-overflow: inherit; /* 悬停时不使用省略号 */
  white-space: normal; /* 悬停时文本换行 */
}

接下来是HTML部分：




<div class="text-container">
  这是一段很长的文本，需要超出部分隐藏，鼠标悬停时显示全部内容。
</div>

将上述CSS添加到您的样式表中，并在您的HTML中使用text-container类的div元素，当文本超出容器宽度时，会以省略号显示，鼠标悬停时会显示全文。

- 阅读更多 -

CSS3中的display:grid网格布局介绍 flex升级版grid

System

2024-08-07

所有,css3

CSS3中的display: grid是一个强大的布局工具，它提供了一个二维网格布局系统，使得我们可以更加灵活和直观地创建复杂的布局。display: grid是Flexbox布局模型的一个升级版本，它提供了更多的功能和灵活性。

以下是一个简单的display: grid使用示例：

HTML:




<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

CSS:




.container {
  display: grid;
  grid-template-columns: auto 1fr; /* 定义两列，第一列自动宽度，第二列占据剩余空间 */
  grid-template-rows: 50px 100px; /* 定义两行，第一行50px，第二行100px */
  grid-gap: 10px; /* 网格间隙 */
}
 
.item1 {
  grid-column: 1; /* 占据第一列 */
  grid-row: 1; /* 占据第一行 */
}
 
.item2 {
  grid-column: 2; /* 占据第二列 */
  grid-row: 1 / span 2; /* 跨越两行，从第一行开始 */
}
 
.item3 {
  grid-column: 1; /* 占据第一列 */
  grid-row: 2; /* 占据第二行 */
}
 
.item4 {
  grid-column: 2; /* 占据第二列 */
  grid-row: 2; /* 占据第二行 */
}
 
.item5 {
  grid-column: 1 / span 2; /* 跨越两列，从第一列开始 */
  grid-row: 3; /* 尝试占据第三行，但由于没有定义，不会显示 */
}

在这个例子中，.container 使用了 display: grid 来创建一个网格布局，并通过 grid-template-columns 和 grid-template-rows 定义了网格的结构。.item1 到 .item5 通过 grid-column 和 grid-row 属性来指定它们在网格中的位置。

CSS Grid 提供了许多其他的属性来控制网格的行为，比如 grid-template-areas 用于创建复杂的布局，justify-items, align-items, justify-content, 和 align-content 用于控制网格内容的对齐和分布。

- 阅读更多 -

web前端登陆注册界面（html+css+js）

System

2024-08-07

所有,css3

以下是一个简单的Web前端登录注册界面的示例代码，包括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>Login & Register Form</title>
<style>
    body { font-family: Arial, sans-serif; }
    .form-container { max-width: 300px; margin: 50px auto; }
    form { display: flex; flex-direction: column; }
    form label { margin-bottom: 10px; }
    form input[type="text"], form input[type="password"] { margin-bottom: 10px; }
    form button { margin-top: 10px; }
</style>
</head>
<body>
 
<div class="form-container">
    <h2>Login</h2>
    <form id="loginForm">
        <label for="loginUsername">Username:</label>
        <input type="text" id="loginUsername" required>
        <label for="loginPassword">Password:</label>
        <input type="password" id="loginPassword" required>
        <button type="submit">Login</button>
    </form>
</div>
 
<div class="form-container">
    <h2>Register</h2>
    <form id="registerForm">
        <label for="registerUsername">Username:</label>
        <input type="text" id="registerUsername" required>
        <label for="registerEmail">Email:</label>
        <input type="text" id="registerEmail" required>
        <label for="registerPassword">Password:</label>
        <input type="password" id="registerPassword" required>
        <button type="submit">Register</button>
    </form>
</div>
 
<script>
    // Login form submission handler
    document.getElementById('loginForm').addEventListener('submit', function(event) {
        event.preventDefault();
        var username = document.getElementById('loginUsername').value;
        var password = document.getElementById('loginPassword').value;
        // Here, you would send the login data to the server for verification
        console.log('Login submitted:', username, password);
    });
 
    // Register form submission handler
    document.getElementById('registerForm').addEventListener('submit', function(event) {
        event.preventDefault();
        var username = document.getElementById('registerUsername').value;
        var ema

- 阅读更多 -

CSS3 新增属性：背景

System

2024-08-07

所有,css3

CSS3中的背景相关属性包括：background-size, background-origin, background-clip。

background-size: 用于指定背景图片的尺寸，可以设置为具体的宽高值，或者使用百分比，还可以设置为cover和contain。




/* 指定背景图片的大小 */
div {
  background-image: url('image.jpg');
  background-size: 100px 150px; /* 宽度100px，高度150px */
}
 
/* 使用百分比 */
div {
  background-size: 50% 75%;
}
 
/* 保持图片的宽高比，缩放图片直到背景图片完全覆盖元素 */
div {
  background-size: cover;
}
 
/* 保持图片的宽高比，缩放图片直到内容完全可见 */
div {
  background-size: contain;
}

background-origin: 用于设置背景图片的定位区域，可以设置为border-box, padding-box, 或 content-box。




/* 背景图片定位于元素的边框框以内*/
div {
  background-origin: border-box;
}
 
/* 背景图片定位于元素的内边距框以内*/
div {
  background-origin: padding-box;
}
 
/* 背景图片定位于元素的内容框以内*/
div {
  background-origin: content-box;
}

background-clip: 用于设置背景的裁剪区域，同样可以设置为border-box, padding-box, 或 content-box。




/* 背景裁剪于元素的边框框以内*/
div {
  background-clip: border-box;
}
 
/* 背景裁剪于元素的内边距框以内*/
div {
  background-clip: padding-box;
}
 
/* 背景裁剪于元素的内容框以内*/
div {
  background-clip: content-box;
}

以上是CSS3中关于背景的三个新属性，它们可以用来实现更为复杂和灵活的背景样式。

- 阅读更多 -

HTML5 和 CSS3 迁移即时入门

System

2024-08-07

所有,css3

HTML5 和 CSS3 是当前网页设计和开发的主要技术。以下是一个简单的 HTML5 文档示例，它展示了如何使用 HTML5 的一些新特性，比如 <header>、<nav>、<section> 和 <footer> 等语义化标签。CSS3 则用于添加视觉效果和布局，比如圆角、阴影和渐变。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 和 CSS3 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        header {
            background-color: #f7f7f7;
            padding: 1em;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 1px 5px #ccc;
            border-radius: 10px;
        }
        nav {
            margin: 1em 0;
            text-align: center;
        }
        section {
            padding: 1em;
            background-color: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 1px 5px #ccc;
            margin-bottom: 1em;
        }
        footer {
            background-color: #f7f7f7;
            padding: 1em;
            border-top: 1px solid #ddd;
            box-shadow: 0 -1px 5px #ccc;
            border-radius: 10px;
        }
        .gradient {
            background: linear-gradient(to bottom, #ffcc00, #ff6600);
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <a href="#">主页</a> |
        <a href="#">关于</a> |
        <a href="#">联系</a>
    </nav>
    <section class="gradient">
        <h2>最新文章</h2>
        <p>这里是一篇文章的内容。</p>
    </section>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

这个示例展示了如何结合使用 HTML5 和 CSS3 创建一个简单的网页布局。通过使用这些技术，开发者可以更容易地创建现代化的网站，同时也为未来的网页设计和开发奠定基础。

System

2024-08-07

所有,css

在前端开发中，HTML和CSS是两个最基本和重要的知识点。HTML用于定义网页的结构，CSS用于定义网页的样式。

文档类型声明(DOCTYPE)

DOCTYPE是用来告知浏览器当前网页使用的HTML版本。通常位于HTML文档的第一行。




<!DOCTYPE html>
<html>
...
</html>

字符集

字符集用来指定HTML文档应该使用哪个字符集编码。




<meta charset="UTF-8">

标题标签(h1-h6)

h1-h6标签用于定义标题，h1为最高级别，h6为最低级别。




<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
...
<h6>这是一个标题</h6>

段落标签(p)

p标签用于定义段落。




<p>这是一个段落。</p>

链接标签(a)

a标签用于定义超链接。




<a href="https://www.example.com">访问Example网站</a>

图像标签(img)

img标签用于定义图像。




<img src="image.jpg" alt="描述文字">

列表标签

有序列表使用ol标签，无序列表使用ul标签，列表项使用li标签。




<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>
 
<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

表格标签

table标签用于定义表格，tr标签用于定义行，td标签用于定义单元格。




<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

表单标签

form标签用于定义表单，input标签用于定义表单项。




<form action="submit.php" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>

CSS样式

CSS用于定义网页的样式，可以通过内联样式、内部样式表和外部样式表三种方式来应用样式。




<!-- 内联样式 -->
<p style="color: blue;">这是一个蓝色的段落。</p>
 
<!-- 内部样式表 -->
<head>
  <style>
    p { color: red; }
  </style>
</head>
 
<!-- 外部样式表 -->
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS选择器

CSS选择器用于选择网页中的元素，可以选择元素本身，类，ID或者其他属性。




/* 选择所有的段落 */
p {
  color: green;
}
 
/* 选择class为"special"的元素 */
.special {
  font-weight: bold;
}
 
/* 选择id为"main"的元素 */
#main {
  background-color: yellow

- 阅读更多 -

CSS margin 属性和CSS 单边外边距属性

System

2024-08-07

所有,css

CSS 的 margin 属性用于设置元素的外边距，它可以影响一个元素的边界框到其父元素或者兄弟元素之间的距离。margin 属性可以有一到四个值，表示元素的上、右、下、左外边距，顺时针方向。

CSS 的单边外边距属性可以单独设置元素的一侧外边距，它们是：

margin-top：设置元素的上外边距。
margin-right：设置元素的右外边距。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。

实例代码：




/* 设置四个方向的外边距 */
.box {
  margin: 10px 20px 30px 40px;
}
 
/* 设置单边外边距 */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
 
/* 使用 margin 属性简写 */
.box {
  margin: 10px 20px; /* 上下、左右外边距分别为10px和20px */
}
 
/* 使用 margin 属性简写 */
.box {
  margin: 10px 20px 30px; /* 上外边距10px，左右外边距20px，下外边距30px */
}
 
/* 设置元素的所有四个外边距相同 */
.box {
  margin: 10px; /* 所有四个方向外边距都是10px */
}

在实际应用中，可以根据需要选择使用 margin 属性的简写形式或单独设置元素的某一侧外边距。

- 阅读更多 -

CSS（盒子模型，定位，浮动，扩展）

System

2024-08-07

所有,css

CSS盒子模型、定位和浮动是前端开发中的重要概念，以下是对应的简要解释和示例代码：

盒子模型(Box Model)：
定义了元素的边框、内边距（padding）、外边距（margin）和内容区域。




.box {
  width: 300px; /* 内容宽度 */
  padding: 20px; /* 内边距 */
  border: 5px solid blue; /* 边框 */
  margin: 10px; /* 外边距 */
}

定位(Positioning)：
CSS提供了相对定位、绝对定位和固定定位三种方式。




/* 相对定位 */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

浮动(Floating)：
可以使元素向左或向右浮动，影响周围元素的布局。




/* 向左浮动 */
.float-left {
  float: left;
  margin-right: 10px;
}
 
/* 向右浮动 */
.float-right {
  float: right;
  margin-left: 10px;
}
 
/* 清除浮动 */
.clearfix {
  clear: both;
}

以上代码展示了如何使用CSS进行盒子模型的设置、元素的定位以及元素的浮动操作，是前端开发中的基础知识。

- 阅读更多 -

CSS高级知识点

System

2024-08-07

所有,css

CSS的高级特性可以包括布局技术、动画、响应式设计、媒体查询等。以下是一些CSS的高级技巧：

布局技术：

使用Flexbox进行布局：




.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用Grid布局：




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

动画：

创建简单的动画：




@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
.animatedBox {
  animation-name: example;
  animation-duration: 4s;
}

响应式设计：

使用媒体查询进行响应式设计：




/* 标准样式 */
.sidebar {
  width: 200px;
  height: 500px;
}
 
/* 屏幕宽度小于768px时 */
@media screen and (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
  }
}

其他高级特性：

使用CSS变量（也称为CSS自定义属性）：




:root {
  --main-bg-color: coral;
}
 
.main {
  background-color: var(--main-bg-color);
}

使用伪元素：




.element::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: green;
}

使用Z-index调整层叠顺序：




.firstElement {
  z-index: 1;
}
 
.secondElement {
  z-index: 2;
}

这些是CSS中一些高级技巧的简单示例。实际应用中，可能需要根据具体设计需求和布局结构来使用这些技术。

- 阅读更多 -

CSS之动画及2D、3D转换

System

2024-08-07

所有,css




/* 定义一个简单的3D旋转动画 */
@keyframes rotate3d {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
 
/* 应用动画到一个元素上 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 20px;
  /* 开启3D空间 */
  perspective: 500px;
  /* 应用动画 */
  animation: rotate3d 5s infinite linear;
}

这段代码定义了一个名为rotate3d的3D旋转动画，并将其应用到拥有box类的HTML元素上。开启了3D空间，使元素在3维空间内进行旋转，从而创建了一个动态的3D效果。

- 阅读更多 -