携程网（首页）

于 2023-08-04 08:57:09 发布
阅读量262 收藏
点赞数 1
文章标签： 前端 html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_R_Tong/article/details/132096267
版权
文章详细描述了携程网站的HTML结构，包括搜索模块、焦点图、主导航栏、侧导航栏和销售模块的设计，使用了CSS进行样式设置，展示了flex布局的运用。

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

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,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>携程在手，说走就走</title>
    <!-- 采取flex布局为主，其他布局为辅 -->
</head>
<body>
    <!-- 搜索模块 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.png" 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="#" title="海外酒店">海外酒店</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>
            <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>
    <!-- sales销售   销售模块-->
    <div class="sales-box">
        <div class="sales-hd">
            <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/pic1.jpg" alt="">
                </a>
            </div>
            
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#">
                    <img src="upload/pic1.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic1.jpg" alt="">
                </a>
            </div>
            
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#">
                    <img src="upload/pic1.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic1.jpg" alt="">
                </a>
            </div>
            
        </div>
    </div>

</body>
</html>
index.css 
body {
	margin: 0 auto;
	min-width: 320px;
	max-width: 540px;
	background: #f2f2f2;
	font: 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
    /* overflow: hidden; */
	color: #000;
    /* 点击显示颜色                    透明 */
    -webkit-tap-highlight-color: transparent;
    height: 2000px;
}
a {
    color: #222;
}
div {
    box-sizing: border-box;
}
/* 搜索模块 */
.search-index {
    display: flex;
    /* 固定定位   跟父级没有关系 它以屏幕为准*/
    position:fixed;
    top: 0;
    left: 50%;
    /* 固定的盒子应该有宽度 */
    -webkit-transform: translateX(-50%);/*兼容老版本的问题*/
    transform: translateX(-50%);/*走自己盒子的一半*/
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    height: 44px;
    background-color: #f6f6f6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.search {
    position: relative;
    height: 26px;
    line-height: 24px;
    flex: 1;
    font-size: 12px;
    color: #666;
    padding-left: 25px;
    /* background-color: yellow; */
    border: 1px solid #ccc;
    margin: 7px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0,0,.2);
}
/* 放大镜 */
.search::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -107px 0;
    background-size: 226px auto;
}
.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 -103px -52px #2eaae0;;
    background-size: 226px auto;
    border-radius: 50%;
    margin: 4px auto -2px;
    
}
/* focus */
.focus {
    padding-top: 44px;
}
.focus img {
    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: 35px;
    height: 35px;
    margin-top: 8px;
    background: url(../upload/localnav_bg.png) no-repeat 0 -1px;
    background-size: 35px auto;
}
.local-nav li .local-nav-icon-icon2 {
    /* 坐标 */
    background-position: 0 -35px;
}
.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -70px;
}
.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -105px;
}
.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -140px;
}
nav {
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}
.nav-common {
    display: flex;
    height: 88px;
    /* background-color: purple; */
}
.nav-common:nth-child(1) {
    /* 渐变背景 */
    background: -webkit-linear-gradient(left,#fa5a55,#fa994d);
}
.nav-common:nth-child(2) {
    margin:3px 0;
    background: -webkit-linear-gradient(left,#4890ea,#4cb3f3);
}
.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left,#28b3a8,#62c356);
}
.nav-items {
    /* 两个不冲突 */
    display: flex;
    flex: 1;
    flex-direction: column;
}
/* 选择前两个盒子 */
.nav-items:nth-child(-n+2) {
    border-right: 1px solid #fff;
}
.nav-items a {
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    /* 文字阴影       水平1 垂直1 */
    text-shadow: 1px 1px rgba(0,0,0,.3);
}
.nav-common .nav-items:nth-child(1) a {
    border: 0;
    background: url(../images/hotel.png) no-repeat ;
    background-size: 190px auto;
}
.nav-items a:nth-child(1) {
    border-bottom: 1px solid #fff;
}
/* 侧边栏 */
.subnav-entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    /* 换行 */
    flex-wrap: wrap;
    padding: 5px 0;
}
.subnav-entry li {
    /* 里面的子盒子可以写百分比 相对于父级来说的*/
    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;
}
/* 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;
    line-height: 44px;
}
.sales-hd h2::after {
    position: absolute;
    top: 8px;
    left: 20px;
    content: '';
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -15px;
    background-size: 79px auto;
}
.more {
    position: absolute;
    right: 5px;
    top: 8px;
    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%;
}
 normalize.css
/*把所有的内外边距清零*/
* {
	margin: 0;
	padding: 0;
}
/*em 和 i 的斜体的文字不倾斜*/
em,
i {
	font-style: normal;
}
li {
	list-style: none;
}
img {
	/*border 0 照顾低版本的浏览器 如果图片外面包含了链接 会有边框问题*/
	border: 0;
	/*取消图片底侧有空白缝隙的问题
	 图片和基线对齐*/
	vertical-align: middle;
}
button {
	/*将我们鼠标 经过 我们的button按钮的时候，鼠标变成小手*/
	cursor: pointer;
}
a {
	color: #666;
	text-decoration: none;
}
a:hover {
	/* color: #c81623; */
}
button,
input {
	/*\5B8B\4F53:宋体，使得浏览器的兼容性好*/
	font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"
	5B8B";
}
body {
	/*文字放大的时候抗锯齿，使得文字显示更加清晰*/
	-webkit-font-smoothing: antialiased;
	background-color: #fff;
	font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino  Sans GB,"\5B8B";
	color: #666;
}
.hide,
.none {
	display: none;
}
/*清除浮动*/
.clearfix:after {
	visibility: hidden;
	clear: both;
	display: block;
	content: ".";
	height: 0;
}
.clearfix {
	*zoom:1;
}

W_R_Tong
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值