分类前端技术下的文章

2024-08-18

在移动端适配中，可以使用rem单位结合less来实现响应式布局，同时借助Bootstrap提供的现成框架。

使用rem单位：

rem（root em）是一个相对单位，相对于根元素（即<html>标签）的字体大小。可以通过改变根元素字体大小来实现响应式布局。




// 使用less
html {
  font-size: 16px; // 默认字体大小
}
 
// 调整rem单位
.element {
  width: 10rem; // 相当于10 * 16px = 160px
}
 
// 媒体查询来改变根字体大小实现响应式
@media (max-width: 600px) {
  html {
    font-size: 12px; // 调小字体大小
  }
}

使用Bootstrap框架：

Bootstrap是一个流行的开源响应式前端框架，它使用rem单位和媒体查询来实现响应式设计。




<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 
<!-- 使用Bootstrap的容器类来创建布局 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>
 
<!-- 引入Bootstrap JS（可选，如果需要使用框架提供的JavaScript插件） -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Bootstrap的网格系统使用rem单位和媒体查询来创建12列的响应式布局。开发者可以使用预定义的类来快速创建适应不同屏幕尺寸的布局。

综上所述，移动端适配可以通过rem单位和媒体查询结合使用less或者采用成熟的响应式框架（如Bootstrap）来实现。

- 阅读更多 -

CSS学习——网页的变美指南

System

2024-08-18

所有,css




/* 设置基本字体大小和字体 */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    background-color: #FFFFFF;
}
 
/* 设置段落文本的行高和间距 */
p {
    line-height: 1.5;
    margin: 0 0 20px;
}
 
/* 设置链接的默认颜色和鼠标悬停时的颜色 */
a {
    color: #0088CC;
    text-decoration: none;
}
a:hover {
    color: #005580;
    text-decoration: underline;
}
 
/* 设置标题的样式，h1最大，h3最小 */
h1 {
    font-size: 24px;
    color: #003366;
}
h2 {
    font-size: 20px;
    color: #005580;
}
h3 {
    font-size: 18px;
    color: #0077A8;
}
 
/* 设置图片边界为0，并禁用图像链接 */
img {
    border: none;
}
 
/* 设置列表项标记的颜色和外边距 */
ul, ol {
    margin: 0 0 15px 30px;
}
ul li, ol li {
    color: #333333;
    list-style-position: inside;
}
 
/* 设置表格的边框和文本对齐方式 */
table {
    border-collapse: collapse;
    width: 100%;
}
table th, table td {
    border: 1px solid #CCCCCC;
    padding: 5px 10px;
    text-align: left;
}
 
/* 设置按钮的基本样式 */
button {
    padding: 5px 10px;
    border: 1px solid #0088CC;
    background-color: #CCEEFF;
    color: #003366;
    cursor: pointer;
}
button:hover {
    background-color: #005580;
    color: #FFFFFF;
}

这段代码展示了如何使用CSS来增强一个简单HTML页面的视觉美观性。它设置了基本字体、行高、间距，并对链接、标题、图片、列表、表格和按钮进行了样式化。通过这个例子，开发者可以学习到如何使用CSS来提升网页的可读性和用户体验。

- 阅读更多 -

【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动

System

2024-08-18

所有,css

CSS的结构伪类选择器、伪元素和浮动是前端开发中非常重要的概念。

结构伪类选择器：
结构伪类选择器可以根据元素在其父元素中的位置来选择元素。

例如，:first-child选择器可以选择父元素的第一个子元素，:last-child选择器可以选择父元素的最后一个子元素。




/* 选择每个<p>元素，该元素是其父元素的第一个子元素 */
p:first-child {
  color: red;
}
 
/* 选择每个<p>元素，该元素是其父元素的最后一个子元素 */
p:last-child {
  color: blue;
}

伪元素：
伪元素用于向元素中的内容前后插入内容，无需在HTML中添加额外的标签。

例如，::before伪元素可以在元素内容的前面插入内容，::after伪元素可以在元素内容的后面插入内容。




/* 在每个<p>元素内容前插入内容 */
p::before {
  content: "【";
  color: green;
}
 
/* 在每个<p>元素内容后插入内容 */
p::after {
  content: "】";
  color: purple;
}

浮动（Float）：
浮动可以使元素脱离正常的文档流，实现对元素的定位。




/* 使所有<div>元素浮动到左边 */
div {
  float: left;
}

注意：由于浮动可能导致布局问题，建议使用更现代的布局技术，如Flexbox或Grid布局系统。

- 阅读更多 -

css选择相邻的前一个元素

System

2024-08-18

所有,css

在CSS中，选择相邻的前一个元素可以使用+相邻兄弟选择器。这个选择器选择所有紧接在另一个元素后的元素，且二者有相同的父元素。

例如，如果你想要选择所有紧接在<h2>元素后的第一个<p>元素，你可以这样写：




h2 + p {
  color: red;
}

这段CSS会将紧跟在<h2>元素后的第一个<p>元素的文本颜色设置为红色。如果在<h2>和它后面的<p>元素之间有其他元素，比如一个<div>，那么这个<p>不会被选中。

示例HTML代码：




<h2>标题</h2>
<p>这是一个段落，文本颜色会变为红色。</p>
<div>这是一个div，不会影响后面的p元素。</div>
<p>这个段落不会变色，因为它不是紧跟在h2后面的第一个p元素。</p>
<h2>另一个标题</h2>
<p>这个段落也不会变色，因为它不是第一个。</p>

在这个例子中，只有紧接在第一个<h2>元素后的<p>元素会被选中。

System

2024-08-18

所有,css

CSS transform 属性允许你对元素进行变换，包括位移、缩放、翻转以及旋转。

位移 translate

使用 translate() 函数可以对元素进行位移。第一个参数是水平方向的移动距离，第二个参数是垂直方向的移动距离。如果第二个参数未提供，默认为0。




.element {
  transform: translate(50px, 100px);
}

缩放/翻转 scale

使用 scale() 函数可以对元素进行缩放。第一个参数是水平方向的缩放比例，第二个参数是垂直方向的缩放比例。如果第二个参数未提供，默认与第一个参数相同。




.element {
  transform: scale(1.5, 2);
}

旋转 rotate

使用 rotate() 函数可以对元素进行旋转。参数是旋转的角度，正值表示顺时针旋转，负值表示逆时针旋转。




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

组合变换

transform 属性可以接受一个由空格分隔的变换函数列表，这意味着你可以组合使用多个变换。




.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5, 2);
}

以上代码将先位移，然后旋转，最后缩放元素。

2024-08-18

实现鼠标悬停图片放大的效果，可以通过CSS的:hover伪类来实现。以下是几种方法：

使用CSS的transform属性，结合:hover伪类，通过缩放(scale)实现图片放大效果。




img {
  transition: transform 0.3s ease;
  cursor: pointer;
}
 
img:hover {
  transform: scale(1.1);
}

使用CSS的width和height属性，结合:hover伪类，通过直接改变图片大小实现放大效果。




img {
  transition: width 0.3s ease, height 0.3s ease;
  cursor: pointer;
  width: 100px; /* 假设图片原始大小 */
  height: 100px;
}
 
img:hover {
  width: 110px; /* 放大后的大小 */
  height: 110px;
}

使用CSS的box-shadow属性，结合:hover伪类，通过增加阴影实现图片放大效果。




img {
  transition: box-shadow 0.3s ease;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
 
img:hover {
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.7);
}

以上代码中，transition属性用于定义过渡效果的时长和速度，cursor: pointer使得鼠标悬停在图片上时显示为指针形状，方便用户知道该图片可以交互。根据需求选择一种方法即可。

- 阅读更多 -

CSS @keyframes 动画：颜色变化、背景旋转与放大缩小

System

2024-08-18

所有,css




/* 定义一个名为colorChange的关键帧动画，用于颜色的变化 */
@keyframes colorChange {
    0%, 100% {
        color: #ff0000; /* 红色 */
    }
    50% {
        color: #00ff00; /* 绿色 */
    }
}
 
/* 定义一个名为rotateBackground的关键帧动画，用于背景旋转 */
@keyframes rotateBackground {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}
 
/* 定义一个名为scaleAnimation的关键帧动画，用于放大和缩小的动画 */
@keyframes scaleAnimation {
    0% {
        transform: scale(1); /* 初始大小 */
    }
    50% {
        transform: scale(1.5); /* 放大到1.5倍 */
    }
    100% {
        transform: scale(1); /* 恢复到初始大小 */
    }
}
 
/* 应用动画规则到相应的选择器上 */
.element-color-change {
    animation: colorChange 5s infinite alternate;
}
 
.element-rotate-background {
    background-image: url('background-image.jpg'); /* 设置一个背景图片 */
    background-size: cover; /* 背景图片覆盖整个元素 */
    animation: rotateBackground 10s linear infinite;
}
 
.element-scale {
    margin: 50px; /* 设置外边距以便更好的展示动画效果 */
    animation: scaleAnimation 5s infinite alternate;
}

这段代码定义了三个不同的关键帧动画，并将它们应用到了三个不同的HTML元素类上。第一个元素使用颜色变化的动画，第二个元素使用背景旋转的动画，第三个元素使用放大和缩小的动画。这些动画通过CSS的animation属性进行控制，并通过alternate使动画交替执行，提供了一个有趣的动画效果。

System

2024-08-18

所有,css

CSS中关于边框的属性有以下几种：

边框（border）：用于设置元素的边框大小、样式和颜色。




/* 设置边框宽度为2px，样式为solid，颜色为红色 */
border: 2px solid red;

边框圆角（border-radius）：用于设置元素边角的圆角大小。




/* 设置元素四个角的圆角大小为10px */
border-radius: 10px;

边框-填充（border-image）：用于设置元素的边框图片。




/* 设置边框图片为border.png，边框宽度为10px，边框填充比例为20% */
border-image: url(border.png) 30 30 round;

轮廓（outline）：与边框类似，也可以设置元素的轮廓，但不同的是，轮廓不会影响元素的布局。




/* 设置轮廓宽度为2px，样式为dotted，颜色为蓝色 */
outline: 2px dotted blue;

CSS中关于边框的属性还有很多，以上只是一些常用的属性。具体使用哪种属性，需要根据实际需求来决定。

- 阅读更多 -

告别固定字体大小：CSS使用相对单位提升网页可访问性和兼容性

System

2024-08-18

所有,css




/* 使用相对单位设置元素的字体大小，以便于用户的阅读体验和兼容不同设备 */
body {
    font-size: 16px; /* 默认字体大小 */
    font-family: "Helvetica Neue", Arial, sans-serif;
}
 
/* 为标题设置相对于基本字体大小的大小 */
h1 {
    font-size: 1.5em; /* 相对于父元素的字体大小的1.5倍 */
}
 
/* 为正文内容设置相对于基本字体大小的大小 */
p {
    font-size: 0.875em; /* 相对于基本字体大小的0.875倍，约等于14px */
}
 
/* 为小字体的元素设置更小的字体大小 */
small {
    font-size: 0.75em; /* 相对于基本字体大小的0.75倍 */
}
 
/* 为强调文本设置更大的字体大小 */
strong {
    font-size: 1.2em; /* 相对于父元素的字体大小的1.2倍 */
}

这段代码展示了如何使用相对单位（em和rem）来设置字体大小，这样可以使得字体大小相对于基础字体大小或者父元素的字体大小进行调整，有利于提高网页的可访问性和兼容性。

- 阅读更多 -

CSS 实现块级元素靠右的5种方法。

System

2024-08-18

所有,css

在CSS中，实现块级元素靠右对齐可以通过多种方法。以下是五种常见的方法：

使用text-align属性设置为right（适用于内联内容或文本内容）。
使用margin属性设置左外边距为auto（可以使块级元素在其父容器中居中，但也可以使它靠右）。
使用float属性设置为right（需要清除浮动）。
使用justify-content属性设置为flex-end（在弹性容器中）。
使用display: grid并使用justify-self或justify-items属性设置为end。

以下是每种方法的示例代码：

使用text-align:




.block {
  text-align: right;
}

使用margin:




.block {
  margin-left: auto;
  margin-right: 0;
}

使用float:




.block {
  float: right;
}
/* 需要清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

使用flexbox:




.flex-container {
  display: flex;
  justify-content: flex-end;
}

使用grid:




.grid-container {
  display: grid;
}
.grid-item {
  justify-self: end;
}

请注意，每种方法都有其适用的场景，例如float方法在老版本浏览器中更为兼容，而flexbox和grid则提供了更现代且强大的布局控制方式。根据实际需求和浏览器兼容性选择合适的方法。

- 阅读更多 -