1. Expected completion effect
Mainly make records by yourself, record the process of doing it and some problems encountered
2. Start production
2.1 Production of search box
1. First introduce normal.css ( Normalize.css: Make browsers render all elements more consistently. ). Among them, the search symbol uses the icon, Ali icon ( iconfont-Alibaba vector icon library ): open the website to search for the required icon, add it to your own project, click "download code", after downloading, put the compressed package into the project for decompression and use .
2. The problem encountered: the search box is not fully displayed in the mobile phone mode
Solution: Add width:100% to the largest box of the search box;
2.2 Production of navigation bar
1. For icons on the top and text on the bottom, you can use flex layout to set the main axis as the y axis, and then set the side axis to center alignment.
2. Gradient production: background: -webkit-linear-gradient(start direction color 1, color 2,...);
3. flex: wrap; line break
2.3 Production of Sales Module
1. Divided into two boxes, using flex layout, each accounting for 50%
2. Problems encountered:
(1) When switching to mobile device emulation, the page display is incomplete, as shown in the figure
Modified <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.7, user-scalable=yes, maximum-scale= in the <head></head> tag 1.0, minimum-scale=0.7">, replace the original 1.0 with 0.7, although it can be displayed normally, but I don’t know if there is a better way.
(2) When writing the "authoritative leaderboard", the style suddenly does not work, as shown in the figure
Later, I found that I wrote its class name in the wrong place in my html code, and wrote it in href hahahaha I was still confused for a long time
(3) The search box cannot be displayed on the top when scrolling, as shown in the figure
Add z-index: 1; to the top of the big box of the search box
2.4 Bottom image
1. Prepare a box and put a picture
2.5 Bottom tool module
1. A new icon needs to be downloaded; the small vertical line is made with a pseudo class selector; space symbol
2. Problems encountered:
(1) When making the small vertical line between the "site map" and the "computer version", the after pseudo-class selector was used, and positioning was used, but there was no content. Later, it was found that the background-color was written as color
(2) The symbol in front of 2022 can’t be written, I don’t know how it came from
2.6 Bottom Navigation Bar Module
1. The big boxes use flex layout, each accounting for 25%; the small boxes add text to an icon, adopt flex layout, and set the main axis to the y axis; the icons are sprites
3. Code section
html code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=0.7,user-scalable=yes,maximum-scale=1.0,minimum-scale=0.7">
<!-- 引入我们的css初始化文件 -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>携程旅行-酒店预订，机票预订查询</title>
</head>
<body>
<!-- 搜索框 -->
<div class="search-box">
<div class="search">
<i class="iconfont icon"></i>
<span>搜索：目的地/酒店/景点/航班号</span>
</div>
</div>
<!-- 导航栏 -->
<nav>
<ul class="nav-entry">
<li class="nav-entry-li1">
<a href="#">
<span class="nav-entry-icon1"></span>
<span>酒店</span>
</a>
</li>
<li class="nav-entry-li2">
<a href="#">
<span class="nav-entry-icon2"></span>
<span>机票</span>
</a>
</li>
<li class="nav-entry-li3">
<a href="#">
<span class="nav-entry-icon3"></span>
<span>火车票</span>
</a>
</li>
<li class="nav-entry-li4">
<a href="#">
<span class="nav-entry-icon4"></span>
<span>旅游</span>
</a>
</li>
<li class="nav-entry-li5">
<a href="#">
<span class="nav-entry-icon5"></span>
<span>攻略景点</span>
</a>
</li>
<li class="nav-entry-li6">
<a href="#">
<span class="nav-entry-icon6"></span>
<span>民宿/客栈</span>
</a>
</li>
<li class="nav-entry-li7">
<a href="#">
<span class="nav-entry-icon7"></span>
<span>机+酒</span>
</a>
</li>
<li class="nav-entry-li8">
<a href="#">
<span class="nav-entry-icon8"></span>
<span>汽车/船票</span>
</a>
</li>
<li class="nav-entry-li9">
<a href="#">
<span class="nav-entry-icon9"></span>
<span>门票/活动</span>
</a>
</li>
<li class="nav-entry-li10">
<a href="#">
<span class="nav-entry-icon10"></span>
<span>美食</span>
</a>
</li>
<li class="nav-entry-li11">
<a href="#">
<span class="nav-entry-icon11"></span>
<span>特价/爆款</span>
</a>
</li>
<li class="nav-entry-li12">
<a href="#">
<span class="nav-entry-icon12"></span>
<span>接送机/包车</span>
</a>
</li>
<li class="nav-entry-li13">
<a href="#">
<span class="nav-entry-icon13"></span>
<span>租车</span>
</a>
</li>
<li class="nav-entry-li14">
<a href="#">
<span class="nav-entry-icon14"></span>
<span>周边游</span>
</a>
</li>
<li class="nav-entry-li15">
<a href="#">
<span class="nav-entry-icon15"></span>
<span>购物/免税</span>
</a>
</li>
</ul>
</nav>
<!-- 销售模块 -->
<div class="sales">
<div class="salse-hd">
<!-- 左边 -->
<div class="sales-tejia">
<div class="tejia-hd">
<a href="#" class="tejia-hd-zuo"></a>
<a href="#" class="tejia-hd-you">特价好货直播中</a>
</div>
<div class="tejia-bd">
<a href="#"></a>
</div>
<div class="tejia-ft">
<a href="#">￥</a>
<a href="#">660</a>
</div>
</div>
<!-- 右边 -->
<div class="sales-rank">
<div class="rank-hd">
<a href="#" class="rank-hd-zuo"></a>
<a href="#" class="rank-hd-you">权威排行榜</a>
</div>
<div class="rank-bd">
<div class="rank-bd-zuo">
<a href="#" class="tu"></a>
<span class="tubiao">上海</span>
<span class="text">上海10大奢华酒店</span>
</div>
<div class="rank-bd-you">
<a href="#" class="tu"></a>
<span class="tubiao">上海</span>
<span class="text">上海亲子乐园酒店榜</span>
</div>
</div>
</div>
</div>
</div>
<!-- 底部图片 -->
<div class="bottom-img">
<a href="#"></a>
</div>
<!-- 底部功能模块 -->
<div class="toolbox">
<div class="tool-group">
<a href="#" class="link">
<span class="iconfont"></span>
<span>电话预订</span>
</a>
<a href="#" class="download">
<span class="iconfont"></span>
<span>下载携程</span>
</a>
</div>
<div class="tool-text">
<a href="#" class="zuo">网站地图</a>
<a href="#">电脑版</a>
<p>c2022携程旅行 泸ICP备08023580号</p>
</div>
</div>
<!-- 底部导航栏 -->
<!-- 局部导航栏 -->
<ul class="bottom-nav">
<li>
<a href="#">
<span class="local-nav-icon-icon1"></span>
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon-icon2"></span>
<span>社区</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon-icon3"></span>
<span>消息</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon-icon4"></span>
<span>我的</span>
</a>
</li>
</ul>
</body>
</html>css code
body {
color: #000;
/* 防止水平滚动条出现 */
overflow-x: hidden;
/* 防止一些元素点击之后背景会高亮 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: none;
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, Microsoft Yahei, STXihei, hei;
background: #f4f4f4;
}
div {
box-sizing: border-box;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
@font-face {
font-family: 'iconfont';
src: url('../fonts/iconfont.woff2?t=1662898789972') format('woff2'),
url('../fonts/iconfont.woff?t=1662898789972') format('woff'),
url('../fonts/iconfont.ttf?t=1662898789972') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 搜索框 */
.search-box {
/* 因为滚动时一直保持在上面，所以用固定定位 */
position: fixed;
/* 在页面最上层 */
z-index: 1;
top: 0;
display: flex;
width: 100%;
height: 50px;
max-width: 540px;
min-width: 320px;
background-color: #fff;
}
.search {
flex: 1;
width: 516px;
height: 32px;
border: 1.5px solid #377ab1;
border-radius: 16px;
margin: 10px;
}
.search .icon {
position: absolute;
top: 11px;
left: 24px;
font-size: 20px;
}
.search span {
position: absolute;
top: 13px;
left: 53px;
color: #a2a2a2;
font-size: 16px;
}
/* 导航栏模块 */
nav {
margin-top: 50px;
height: 184px;
width: 100%;
}
.nav-entry {
display: flex;
padding: 6px 12px 2px;
background-color: #fff;
/* 换行 */
flex-wrap: wrap;
/* 因为没有宽度所以只写上面这一句不会换行 将flex写成百分比，相对于父级来说*/
}
.nav-entry li [class^="nav-entry-icon"] {
width: 28px;
height: 28px;
margin-top: 4px;
background-size: 28px auto;
}
.nav-entry-icon1 {
background: url(../images/hotel.png) no-repeat;
}
.nav-entry-icon2 {
background: url(../images/flight.png) no-repeat;
}
.nav-entry-icon3 {
background: url(../images/train_ticket.png) no-repeat;
}
.nav-entry-icon4 {
background: url(../images/vacation.png) no-repeat;
}
.nav-entry-icon5 {
background: url(../images/gs.png) no-repeat;
}
.nav-entry-icon6 {
background: url(../images/hotel_inn.png) no-repeat;
}
.nav-entry-icon7 {
background: url(../images/flight_package.png) no-repeat;
}
.nav-entry-icon8 {
background: url(../images/bus_ticket.png) no-repeat;
}
.nav-entry-icon9 {
background: url(../images/ticket.png) no-repeat;
}
.nav-entry-icon10 {
background: url(../images/food.png) no-repeat;
}
.nav-entry-icon11 {
background: url(../images/hotel_sale.png) no-repeat;
}
.nav-entry-icon12 {
background: url(../images/airport_transfer.png) no-repeat;
}
.nav-entry-icon13 {
background: url(../images/car.png) no-repeat;
}
.nav-entry-icon14 {
background: url(../images/weekend.png) no-repeat;
}
.nav-entry-icon15 {
background: url(../images/shop.png) no-repeat;
}
.nav-entry [class^="nav-entry-li"] {
flex: 18%;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.nav-entry-li1 {
border-radius: 8px 0 0 0;
/* 渐变色 */
background: -webkit-linear-gradient(#fb5f53, #fc8251);
}
.nav-entry-li2 {
background: -webkit-linear-gradient(#3e87fa, #4facf9);
}
.nav-entry-li3 {
background: -webkit-linear-gradient(#6084fe, #6aa1ff);
}
.nav-entry-li4 {
background: -webkit-linear-gradient(#32c5b5, #4ed5b4);
}
.nav-entry-li5 {
border-radius: 0 8px 0 0;
background: -webkit-linear-gradient(#ff8c39, #ffa338);
}
.nav-entry-li6,
.nav-entry-li11 {
background-color: #fff6f1;
}
.nav-entry-li11 {
border-radius: 0 0 0 8px;
}
.nav-entry-li7,
.nav-entry-li12 {
background-color: #f1f8ff;
}
.nav-entry-li8,
.nav-entry-li13 {
background-color: #f2f4ff;
}
.nav-entry-li9,
.nav-entry-li14 {
background-color: #ecfcf9;
}
.nav-entry-li10,
.nav-entry-li15 {
background-color: #fff8f3;
}
.nav-entry-li15 {
border-radius: 0 0 8px 0;
}
.nav-entry a {
display: flex;
flex-direction: column;
align-items: center;
font-size: 13px;
color: #fff;
}
.nav-entry [class^="nav-entry-li"]:nth-child(n+6) a {
color: #2d2824;
}
/* 销售模块 */
.sales {
display: flex;
width: 100%;
}
.salse-hd {
display: flex;
flex: 1;
}
/* 特价直播 */
.sales-tejia {
height: 148px;
flex: 50%;
background-color: #fff;
border-radius: 8px;
margin: -7px 16px;
}
.tejia-hd {
position: relative;
}
.tejia-hd-zuo {
display: inline-block;
width: 73px;
height: 20px;
background: url(../images/salezb.png) no-repeat;
background-size: 73px auto;
margin: 6px;
}
.tejia-hd-you {
position: absolute;
top: 8px;
right: 9px;
display: inline-block;
width: 84px;
height: 18px;
color: #ff4607;
font-size: 12px;
background-color: #ffebe3;
padding: 1px 4px;
border-radius: 2px;
}
.tejia-bd a {
display: inline-block;
width: 230px;
height: 84px;
border-radius: 8px;
margin-left: 6px;
background: url(../upload/02018120008mxmb3g3DDF_D_280_280_R5.jpg) no-repeat center;
background-size: 238px auto;
}
.tejia-ft a {
color: #f06500;
margin: 5px;
font-weight: 700;
}
.tejia-ft a:nth-child(2) {
margin: -9px;
}
/* 携程精选榜 */
.sales-rank {
flex: 50%;
height: 148px;
background-color: #fff;
border-radius: 8px;
margin: -7px 3px;
}
.rank-hd {
position: relative;
}
.rank-hd-zuo {
display: block;
width: 73px;
height: 20px;
background: url(../upload/0zc6g120008g0hcb587E5.png) no-repeat;
background-size: 73px auto;
margin: 8px;
}
.rank-hd-you {
position: absolute;
top: 1px;
right: 9px;
display: inline-block;
width: 61px;
height: 18px;
color: #ae6e15;
font-size: 12px;
background-color: #fdefd2;
padding: 1px 4px;
border-radius: 2px;
}
.rank-bd {
display: flex;
}
.rank-bd-zuo {
position: relative;
overflow: hidden;
flex: 50%;
}
.rank-bd .tu {
display: inline-block;
width: 117px;
height: 84px;
border-radius: 8px;
}
.rank-bd-zuo .tu {
background: url(../upload/zuo.jpg) no-repeat center;
background-size: 117px auto;
margin: 0 6px;
}
.rank-bd-you {
overflow: hidden;
position: relative;
}
.rank-bd-you .tu {
background: url(../upload/you.webp) center;
background-size: 117px auto;
}
.rank-bd .tubiao {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 30px;
height: 16px;
color: #663c00;
font-size: 12px;
background-color: #dab996;
border-radius: 8px 0 8px 0;
}
.rank-bd .rank-bd-zuo .tubiao {
left: 6px;
}
.text {
display: block;
font-size: 12px;
}
/* 底部图片 */
.bottom-img a {
display: block;
height: 129px;
width: 518px;
background: url(../upload/bottom.jpg)no-repeat;
background-size: 518px auto;
margin: 20px 18px;
border-radius: 8px;
}
/* 底部工具模块 */
.tool-group .link,
.download {
box-sizing: border-box;
display: inline-block;
width: 104px;
height: 34px;
border: 1px solid #ccc;
text-align: center;
line-height: 32px;
border-radius: 4px;
color: #000;
}
.link {
margin: 7px 153px 14px 100px;
}
.tool-text a {
display: inline-block;
color: #666;
/* padding: 10px; */
width: 96px;
height: 15px;
}
.tool-text a:nth-child(2) {
margin-left: 12px;
}
.tool-text .zuo {
position: relative;
margin-top: 9px;
margin-left: 200px;
}
.tool-text .zuo::after {
position: absolute;
top: 2px;
left: 85px;
content: "";
background-color: #e0e0e0;
width: 1px;
height: 18px;
}
.tool-text p {
color: #666;
margin-left: 171px;
font-size: 13px;
}
/* 底部导航栏 */
.bottom-nav {
display: flex;
height: 49px;
background-color: #fff;
}
.bottom-nav li {
flex: 1;
}
.bottom-nav a {
display: flex;
/* 将主轴设置成y轴 */
flex-direction: column;
/* 侧轴居中对齐 单行的· */
align-items: center;
font-size: 12px;
color: #666;
}
/* 利用属性选择器 */
.bottom-nav li [class^="local-nav-icon"] {
width: 32px;
height: 32px;
background: url(../images/tabbar.png) no-repeat 0 0;
background-size: 32px auto;
}
.bottom-nav li .local-nav-icon-icon2 {
background-position: 0 -32px;
}
.bottom-nav li .local-nav-icon-icon3 {
background-position: 0 -64px;
}
.bottom-nav li .local-nav-icon-icon4 {
background-position: 0 -96px;
}
.bottom-nav li .local-nav-icon-icon5 {
background-position: 0 -128px;
}4. Complete the effect
5. Summary
The content refers to the up master from station b: the pink teacher front-end introductory tutorial on the front-end of the dark horse. When I did it myself, I felt that I had learned too badly, I didn’t master everything well, the final completion effect was mediocre, and the completion time was more than expected. I can only say that I will continue to work hard.