1. 首页
  2. 标签
  3. css
CSS常见布局整理
System
2024-08-20
所有,css3

CSS 常见的布局有以下几种：

  1. 浮动布局（Float）
  2. Flexbox 布局
  3. Grid 布局
  4. 相对定位布局
  5. 绝对定位布局
  6. 弹性盒子文本布局

以下是每种布局的简单示例代码：

  1. 浮动布局（Float）



.float-layout {
  float: left; /* 或者使用 right */
  width: 50%; /* 需要设置宽度 */
}
  1. Flexbox 布局



.flex-layout {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
  1. Grid 布局



.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  grid-gap: 10px; /* 格子间隔 */
}
  1. 相对定位布局



.relative-layout {
  position: relative;
  top: 10px; /* 相对于原位置向下移动 */
  left: 20px; /* 相对于原位置向右移动 */
}
  1. 绝对定位布局



.absolute-layout {
  position: absolute;
  top: 0;
  right: 0;
}
  1. 弹性盒子文本布局



.text-layout {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

这些布局可以根据具体需求进行组合和调整以实现复杂的页面布局。

- 阅读更多 -
css3 变换 transition
System
2024-08-20
所有,css3

CSS3的transition属性用于设置一个属性的变化时间。这种变化通常在用户交互（如鼠标悬停或焦点）时发生，但也可以在元素的某个属性改变时自动触发。

基本语法如下：




transition: property duration timing-function delay;
  • property：定义应用过渡的CSS属性名。
  • duration：定义过渡效果的持续时间。
  • timing-function：定义过渡的速度曲线，默认为ease。
  • delay：定义过渡效果何时开始，默认是0，意味着过渡效果立即开始。

例子：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
div:hover {
  width: 200px;
}

在上面的例子中，当鼠标悬停在div上时，它的宽度会在1秒钟内从100px变为200px，并且会使用ease-in-out的时间曲线。

- 阅读更多 -
CSS - 文本文字 增加外框、阴影、边框
System
2024-08-20
所有,css3

要给文本添加外框、阴影和边框，可以使用CSS的text-shadow属性来添加阴影，border属性来添加边框，以及box-shadow属性来添加外框。以下是一个简单的示例：




.text-box {
  display: inline-block;
  padding: 10px;
  border: 2px solid #000; /* 文本边框 */
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5); /* 外框阴影 */
  text-shadow: 1px 1px 2px #000; /* 文本阴影 */
}



<div class="text-box">这是有外框、阴影和边框的文本</div>

在这个例子中，.text-box 类定义了文本的外框、阴影和边框样式。display: inline-block 确保元素像行内块元素一样显示，padding 增加了文本与边框之间的空间。border 属性定义了文本的边框，box-shadow 属性创建了外框的阴影效果，而text-shadow 属性为文本本身添加了阴影。

- 阅读更多 -
JS和CSS实现的原生轮播图
System
2024-08-20
所有,css3



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生轮播图</title>
<style>
  .carousel {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
    overflow: hidden;
  }
  .carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    transition: transform 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="carousel">
  <img src="image1.jpg" alt="Image 1" class="current">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
 
<script>
  const images = document.querySelectorAll('.carousel img');
  let currentIndex = 0;
 
  function goToNextImage() {
    images[currentIndex].classList.remove('current');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('current');
  }
 
  setInterval(goToNextImage, 3000);
</script>
 
</body>
</html>

这个简单的代码实例展示了如何使用原生的HTML、CSS和JavaScript来创建一个基本的轮播图效果。轮播图中的图片通过class="current"来控制显示，并且使用setInterval函数每3秒钟切换到下一张图片。这个例子教会开发者如何用最基本的代码实现一个轮播效果，而无需依赖外部库。

- 阅读更多 -
CSS 使背景色透明但是文字颜色不变
System
2024-08-20
所有,css3

要在CSS中实现背景色透明但文字颜色不变，可以使用rgba颜色格式为元素设置背景色，并确保文字颜色是使用十六进制颜色代码或者rgb格式。




.transparent-bg {
    /* 设置半透明背景 */
    background-color: rgba(255, 255, 255, 0.5); /* 白色背景，50% 透明度 */
    
    /* 确保文字颜色不受背景透明度影响 */
    color: #000000; /* 文字颜色为黑色 */
}

HTML 示例：




<div class="transparent-bg">这段文字的颜色不会透明，而背景将是半透明的。</div>

在这个例子中，.transparent-bg 类应用于一个元素，该元素的背景色将是白色的，并且透明度是50%，而文字保持为黑色不透明。

- 阅读更多 -
css动画效果代码淡入淡出折叠展开点击悬浮
System
2024-08-20
所有,css3

在CSS中，可以使用transition属性来实现淡入淡出的效果，并使用:hover伪类来实现悬浮时的折叠展开效果。以下是一个简单的例子：

HTML:




<div class="container">
  <div class="content">
    <p>这里是内容</p>
  </div>
</div>

CSS:




.container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
 
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #f0f0f0;
  transition: transform 0.5s ease-in-out;
  transform: translateY(100%);
}
 
.container:hover .content {
  transform: translateY(0);
}

在这个例子中，.container 是包含折叠内容的容器，.content 是要折叠的内容区域。通过设置.content的transform属性为translateY(100%)，初始时内容位于容器外部，不可见。当鼠标悬浮在.container上时，.content通过transform的过渡效果平滑地下滑至初始位置，实现了淡入的效果。

当鼠标从悬浮区域移出时，内容会再次上升回原来的位置，实现了淡出的效果。这个效果是通过.content的transition属性定义的，当transform属性改变时，会在0.5秒内完成过渡动画。

- 阅读更多 -
CSS流动布局-页面自适应
System
2024-08-20
所有,css3

CSS流动布局（Flow Layout）可以使网页中的元素按照从左到右，从上到下的顺序排列。为了实现页面的自适应，可以使用CSS的百分比宽度、auto 和 flex 布局等技术。

以下是一个简单的例子，展示了如何使用流动布局和百分比宽度来创建一个自适应的页面：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流动布局示例</title>
<style>
  .container {
    width: 80%;
    margin: auto;
  }
  .column {
    float: left;
    width: 33.33%;
    padding: 10px;
  }
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
</style>
</head>
<body>
<div class="container clearfix">
  <div class="column">
    <p>第一列内容</p>
  </div>
  <div class="column">
    <p>第二列内容</p>
  </div>
  <div class="column">
    <p>第三列内容</p>
  </div>
</div>
</body>
</html>

在这个例子中，.container 类定义了一个宽度为80%，并且左右两边有自适应间距的容器。.column 类定义了每个列的宽度为总宽度的33.33%（因为有三个列，所以每个列的宽度应该是100% / 3），并且使用了float: left属性来实现流动布局。.clearfix::after 伪元素用来清除浮动，确保父容器能够包裹住所有子元素。

- 阅读更多 -
使用Code开发Django_模版和CSS
System
2024-08-20
所有,css

在Django中使用模板和CSS，你需要遵循以下步骤：

  1. 创建模板文件：在你的Django应用的templates目录下创建一个HTML文件。



<!-- templates/my_template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="{{ static 'css/style.css' }}">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
  1. 创建CSS文件：在你的静态文件目录（通常是static）下创建一个CSS文件。



/* static/css/style.css */
body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
  1. 配置STATIC_URL和STATICFILES_DIRS：在你的Django设置文件settings.py中设置静态文件路径。



# settings.py
import os
 
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
  1. 在视图中渲染模板：在你的视图文件中，使用render函数来渲染模板。



# views.py
from django.shortcuts import render
 
def my_view(request):
    return render(request, 'my_template.html')
  1. 配置URL：在urls.py中添加对应的URL模式。



# urls.py
from django.urls import path
from .views import my_view
 
urlpatterns = [
    path('my-page/', my_view, name='my-page'),
]

确保你已经设置了Django的静态文件服务中间件django.contrib.staticfiles。

这样，当你访问配置好的URL时，Django将会使用你的模板和CSS文件来渲染页面。

- 阅读更多 -
使用CSS画一个简单的立方体
System
2024-08-20
所有,css3

要使用CSS创建一个简单的立方体，你可以使用3D转换和CSS3的 transform 属性。以下是一个示例代码，它创建了一个具有不同颜色面的立方体：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .cube {
    width: 100px;
    height: 100px;
    margin: 50px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
 
  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #000;
  }
 
  .cube .front {
    background: red;
    transform: translateZ(50px);
  }
 
  .cube .back {
    background: blue;
    transform: translateZ(-50px) rotateY(180deg);
  }
 
  .cube .right {
    background: green;
    transform: translateX(50px) rotateY(90deg);
  }
 
  .cube .left {
    background: orange;
    transform: translateX(-50px) rotateY(-90deg);
  }
 
  .cube .top {
    background: purple;
    transform: translateY(-50px) rotateX(90deg);
  }
 
  .cube .bottom {
    background: yellow;
    transform: translateY(50px) rotateX(-90deg);
  }
 
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="cube">
  <div class="front face"></div>
  <div class="back face"></div>
  <div class="right face"></div>
  <div class="left face"></div>
  <div class="top face"></div>
  <div class="bottom face"></div>
</div>
</body>
</html>

这段代码定义了一个名为 .cube 的容器，它使用 transform-style: preserve-3d; 来确保子元素在3D空间中呈现。每个面 .face 都被绝对定位在 .cube 的中心，并使用 translateZ 和 rotateY 或 rotateX 进行定位和旋转，以创建立方体的视觉效果。动画 @keyframes rotate 使得立方体连续旋转。

- 阅读更多 -
css粘性定位position：sticky
System
2024-08-20
所有,css3

粘性定位是CSS的一个特性，它可以使元素在达到某个滚动位置时变为固定定位。这是通过position: sticky属性来实现的。粘性定位是相对定位和固定定位的混合，它会根据滚动位置在两者之间切换。

以下是一个使用粘性定位的例子：




<!DOCTYPE html>
<html>
<head>
<style>
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 粘性定位元素相对于视口顶部的距离 */
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}
</style>
</head>
<body>
 
<p>向下滚动此页面。</p>
<p>当你到达下面的代码块时，这个元素会变成粘性的。</p>
 
<div class="sticky">我是粘性定位的元素！</div>
 
<p>继续向下滚动，看看发生了什么。</p>
<p>尽量使用更多的文本，以便看到效果。</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<
- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号