2024-08-24

弹性盒子(Flexible Box,Flexbox)是CSS3的一种新布局模式,主要是用来提供一种更灵活的方式来对容器中的条目进行排列、对齐和分配空间。

弹性盒子由弹性容器和弹性子项组成。弹性容器是通过设置 display 属性为 flexinline-flex 创建的。弹性子项是其直接子元素。

以下是创建一个基本的弹性盒子的示例代码:




.container {
  display: flex; /* 或者 inline-flex */
  flex-direction: row; /* 容器内条目的排列方向 */
  justify-content: flex-start; /* 水平方向上的对齐方式 */
  align-items: center; /* 垂直方向上的对齐方式 */
}
 
.item {
  /* 子项样式 */
}



<div class="container">
  <div class="item">条目 1</div>
  <div class="item">条目 2</div>
  <div class="item">条目 3</div>
</div>

弹性盒子模型具有以下特性:

  1. 弹性布局是一个灵活的二维布局模型。
  2. 弹性容器内的子项可以在任何方向排列。
  3. 子项可以设置为弹性宽度或弹性高度,以便它们可以根据容器大小自动调整。
  4. 子项可以自动填充剩余空间,或者通过特定的属性设置为固定大小或比例。
  5. 子项可以很容易地在容器内沿任何方向排列。

弹性盒子是创建复杂响应式布局的强大工具,并且得到了所有现代浏览器的支持。

2024-08-24

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

  1. HTML:

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




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

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




body {
    background-color: lightblue;
}
 
h1 {
    color: navy;
    margin-left: 20px;
}
 
p {
    font-size: 16px;
}
  1. 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' 的元素的内容,显示当前时间。

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元素上即可改变鼠标的显示样式。

2024-08-24

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

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

  1. 使用后代选择器(Descendant combinator):



.parent .child {
    /* 样式 */
}
  1. 使用类(Class)或者属性(Attribute)选择器,在父元素上添加特定的类或属性,然后通过这个类或属性选择父元素:



.parent.active {
    /* 样式 */
}
 
/* 或者 */
 
.parent[data-active="true"] {
    /* 样式 */
}
  1. 使用JavaScript来动态改变父元素的类或样式:



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

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

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样式来展示个人信息和教育背景、工作经验和技能。这个示例可以作为创建个人简历的起点,开发者可以根据自己的需求添加更多的细节和样式。

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-23

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

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



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



.center {
  text-align: center;
}
  1. ID选择器:ID选择器用于选择具有特定ID的元素。ID值在整个文档中应该是唯一的。



#header {
  background-color: yellow;
}
  1. 层叠:当多个样式表作用于同一元素时,具有更具体选择器的样式将覆盖其他样式。
  2. 继承:某些CSS属性(如字体和颜色)会从父元素继承到子元素。
  3. 盒模型:CSS盒模型由四个部分组成:content, padding, border 和 margin。
  4. 布局:CSS提供了多种布局方式,如浮动(float)、定位(position)、flexbox和grid等。



.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 伪类和伪元素:伪类和伪元素可以用于选择特殊状态或位置的元素。



a:hover {
  text-decoration: underline;
}
 
p::first-letter {
  font-size: 200%;
}
  1. 媒体查询:可以使用媒体查询来根据设备屏幕大小或分辨率应用不同的样式。



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

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

2024-08-23

CSS 网格布局是一种强大的布局系统,可以简化并且高效地创建复杂的布局。以下是一个简单的网格布局示例:

HTML:




<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

CSS:




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个相等宽度的列 */
  grid-gap: 10px; /* 设置网格之间的间隙 */
  grid-auto-rows: minmax(100px, auto); /* 设置网格的最小高度为100px,允许自动增长 */
  padding: 10px;
}
 
.item1 { 
  grid-column: 1 / 3; /* item1占据第一列的前两个网格 */
  grid-row: 1;
}
 
.item2 { 
  grid-column: 3; /* item2占据第三列的全部网格 */
  grid-row: 1 / 3;
}
 
.item3 { 
  grid-column: 1;
  grid-row: 2;
}
 
.item4 { 
  grid-column: 2;
  grid-row: 2;
}
 
.item5 { 
  grid-column: 3;
  grid-row: 2;
}

这个示例创建了一个具有三列和两行的网格布局。.item1 占据第一行的前两个网格,.item2 跨越第一列的全部高度并占据第三列,.item3.item4 各自占据第二行的两个网格。这个布局使用了网格线的概念,可以非常灵活地定义网格中项目的位置和大小。

2024-08-23

以下是一个简单的悬浮球菜单CSS动画示例:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬浮球菜单CSS动画</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
  }
 
  .menu-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #555;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
  }
 
  .menu-button:hover {
    box-shadow: 0 0 0 3px #000;
  }
 
  .menu {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    width: 50px;
    height: 200px;
    background-color: #333;
    border-radius: 50px 50px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
 
  .menu-button.active ~ .menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
 
  .menu-item {
    width: 50px;
    height: 50px;
    background-color: #555;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
  }
 
  .menu-item:hover {
    transform: scale(1.1);
  }
 
  .menu-item:not(:last-child) {
    margin-bottom: 10px;
  }
</style>
</head>
<body>
 
<div class="menu-button"></div>
<div class="menu">
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
</div>
 
<script>
  const menuButton = document.querySelector('.menu-button');
  const menu = document.querySelector('.menu');
 
  menuButton.addEventListener('click', () => {
    menuButton.classList.toggle('active');
  });
</script>
 
</body>
</html>

这段代码创建了一个悬浮球菜单,当点击悬浮球时,会展开显示三个带有三个图标的菜单项,悬浮球菜单可以通过CSS过渡动画显示或隐藏。这个示例简单易懂,适合作为初学者学习CSS动画的入门项目。

2024-08-23

以下是一个使用原生JavaScript实现的简单下拉框,支持多选和搜索的示例代码:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Select Dropdown with Search</title>
<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content label {
    display: block;
  }
  .dropdown-content label:hover {
    background-color: #f1f1f1;
  }
  .show {display: block;}
</style>
</head>
<body>
 
<div class="dropdown">
  <input type="text" id="myInput" onkeyup="filterFunction()" placeholder="Search.." title="Type in a name">
  <div id="myDropdown" class="dropdown-content">
    <label><input type="checkbox" name="vehicle" value="Bike"> Bike</label>
    <label><input type="checkbox" name="vehicle" value="Car"> Car</label>
    <label><input type="checkbox" name="vehicle" value="Boat"> Boat</label>
    <label><input type="checkbox" name="vehicle" value="Airplane"> Airplane</label>
  </div>
</div>
 
<script>
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("label");
 
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>
 
</body>
</html>

这段代码实现了一个简单的下拉框,用户可以通过输入来搜索和筛选选项。当用户在搜索框中输入时,下拉内容会根据用户的输入实时更新显示。选中的选项(复选框)会被提交,以便在表单提交时使用。