＜前端练习＞京东移动端首页

最新推荐文章于 2023-05-15 15:41:51 发布

April Story

最新推荐文章于 2023-05-15 15:41:51 发布

阅读量773

点赞数 1

分类专栏：综合案例

本文链接：https://blog.csdn.net/weixin_47816527/article/details/118527334

版权

本文介绍了京东移动端首页的实现过程，包括采用单独制作移动页面的方案，使用流式布局进行页面设计，并详细讲解了文件夹结构的搭建，以及视口标签和初始化样式的设置。文中还展示了部分代码和京东手机官网的截图。

摘要由CSDN通过智能技术生成

1.技术选型
方案：采取单独制作移动页面方案
技术：布局采取流式布局

2.搭建相关文件夹结构
在这里插入图片描述
3.设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0,
		maximum-scale=1.0,minimum-scale=1.0"/>

<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>

效果图：
在这里插入图片描述
图片大部分都是京东手机官网来的
代码：
CSS：

body {
   
	width: 100%;
	min-width: 320px;
	max-width: 540px;
	font-size: 14px;
	background-color: #fff;
	color: #666;
	/* ios样式 */
	font-family: -apple-system, Helvetica, sans-serif;
	margin: 0 auto;
	line-height: 1.5;
	height: 2000px;
/* 	background-color: #666666; */
	
}
a {
   
	color: #666;
	text-decoration: none;
}
/* 最顶部 */

.app {
   
	height: 45px;
}
.app ul {
   
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li {
   
	float: left;
	height: 45px;
	background: #333333;
	text-align: center;
	line-height: 45px;
	color: #fff;
}
.app ul li:nth-child(1) {
   
	width: 8%;
}
.app ul li:nth-child(1) img {
   
	width: 10px;
	/* 高度等比缩放的 */
	/* height: 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: #f63515;
}
/* 搜索 */
.search-wrap {
   
	/* position: relative; */
	/* 改为固定定位加上最大最小宽度 */
	position: fixed;
	height: 44px;
	/* 固定定位宽度100% */
	width: 100%;
	/* 解决外边距合并 给父添加 */
	overflow