分类 css3 下的文章

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

2024-08-16




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 弹性布局案例</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
        }
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            position: fixed;
            top: 50px;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: #555;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content {
            margin-top: 90px;
            height: 1500px;
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="header">顶部固定栏</div>
    <div class="container">固定位置盒子</div>
    <div class="content">内容区域</div>
</body>
</html>

这段代码实现了一个简单的移动端网页布局，顶部和中间固定位置的盒子使用了 position: fixed 属性，并利用 Flex 布局居中显示内容。内容区域通过设置 margin-top 避免被固定位置的盒子遮挡。这个案例简单明了，适合初学者学习和理解 Flex 布局的应用。

- 阅读更多 -

html+css实现登录界面

System

2024-08-16

所有,css3

下面是一个简单的HTML和CSS代码示例，实现了一个基本的登录界面：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .login-container {
    width: 300px;
    padding: 40px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  .form-group input[type="text"],
  .form-group input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Makes sure the padding does not affect the total width of the input */
  }
  .form-group input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background: #5cb85c;
    color: white;
    cursor: pointer;
  }
  .form-group input[type="submit"]:hover {
    background: #4cae4c;
  }
</style>
</head>
<body>
<div class="login-container">
  <h2>Login</h2>
  <form action="">
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <div class="form-group">
      <input type="submit" value="Login">
    </div>
  </form>
</div>
</body>
</html>

这段代码创建了一个简单的登录表单，并使用CSS为其提供了基本的样式。表单包含用户名和密码字段，以及一个提交按钮。通过这个示例，开发者可以学习如何使用HTML和CSS创建Web页面的基本元素。

- 阅读更多 -

将html字符串转换成html标签显示到页面上（转）

System

2024-08-16

所有,css3

要将HTML字符串转换为HTML标签并显示到页面上，可以使用JavaScript的DOM操作。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML String to HTML Elements</title>
</head>
<body>
 
<div id="content"></div>
 
<script>
// 假设这是你的HTML字符串
var htmlString = "<p>这是一个段落。</p><h1>这是一个标题。</h1>";
 
// 获取页面上的容器元素
var contentDiv = document.getElementById('content');
 
// 使用innerHTML属性将字符串转换为HTML元素
contentDiv.innerHTML = htmlString;
</script>
 
</body>
</html>

在这个例子中，我们定义了一个名为htmlString的变量，其中包含了一些HTML标签的字符串。然后我们通过document.getElementById获取了页面上的一个div元素，并将其id设置为content。最后，我们使用innerHTML属性将htmlString中的HTML标记应用到div元素中，这样就可以在页面上显示转换后的HTML内容。

- 阅读更多 -

CSS实现水平垂直居中的几种方法

System

2024-08-16

所有,css3

CSS实现元素的水平垂直居中有多种方法，以下是几种常用的实现方式：

使用flexbox布局:




.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.child {
  /* 子元素内容 */
}

使用grid布局:




.parent {
  display: grid;
  place-items: center;
}
 
.child {
  /* 子元素内容 */
}

使用绝对定位和transform:




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用margin:auto方法:




.parent {
  position: relative;
}
 
.child {
  width: 50%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

这些方法可以实现元素的水平垂直居中，选择哪种方法取决于具体的布局需求和浏览器兼容性要求。

- 阅读更多 -

css3对文字标签不同宽，不同高使用瀑布流对齐显示

System

2024-08-16

所有,css3

要使用CSS3实现瀑布流布局，可以使用column-width、column-gap和column-rule等属性。以下是一个简单的例子，展示如何使用CSS3的多列布局特性来实现文本的瀑布流对齐。

HTML:




<div class="brick-wall">
  <div class="brick">
    <p>这是一段文本。</p>
  </div>
  <!-- 其他的.brick元素 -->
</div>

CSS:




.brick-wall {
  column-count: 5; /* 设置列数 */
  column-gap: 10px; /* 列与列之间的间隔 */
  column-rule: none; /* 列之间没有边框 */
}
 
.brick {
  break-inside: avoid; /* 避免内容分布在不同列 */
  padding: 10px; /* 文本内边距 */
}

这段代码会创建一个带有瀑布流效果的容器，.brick-wall 类定义了多列布局，column-count 设置了列的数量，column-gap 设置了列之间的间隔。.brick 类使用了 break-inside: avoid; 来避免内容跨列显示，增加内边距提供文本之间的一些间隔。

请注意，实际应用中可能需要为.brick添加更多样式，以适应不同宽度和高度的文本。而且，瀑布流布局的完整实现可能需要JavaScript来动态处理加载更多内容或响应式设计等场景。

- 阅读更多 -

css3实现炫彩字体

System

2024-08-16

所有,css3

在CSS3中，可以使用text-shadow属性来实现炫彩的文字效果。以下是一个简单的示例，展示如何给文字添加阴影以创建炫酷的字体效果：




.cool-font {
  font-size: 48px;
  color: #fff; /* 文字颜色为白色 */
  text-shadow:
    1px 1px 0 #ff0000, /* 红色阴影 */
    2px 2px 0 #00ff00, /* 绿色阴影 */
    3px 3px 0 #0000ff, /* 蓝色阴影 */
    4px 4px 0 #ff00ff, /* 紫色阴影 */
    5px 5px 0 #00ffff, /* 青色阴影 */
    6px 6px 0 #ffff00; /* 黄色阴影 */
}




<div class="cool-font">炫酷字体效果</div>

这段代码将创建一个带有六种不同颜色阴影的文字效果。通过增加text-shadow属性中阴影的数量和偏移量，可以创建出更加复杂和逼真的效果。

System

2024-08-16

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D立方体旋转动画</title>
    <style>
        .cube {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            transform-style: preserve-3d;
            animation: rotate 5s infinite linear;
        }
 
        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
 
        .cube div {
            position: absolute;
            width: 100px;
            height: 100px;
            background: skyblue;
            opacity: 0.8;
        }
 
        /* 定义每个面的位置 */
        .cube .front  { background: #f00; transform: translateZ(50px); }
        .cube .back   { background: #0f0; transform: translateZ(-50px); }
        .cube .right  { background: #00f; transform: rotateY(90deg) translateZ(50px); }
        .cube .left   { background: #0ff; transform: rotateY(90deg) translateZ(50px); }
        .cube .top    { background: #ff0; transform: rotateX(90deg) translateZ(50px); }
        .cube .bottom { background: #f0f; transform: rotateX(90deg) translateZ(50px); }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

这段代码创建了一个简单的3D立方体，通过CSS3的@keyframes动画实现了它的旋转效果。.cube定义了基本的3D转换环境，@keyframes rotate定义了从0度旋转到360度的动画，cube div设置了立方体的每个面，并通过类名定义了它们的背景色和位置。动画通过无限循环(infinite)和线性曲线(linear)来保持旋转速度一致。

- 阅读更多 -

css3 盒子线性流动效果

System

2024-08-16

所有,css3

CSS3 提供了很多实现盒子线性流动效果的方法，其中一种是使用 animation 属性结合 @keyframes 规则来创建动画。以下是一个简单的例子，展示如何使用 CSS3 创建一个盒子沿一条直线流动的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    animation: move 2s infinite alternate linear;
  }
 
  @keyframes move {
    from {
      left: 0;
    }
    to {
      left: 200px;
    }
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box 是要流动的盒子，它将沿着 X 轴从左侧移动到右侧的 200px 位置。animation 属性定义了动画的名称 move，持续时间 2s，使动画无限次数循环 infinite，并且指定动画的播放方式 alternate 使其在到达终点时反向播放，linear 保证动画速度是均匀的。

@keyframes move 规则定义了动画的关键帧，从左边的位置 left: 0; 移动到 left: 200px;。

System

2024-08-16

所有,css3




/* 使用伪元素清除浮动 */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
 
/* 使用zoom属性兼容老版本的IE浏览器 */
.clearfix {
  *zoom: 1;
}
 
/* 示例用法 */
<div class="clearfix">
  <div style="float: left;">浮动内容</div>
</div>

这段代码定义了一个clearfix类，它使用:before和:after伪元素来创建一个看不见的块级框，从而包含浮动元素，并清除内部元素的浮动。zoom属性是一个IEhack，用于在老版本的IE浏览器中触发hasLayout，从而使浮动生效。这是一种常见的清除浮动方法，兼容性良好。

- 阅读更多 -

el-button添加浮动样式后点击无效

System

2024-08-16

所有,css3

解释：

在使用Element UI（或其他Vue组件库）的el-button组件时，如果添加了浮动样式（如float: left或float: right），可能会导致按钮点击事件失效。这是因为浮动元素从文档流中移除，不再占据空间，所以其上面的元素会看起来“穿透”了浮动元素，实际上是触发了下面的元素的事件。

解决方法：

清除浮动：在el-button的父元素上添加clearfix类（或者自定义的类名），并添加相应的CSS样式来清除浮动影响。




.clearfix::after {
  content: "";
  display: table;
  clear: both;
}




<div class="clearfix">
  <el-button @click="handleClick">Click Me</el-button>
</div>

使用Flexbox或Grid布局代替浮动。




.flex-container {
  display: flex;
  justify-content: flex-start; /* 或 flex-end，根据需求调整 */
}




<div class="flex-container">
  <el-button @click="handleClick">Click Me</el-button>
</div>

使用position属性代替float，例如使用absolute或relative定位。




.absolute-positioned-button {
  position: absolute; /* 或 relative */
  left: 10px; /* 或 right: 10px */
}




<el-button class="absolute-positioned-button" @click="handleClick">Click Me</el-button>

选择合适的方法解决浮动造成的布局问题即可。

- 阅读更多 -