HTML5+CSS3基础+移动端（day22）

已于 2023-02-10 21:59:10 修改
阅读量168 收藏
点赞数
文章标签： css3 html5 css 前端
于 2023-02-08 22:59:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52372037/article/details/128944670
版权

一、移动端开发（续）

8. 背景二倍图以及多倍图切图在这里插入图片描述

<!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>背景图片2倍图</title>
    <style>
        /* 1. 有一个50*50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍，100*100 */
        /* 2. 我们需要把这个图片缩放一半，也就是 50*50 background-size */
        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

9. 移动端开发选择在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

10. 移动端技术解决方案在这里插入图片描述在这里插入图片描述在这里插入图片描述

<!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>CSS3盒子模型</title>
    <style>
        div:nth-child(1) {
            /* 传统盒子模型=width + border + padding */
            /* box-sizing: content-box; */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
        }

        div:nth-child(2) {
            /* 有了这句话就让盒子变成CSS3盒子模型 */
            /* padding和border不会再撑大盒子了 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid blue;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

11. 移动端特殊样式在这里插入图片描述

<!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>
    <style>
        a {
            -webkit-tap-highlight-color: transparent;
        }

        input {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <a href="#">black</a>
    <!-- input:button -->
    <input type="button" value="按钮">

</html>

12. 移动端技术选型在这里插入图片描述

13. 流式布局在这里插入图片描述

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            /* 随着浏览器的宽度自由去伸缩的 */
            width: 100%;
            /* 防止盒子里面的内容在拉伸收缩时掉下来等 */
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }

        section div {
            float: left;
            width: 50%;
            height: 400px;
        }

        section div:nth-child(1) {
            background-color: pink;
        }

        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

14. 京东移动端首页在这里插入图片描述

（1）准备工作在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

（2）body设置

（3）app布局

（4）app内容填充

（5）搜索模块布局

（6）搜索模块内容制作

（7）二倍精灵图的做法在这里插入图片描述在这里插入图片描述

（8）焦点图制作

（9）品牌日模块制作

（10）导航栏nav模块制作

（11）新闻快报模块

（12）京东移动端首页结束

1.css
（1）normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

（2）index.css

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetita, sans-serif;
    color: #666;
    line-height: 1.5;
    /* background-color: #ccc;
    height: 200px; */
}

/* 移动端特殊样式 */
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

a {
    color: #666;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    /* 去除图片底部的空白缝隙 top,middle都行 */
    /* vertical-align: top; */
    /* top会让小图标升上去 */
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}

.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333333;
    text-align: center;
    color: #fff;
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(1) img {
    width: 10px;
}

.app ul li:nth-child(2) {
    width: 10%;
}

.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}

/* 搜索 */
.search-wrap {
    /* position: relative; */
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
}

.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: pink; */
    width: 40px;
    height: 44px;
}

.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}

.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    /* background-color: purple; */
    color: #fff;
    line-height: 44px;
}

.search {
    position: relative;
    height: 30px;
    background-color: #fff;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}

.jd-icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background-color: pink;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}

.jd-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background-color: pink;
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}

.slider img {
    width: 100%;
}

/* 品牌日 */
.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.brand div {
    float: left;
    width: 33.33%;
}

.brand div img {
    width: 100%;
}


/* nav */

nav {
    padding-top: 5px;
    /* 清除浮动的第一种方法 */
    overflow: auto;
    /* overflow: hidden; */

}


nav a {
    float: left;
    /* a行内元素写了宽，因为有了浮动，所以就不用转换了 */
    width: 20%;
    text-align: center;
}

nav a img {
    width: 40px;
    margin: 10px 0;
}

nav a span {
    display: block;
}


/* news */

.news {
    /* margin top不管用的原因是 老师偷偷给nav有加clearfix 没有剪进来 */
    margin-top: 20px;
}

.news img {
    width: 100%;
}

.news a {
    float: left;
    box-sizing: border-box;
}

.news a:nth-child(1) {
    width: 50%;
}

/* 法1
.news a:nth-child(2),
.news a:nth-child(3) {
    width: 25%;
} */

/* 法2
n+2 就是从第二个往后面选 */
.news a:nth-child(n+2) {
    width: 25%;
    /* 不加边框刚好100%，加了边框多了2px会掉下来，用c3盒子模型可以把padding,border的值算进去 */
    border-left: 1px solid #ccc;
}

/* .news a:nth-child(3) {
    width: 25%;
} */
  1. html
    index.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,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入我们首页的css -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- 顶部 -->
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登陆</div>
    </div>
    <!-- 主体内容部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>
        <!-- 小家电品牌日 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic22.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic33.dpg" alt="">
                </a>
            </div>
        </div>
        <!-- nav部分 -->
        <nav>
            <!-- a{1}*10 -->
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
        </nav>
        <!-- 新闻模块 -->
        <div class="news">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">
            </a>
        </div>
    </div>
</body>

</html>

15. flex 布局在这里插入图片描述在这里插入图片描述

（1）移动WEB开发flex布局导读

（2）flex布局体验在这里插入图片描述在这里插入图片描述在这里插入图片描述

<!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>flex布局体验</title>
    <style>
        div {
            /* 可以给span大小以及让span在一行内显示 */
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 可以垂直居中以及左右分布 */
            /* 有自适应效果，随着浏览器宽度变化 */
            justify-content: space-around;
        }

        div span {
            /* width: 150px; */
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            /* 分成三等份 */
            flex: 1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

（3）flex布局原理在这里插入图片描述在这里插入图片描述

（4）flex设置主轴方向在这里插入图片描述在这里插入图片描述

<!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>flex主轴方向</title>
    <style>
        div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是x轴/行/row  y轴就是侧轴*/
            /* 这句话可写可不写 */
            /* flex-direction: row; */
            /* 我们的元素是跟着主轴来排列的 */
            /* 简单了解： 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以把我们的主轴设置为y轴 那么x轴就成为了侧轴 */
            flex-direction: column;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

（5）justify-content设置主轴子元素排列在这里插入图片描述

<!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>flex设置主轴上的子元素排列方式1</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是x轴 row */
            flex-direction: row;
            /* justify-content:是设置主轴上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 让我们的子元素居中对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边，再分配剩余的空间 */
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</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>flex设置主轴上的子元素排列方式2</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 600px;
            background-color: pink;
            /* 我们现在的主轴是y轴 */
            flex-direction: column;
            /* justify-content: center; */
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

（6）flex-wrap子元素是否换行在这里插入图片描述

（7）align-items设置侧轴子元素排列在这里插入图片描述

<!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>flex设置侧轴上的子元素排列方式</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面 */
            /* flex-wrap: nowrap; */
            /* flex-wrap: wrap; */
            /* 默认的主轴是x轴 row */
            flex-direction: column;
            justify-content: center;
            /* 我们需要一个侧轴居中 */
            align-items: center;
            /* align-content对单行没有效果 */
            /* align-content: center; */
            /* align-items: flex-start; */
            /* 拉伸(了解)，但是子盒子不要给高度 */
            /* align-items: stretch; */
        }

        div span {
            width: 150px;
            /* height: 100px; */
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

（8）align-content设置侧轴子元素排列在这里插入图片描述

<!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>flex设置侧轴对齐方式（多行）</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>

区别
在这里插入图片描述

（9）flex-flow以及总结在这里插入图片描述

<!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>flex-flow复合属性</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            /* 把设置主轴方向和是否换行（换列）简写 */
            flex-flow: column wrap;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

（10）子项flex属性使用在这里插入图片描述在这里插入图片描述

<!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>flex子项flex份数</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        /* 左右盒子固定，中间自适应效果 */
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            flex: 1;
            background-color: pink;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }

        p span {
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

（11）align-self和order在这里插入图片描述在这里插入图片描述

<!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>align-self和order</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(2) {
            /* 默认是0 -1比0小所以在前面 */
            order: -1;
            /* order: -2; */
        }

        div span:nth-child(3) {
            align-self: flex-end;
            /* order: -1; */
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

16. 携程移动端首页在这里插入图片描述

（1）携程移动端首页准备工作在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

（2）首页布局分析以及搜索模块布局在这里插入图片描述在这里插入图片描述

在这里插入图片描述

（3）搜索模块user制作

（4）搜索模块search制作

（5）焦点图focus模块制作

（6）local-nav布局

（7）local-nav内容制作

（8）利用属性选择器更换背景图片

（9）nav外观布局

（10）nav内容制作

（11）背景渐变linear-gradient在这里插入图片描述

<!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>
    <style>
        div {
            width: 600px;
            height: 200px;
            /* 背景渐变必须添加浏览器私有前缀 */
            /* 移动端浏览器主要兼容webkit就可以了 我们在pc端很少使用 因为要写很多私有前缀 特别麻烦 而在移动端 写一个webkit基本够用 */
            /* background: -webkit-linear-gradient(left, red, blue); */
            /* background: -webkit-linear-gradient(red, blue); */
            background: -webkit-linear-gradient(top left, red, blue);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（12）subnav-entry模块制作

（13）热门活动模块制作

（14）更多福利模块制作

（15）sales-bd模块制作

1.css
（1）normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

（2）index.css

/* 常用初始化样式 */
body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    /* 后面暂时给的高度 */
    /* height: 2000px; */
}

ul {
    list-style: none;
    /* ul默认有margin值和padding值 */
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #222;
}

div {
    box-sizing: border-box;
}


/* 搜索模块 */
.search-index {
    display: flex;
    position: fixed;
    top: 0;
    /* left: 0; */
    /* 如果不给它left值（京东的写法） 它默认是居中的 给了left值（携程网的写法）记得要translateX(50%)弄过来 */
    left: 50%;
    /* 固定的盒子应该有宽度 */
    /* 固定定位以屏幕为准，跟父级没有关系 */
    width: 100%;
    /* 因为这是c3的 如果想要兼容性的写法的话加上-webkit-transform这句 */
    /* 先写单独照顾老版本浏览器的样式 再写照顾整个浏览器的样式 */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    min-width: 320px;
    max-width: 540px;
    height: 44px;
    /* background-color: pink; */
    /* 它已经有定位了，margin: 0 auto是无效的 */
    /* margin: 0 auto; */
    background-color: #F6F6F6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.search {
    position: relative;
    height: 26px;
    /* 在有边框的情况，又是c3盒子模型，盒子做了自减，所以实际内容区域变小，原本26px的行高，在24px的内容里装不下，字体下边空白行间距溢出，所以看见字体偏下。传统盒子模型就不会出现这种影响 */
    /* line-height: 26px; */
    line-height: 24px;
    border: 1px solid #ccc;
    flex: 1;
    font-size: 12px;
    color: #666;
    margin: 7px 10px;
    padding-left: 25px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.search::before {
    content: "";
    /* 因为是块级元素，会把后面的文字挤下去，所以我们可以改为绝对定位，绝对定位不占位置，就不会挤下去 */
    /* display: block; */
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    /* 改了定位margin值就不起效果了 */
    /* margin: 5px; */
}

.user {
    width: 44px;
    height: 44px;
    /* background-color: purple; */
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
}

.user::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    /* 先缩小然后找坐标 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 整个精灵图缩放为原来的一半 */
    background-size: 104px auto;
    /* margin: 4px auto 0px; */
    /* margin为负值，底下的盒子就会往上走 */
    /* 因为上面图片的下外边距是负值，所以下面的文字会顶上去一些 */
    margin: 4px auto -2px;
}


/* focus */
.focus {
    padding-top: 44px;
}

.focus img {
    /* 因为固定定位不占位置，底下这个盒子是标准流，所以就会跑到上面盒子底下去了 加padding或margin让它下去*/
    width: 100%;
}


/* 局部导航栏 */
.local-nav {
    display: flex;
    /* 不给宽度 */
    height: 64px;
    background-color: #fff;
    margin: 3px 4px;
    border-radius: 8px;
}

.local-nav li {
    flex: 1;
}

.local-nav a {
    display: flex;
    flex-direction: column;
    /* 侧轴居中对齐 单行 */
    align-items: center;
    font-size: 12px;
}

/* .local-nav-icon { */
/* 属性选择器 */
/* 省了写很多类名 */
.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background-color: pink;
    /* flex里面不会出现外边距合并的问题 所以放心大胆给 */
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}


/* nav */

nav {
    /* 发现没有小圆角出现 因为我们给的nav小圆角 要加overflow:hidden div才会出现 */
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}

.nav-common {
    display: flex;
    height: 88px;
    background-color: pink;
}

.nav-common:nth-child(2) {
    margin: 3px 0;
}

.nav-items {
    /* 既当儿子又有儿子 不冲突的 */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-items a {
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    /* 文字阴影效果 */
    text-shadow: 1px 1px rgba(0, 0, 0, .2);
}

.nav-items a:nth-child(1) {
    border-bottom: 1px solid #fff;
}

/* 第一个a是不需要下划线的 */
.nav-items:nth-child(1) a {
    border: 0;
    /* 靠底边对齐 水平居中 */
    background: url(../images/hotel.png) no-repeat bottom center;
    /* 用三倍图做的 */
    background-size: 121px auto;
}

/* -n+2就是选择前面两个元素 */
.nav-items:nth-child(-n+2) {
    /* 不用margin是因为用margin出来的缝隙是图片背景底色，我们需要的是白色的边框，所以用border */
    /* 给了边框 按道理会掉下来 但是我们给了css3盒子模型 */
    border-right: 1px solid #fff;
}

.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}

.nav-common:nth-child(2) {
    background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}

.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}


/* subnav-entry */

.subnav-entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    flex-wrap: wrap;
    padding: 5px 0;
}

.subnav-entry li {
    /* flex: 1; */
    /* 里面的子盒子可以写% 相对于父级来说的 */
    flex: 20%;
}

.subnav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subnav-entry-icon {
    width: 28px;
    height: 28px;
    background-color: pink;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}


/* sales-box */

sales-box {
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}

.sales-hd {
    position: relative;
    height: 44px;
    border-bottom: 1px solid #ccc;
}

.sales-hd h2 {
    position: relative;
    text-indent: -999px;
    overflow: hidden;
}

/* before after都可以 */
.sales-hd h2::after {
    /* 这里给它加上绝对定位 则变成了块级元素 宽高设置有效 ::after伪元素选择器是行内元素 直接设置宽高无效 不能被看到 所以不用转换为块级元素display: block; */
    /* 定位和浮动一样具有行内块特性 */
    position: absolute;
    top: 8px;
    left: 20px;
    content: "";
    width: 79px;
    height: 15px;
    /* background-color: pink; */
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}

.more {
    position: absolute;
    right: 5px;
    top: 0px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}

.more::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

.row {
    display: flex;
}

.row a {
    flex: 1;
    border-bottom: 1px solid #eee;
}

.row a:nth-child(1) {
    border-right: 1px solid #eee;
}

.row a img {
    width: 100%;
}
  1. html
    index.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="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>携程移动端首页</title>
</head>

<body>
    <!-- 123 -->
    <!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>
    <!-- 局部导航栏 -->
    <ul class="local-nav">
        <li>
            <a href="#" title="景点">
                <span class="local-nav-icon-icon1"></span>
                <span>景点.玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点">
                <span class="local-nav-icon-icon2"></span>
                <span>景点.玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点">
                <span class="local-nav-icon-icon3"></span>
                <span>景点.玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点">
                <span class="local-nav-icon-icon4"></span>
                <span>景点.玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点">
                <span class="local-nav-icon-icon5"></span>
                <span>景点.玩乐</span>
            </a>
        </li>
    </ul>

    <!-- 主导航栏 -->
    <nav>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
    </nav>
    <!-- 侧导航栏 -->
    <ul class="subnav-entry">
        <!-- li{$}*10 -->
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
    </ul>

    <!-- 销售模块 -->
    <div class="sales-box">
        <!-- 123 -->
        <div class="sales-hd">
            <!-- 为了seo优化所以用h2标签 虽然它放的是图片 但它还是一个标题 看到h2就知道这个模块的标题在这里 -->
            <!-- 用h2是因为这个图片的作用就是标题 为了让浏览器提高权重 可以参考品优购给logo图片加h1标签 -->
            <!-- 加 热门活动 几个字目的是让搜索引擎知道这块是热门活动 但它不显示 -->
            <h2>热门活动</h2>
            <a href="#" class="more">获取更多福利</a>
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#">
                    <img src="upload/pic1.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic2.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="upload/pic3.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic4.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="upload/pic5.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic6.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</body>

</html>
澈如冬雪^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 5790
h5(html5)+css3+移动端前端 知识点详细总结
零基础必看的Html5+Css3+移动端前端教程(五)
知心宝贝的博客
11-28 2427
二、CSS基础选择器 1.标签选择器 2.通配符选择器 3.类选择器 4.id选择器 三、CSS复合选择器
HTML5+CSS3基础+移动端（day23）
m0_52372037的博客
02-12 89
3. 媒体查询语法简介 4. 媒体查询案例背景变色 5. 媒体查询+rem实现元素动态大小变化 6. 媒体查询引入资源 7. CSS的弊端 8. LESS简介以及使用变量 less介绍 my.less nest.less count.less style320.css style640.css rem适配方案技术使用（市场主流） normalize.css index.css js: flexible.js common.less index.less normalize.css
HTML5+CSS3基础+移动端（day21）
m0_52372037的博客
02-05 75
搭建HTML结构 6. 综合案例-旋转木马案例 7. 浏览器私有前缀以及总结 二、移动端开发 1. 移动WEB开发流式布局导读 2. 移动端基础 3. 视口 4. meta视口标签
HTML5+CSS3+Web--day7
qq_60069693的博客
12-20 965
1.制作pc端网页：（1）在head标签的title标签下用link标签引入：css文件，iconfont.css文件（精灵图），favicon.ico文件（搜索导航的网页图标2.制作Web端网页（1）同上（2）在body标签中用script标签引入：flexible.js文件（用于自动调节html字号大小）JavaScript文件引入要放在body尾部。JavaScript执行会阻塞HTML的渲染, 因此将JavaScript的引入置于尾部, 可以使页面先呈现出来,
HTML5+CSS3基础学习day1
LIKEIIii的博客
05-19 157
HTML5+CSS3基础学习DAY1
HTML与CSS学习Day03（移动端适配）
m0_74154295的博客
08-19 1113
此外，一个适当配置的视口还有助于改善网站的可访问性和搜索引擎优化（SEO）。Less 是一种动态样式语言，属于 CSS 预处理器的一种，它扩展了 CSS 的功能，包括变量、嵌套、混合（Mixins）、运算功能以及函数等，使得 CSS 更加强大和富有表现力。HTML 的响应式设计（通过 CSS 实现）可以使网页根据设备的屏幕尺寸自动调整布局、字体大小、图片大小等，从而避免内容超出屏幕或字体太小的问题。总之，视口是响应式Web设计中的一个核心概念，它使得网页能够适应不同设备的屏幕尺寸，从而提供更好的用户体验。
html5+css3总结（一步到位）
m0_75039584的博客
08-24 565
Html5+css3 一步到位
100行Html5+CSS3+JS代码实现元旦倒计时界面
热门推荐
知心宝贝的博客
12-29 1万+
一、前言 二、圣诞树 效果展示： 三、步骤 如果之前看过我这篇文章的 1.下载VSCode 下载链接：VSCode 在Hbuilder、idea运行也是可以的，这里推荐使用VSCode 2.配置插件 三个插件对应的功能： 改写标签后自动完善 切换成中文页面 让代码在网页中打开，默认键Alt+B 3.构建三个文件 在桌面新建一个空的文件夹，用VSCode打开 在VSCode新建三个文件 index .html domtree....
pink老师HTML5+CSS3学习笔记 | DAY16
m0_53454320的博客
03-28 84
精灵图、字体图标、字体图标的使用和追加、小三角制作、鼠标样式cursor、轮廓线 outline、防止拖拽文本域resize、利用vertical-align实现垂直居中、溢出文字省略号代替、常用布局技巧、Unicode编码字体； 2023.3.28
web前端开发html5+css3（入门学习笔记）（day20）flex弹性盒的简介、弹性容器的样式、弹性元素的样式、像素、移动端像素、移动端页面、视口、vw适配、响应式布局、媒体查询
weixin_44647089的博客
01-13 276
flex弹性盒的简介、弹性容器的样式、弹性元素的样式、像素、移动端像素、移动端页面、视口、vw适配、响应式布局、媒体查询
HTML+CSS+JS+jQuery学习笔记
weixin_48778425的博客
10-08 474
HTML 一、基本标签 标题标签：<h1>标题标签</h1> 注释标签：<!-- --> 换行标签：<br/> 段落标签： <p>段落标签</p> 分隔线标签：<hr/> 加粗标签： <strong>加粗</strong> or <b>加粗</b> 倾斜标签： 倾斜 or &lt
Html+Css+js实现春节倒计时效果（移动端和PC端）
BYGFJ的博客
01-24 1156
效果预览 ​ html部分 <!DOCTYPE html> <!--geyao--> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">...
CSS3动画——飞行的小精灵
懒羊羊大王的博客
08-25 1780
通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。
CSS3视图过渡动画
m0_46281382的博客
08-24 887
手写视图过过渡动画，讲解如何实现Element Plus和Antdesign UI两种主题切换的实现逻辑；
CSS3多行多栏布局
业精于勤荒于嬉，行成于思毁于随
08-24 466
当前布局由6个等宽行组成，其中第四行有三栏，第五行有四栏。
js实现3d拖拽环绕旋转
最新发布
SHX_fusheng的博客
08-27 339
js实现拖动节点围绕圆心进行转动
HTML5+CSS3基础知识大全
HTML5+CSS3基础知识点 **HTML5基础知识点** 1. **HTML5简介**：HTML5是最新的HTML标准，提供了更多的功能和改进，提高了网页的可读性和可访问性。 2. **XHTML基础**：XHTML是HTML的XML版本，提供了更好的结构和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值