使用less插件编写b站移动端网页

最新推荐文章于 2023-01-30 17:55:10 发布
最新推荐文章于 2023-01-30 17:55:10 发布
阅读量288 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46432429/article/details/125963936
版权
这是一个关于网页设计的HTML、CSS和LESS文件示例。HTML文件包含网站头部导航和主体内容，展示了多个带有图片、播放次数和评论数的卡片式布局。CSS文件和LESS文件定义了样式，包括字体、颜色、布局和图标等，提供了响应式的视觉效果。
摘要由CSDN通过智能技术生成

 根文件夹

HTML文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
  <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
</head>

<body>
  <!-- 头部开始 -->
  <div class="header">
    <div class="main">
      <a href="" class="logo">
        <i class="iconfont Navbar_logo"></i>
      </a>
      <div class="right">
        <a href="" class="search">
          <i class="iconfont ic_search_tab"></i>
        </a>
        <a href="" class="face">
          <img src="./images/login1.png" alt="">
        </a>
        <a href="" class="launch">
          <img src="./images/download.png" alt="">
        </a>
      </div>
    </div>
    <div class="nav">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="">动画</a></li>
        <li><a href="">番剧</a></li>
        <li><a href="">果蔬</a></li>
        <li><a href="">音乐</a></li>
        <li><a href="">舞蹈</a></li>

        <div class="line"></div>
      </ul>
      <span class="after iconfont"></span>
    </div>
  </div>
  <!-- 头部结束 -->
  <!-- 主体开始 -->
  <main>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 183.9万</span>
            <span> <i class="iconfont"></i> 7029</span>
          </div>
        </div>
        <div class="title">
          <p>东 汉 变 种 人</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner1.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 23.3万</span>
            <span> <i class="iconfont"></i> 2239</span>
          </div>
        </div>
        <div class="title">
          <p>【自制】我做了一把 模 块 化 机 械 键 盘 !【软核】</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner2.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 253.6万</span>
            <span> <i class="iconfont"></i> 3.5万</span>
          </div>
        </div>
        <div class="title">
          <p>《原神》须弥前瞻短片02——细雨与飞沙</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner3.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 79.8万</span>
            <span> <i class="iconfont"></i> 696</span>
          </div>
        </div>
        <div class="title">
          <p>实拍立体机动装置！燃烧的经费！燃烧的梦想！</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner4.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 108.4万</span>
            <span> <i class="iconfont"></i> 1428</span>
          </div>
        </div>
        <div class="title">
          <p>第一次坐牢是什么体验</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner5.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 66.1万</span>
            <span> <i class="iconfont"></i> 5927</span>
          </div>
        </div>
        <div class="title">
          <p>翻出七年前的同学录，我好像错过了她。</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner6.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 105.1万</span>
            <span> <i class="iconfont"></i> 7004</span>
          </div>
        </div>
        <div class="title">
          <p>舅舅我啊，最喜欢二次元了！</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner7.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 229.3万</span>
            <span> <i class="iconfont"></i> 681</span>
          </div>
        </div>
        <div class="title">
          <p>一定要和喜欢的人坐双层火车去大理！！！</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner8.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 70.9万</span>
            <span> <i class="iconfont"></i> 5996</span>
          </div>
        </div>
        <div class="title">
          <p>谭sir直播带货了！他掉坑里了！他翻车了！</p>
        </div>

      </a>
    </div>
    <div class="pic">
      <a href="#">
        <div class="card">
          <img src="./images/banner9.webp" alt="">
          <div class="count">
            <span> <i class="iconfont"></i> 186.8万</span>
            <span> <i class="iconfont"></i> 2.9万</span>
          </div>
        </div>
        <div class="title">
          <p>当我第一次打开MC</p>
        </div>

      </a>
    </div>
  </main>
  <!-- 主体结束 -->
  <!-- 输出开始 -->
  <div class="openApp">
    <div class="info">
      <div class="logo">
        <i class="iconfont Navbar_logo"></i>
      </div>
      <span>打开App，看你感兴趣的视频</span>
    </div>
  </div>

  <!-- 输出结束 -->
</body>

</html>

css文件 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
a {
  color: #333;
  text-decoration: none;
}
img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
ul {
  list-style: none;
}
.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #fff;
}
.header .main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3.2vw 0 4.8vw;
  width: 100%;
  height: 11.73333333vw;
}
.header .main .logo i {
  font-size: 28px;
  color: #FB7299;
}
.header .main .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .main .right .search {
  color: #ccc;
}
.header .main .right .search i {
  font-size: 5.86666667vw;
}
.header .main .right .face {
  width: 6.4vw;
  height: 6.4vw;
  margin: 0 6.4vw;
}
.header .main .right .launch {
  width: 19.2vw;
  height: 6.4vw;
}
.header .nav {
  position: relative;
  flex: 1;
  height: 10.66666667vw;
  border-bottom: 1px solid #f4f4f4;
  background-color: #fff;
}
.header .nav ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 3.2vw 0 4.8vw;
  width: 100%;
}
.header .nav ul li {
  display: flex;
}
.header .nav ul li:first-child a {
  color: #FB7299;
}
.header .nav ul li a {
  line-height: 10.66666667vw;
  font-size: 3.73333333vw;
}
.header .nav ul .line {
  position: absolute;
  transform: translate(18 / 3.75vw);
  bottom: 0;
  width: 7.46666667vw;
  height: 0.53333333vw;
  background-color: #FB7299;
}
.header .nav .after {
  position: absolute;
  right: 0;
  top: 0;
  width: 10.66666667vw;
  height: 10.66666667vw;
  text-align: center;
}
.header .nav .after::after {
  content: '\e6eb';
  line-height: 10.66666667vw;
  background-color: #fff;
}
main {
  margin-top: 22.4vw;
  padding: 0 1.33333333vw;
  display: flex;
  flex-wrap: wrap;
}
main .pic {
  padding: 2.13333333vw 1.33333333vw;
  width: 50%;
}
main .pic a .card {
  position: relative;
  width: 45.86666667vw;
}
main .pic a .card img {
  width: 100%;
}
main .pic a .card .count {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-image: linear-gradient(transparent, #000);
  padding: 1.33333333vw 1.6vw;
  height: 7.46666667vw;
}
main .pic a .card .count span {
  font-size: 3.2vw;
  color: #fff;
}
main .pic a .card .count span:first-child i::before {
  content: '\e617';
}
main .pic a .card .count span:last-child i::before {
  content: '\e616';
}
main .pic a .title {
  width: 100%;
  margin-top: 1.6vw;
}
main .pic a .title p {
  font-size: 3.2vw;
}
.openApp {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 8vw;
}
.openApp .info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94%;
  height: 9.86666667vw;
  margin: 0 auto ;
  border-radius: 4.8vw;
  background-color: #FB7299;
  color: #fff;
}
.openApp .info .logo {
  font-size: 4.26666667vw;
  margin-right: 4vw;
}
.openApp .info span {
  font-size: 3.73333333vw;
}

less文件

base.less

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
a {
  color: #333;
  text-decoration: none;
}
img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
ul {
  list-style: none;
}
.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #fff;
}
.header .main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3.2vw 0 4.8vw;
  width: 100%;
  height: 11.73333333vw;
}
.header .main .logo i {
  font-size: 28px;
  color: #FB7299;
}
.header .main .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .main .right .search {
  color: #ccc;
}
.header .main .right .search i {
  font-size: 5.86666667vw;
}
.header .main .right .face {
  width: 6.4vw;
  height: 6.4vw;
  margin: 0 6.4vw;
}
.header .main .right .launch {
  width: 19.2vw;
  height: 6.4vw;
}
.header .nav {
  position: relative;
  flex: 1;
  height: 10.66666667vw;
  border-bottom: 1px solid #f4f4f4;
  background-color: #fff;
}
.header .nav ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 3.2vw 0 4.8vw;
  width: 100%;
}
.header .nav ul li {
  display: flex;
}
.header .nav ul li:first-child a {
  color: #FB7299;
}
.header .nav ul li a {
  line-height: 10.66666667vw;
  font-size: 3.73333333vw;
}
.header .nav ul .line {
  position: absolute;
  transform: translate(18 / 3.75vw);
  bottom: 0;
  width: 7.46666667vw;
  height: 0.53333333vw;
  background-color: #FB7299;
}
.header .nav .after {
  position: absolute;
  right: 0;
  top: 0;
  width: 10.66666667vw;
  height: 10.66666667vw;
  text-align: center;
}
.header .nav .after::after {
  content: '\e6eb';
  line-height: 10.66666667vw;
  background-color: #fff;
}
main {
  margin-top: 22.4vw;
  padding: 0 1.33333333vw;
  display: flex;
  flex-wrap: wrap;
}
main .pic {
  padding: 2.13333333vw 1.33333333vw;
  width: 50%;
}
main .pic a .card {
  position: relative;
  width: 45.86666667vw;
}
main .pic a .card img {
  width: 100%;
}
main .pic a .card .count {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-image: linear-gradient(transparent, #000);
  padding: 1.33333333vw 1.6vw;
  height: 7.46666667vw;
}
main .pic a .card .count span {
  font-size: 3.2vw;
  color: #fff;
}
main .pic a .card .count span:first-child i::before {
  content: '\e617';
}
main .pic a .card .count span:last-child i::before {
  content: '\e616';
}
main .pic a .title {
  width: 100%;
  margin-top: 1.6vw;
}
main .pic a .title p {
  font-size: 3.2vw;
}
.openApp {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 8vw;
}
.openApp .info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94%;
  height: 9.86666667vw;
  margin: 0 auto ;
  border-radius: 4.8vw;
  background-color: #FB7299;
  color: #fff;
}
.openApp .info .logo {
  font-size: 4.26666667vw;
  margin-right: 4vw;
}
.openApp .info span {
  font-size: 3.73333333vw;
}

index.less

@import './base.less';

@baseSize: 3.75vw;

// 头部
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #fff;
  .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (12 / @baseSize) 0 (18 / @baseSize);
    width: 100%;
    height: (44 / @baseSize);

    .logo{

      i {
       font-size: 28px;
       color: #FB7299;
      }
    }
    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search {
        
        color: #ccc;
        i {
          font-size: (22 / @baseSize);
        }
      }
      .face {
        width: (24 / @baseSize);
        height: (24 / @baseSize);
        margin: 0 (24 / @baseSize);
      }
      .launch {
        width: (72 / @baseSize);
        height: (24 / @baseSize);
      }
    }
  }
  .nav {
    position: relative;
    flex: 1;
    height: (40 / @baseSize);
    border-bottom: 1px solid #f4f4f4;
    background-color: #fff;

    ul {
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: 0 (12 / @baseSize) 0 (18 / @baseSize);
      width: 100%;

      li {
       display: flex;

       &:first-child a{
        color: #FB7299;
       }
        a {
          line-height: (40 / @baseSize);
          font-size: (14 / @baseSize);
        }
     }

     .line {
      position: absolute;
      // left: (18 / @baseSize);
      transform: translate(18 / @baseSize);
      bottom: 0;
      width: (28 / @baseSize);
      height: (2 / @baseSize);
      background-color: #FB7299;
     }
    }
    .after {
      position: absolute;
      right: 0;
      top: 0;
      width: (40 / @baseSize);
      height: (40 / @baseSize);
      text-align: center;
      &::after {
        content: '\e6eb';
        line-height: (40 / @baseSize);
        background-color: #fff;
        
      }
    }
  }
}
// 头部结束
// 主体开始
main {
  margin-top: (84 / @baseSize);
  padding: 0 (5 / @baseSize);
  display: flex;
  flex-wrap: wrap;
  .pic {
    padding: (8 / @baseSize) (5 / @baseSize);
    width: 50%;
    a {
  
      .card {

        position: relative;
        width: (172 / @baseSize);
  
        img {
         width: 100%;
        }
        
        .count {
          position: absolute;
          left: 0;
          bottom: 0;
          display: flex;
          justify-content: space-between;
          width: 100%;
          background-image: linear-gradient(transparent, #000);
          padding: (5 / @baseSize) (6 / @baseSize);
          height: (28 / @baseSize);
  
          span {
            font-size: (12 / @baseSize);
            color: #fff;
            &:first-child{ 
              i {
                &::before {
                  content: '\e617';
                }
              }
            }
            &:last-child{ 
              i {
                &::before {
                  content: '\e616';
                }
              }
            }
            
          }
        }
      }
      .title {
        width: 100%;
        margin-top: (6 / @baseSize);
        p {
          font-size: (12 / @baseSize);
        }
      }
    }
  
  
  }

}
// 主体结束
// 输出开始
.openApp{
  width: 100%;
  position: fixed;
  left: 0;
  bottom: (30 / @baseSize);
  .info {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 94%;
    height: (37 / @baseSize);
    margin: 0 auto ;
    border-radius:  (18 / @baseSize);
    background-color: #FB7299;
    color: #fff;
    .logo {
      font-size: (16 / @baseSize);
      margin-right: (15 / @baseSize);
    }
    span {
      font-size: (14 / @baseSize);
    }
  }
}

// 输出结束

skygallop
关注
html5 移动端上传图片插件,H5文件上传插件easyUpload.js
weixin_28893221的博客
06-07 2590
插件描述：这是一款流畅的H5文件上传插件，覆盖几乎所有的使用场景，支持上传前预览，多(单)文件上传自定义，支持实时进度条等，你可以按照你想要的方式自定义更新时间：2021-05-3016:15:41更新说明：1. 新增loading动画2. fixed fileid问题3. 更新配置参数以下为默认参数，配置后将覆盖vardefaultConfigs={easyId:'',//插件插入节...
微信小程序全栈开发实战学习三（icon组件关于图标的5个实现方案+progress组件如何自定义实现一个环形进度条？）
weixin_37365539的博客
05-27 394
icon组件关于图标的5个实现方案. 小程序官方提供icon很少，支持两种单位 px rpx 我们可以用以下5个方案来使用图标 1. 使用图片 缺点：图标多会造成大量http请求；不方便修改颜色；图标放大会变虚 2. 使用精灵图（连续图片集） 注意：背景图片只能使用网络图片，不能使用本地图片. 3.使用css样式绘制（不推荐） 4.使用矢量字体（最为简单有效） 注意：小程序中建议使用TTF和WOFF格式的。WOFF2在低版本的IOS上会有不兼容的问题。 具体方法：（这里推荐阿里巴巴矢量图库） 可以前
关于学习css这件事
X12138J的博客
06-17 983
初学者小白
微信小程序使用字体图标
qq_38698753的博客
05-28 1266
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。第一步：下载需要的字体图标进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为：搜索“购物车”图标---&gt;点击“添加入库”--&gt;点击购物车进入购物车--&gt;点击下载代码按钮。...
微信小程序使用iconfont
qq_39241544的博客
05-24 542
iconfont 官网地址 在线加载 选择图标添加入库（自定义ICON也可以，需要自己上传制作） 添加至项目 复制fontcss代码 本地加载 微信小程序不支持加载本地字体文件，但可以将字体文件转成base64引入 下载字体文件 转换字体文件 文件转换地址 复制base64至wxss 使用 引入 将复制下来的css代码，引入项目即可，如果使用本地则将src: url中的链接改变为base64即可 @font-face { font-family: "iconfont"; /* P
WebOS:WebOS界面、基于JQuery以及一干插件、支持PAD移动端
06-30
在WebOS中，CSS可能通过预处理器如Sass或Less进行编写，以提高代码的可维护性和模块化。同时，为了优化移动端的用户体验，CSS可能包含了触摸事件的处理、手势识别和触摸友好的交互设计。 在"WebOS-master"这个...
jQuery移动端三级地区联动插件.rar
10-01
同时，可能还会应用一些CSS预处理器（如Sass或Less）编写的类库，以提高代码复用性和可维护性。 网页特效部分，可能涉及到诸如下拉菜单的滑动效果、选项高亮显示、加载指示器等。这些效果可以通过CSS3的新特性如伪...
移动端H5前端设计项目源码
04-08
`style`目录可能是另一种形式的CSS组织方式，比如Sass或Less，这些预处理器允许编写更易于维护的CSS代码。 `images`目录包含了项目所需的图像资源，如logo、背景图、按钮图标等。在移动端优化中，考虑到加载速度，...
一份完整的vue-cli3项目基础配置项,可用作于PC网站开发、移动端网页，后台管理系统.zip
最新发布
03-03
本压缩包“vue-cli3项目基础配置项,可用作于PC网站开发、移动端网页，后台管理系统.zip”提供了一个基于 Vue CLI 3 的完整项目模板，适用于开发PC端网站、移动端网页以及后台管理系统。 首先，我们来看项目的基本...
uview-ui_iconfont.css
热门推荐
qq_37707731的博客
01-14 7万+
/* #ifdef APP-PLUS */ @font-face { font-family: "uicon-iconfont"; font-weight: normal; font-style: normal; font-display: auto; src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAGQYAAsAAAAAw2gAAGPEAAEAAAAAAAAAAAAA...
element-ui输入框（el-input）前缀图标和后缀图标
绝圣弃智-零的博客
04-22 6万+
el-input是element-ui中的一个组件，在element-ui中文手册中有详细的介绍。其中，带 icon 的输入框示例如下： 对应的代码是： <div class="demo-input-suffix"> 属性方式： <el-input placeholder="请选择日期" suffix-icon="el-icon-date" ...
Font Awesome技术解决导航栏图标问题
weixin_37858031的博客
04-30 2816
需求：项目中需要在左侧导航栏在每一个功能目录左边显示图标，经过调研，发现使用font awesome技术，利用阿里iconfont图标，生成字体图标用在项目中即可达成目标。 1、首先，打开阿里图标官网，挑选需要的图标加入购物车，然后加入项目下载相应压缩包； 阿里矢量图标库guanwan：http://www.iconfont.cn/plus 选择图标->加购物车->点击右上角...
html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
weixin_32612263的博客
06-03 622
效果图：代码如下：jQuery输入框密码显示隐藏代码@font-face {font-family: "iconfont";src: url('iconfont.eot'); /* IE9*/src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('w...
Ant Design Pro 使用自定义iconfont图标，改变导航栏的图标
weixin_44119268的博客
10-18 8072
Ant Design Pro 使用iconfont上的图标有两种方法: 1、加载在线图标 创建一个项目（图标的前缀一定要设置为：icon-） 创建远程连接 复制代码，找到ant design pro项目中的src下的defaultSettings.js，设置iconfontUrl的路径 在路由配置上使用使用就可以了 2、加载离线图标 加载离线的图标，需要把iconfont上编辑好的图...
快速学习LESS CSS预处理器
qq_48235154的博客
12-17 227
快速学习LESS CSS预处理器
Less的简单介绍、使用、语法
NewHouser的博客
01-30 2662
less是将CSS简单化的工具，并且拥有更强的逻辑性和计算能力在使用Less时，首先需要下载Less插件，下载完成之后，代码写在less文件中，保存之后会自动生成css文件，并将生成的css文件引入网页文件中。
Content:"\2715",特殊字符和图标
02-24 1602
项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ 　　width: 20px; 　　height: 20px; 　　background-color: #F3F9FF; 　　border-radius: 10px; 　　bord...
移动端界面自适应设计：实现与技巧
为了提高效率，推荐使用CSS预处理器（如Sass或Less）编写代码，或者安装如cssREM这样的Sublime Text插件，这样可以在编写过程中更轻松地进行px到rem的转换。 适配的原理在于动态调整元素的尺寸，根据设备的视口宽度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值