仿写pink老师携程网

1.技术选型

单独制作移动端携程网

熟练使用flex布局

2.相关文件夹搭建、

3.各部分模块

（1）顶部搜索模块（search-index）

（2）焦点图模块（focus）

（3）局部导航栏（local-nav）

（4）主导航栏（nav）

（5）侧导航栏（subnav-entry）

（6）销售模块（sales-box）

4.技术应用

（1）流利使用flex布局并且认识其中重要标签

（2）移动端宽度的注意

5.代码部分

（1）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><!-- 顶部搜索 --><div class="search-index"><div class="search">搜索：目的地/酒店/景点/航班号</div><a href="#" class="user">我&nbsp;的</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><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"><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/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>

（2）css部分

body{max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"MicrosoftYahei",STXihei,hei;color: #000;background: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;
}
ul{list-style: none;margin: 0;padding: 0;
}
a{text-decoration: none;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;flex: 1;border: 1px solid #ccc;height: 26px;line-height: 24px;font-size: 12px;color: #666;padding-left: 25px;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 -59px -279px;background-size: 104px auto;
}
.user{height: 44px;width: 44px;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 -2px;
}
/* focus */
.focus{padding-top: 44px;
}
.focus img{width: 100%;
}
/* 局部导航栏 */
.local-nav{display: flex;height: 64px;background-color: #fff;border-radius: 8px;margin: 3px 4px;
}
.local-nav li{flex: 1;
}
.local-nav a{display: flex;flex-direction: column;align-items: center;font-size: 12px;
}
.local-nav li [class^="local-nav-icon"]{width: 32px;height: 32px;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{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;
}
.nav-items:nth-child(1) a{border: 0;background: url(../images/hotel.png) no-repeat bottom center;background-size: 121px auto;
}
.nav-items:nth-child(-n+2){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;box-shadow: 1px 1px rgba(0, 0, 0, .2);}
.subnav-entry a{display: flex;flex-direction: column;align-items: center;
}
.subnav-entry-icon{width: 28px;height: 28px;margin-top: 4px;background: url(../images/subnav-bg.png) no-repeat;background-size: 28px auto;
}.subnav-entry li{/* 里面的子盒子可以写 % 相对于父级来说的 */flex: 20%;
}/* 销售模块 */
.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;
}
.sales-hd h2::after{position: absolute;top: 8px;left: 20px;content: "";width: 79px;height: 15px;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%;
}

pink老师携程网制作（html+css）相关推荐

五、pink老师的学习笔记——CSS精灵技术（sprite)
5. CSS精灵技术(sprite) 重点 5.1 为什么需要精灵技术图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一 ...
八、pink老师的学习笔记—— CSS用户界面样式（鼠标样式、轮廓线、防止拖拽文本域）
2. CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验. 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等. 防止表单域拖拽 2.1 鼠标样 ...
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...
HTML+CSS学习笔记（pink老师前端课程笔记--补档）
开始于2021年8月3日09点59分课程学习路线:HTML5-> CSS3->H5C3提高->项目拼优购电商网站仅更新到H5C3提高的C3提高部分(新增选择器),忙于其他事情,暂 ...
html, css学习笔记，自用（B站黑马程序员pink老师）
附上教学视频链接黑马程序员pink老师前端入门教程该博文是自己随手记的上述视频笔记跳转到css, p61 P18 <div> </div>一行一个,<span> ...
html，css基础知识点参考pink老师的ppt
html基本标签标题标签标签用于定义段落换行标签文本格式化标签图像标签和路径路径问题链接的语法格式链接分类: 注释特殊字符表格的基本语法表格结构标签合并单元格列表标签列表总 ...
Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天学习目标: 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式 ...
B站pink老师HTML+CSS笔记
HTML部分浏览器内核 web标准 vscode的一些插件推荐标题标签记住h1标题最大就行段落和换行标签 <br />不会有垂直间距文本格式化标签图片标签及路径 <i ...
黑马pink老师:CSS基础总结Ⅰ
文章目录 CSS基础总结Ⅰ 1.CSS语法规范 2.CSS选择器 2.1基础选择器 2.1.1标签选择器(元素选择器) 2.1.2类选择器 2.1.3id选择器 2.1.4通配符选择器 2.2复合选择 ...

pink老师携程网制作（html+css）

仿写pink老师携程网

pink老师携程网制作（html+css）相关推荐

最新文章

热门文章