1. 首页
  2. 标签
  3. css
Web前端最全评价页面jQuery的用vue改写，CSS浮动的使用与清除
System
2024-08-13
所有,jquery



<template>
  <div id="app">
    <div class="header">
      <h1>{{ title }}</h1>
    </div>
    <div class="main">
      <div class="sidebar">
        <sidebar-component></sidebar-component>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
    <div class="footer">
      <p>{{ copyright }}</p>
    </div>
  </div>
</template>
 
<script>
import SidebarComponent from './components/SidebarComponent.vue';
 
export default {
  name: 'App',
  components: {
    SidebarComponent
  },
  data() {
    return {
      title: 'Vue.js 实现的页面',
      copyright: '版权所有 © Vue.js'
    };
  }
};
</script>
 
<style>
#app {
  width: 100%;
}
.header, .footer {
  text-align: center;
  background-color: #ddd;
  padding: 10px 0;
  clear: both;
}
.main {
  padding: 10px;
}
.sidebar {
  float: left;
  width: 200px;
}
.content {
  overflow: hidden;
  margin-left: 210px; /* 对应 .sidebar 的宽度 */
}
</style>

这个Vue组件模拟了使用jQuery时的页面结构，包括了头部、侧边栏、主内容区和底部。在样式中，使用了浮动来布局侧边栏和主内容区，并在主内容区添加了overflow: hidden来清除浮动。这是一个简化的例子，展示了如何在Vue中使用组件和样式来创建一个基本的页面布局。

- 阅读更多 -
Nuxt3+Typescript+Unocss开源官网项目
System
2024-08-13
所有,typescript

以下是一个使用Nuxt 3、TypeScript 和 UnoCSS 的开源项目的基本框架代码示例：

nuxt.config.ts 配置文件:




import { defineNuxtConfig } from 'nuxt3'
 
export default defineNuxtConfig({
  // 配置选项
  buildModules: [
    // 引入Unocss模块
    '@unocss/nuxt',
    // ...其他模块
  ],
  unocss: {
    // UnoCSS 配置
    presets: [
      // 预设
    ],
  },
  // 其他配置...
})

pages/index.vue 页面文件:




<template>
  <main>
    <h1>欢迎来到我的网站</h1>
    <!-- 使用Unocss定义样式 -->
    <p class="text-center text-blue-500">这是一个居中且带有蓝色的文本。</p>
  </main>
</template>
 
<script setup lang="ts">
// TypeScript 脚本部分
</script>

components/MyComponent.vue 组件文件:




<template>
  <button class="btn">按钮</button>
</template>
 
<script setup lang="ts">
// TypeScript 脚本部分
</script>
 
<style scoped>
/* 使用Unocss定义样式 */
.btn {
  @apply bg-green-500 p-2 rounded;
}
</style>

这个示例展示了如何在Nuxt 3项目中使用TypeScript和Unocss。在nuxt.config.ts中配置了Nuxt和Unocss，在页面和组件中使用Unocss的at-rules定义样式。

- 阅读更多 -
【Java Web】前置HTML和CSS
System
2024-08-13
所有,html

在Java Web开发中，HTML和CSS通常是用来定义网页的结构和样式。以下是一个简单的HTML模板，它包含了一些基本的HTML标签和一些CSS样式。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .content {
            margin: 20px;
            padding: 20px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>我的网站</h1>
    </div>
    <div class="content">
        <h2>内容标题</h2>
        <p>这里是内容部分。</p>
    </div>
</body>
</html>

这个HTML文档定义了一个简单的网页，包括一个头部（header），主体内容（content）。CSS则用于设置文档的背景颜色、字体、边距和内容区块的样式。这是开始任何Java Web项目时创建的基础模板，后续可以根据需求添加更多的HTML元素和CSS样式。

- 阅读更多 -
CSS linear-gradient 实现背景双色或多色，颜色渐变，颜色分明
System
2024-08-13
所有,css3

CSS 中的 linear-gradient 函数可以用来创建线性渐变背景，实现多种颜色的渐变效果。以下是一个实现双色渐变背景的例子：




.background-gradient {
  background-image: linear-gradient(to right, #FFC107, #FF5722);
}

在这个例子中，背景从左边的黄色(#FFC107)渐变到右边的红色(#FF5722)。

如果你想要实现多种颜色的渐变，可以在 linear-gradient 函数中添加更多的颜色值，并指定它们的位置。例如，三种颜色的渐变：




.background-gradient {
  background-image: linear-gradient(to right, #30CFD0 0%, #330867 100%);
}

在这个例子中，背景从左边的浅蓝色(#30CFD0)渐变到右边的深紫色(#330867)。

使用百分比可以精确控制每种颜色的范围：




.background-gradient {
  background-image: linear-gradient(to right, #30CFD0 0%, #631A77 50%, #330867 100%);
}

在这个例子中，背景首先从左边的浅蓝色(#30CFD0)开始，在中间变为深紫色(#631A77)，最后在右边结束为深紫色(#330867)。

- 阅读更多 -
css实现圆角三角形，圆角三角形的实现
System
2024-08-13
所有,css3

在CSS中，可以使用伪元素和border-radius属性来实现圆角三角形。以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角三角形</title>
<style>
  .rounded-triangle {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 100px 50px 0;
    border-color: transparent transparent transparent black;
    overflow: hidden;
  }
 
  .rounded-triangle:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px 0 0 0;
    background-color: black;
  }
</style>
</head>
<body>
 
<div class="rounded-triangle"></div>
 
</body>
</html>

这段代码会创建一个黑色的圆角三角形。border-radius属性设置了三角形边缘的圆角半径，使其看起来更像一个圆角三角形。伪元素::after用于创建一个带有圆角的黑色条带，从而形成一个圆角三角形的效果。

- 阅读更多 -
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
System
2024-08-13
所有,css3

CSS中的绝对定位(absolute)和相对定位(relative)是两种非常常用的定位方式。

绝对定位(absolute)：

绝对定位是一种较为复杂的定位方式，它会将元素从文档流中完全移除，然后使用top、right、bottom、left属性相对于最近的已定位（非 static）祖先元素进行定位。如果没有已定位的祖先元素，那么它的位置则相对于最初的包含块。




div.absolute {
  position: absolute;
  top: 50px;
  left: 100px;
}

在这个例子中，div将被定位到距离其最近的已定位祖先元素顶部50px、左侧100px的位置。如果没有已定位的祖先元素，它将相对于初始包含块定位。

相对定位(relative)：

相对定位是一种较为基础的定位方式，它不会将元素从文档流中移除，而是通过top、right、bottom、left属性相对于元素在文档流中的原始位置进行定位。




div.relative {
  position: relative;
  top: 50px;
  left: 100px;
}

在这个例子中，div将被向下移动50px、向右移动100px，但它仍然占据原来的空间。其他元素在div原位置被移除后会重新排列。

总结：

绝对定位是相对于最近的已定位（非 static）祖先元素进行定位，而相对定位是相对于元素在文档流中的原始位置进行定位。绝对定位会从文档流中移除元素，而相对定位不会。

- 阅读更多 -
发光立方体效果 html+css
System
2024-08-13
所有,css3

要创建一个发光立方体效果，我们可以使用CSS3的3D转换和动画功能。以下是一个简单的示例代码：

HTML:




<div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
</div>

CSS:




.cube {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
  animation: glow 5s infinite alternate;
}
 
.side {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #ff0000;
  opacity: 0.5;
}
 
.front {
  transform: translateZ(50px);
}
 
.back {
  transform: translateZ(-50px);
}
 
.right {
  transform: rotateY(90deg) translateZ(50px);
}
 
.left {
  transform: rotateY(90deg) translateZ(50px);
}
 
.top {
  transform: rotateX(90deg) translateZ(50px);
}
 
.bottom {
  transform: rotateX(90deg) translateZ(50px);
}
 
@keyframes glow {
  0% {
    box-shadow: 0 0 10px #fff;
  }
  100% {
    box-shadow: 0 0 20px #ff0;
  }
}

这段代码创建了一个立方体，并通过@keyframes定义了一个名为glow的动画，使立方体持续发光。动画中立方体的光晕动画由白变为黄，模拟了发光效果。

- 阅读更多 -
css3实现旋转
System
2024-08-13
所有,css3

CSS3中实现元素的旋转，可以使用transform属性中的rotate()函数。

例如，要将一个元素旋转45度，可以这样写：




.rotated-element {
  transform: rotate(45deg);
}

在HTML中应用这个类：




<div class="rotated-element">这是一个旋转了的元素</div>

旋转的中心默认是元素的中心，如果需要改变旋转的中心，可以使用transform-origin属性。例如，将旋转中心设置为左上角：




.rotated-element {
  transform-origin: left top;
  transform: rotate(45deg);
}

旋转动画可以通过CSS动画实现：




@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.rotated-element {
  animation: rotateAnimation 2s linear infinite;
}

这段代码定义了一个名为rotateAnimation的关键帧动画，它从0度旋转至360度，持续时间为2秒，并且无限循环。

- 阅读更多 -
【CSS】使元素在父元素中居中显示的几种方法
System
2024-08-13
所有,css3

要使元素在父元素中居中显示，可以使用不同的CSS技术。以下是几种常用的居中方法：

  1. 使用Flexbox布局:



.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
 
.child {
  /* 子元素不需要额外样式 */
}
  1. 使用Grid布局:



.parent {
  display: grid;
  place-items: center; /* 水平垂直居中 */
}
 
.child {
  /* 子元素不需要额外样式 */
}
  1. 使用绝对定位和transform:



.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用margin:auto方法（适用于块级元素）:



.parent {
  position: relative;
}
 
.child {
  width: 50%; /* 需要指定宽度 */
  height: 50%; /* 需要指定高度 */
  margin: auto;
  position: absolute; /* 需要绝对定位 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

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

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号