<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 顶部 -->
<header class="app-top">
<div class="x">
<img src="images/close.png" alt="">
</div>
<div class="img-1">
<img src="images/logo.png" alt="">
</div>
<div class="wz">打开京东App,购物更轻松</div>
<div class="open">立即打开</div>
</header>
<!-- 搜索框 -->
<div class="search-wrap">
<div class="search-wrap-left">
</div>
<div class="search-wrap-middle">
<div class="jd-icon">
</div>
<div class="search"></div>
</div>
<div class="search-wrap-right">登陆</div>
</div>
<!-- 主体部分 -->
<div class="main-content">
<!-- 滑动图 -->
<div class="slider">
<img src="./upload/banner.dpg" alt="">
</div>
<!-- 小家电超级品类日 -->
<div class="plr">
<a href="">
<img src="upload/pic11.dpg" alt="">
</a>
<a href="">
<img src="upload/pic22.dpg" alt="">
</a>
<a href="">
<img src="upload/pic33.dpg" alt="">
</a>
</div>
<!--nav部分 -->
<ul class="nav">
<!-- /*给不上margin值,尝试上方整体bottom,发现一个严重问题:在百分比布局中由于大的元素均为100%的宽度,容易做着做着忽略高度,导致下方或自己一些margin失效
因此填充完内容一定想着为总的盒子设置高度==>解决问题*/ -->
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
<li>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</li>
</ul>
<!-- 新闻模块 -->
<div class="new">
<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>
body{
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
color: #666;
line-height: 1.5;
width: 100%;
/* background-color: skyblue; */
max-width: 640px;
min-width: 320px;
margin: 0px auto;
/* height: 2000px; 经过与源码对比,效果基本相同!--->>流式布局完成! */
}
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
/* 顶部布局div 8 10 57 25 -->流式布局*/
.app-top{
width: 100%;
/*这里不设置高度,即显示了全都从盒子溢出了,下面的定位也会因此出问题,跑到最上面的位置*/
height: 45px;
}
.app-top div{
height: 45px;/*不给高度撑不起来,这个流式布局只关注宽度*/
float: left;/*使得4个div浮动起来,处于一行*/
text-align: center;
line-height: 45px;
color: #fff;
}
.app-top div:nth-child(1){
width: 8%;
background-color: #333333;
/* 图片垂直水平居中模块 发现top的四个div均为垂直居中对齐,则一起设置---->*/
/* text-align: center;
line-height: 45px; */
}
.app-top div:nth-child(1) img{
width: 10px;/*图片只需设置宽,高会等比例缩放*/
/*图片垂直水平居中模块,设置line-height为第一个div一样的行高,从div设置而非从图片中设置*/
}
.app-top div:nth-child(2){
width: 10%;
background-color: #333333;
}
.app-top div:nth-child(2) img{
width: 30px;/*图片只需设置宽,高会等比例缩放*/
/* 第二张图片下不来,解决方法为其添加vertical-algin:middle,同样要搭配line-height,测试过少哪个第二张效果都不行*/
vertical-align: middle;
}
.app-top div:nth-child(3){
width: 57%;
background-color: #333333;
}
.app-top div:nth-child(4){
width: 25%;
background-color:#F63515;
}
.search-wrap{
width: 100%;
position: fixed;
height: 44px;
max-width: 640px;
min-width: 320px;
/* background-color: #666666; *//*映射的蓝色是浮动起来底层图片的底色,不需要单独设置*/
}
.search-wrap div:nth-child(1){
/*选中的元素竟然是中间的这个!*/
position: absolute;
/* top: 14px; 影响到了偏移量
left: 15px; */
/* ---------------------------------------------------------------------- */
/* width: 40px; 影响到了宽高
height: 44px; */
}
/*.search-wrap div:nth-child(1)::after 仔细理解伪类含义 , jd-icon后面也多了伪类,应该是伪类未掌握清楚导致的情况*/
.search-wrap .search-wrap-left::after{
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-wrap .search-wrap-left img{
width: 20px;
height: 18px;
}
.search-wrap div:nth-child(3){
position: absolute;
width: 40px;
height: 44px;
right: 6px;
top: 0px;
text-align: center;
line-height: 44px;
color: #fff;
}
.search-wrap-middle{
/* width: 100%; */
/*左右已经脱离文档流了,不用为其设置宽度否则设置margin会出现偏差*/
height: 30px; /*中间middle部分高度与左右不同,通过f12详细看为30px*/
background-color: #fff;
/*现在整个div默认是占满整个盒子,由于left、right -->poa脱离文档流后为其流出空,即通过设置中间盒子的margin来留出空隙*/
margin: 0 50px;
border-radius: 15px;
margin-top: 7px;/*中间盒子向下挪一点*/
position: relative;
}
.search-wrap-middle .jd-icon {
width: 20px ;
height: 15px;
/*设置的宽高不生效,仍然为40*44px,为什么?.search-wrap div:nth-child(1)仍然选择的是中间的middle,影响到了这个,终归均是伪类选择器的选择元素不明确导致的结果,把上面的注释掉即恢复正常*/
position: absolute;
left: 13px;
top: 8px;
/*经过测试这里出问题了,第一个div .search-wrap div:nth-child(1)里设置的top值和left值影响到了内部icon偏移量的位置,因此想方法解决问题*/
background: url(../images/jd.png) no-repeat;
/*至此,解决问题,结论:伪类选择器出错连带影响JD图标*/
background-size: 20px 15px;
}
.search-wrap-middle .jd-icon::after{
content: "";
height: 15px;
width: 2px;
border-left:1px solid #ccc;
position: absolute;/*父绝子绝,这里的poa根据外面的jd-icon的poa进行定位*/
/* display: block; 需要定位其位置,因此用poa偏移量调整,不用block*/
top: 0px;
right: -10px;/*经测试非常符合*/
}
/*手误打了两个父类,精灵图出不来---->>已解决*/
.search-wrap .search-wrap-middle .search{
/*此刻已经将出问题的伪类选择器所指向大search-warp-middle的代码注释掉,不会再产生影响*/
position: absolute; /*根据.search-wrap-middle的por修改偏移量调整位置,因此要poa进行定位(子绝父相,也可子绝父绝,有定位的即可)*/
background:url(../images/jd-sprites.png) no-repeat -83px 0px;/*当前在css下,..来到根目录,找到img,在找到其中的精灵图*/
background-size: 199px auto;
width: 18px;
height: 15px;
top: 8px;
left: 52px;
}
.main-content{
width: 100%;
}
.main-content .slider img{
width: 100%;
}
/*执行到这——>>发现问题,当在f12取消moblie预览时会发现search-wrap middle部分自适应时出现问题 */
/*当f12关闭调试,窗口化进行拖动时,虽然可以进行自适应调整,但放大到一定程度开始飞出去了,对应缩小到一定层度也会飞,因此再次单独添加max-wdith,min-wdith*/
/*但是猜想尚未解决问题,经验证,猜想正确,但是并非为出问题的个体middle添加,而是为search-wrap整体添加,控制其整体效果,否则仅为middle添加会导致右边字没了,而且还是能出去,达不到效果*/
.main-content .plr{
width: 100%;
vertical-align: top;
height: 100px;
border-radius: 5px 5px 0px 0px /*左上 右上 右下 左下*/;
}
.main-content .plr a{
float: left;
width: 33.33333333333333333333333333333333333333333333333%;
}
.main-content .plr a img{
width: 100%;
}
/*发现问题,照片plr模块与其上方模块间有空隙,为什么? 图片底下默认有空白缝隙,所以到body外设置所有的img通过vertical-algin:top取消默认的缝隙*/
/*已经解决问题,plr模块上的缝隙已经去除,但是出现新的问题,原本第一行设置的 vertical-algin:middle 使得"x“处置居中这里又失效了,怎么办?*/
/*再次为整体img重新设置样式:middle即可*/
/*经过测试最终发现,只要设置vertical-algin值,无论top 还是 middle值均可取消img原有缝隙,所以只要为整体设置middle,便上去了,就不用单独为他设置了,图片缝隙依然已经取消了*/
/* .main-content .nav{
margin: 0; 在body附近写了统一的全部
padding: 0;
} */
.main-content .nav{
height: 166.7px;
}
.main-content .nav li {
float: left;
width: 20%;
list-style: none;
text-align: center;
}
.main-content .nav li a {
text-decoration: none;
color: #666666;
}
.main-content .nav li a span{
/* text-align: center; 不生效,文字不居中<<<===>>>不要单独给,给整个li设置center(给整体,也就是最大的整体部分居中,其内部一起居中!)*/
/*span是一个行内元素,img也是行内元素,两个默认处于 一行,因此变成块元素,变成两行*/
display: block;
}
.main-content .nav li a img{
width: 40px;/*自动等比例缩放*/
padding-top: 5px;/*并非全部margin-top,发现下面的间隔太大了,通过f12看到是整体的padding-top往下挤得第一部分,没有看起来那么大!将整体的margin-top缩小*/
margin: 8px 0px 10px 0px; /*f12观察margin是给的img,不是整体*/
/*仔细观察上下margin值不同,分别设置*/
}
.main-content .new{
width: 100%;
/*给不上margin值,尝试上方整体bottom,发现一个严重问题:在百分比布局中由于大的元素均为100%的宽度,容易做着做着忽略高度,导致下方或自己一些margin失效
因此填充完内容一定想着为总的盒子设置高度==>解决问题*/
/* margin: 0px; */
margin-top: 20px;
}
.main-content .new a{
float: left;
box-sizing: border-box;
/*c3布局给这里的a,边框不用在盒子单独计算====>>解决问题*/
}
.main-content .new a img{
width: 100%;
}
.main-content .new a:nth-child(1){
width: 50%;
}
.main-content .new a:nth-child(2){
width: 25%;
}
.main-content .new a:nth-child(3){
width: 25%;
}
/* .main-content .new a:nth-child(n+1){
border-right: 1px solid #ccc; 不是这个因为最右边也有了(所以说不是n+1的右边),应该是n+2的左边(即从第二个开始的div左边)
} */
.main-content .new a:nth-child(n+2){
border-left: 1px solid #ccc;
/*为所有a设置设置border,即采用新的盒子,将边框也算到盒子中,不用单独计算边框,所以共计100%的盒子里可以多出两个1px的左边框*/
}