heimamm

peach9_6

已于 2022-08-13 11:28:51 修改

阅读量1k

点赞数 1

文章标签： html 前端

于 2022-08-13 11:22:02 首次发布

本文链接：https://blog.csdn.net/peach9_6/article/details/126301071

版权

一.项目准备工作

适配方案:flex+rem+flexible.js+LESS

1.代码规范

1. 类名语义化，尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
2. 类名嵌套层次尽量不超过三层
3. 尽量避免直接使用元素选择器
4. 属性书写顺序
布局定位属性：display / position / float / clear / visibility / overflow
尺寸属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow
5. 避免使用 id 选择器
6. 避免使用通配符 * 和 !important

2.目录规范

    项目文件夹：heimamm
   样式文件夹：css
   业务类图片文件夹：images
   样式类图片文件夹： icons
   字体类文件夹： fonts

js类文件夹:js

3.在index.html中<head>标签中引入CSS样式文件和js文件

    <!-- 引入css样式文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/flexible.js"></script>

4.在index.less中初始化body样式

body {
    min-width: 320.0025px;
    max-width: 750px;
    margin: 0 auto;
    height: 1200px;
}

5.在index.less中约束范围

// 当屏幕大于750px时,html字体大小就不再变化
@media screen and (min-width:750px) {
    html {
        font-size: 37.5px !important;
    }
}

.less文件保存后自动转为.css文件的插件:

6.改变基准值

1.index.html:

<header class="header">黑马面面</header>

2.index.less:

.header {
    height: 2.1333rem;
    color: black;
    text-align: center;
    line-height: 2.1333rem;
    border-bottom: .0267rem solid #eaeaea;
}

效果图:

三.导航栏(nav)部分-flex布局

1.在flex布局中,实现图片在文字上方垂直居中显示的效果:

.item {
        // 必须具有flex属性
        display: flex;
        width: 33.33%;
        // 纵向显示
        flex-direction: column;
        // 水平居中
        align-items: center;
    }

2..index.html:

<!-- nav部分 -->
    <nav class="nav">
        <a href="#" class="item">
            <img src="./icons/icon1.png">
            <span>HR面试</span>
        </a>

        <a href="#" class="item">
            <img src="./icons/icon2.png">
            <span>笔试</span>
        </a>

        <a href="#" class="item">
            <img src="./icons/icon3.png">
            <span>技术面试</span>
        </a>

        <a href="#" class="item">
            <img src="./icons/icon4.png">
            <span>模拟面试</span>
        </a>

        <a href="#" class="item">
            <img src="./icons/icon5.png">
            <span>面试技巧</span>
        </a>

        <a href="#" class="item">
            <img src="./icons/icon6.png">
            <span>薪资查询</span>
        </a>

    </nav>

3..index.less:

// nav 部分
.nav {
    display: flex;
    // 一行显示不下就换行
    flex-wrap: wrap;
    padding: 1.2rem 0 1.6rem 0;

    .item {
        // 必须具有flex属性
        display: flex;
        width: 33.33%;
        // 纵向显示
        flex-direction: column;
        // 水平居中
        align-items: center;


        img {
            width: 3.7067rem;
            height: 3.7067rem;

        }

        span {
            font-size: .6667rem;
            color: #7070