二十二、移动端页面练习1

gaoya7305

已于 2023-07-20 15:04:51 修改

阅读量75

点赞数

分类专栏： html+css 文章标签：移动页面

于 2023-07-20 10:26:17 首次发布

本文链接：https://blog.youkuaiyun.com/gaoya7305/article/details/131821660

版权

html+css 专栏收录该内容

22 篇文章

订阅专栏

目录：
1.准备工作
2.编写头部

一、准备工作

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">
    <title>爱学习</title>
    <!-- 引入图标字体 （第三方下载放到自己项目里）-->
    <link rel="stylesheet" href="./fa/css/all.min.css">
    <!-- 引入通用样式，style.css 是创建的style.less 后自动生成的（第三方下载放到自己项目里） -->
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    
</body>
</html>

css
项目使用less，所以创建style.less，然后选中vw来做适配。

*{
    margin: 0;
    padding: 0;
}

// 1.先做适配样式vw
html{
	//100vw/750 * 40 = 5.3333vw
    font-size: 100vw/750 * 40;
}

优化写法：

// 高级写法，把750定义成变量
@total-width:750;
//设置根元素
html{
    //设置rem的比值
    font-size: 100vw/@total-width * 40;
    background-color: #eff0f4;
}

二、编写头部

创建头部结构

<!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">
    <title>爱学习</title>
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fa/css/all.min.css">
    <!-- 引入通用样式，style.css 是创建的style.less 后自动生成的 -->
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 创建头部 -->
    <header class="top-bar">
        <!-- 元素1 -->
        <div class="menu-btn">
            <a href="#">
                <i class="fas fa-stream"></i>
            </a>
        </div>
         <!-- 元素2 -->
        <h1 class="logo">
            <a href="#">
                爱学习
            </a>
        </h1>
         <!-- 元素3 -->
        <div class="search-btn">
            <a href="#">
                <i class="fas fa-search"></i>
            </a>
        </div>
    </header>
    
</body>
</html>

2.设置头部元素样式

- 设置头部header - 让3个元素横向排列，在移动端使用弹性容器flex。

.top-bar{
    // 设置弹性容器
    display: flex;
    // 设置高度
    height: 175/40rem;
    }

当我们设置header宽度的时候，发现他和整个屏幕主体内容，都是等宽，且居中，所以我们直接在外面定义个w类，可以让他更能广泛使用。

.w{
    width:693/40rem;
    margin: 0 auto;
}

//这样就可以在想要使用的地方扩展这个类，就自动设置了对应的宽度，且居中

.top-bar:extend(.w){
    // 设置弹性容器
    display: flex;
    // 设置高度
    height: 175/40rem;
    }

设置头部内容的修饰

要让header里面的元素左右都有空白，且垂直居中。justify-content: space-between; align-items: center; 来控制

.top-bar:extend(.w){
    // 设置弹性容器
    display: flex;
    // 设置高度
    height: 175/40rem;
	 // 设置这个让文字居中
    line-height: 175/40rem;
    //开始进行头部，具体排列效果
    //设置对齐方式
    justify-content: space-between;

    //设置垂直居中
    //设置辅轴的对齐方式
    align-items: center;
}

设置里面的字体样式，也就是a标签的样式

  a{
        // 因为是所有的a标签文字都没有下划线，所以写在外面
        text-decoration: none;
    }
.top-bar:extend(.w){
    display: flex;
    height: 175/40rem;
    line-height: 175/40rem;
    justify-content: space-between;
    align-items: center;
    //在对头部里面的a进行细致样式设置， 还有i 图标字体样式
    a{
        color:#24253d;
        font-size: 50/40rem;
        i{
            color:#999;
            font-size: 40/40rem;
        }
    }
  
}

总结：头部所以代码：

style.less

*{
    margin: 0;
    padding: 0;
}
@total-width:750;

.w{
    width:693/40rem;
    margin: 0 auto;
}

html{
    font-size: 100vw/@total-width * 40;
    background-color: #eff0f4;
}
a{
    
    text-decoration: none;
}

.top-bar:extend(.w){
    display: flex;
    height: 175/40rem;
    line-height: 175/40rem;
    justify-content: space-between;
    align-items: center;
      a{
        color:#24253d;
        font-size: 50/40rem;
        i{
            color:#999;
            font-size: 40/40rem;
        }
    }
  
}

<!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">
    <title>爱学习</title>
    <link rel="stylesheet" href="./fa/css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 创建头部 -->
    <header class="top-bar">
        <!-- 元素1 -->
        <div class="menu-btn">
            <a href="#">
                <i class="fas fa-stream"></i>
            </a>
        </div>
         <!-- 元素2 -->
        <h1 class="logo">
            <a href="#">
                爱学习
            </a>
        </h1>
         <!-- 元素3 -->
        <div class="search-btn">
            <a href="#">
                <i class="fas fa-search"></i>
            </a>
        </div>
    </header>
    
</body>
</html>