标签 css 下的文章

2024-08-17

CSS像素、物理像素、设备像素、设备像素比(DPR)、PPI(Pixel Per Inch)和Viewport是与网页设计和开发中的屏幕显示有关的概念。

CSS像素：CSS中的逻辑像素，用于定义尺寸。例如，width: 100px; 表示元素宽度为100个CSS像素。
物理像素：显示屏幕上的最小光线点，是屏幕显示的最小单位。
设备像素：手机或其他移动设备上的一个像素，通常与物理像素相同。但是，对于高PPI的设备，可能有多个物理像素对应一个设备像素。
设备像素比(DPR)：设备像素和CSS像素的比例。可以通过window.devicePixelRatio获取。
PPI(Pixel Per Inch)：每英寸像素数，用于衡量屏幕的清晰度。
Viewport：用户网页的可视区域。可以通过<meta name="viewport" content="width=device-width, initial-scale=1.0">设置使网页的宽度默认与设备宽度一致，不进行缩放。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;  /* CSS像素 */
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

以上代码中，div的宽度为100CSS像素，不管在什么设备上查看，div的视觉尺寸大致相同。通过设置viewport，可以确保在不同设备上网页的显示尺寸适配设备屏幕。

- 阅读更多 -

一个案例明白(css变量，路由守卫,路由鉴权,pinia,自定义指令)

System

2024-08-17

所有,css

由于提出的问题涉及到多个不同的技术领域，并且每个领域都需要一定的知识储备和实践经验才能完整解答，我将为每个问题提供简要的解答和示例代码。

CSS 变量 (Custom Properties):
CSS 变量允许我们定义可以在整个文档中重复使用的值。




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

路由守卫 (Route Guard):
在前端框架中（如 Vue.js），路由守卫用于控制路由的访问权限。




const router = new VueRouter({
  routes: [
    {
      path: '/protected',
      component: ProtectedComponent,
      beforeEnter: (to, from, next) => {
        if (!authenticated) { // 检查用户是否认证
          next('/login'); // 如果没有，重定向到登录页面
        } else {
          next(); // 如果已认证，继续
        }
      }
    }
  ]
});

路由鉴权 (Navigation Guards):
与路由守卫类似，鉴权通常在组件内部进行处理。




const MyComponent = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    if (authenticated) { // 检查用户是否认证
      next();
    } else {
      next('/login'); // 如果没有，重定向到登录页面
    }
  }
};

Pinia:
Pinia 是 Vue.js 的状态管理库，它使用 Vue 的响应式系统。




// 定义 store
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore('main', {
  state: () => ({ counter: 0 }),
  actions: {
    increment() {
      this.counter++
    }
  }
})
 
// 使用 store
import { useMainStore } from './stores/useMainStore'
 
const store = useMainStore()
store.increment()

自定义指令 (Custom Directives):
自定义指令可以用来包装DOM的特定行为。




// 注册一个全局自定义指令 `v-focus`，该指令用于元素创建后立即聚焦
Vue.directive('focus', {
  // 当绑定元素插入到DOM中
  inserted: function (el) {
    el.focus(); // 聚焦元素
  }
});
 
// 使用
<input v-focus>

以上代码示例简单展示了每个技术的概念和基本用法，但实际应用中每个技术都需要根据具体场景进行深入学习和应用。

- 阅读更多 -

css 让图片自适应变化

System

2024-08-17

所有,css

要让图片自适应变化，可以使用CSS的max-width和height属性，并将width设置为100%，这样图片就会根据父元素的宽度进行自适应变化。同时，为了防止图片变形，可以设置display: block。

下面是实现图片自适应变化的CSS代码示例：




img {
  max-width: 100%;
  height: auto;
  display: block;
}

将上述CSS添加到你的样式表中，并确保所有的图片元素都应用了这个样式。当图片的父元素宽度变化时，图片也会相应地缩放以适应新的宽度。

- 阅读更多 -

前端css、js、bootstrap、vue2.x、ajax查漏补缺

System

2024-08-17

所有,ajax

在前端开发中，CSS、JavaScript、Bootstrap、Vue 2.x 和 AJAX 是常用的技术。以下是一个简单的例子，展示如何使用这些技术创建一个简单的用户界面，该界面可以通过 AJAX 异步获取数据并显示在表格中。




<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div id="app" class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users">
                    <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                users: []
            },
            created() {
                this.fetchUsers();
            },
            methods: {
                fetchUsers() {
                    $.ajax({
                        url: 'https://jsonplaceholder.typicode.com/users',
                        type: 'GET',
                        dataType: 'json',
                        success: (data) => {
                            this.users = data;
                        },
                        error: (error) => {
                            console.error('Error fetching users:', error);
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

这段代码首先定义了一个 Vue 实例，在实例被创建时（created 钩子），通过 AJAX 从一个示例用户数据 API 获取用户数据，并将其存储在 Vue 实例的 users 数组中。然后，使用 Vue 的 v-for 指令在表格中迭代 users 数组，将每个用户的信息显示在表格中。这个简单的例子展示了如何将这些技术结合在一起，以创建一个响应用户界面并能够异步获取数据。

- 阅读更多 -

CSS定位——子绝父相的原理（相对定位和绝对定位）

System

2024-08-17

所有,html5

子绝父相，意味着子元素将相对于最近的已定位（即非 static 定位）的祖先元素进行定位。如果没有已定位的祖先元素，则子元素将相对于最初的包含块（即body元素）进行定位。

以下是一个简单的例子，演示了相对定位和绝对定位的使用：

HTML:




<div class="parent">
  <div class="child">我是子元素</div>
</div>

CSS:




.parent {
  position: relative; /* 设置为相对定位 */
  width: 300px;
  height: 200px;
  background-color: lightblue;
}
 
.child {
  position: absolute; /* 设置为绝对定位 */
  top: 20px;   /* 距离父元素顶部20px */
  left: 20px;  /* 距离父元素左侧20px */
  width: 100px;
  height: 100px;
  background-color: coral;
}

在这个例子中，.child 元素是 .parent 元素的子元素，并且它是绝对定位的。由于 .parent 是相对定位的，所以 .child 元素将相对于 .parent 进行定位，即距离 .parent 顶部和左侧各20px。如果没有 .parent 的相对定位，.child 将相对于初始的包含块进行定位。

- 阅读更多 -

编程笔记 html5&css&js 025 HTML输入类型（1/2）

System

2024-08-17

所有,html5

在HTML中，<input>元素的type属性定义了不同的输入类型。以下是一些常用的输入类型：

text - 用于文本输入。
password - 用于密码输入，输入的字符会被星号*替代。
submit - 用于提交表单。
radio - 用于单选按钮。
checkbox - 用于复选框。
button - 用于可点击的按钮，通常与JavaScript一起使用。
email - 用于电子邮件地址输入，可以进行基本的验证。
url - 用于网址输入，可以进行基本的验证。
number - 用于数值输入，可以包括额外的属性来限制输入的数值范围和步长。
date - 用于日期选择。
time - 用于时间选择。
file - 用于文件上传。
hidden - 用于隐藏输入字段。
range - 用于滑动条，通常用于选择数字范围。

以下是一个简单的HTML表单示例，包括了一些常见的输入类型：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Form</title>
</head>
<body>
<form action="/submit">
  Username: <input type="text" name="username"><br>
  Password: <input type="password" name="password"><br>
  Email: <input type="email" name="email"><br>
  Date of Birth: <input type="date" name="dob"><br>
  Gender:
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  Favorite Colors:
  <input type="checkbox" id="red" name="color" value="red">
  <label for="red">Red</label>
  <input type="checkbox" id="green" name="color" value="green">
  <label for="green">Green</label>
  <input type="checkbox" id="blue" name="color" value="blue">
  <label for="blue">Blue</label><br>
  Bio: <textarea name="bio" rows="5" cols="33"></textarea><br>
  Photo: <input type="file" name="photo"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

这个表单包括了文本输入、密码输入、电子邮件输入、日期选择、单选按钮、复选框、文本区域、文件上传以及提交按钮。这些是构建交互式Web表单的基本元素。

- 阅读更多 -

jquery动态引入js和css

System

2024-08-17

所有,jquery

在jQuery中，你可以使用$.getScript()方法来动态引入JavaScript文件，使用$.getStylesheet()方法来动态引入CSS文件，但这些方法并不是jQuery的标准方法，它们通常是由社区提供的插件或者自定义的函数。

以下是一个使用$.getScript()和自定义$.getStylesheet()函数的例子：




// 动态引入JavaScript文件
$.getScript("path/to/your/script.js", function() {
    console.log("Script loaded!");
});
 
// 自定义动态引入CSS文件的函数
$.getStylesheet = function(href) {
    var cssLink = $("<link rel='stylesheet' type='text/css' />");
    cssLink.attr({
        href: href
    });
    $("head").append(cssLink); 
};
 
// 使用自定义函数动态引入CSS文件
$.getStylesheet("path/to/your/style.css");

请注意，这些方法不是官方支持的，你需要确保它们不会破坏你的页面，并且要在你的项目中进行适当的测试。如果你需要官方支持的方法，考虑使用原生的JavaScript，或者使用现代的模块导入方法，如ES6的import语句。

System

2024-08-17

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家乡风景</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('hometown-background.jpg') no-repeat center center fixed;
            background-size: cover;
        }
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="background">
        <div class="content">
            <h1>欢迎回家</h1>
            <p>这里是您的家乡，一个充满生机和活力的地方。</p>
        </div>
    </div>
</body>
</html>

这个简单的HTML页面展示了如何使用CSS为一个全屏背景图片创建一个简单的家乡风景网页，同时在背景图上覆加文字内容。通过CSS的background-size: cover;属性确保背景图片覆盖整个页面，并保持其宽高比。文字内容通过绝对定位放置在背景图的中央。

System

2024-08-17

所有,jquery

以下是一个简单的HTML模板，使用了Bootstrap和jQuery来实现响应式设计，并且包含了红色中国文化元素。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红色中国主题</title>
    <!-- 引入 Bootstrap 样式 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        body {
            background-color: #D41C1C; /* 红色背景 */
            color: white;
        }
        .jumbotron {
            background-color: #D41C1C; /* 红色 Jumbotron */
            color: white;
            text-shadow: 2px 2px 2px #000;
        }
        /* 其他样式 */
    </style>
</head>
<body>
    <header>
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">红色中国</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
 
    <main>
        <!-- 主要内容 -->
        <div class="jumbotron">
            <h1 class="display-4">欢迎来到红色中国</h1>
            <p class="lead">这里是中国的红色文化展示，让我们一起感受中国的文化魅力。</p>
            <hr class="my-4">
            <p>更多精彩内容，请登录查看。</p>
            <a class="btn btn-primary btn-lg" href="#" role="button">登录</a>
        </div>
 
        <!-- 其他内容 -->
    </main>
 
    <footer class="footer bg-dark">
        <div class="container">
            <span class="text-white">版权所有 © 红色中国</span>
        </div>
    </footer>

- 阅读更多 -

手写jQuery核心代码Day1，CSS定位

System

2024-08-17

所有,jquery




// 定义一个简单的jQuery构造器
var jQuery = function(selector) {
    var elements = document.querySelectorAll(selector);
    this.length = elements.length;
    for (var i = 0; i < elements.length; i++) {
        this[i] = elements[i];
    }
    // 这里可以添加更多的jQuery方法
};
 
// jQuery原型上的css方法，用于设置或获取元素的样式
jQuery.prototype.css = function(prop, value) {
    if (arguments.length === 1) {
        // 如果只提供了一个参数，则返回第一个元素的样式值
        if (this[0]) {
            return window.getComputedStyle(this[0], null)[prop];
        }
    } else if (arguments.length === 2) {
        // 如果提供了两个参数，则设置每个元素的样式
        for (var i = 0; i < this.length; i++) {
            this[i].style[prop] = value;
        }
    }
    // 返回当前jQuery对象，以实现链式调用
    return this;
};
 
// 使用示例
var $p = new jQuery('p');
$p.css('color', 'red'); // 将所有p标签的文字颜色设置为红色
console.log($p.css('color')); // 输出第一个p标签的文字颜色

这段代码首先定义了一个简单的jQuery构造器，它接受一个CSS选择器作为参数，并返回一个包含所有匹配元素的jQuery对象。然后，我们在jQuery的原型上定义了一个css方法，该方法可以用来获取或设置元素的样式。当调用css方法来设置样式时，它会遍历jQuery对象内的所有元素，并将指定的样式属性应用到每个元素上。当获取样式时，它会返回第一个匹配元素的计算后的样式值。最后，我们提供了一个使用示例来展示如何使用这个自定义的css方法。

- 阅读更多 -