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

最新推荐文章于 2022-08-30 16:21:54 发布

叶贝姆

最新推荐文章于 2022-08-30 16:21:54 发布

阅读量1.1k

点赞数

分类专栏： HTML 文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/youbeimu/article/details/122872200

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把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

最低0.47元/天解锁文章