标签 css 下的文章

Java Web基础Web前端简介之html+javascript+css

2024-08-24

HTML、JavaScript 和 CSS 是构建 Web 前端的三种核心技术。

HTML：
HTML 是用来制作网页的标准标记语言。它被用来结构化信息（包括文字、图片、链接等），并提供网页的内容。




<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击这里访问我的主页</a>
</body>
</html>

CSS：
CSS 是用来描述网页样式的语言。通过 CSS，开发者可以控制网页的布局、颜色、字体等外观。




body {
    background-color: lightblue;
}
 
h1 {
    color: navy;
    margin-left: 20px;
}
 
p {
    font-size: 16px;
}

JavaScript：
JavaScript 是一种编程语言，可以用来增强网页的交互性。比如，你可以使用 JavaScript 来创建动态的网页，用户可以与之互动（例如：表单验证、动画、等等）。




function showTime() {
    const d = new Date();
    const h = d.getHours();
    const m = d.getMinutes();
    const s = d.getSeconds();
    document.getElementById('myClock').innerHTML = `${h}:${m}:${s}`;
}
 
setInterval(showTime, 1000);

以上代码展示了如何使用 JavaScript 创建一个简单的时钟。这段代码每秒更新一次页面上 id 为 'myClock' 的元素的内容，显示当前时间。

css怎么设置鼠标样式

2024-08-24

在CSS中，可以使用cursor属性来设置鼠标样式。该属性允许你定义当鼠标指针移动到元素上时应该显示的光标类型。

以下是一些常用的cursor值：

default：默认光标（通常是一个箭头）
pointer：指针（通常表示链接）
crosshair：十字线
text：文本模式
wait：等待光标（通常是一个沙漏或圆形加载符号）
move：移动图标
not-allowed：操作不允许时的光标（通常是一个禁止标志）

你可以这样设置元素的鼠标样式：




.element {
  cursor: pointer;
}

或者使用不同的值来改变鼠标样式：




.element-text {
  cursor: text;
}
 
.element-move {
  cursor: move;
}
 
.element-wait {
  cursor: wait;
}

将上述类应用到相应的HTML元素上即可改变鼠标的显示样式。

css通过子元素选择父元素

2024-08-24

在CSS中，直接通过子元素选择父元素是不可行的，因为CSS的选择器是从父元素向子元素的方向工作的，而不支持子元素向父元素的反向选择。

如果你需要通过子元素的状态来改变父元素的样式，你可以使用一些间接的方法来实现这个需求。以下是一些常用的方法：

使用后代选择器（Descendant combinator）:




.parent .child {
    /* 样式 */
}

使用类（Class）或者属性（Attribute）选择器，在父元素上添加特定的类或属性，然后通过这个类或属性选择父元素：




.parent.active {
    /* 样式 */
}
 
/* 或者 */
 
.parent[data-active="true"] {
    /* 样式 */
}

使用JavaScript来动态改变父元素的类或样式：




document.querySelector('.child').addEventListener('event', function() {
    this.closest('.parent').classList.add('active');
    // 或者直接修改样式
    this.closest('.parent').style.color = 'red';
});

请注意，虽然CSS本身不支持直接通过子元素选择父元素，但是在未来的CSS选择器中可能会引入子元组选择器（:has()），该选择器可以实现通过子元素选择父元素的功能，但是这个选择器目前还没有标准化，并且在现代浏览器中还不被支持。

使用html和css实现个人简历表单的制作

2024-08-24

以下是一个简单的个人简历网页示例，使用HTML和CSS构建：




<!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 {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
  .header {
    text-align: center;
    margin-bottom: 20px;
  }
  .section {
    margin-bottom: 20px;
  }
  .section-title {
    text-align: center;
    margin-bottom: 10px;
  }
  .info-item {
    margin-bottom: 5px;
  }
  .info-label {
    width: 100px;
    display: inline-block;
  }
  .info-content {
    display: inline-block;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>个人简历</h1>
</div>
 
<div class="section">
  <h2 class="section-title">基本信息</h2>
  <div class="info-item">
    <span class="info-label">姓名:</span>
    <span class="info-content">张三</span>
  </div>
  <div class="info-item">
    <span class="info-label">联系电话:</span>
    <span class="info-content">1234567890</span>
  </div>
  <div class="info-item">
    <span class="info-label">电子邮件:</span>
    <span class="info-content">zhangsan@example.com</span>
  </div>
  <div class="info-item">
    <span class="info-label">居住地址:</span>
    <span class="info-content">123 广州路, 上海市</span>
  </div>
</div>
 
<div class="section">
  <h2 class="section-title">教育背景</h2>
  <div class="info-item">
    <span class="info-content">硕士，计算机科学，某大学，2010 - 2013</span>
  </div>
  <div class="info-item">
    <span class="info-content">本科，数学，某大学，2005 - 2008</span>
  </div>
</div>
 
<div class="section">
  <h2 class="section-title">工作经验</h2>
  <div class="info-item">
    <span class="info-content">技术主管，某公司，2015 - 至今</span>
  </div>
  <div class="info-item">
    <span class="info-content">软件工程师，某公司，2013 - 2015</span>
  </div>
</div>
 
<div class="section">
  <h2 class="section-title">技能</h2>
  <div class="info-item">
    <span class="info-content">Python</span>
  </div>
  <div class="info-item">
    <span class="info-content">JavaScript</span>
  </div>
  <div class="info-item">
    <span class="info-content">HTML/CSS</span>
  </div>
</div>
 
</body>
</html>

这个简历使用了基本的HTML结构和CSS样式来展示个人信息和教育背景、工作经验和技能。这个示例可以作为创建个人简历的起点，开发者可以根据自己的需求添加更多的细节和样式。

【CSS预处理语言】less快速入门

2024-08-24




// 定义变量
@font-size-base: 16px;
@link-color: #428bca; // 蓝色链接
 
// 定义混合（函数）
.border-radius(@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
 
// 使用变量和混合
button {
  color: @link-color;
  .border-radius(3px); // 调用混合
}
 
// 嵌套规则
nav {
  ul {
    list-style-type: none;
    padding-left: 0;
    
    li {
      display: inline;
      
      a {
        text-decoration: none;
        padding: 5px 10px;
        margin-right: 10px;
        
        &:hover {
          color: darken(@link-color, 10%); // 使用less函数
          text-decoration: underline;
        }
      }
    }
  }
}

这个例子展示了如何在LESS中定义变量、混合（函数）、嵌套规则，并使用一些内置的函数，如darken来计算颜色的深色变体。这样的代码可以提高CSS的可维护性和生产力。

2024-08-24

所有,ajax




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios Example</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function fetchData() {
            const inputValue = document.getElementById('myInput').value;
            const selectValue = document.getElementById('mySelect').value;
            const headers = {
                'Authorization': 'Bearer ' + inputValue,
                'Another-Header': selectValue
            };
            axios.get('https://api.example.com/data', { headers: headers })
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.error(error);
                });
        }
    </script>
</head>
<body>
    <input type="text" id="myInput" placeholder="Enter token">
    <select id="mySelect">
        <option value="value1">Option 1</option>
        <option value="value2">Option 2</option>
    </select>
    <button onclick="fetchData()">Fetch Data</button>
</body>
</html>

这段代码使用Axios库来发送一个GET请求到指定的接口，并携带了从输入框和下拉选择器中获取的数据作为请求头。当用户点击按钮时，fetchData函数会被触发，并发送请求。请求成功后，响应数据会被打印到控制台，失败时会打印错误信息。

HTML页面中引入CSS和JS的方法及使用建议（以例子说明）

2024-08-24

所有,javascript




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS和JS引入示例</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 内联CSS样式 -->
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <!-- 引入外部JS文件 -->
    <script src="script.js"></script>
    <!-- 内联JavaScript代码 -->
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            console.log('页面已加载完成！');
        });
    </script>
</body>
</html>

在这个示例中，我们展示了如何在HTML页面中引入外部CSS文件和JS文件，以及如何使用内联的CSS和JavaScript代码。通过这样的方式，我们可以更好地组织我们的代码，使得HTML标记语言和样式、行为分离，便于维护和优化。

CSS 核心知识点总结

2024-08-23

CSS (Cascading Style Sheets) 是用于描述网页样式的语言，主要用于控制网页布局和样式，以便让网页更加美观。以下是一些CSS的核心概念和应用实例：

选择器：选择器用于选择需要应用样式的元素。例如，要选择所有的段落元素，可以使用p选择器。




p {
  color: blue;
}

属性和值：属性是要改变的样式属性，值是应用于该属性的具体数值。例如，color属性和blue值用于将段落文本颜色设置为蓝色。
类选择器：类选择器可以被用于任何元素，通过为元素添加一个特定的类名来选择它。




.center {
  text-align: center;
}

ID选择器：ID选择器用于选择具有特定ID的元素。ID值在整个文档中应该是唯一的。




#header {
  background-color: yellow;
}

层叠：当多个样式表作用于同一元素时，具有更具体选择器的样式将覆盖其他样式。
继承：某些CSS属性（如字体和颜色）会从父元素继承到子元素。
盒模型：CSS盒模型由四个部分组成：content, padding, border 和 margin。
布局：CSS提供了多种布局方式，如浮动（float）、定位（position）、flexbox和grid等。




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

伪类和伪元素：伪类和伪元素可以用于选择特殊状态或位置的元素。




a:hover {
  text-decoration: underline;
}
 
p::first-letter {
  font-size: 200%;
}

媒体查询：可以使用媒体查询来根据设备屏幕大小或分辨率应用不同的样式。




@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这些是CSS的核心概念，理解这些概念有助于你更好地应用CSS进行网页设计和开发。

2024-08-23

所有,react native




import React from 'react';
import { Form, Input, Button, Select } from 'antd';
import { useEmotionCss } from 'create-emotion-styled';
 
const { Option } = Select;
 
const RegistrationForm: React.FC = () => {
  const css = useEmotionCss`
    .form-title {
      color: #262626;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 50px;
    }
  `;
 
  return (
    <div className={css}>
      <h2 className="form-title">注册</h2>
      <Form layout="vertical">
        {/* 省略其他表单项的定义 */}
        <Form.Item name="department" label="部门">
          <Select placeholder="请选择部门">
            <Option value="技术部">技术部</Option>
            <Option value="销售部">销售部</Option>
            <Option value="市场部">市场部</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary">注册</Button>
        </Form.Item>
      </Form>
    </div>
  );
};
 
export default RegistrationForm;

这段代码展示了如何在React组件中使用useEmotionCss来定义和使用CSS。它定义了一个简单的注册表单，并为其设置了基本的样式。这个例子使用了create-emotion-styled库来提供CSS样式，这是一个实用的库，可以帮助开发者在React项目中更好地管理样式。