jd静态页面测试（html+css）之自学流式布局（包含遇到问题及解决措施）

最新推荐文章于 2024-07-10 16:15:48 发布
最新推荐文章于 2024-07-10 16:15:48 发布
阅读量267 收藏
点赞数
分类专栏： 自学html+css 复习 流式布局 文章标签： css css3 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46972646/article/details/110953274
版权 
<!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的左边框*/
}

在这里插入图片描述

学习前端的一只旺财
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在做静态网站时碰见的问题以及解决方法
qq_41613496的博客
11-08 386
问题： Tomcat修改端口为默认访问端口是80后访问测试页面出现 HTTP Error 503. The service is unavailable. 1、参考链接 HTTP Error 503. The service is unavailable.【win10 IIS安装后无法访问网站，解决方案】 https://blog.csdn.net/veloi/article/details/83509203 2、由于没有安装iis，于是开始安装 参考链接 【Internet信息服务（IIS
静态页面遇到的问题
December_shi的博客
12-08 330
遇到的两个问题1、使用伪元素实现竖线效果1.1.第一次尝试（出来效果，但是有问题）1.2.第二次修改（解决）1.2.1、拓展（transform:scale(); 属性）1.2.2、问题（scaleX 放大中心轴在元素中心）1.2.3、解决方法（添加 *transform-origin*: 0; 属性）2、如何实现进度条效果 1、使用伪元素实现竖线效果 1.1.第一次尝试（出来效果，但是有问题） /* 快捷导航li标签后的竖线效果 */ .nav .n-nav li::after{ display
dialog显示不全，布局显示不全，下边框显示不全，只显示一半的BUG
chengzhenjia的博客
05-13 1304
有问题的是：关键部分是，高度设置为自适应导致的，由于代码设置自适应导致布局，有时候中间代码动态设置宽高，跟xml布局宽高冲突之后导致部分高度设置有误。解决方法： 把宽度、高度自适应都换成 LayoutParams.MATCH_PARENT。
html页面的布局流式布局,三种方式实现元素水平居中显示与固定布局和流式布局概念理解...
weixin_42601702的博客
06-10 774
css中让文本居中的属性很简单就可以实现，那就是设置text-align:center即可。而我这里所说的“元素”实际上是指容器，如果要有一个贴切点的标签，那应该可以用div来表示。让元素水平居中，相信对于许多网页设计师而言都不会陌生。但是有的时候，自己就在想，为什么要让元素水平居中？是出于什么原因呢？都是一点自己的见解，蛮写下来...首先，要 让元素水平居中，就必须得了解css设计中固定布局和流...
html/css——静态网页开发遇到的问题及解决方法(壹)
weixin_52486516的博客
11-17 1517
1、截取的网页为什么比原网页要大？2、ps中，给原图划 标尺线时，总会耗时比较长3、出现如下情况，该如何解决？4、如何设置，才能才能固定多行文本的宽高 5、下拉框，想要多选时，怎样设置？6、在表单中，如何点击文字，就会选中输入框？7、表单元素中，提交时，输入框中，不能为空，如何设置？
新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版
最新发布
quanzhankaifaqua的博客
07-10 1027
系统地讲解Web前端开发的核心技术，主要内容包括Web前端开发概述、HTML5基础、HTML5页面元素和属性、表单、CSS3基础、CSS3修饰页面元素、CSS3高级选择器、CSS3盒子模型、浮动与定位、CSS3高级应用、网页布局、Flex布局、Grid布局等，并提供“大学生参军入伍专题网站”和“文创商城”两个实战案例。《HTML5+CSS3 Web前端开发与实例教程：微课视频版》以“从项目中来到项目中去”为主旨，从Web前端开发的基本概念入手，系统介绍HTML5、CSS3网页编程技巧。
Web期末大作业-JD商城首页源码HTML+CSS+JavaScript
12-10
基于HTML、CSS、JavaScript实现的JD商城首页源码，Web期末大作业项目案例，一共包括以下样式代码： 1、顶部通栏快捷入口 2、顶部通栏可关闭广告 3、通栏搜索框区域+购物车按钮 4、通栏导航按钮+左侧纵向导航 5、轮播...
基于HTML CSS JS实现仿京东商城首页的静态网页设计源码+项目说明.zip
12-17
基于HTML CSS JS实现仿京东商城首页的静态网页设计源码+项目说明.zip 仿京东商城首页的静态网页设计源码 【静态网页演示】 DEMO:https://jrr997.github.io/JD.com/ 京东静态网页制作(2022-12月) JD.com静态网页制作...
JD-Mall:Html5+Css3还原jd商城首页
05-01
"JD-Mall:Html5+Css3还原jd商城首页"这个标题指出，这是一个关于使用HTML5和CSS3技术来重现京东（JD）商城首页的项目。这通常是一个前端开发的学习实践，目的是熟悉和应用这两种现代网页开发语言，以构建一个功能和...
用流式布局实现一个JD.zip
04-18
在“JD.zip”文件中，很可能是包含了一个模拟京东商城页面的示例，展示了如何运用流式布局技术来创建一个响应式的移动端界面。通过对这个项目的分析和实践，开发者可以深入理解流式布局在实际项目中的应用，并提升其...
html+css京东页制作
01-15
下面我们将深入解析这个“html+css京东页制作”项目涉及的关键知识点。 1. **HTML结构**： - **头部**（Header）：通常包含网站logo、导航菜单等元素，确保用户能快速识别网站并进行浏览。 - **主体**（Main）：...
移动web开发之流式布局及案例练习
xia_zai_ya的博客
05-03 1322
开始学习移动web开发布局，给自己做一些总结。 移动端技术解决方案 1.移动端浏览器兼容问题. 移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。 我们可以放心使用 H5 标签和 CSS3 样式。 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可. 2.移动端公共样式 这里推荐使用normalize.css/ 官网地址 移动端大量使用 CSS3盒子...
HTML5 入门详解
weixin_34245169的博客
11-22 480
1. 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。 HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一系列Javascript API，如地理定位、重...
品优购综合案例——购物车（JQ实现11个效果+Html+Css）之自学系列
weixin_46972646的博客
01-15 4675
<!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/comm
品优购综合案例——详情页（html+CSS综合运用）自学系列
weixin_46972646的博客
12-23 4075
<!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/base
品优购综合案例——登录页（html+CSS综合运用）自学系列
weixin_46972646的博客
12-24 1131
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>register</title> <link rel="stylesheet" href="css/base
品优购综合案例——首页（html+CSS综合运用）自学系列
weixin_46972646的博客
12-20 1120
html： Document 品优购欢迎您！ 请登录 免费注册
品优购综合案例——首页（JQ电梯导航栏+互斥锁问题）自学系列
weixin_46972646的博客
12-30 1076
<!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/base
HTML与CSS基础教程：网页元素与SEO优化
"html+css.md" 本文档是关于HTML和CSS的基础学习笔记，主要涵盖了网页的基本元素、常用标签以及SEO优化等内容，旨在帮助个人学习和理解网页开发的基础知识。 一、网页的基本元素与lang属性 在HTML中，`<!DOCTYPE ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值