携程首页手机端-静态页面

最新推荐文章于 2022-12-05 19:23:44 发布

原创

最新推荐文章于 2022-12-05 19:23:44 发布 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

这篇内容讲述了网页重构的过程，包括初始化样式normalize.css的使用，实现了flex布局以优化界面，更新了精灵图和二倍图，运用了阿里iconfont字体图标。此外，还制作了三角形，实现了手机端和pc端的图像百分比自适应，以及文字省略号的编写。网页的搜索框、焦点图、导航栏、轮播图、广告模块和工具栏等关键元素都得到了设计和整合。

把pin老师旧版的携程页面跟新版的结合一起编写

学到的内容有：

normolize初始化样式

flex布局

精灵图二倍图的图形更改

阿里iconfont字体图标的使用

三角的制作

手机端pc端百分比自适应图像变换

省略号的编写

<!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>Document</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="fonts/icomoon/style.css">
    <!-- <link rel="stylesheet" href="normalize.css"> -->
    <link rel="stylesheet" href="iconfonts/iconfont.css">
</head>

<body>
    <!-- 搜索框 -->
    <div class="search">
        <div class="sc_input">
            <i class="iconfont icon-fangdajing"></i>
            <span>搜索：目的地/酒店/景点/美食</span>
        </div>
        <div class="user">
            <i class="iconfont icon-yonghu"></i>
            <span>我的</span>
        </div>
    </div>

    <!-- 焦点图 -->
    <div class="foucs">
        <img src="images/focus1.jpg" alt="">
    </div>

    <!-- nav模块 -->
    <div class="nav">
        <ul>
            <li class="nav-hotel">
                <a href="#">
                    <span class="nav_ig"></span>
                    <span class="nav_style">酒店</span>
                </a>
            </li>
            <li class="nav-hotel">
                <a href="#">
                    <span class="nav_ig"></span>
                    <span class="nav_style">民宿/酒店</span>
                </a>
            </li>
            <li class="nav-hotel">
                <a href="#">
                    <span class="nav_ig"></span>
                    <span class="nav_style">特价/爆款</span>
                </a>
            </li>
        </ul>
        <ul>
            <li class="nav-flight">
                <a href="#">
                    <span class="nav_ig"></span>
                    <span class="nav_style">机票</span>
                </a>
            </li>
            <li class="nav-flight">
                <a href="#">
                    <span class="nav_ig"></span>
                    <span class="nav_style">接送机/包车</span>
                </a>
            </li>
            <li class="nav-flight">
                <a href="#">
                    <span class="nav_ig"