会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132431个问题
Python 全系列/第七阶段:网页编程基础/html5 17237楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 17238楼

image.png

JAVA 全系列/第一阶段:JAVA 快速入门/变量、数据类型、运算符 17239楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 17241楼
Python 全系列/第二十三阶段:人工智能基础_机器学习理论与实战/Kaggle竞赛 17242楼
Python 全系列/第一阶段:Python入门/编程基本概念 17244楼

    //把book对象存放到集合里面
        List<Book> bookList = new ArrayList<>();
        Book book = null;
        for (Iterator<Element> iteBook = rootElement.elementIterator(); iteBook.hasNext();
        ) {
            //创建Book对象
             book = new Book();
            Element next = iteBook.next();//得到每一个book
            //使用for循环继续遍历
            for (Iterator<Element> nextBook = next.elementIterator(); nextBook.hasNext();
            ) {
                //得到每一个子元素
                Element subNext = nextBook.next();
                //System.out.println(subNext.getName() + "\t" + subNext.getText());
                //封装成Book对象
                //获取节点的名称
                String nodeName = subNext.getName();
                //使用switch判断
                switch (nodeName) {
                    case "name":
                        book.setName(subNext.getText());
                        break;
                    case "author":
                        book.setAuthor(subNext.getText());
                        break;
                    case "price":
                        book.setPrice(Double.parseDouble(subNext.getText()));
                        break;
                }
                //添加到集合当中
                bookList.add(book);
            }
            //遍历集合
            for (Book b:
               bookList  ) {
                System.out.println(b.getName()+"\t"+b.getAuthor()+"\t"+b.getPrice());
                
            }

        }
    }
}

这里打印出现多次,图片.png,但是通过debug,

for (Book b:
   bookList  ) {
    System.out.println(b.getName()+"\t"+b.getAuthor()+"\t"+b.getPrice());
    break;
}

只能娶到第一个对象内容第二个对象内容取不到,图片.png

JAVA 全系列/第二阶段:JAVA 基础深化和提高/XML 技术(旧) 17245楼
Python 全系列/第十五阶段:Python 爬虫开发/爬虫基础(旧) 17246楼

问题1:对第9个图片上第三行文字进行绝对定位时,为什么设置left为0,文字是整体靠左对齐?设置left为92px时文字才处于相对居中位置,而前两行文字和第1,5个图片上所有文字均是设置left为0来实现文字整体居中的。

<!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">
    <title>Document</title>
    <style>
        .box{
            width:100%;
            height:1155px;
        }
        .wrap{
            width:1240px;
            height:1155px;
            margin:0 auto;
        }
        /* 给img1,5,9的父元素设置相对定位 */
        .wrap-x{
            position:relative;
        }
        .wrap>div{
            width:303px;
            height:375px;
            float:left;
            margin-top:10px;
            margin-right:9px;
            background-color:gainsboro;
            /* 图片居中设置,用margin:0 auto;会和外边距设置冲突
            只显示水平居中,不显示外边距 */
            text-align:center;
        }
        .wrap>div:nth-child(4n){
            margin-right:0;
        }
        img{
            width:230px;
            height:230px;
        }
        .imgs{
            width:100%;
            height:100%;
        }
        /* 给img1,5,9上的文字进行绝对定位,使之出现在图片上 */
        .name{
            width:303px;
            height:31.33px;
            position:absolute;
            top:220px;
            left:0;
            color:#FFFFFF;
            font-size:21px;
            font-weight:700;
            margin-bottom:0;
        }
        .desc{
            width:303px;
            height:20.67px;
            position:absolute;
            top:260px;
            left:0;
            color:#ffffff;
            font-size:14px;
        }
        .price{
            width:82.06px;
            height:36px;
            position:absolute;
            top:280px;
            left:100px;
            color:#ebce6b;
            font-size:24px; 
            font-weight:700;
        }
        .original1{
            font-size:14px;
            font-weight:700;
            color:#ffffff;
            text-decoration:line-through;
            margin-left:4px;
        }
        .goods-name{
            width:303px;
            height:24px;
            color: #333333;
            font-size:16px;
            margin:0 0 2px;
        }
        .goods-desc{
            width:303px;
            height:20.67px;
            color:#999999;
            font-size:14px;
        }
        /* 为什么设置第三个P标记里的价格字体不生效?但P嵌套的span标记设置的字体却能生效? */
        .goods-price{
            /* width:58.71px; */
            /* height:32.67px; */
            color:#CC0000;
            font-size:22px;
            padding:0 0 0 14px;
        }
        a{
            text-decoration:none;
        }
        span{
            width:14px;
            height:20.67px;
            color:#CC0000;
            font-size:14px;
            padding:0 0 0 0;
        }
        .original2{
            width:37.36px;
            height:15.33px;
            text-decoration:line-through;
            color:#666666;
            font-size:14px;
            margin-left:8px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
          <div class="wrap-x"><a href="#">
              <img src="../images/img1.jpg" class="imgs" alt="">
              <p class="name">魅族 EP3C 耳机</p>
              <p class="desc">【限时特惠99元】</p>
              <p class="price">¥99<span class="original1">¥120</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img2.png" alt="">
             <p class="goods-name">魅族 POP Pro 主动降噪耳机</p>
             <p class="goods-desc">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
             <p class="goods-price"><span>¥</span>499</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img3.png" alt="">
              <p class="goods-name">魅族 POP2s 真无线耳机</p>
              <p class="goods-desc">【限时3期免息】好声音标杆 | Flyme 妙连</p>
              <p class="goods-price"><span>¥</span>299</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img4.png" alt="">
              <p class="goods-name">魅族 EP63NC 无线降噪耳机</p>
              <p class="goods-desc">【限时特惠249元+3期免息】</p>
              <p class="goods-price"><span>¥</span>249<span class="original2">¥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img5.jpg" class="imgs" alt="">
              <p class="name">魅族 HD60 头戴式蓝牙耳机</p>
              <p class="desc">【限时特惠329元+3期免息】</p>
              <p class="price">¥329<span class="original1">¥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img6.png" alt="">
              <p class="goods-name">魅族 HD60 降噪耳机</p>
              <p class="goods-desc">【限时特惠799元+12期免息】</p>
              <p class="goods-price"><span>¥</span>799<span class="original2">¥1099</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img7.png" alt="">
              <p class="goods-name">魅族 POP2 真无线蓝牙耳机</p>
              <p class="goods-desc">【限时特惠249元】</p>
              <p class="goods-price"><span>¥</span>249<span class="original2">¥399</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img8.png" alt="">
              <p class="goods-name">魅族 HIFI 解码耳放</p>
              <p class="goods-desc">【限时特惠149元】</p>
              <p class="goods-price"><span>¥</span>149<span class="original2">¥169</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img9.jpg" class="imgs" alt="">
              <p class="name">MEIZU UR 高端定制耳机 预约</p>
              <p class="desc">【预约专用】私人定制,为你而声</p>
              <p class="price">¥200</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img10.png" alt="">
              <p class="goods-name">MEIZU UR LIVE 特调版</p>
              <p class="goods-desc">手工定制公模 | 楼氏定制四单元动铁</p>
              <p class="goods-price"><span>¥</span>1299</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img11.png" alt="">
              <p class="goods-name">POP 真无线蓝牙耳机</p>
              <p class="goods-desc">【限时特惠299元】</p>
              <p class="goods-price"><span>¥</span>299<span class="original2">¥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img12.png" alt="">
              <p class="goods-name">魅族 EP2X 耳机</p>
              <p class="goods-desc">一体式线控 | 3.5mm接口 | 流线设计</p>
              <p class="goods-price"><span>¥</span>69<span class="original2">¥129</span></p>
          </a></div>
       </div>
    </div>
</body>
</html>

1616834218171226.png

1616834294631996.png






WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 17247楼

/* 顶部图片隐藏 */
.header{
    width: 100%;
    height: 100%;
    display: none;
}
/* 黑色导航 */
.nav{
    width: 100%;
    height: 40px;
    background-color:#333;
    

}
/* 居中div */
.nav-center{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}
/* a的字体颜色 */
a{
    color: #b0b0b0;
}
/* 鼠标悬停时字体颜色 */
.nav-center a:hover{
    color: #fff;
}
/* 左侧li浮动 定位*/
.nav-left>li{
    float: left;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* 右侧li浮动 定位*/
.nav-right>li{
    float: right;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* span竖杠(|)的外边距 */
.nav span{
    margin: 0 3.6px;
    color: #424242;
}
/* 购物车:大小 颜色 外边距 */
.cart{
    width: 120px;
    height: 40px;
    background: #424242;
    margin-left: 20px;
}
/* 购物车鼠标悬停时背景颜色 */
.cart:hover{
    background: #fff;
}
/* 购物车鼠标悬停时a的的颜色*/
.cart:hover>a{
    color: #ff6700;
}
/* 购物车下拉列表的属性,1:相对于右侧li定位,隐藏下拉列表,所有属性:all .3s的过度 */
.cart>.cart-list{
    width: 316px;
    /* 高度设置为0隐藏下拉列表 */
    height: 0px;
    background:#fff;
    position: absolute;
    right: 0px;
    top: 40px;
    box-shadow: 0 2px 10px #aaa;
    color: #424242;
    /* 下拉列表的文字溢出部分隐藏 */
    overflow: hidden;
    /* 过度:所有属性 .3s秒速度显示 */
    transition: all .3s;
    /* 在白色导航上边显示出来 */
    z-index: 1;
}
/* 鼠标悬停时显示下拉列表,字体居中 */
.cart:hover>.cart-list{
    height: 100px;
    line-height: 100px;
}
/* app下载的属性中的二维码框设置 */
.app>.QRcode{
   width: 124px;
    /* 高度设置为0隐藏下拉列表 */
   height: 0px;
   background-color:#fff;
   box-shadow: 0 1px 5px #aaa;
   /* 相对于左侧li定位 */
   position: absolute;
   top: 40px;
   left: 50%; 
   margin-left: -66px; 
   /* 下拉列表的文字溢出部分隐藏 */
   overflow: hidden;
   /* 过度:所有属性 .3s秒速度显示 */
   transition:all .3s;
   /* 在白色导航上边显示出来 */
   z-index: 1;
}
/* 二维码图片的设置 */
.QRcode>.QRcode-img{
    width: 90px;
    height: 90px;
    margin: 18px 0 0;
}
/* 二维码框中字体的设置 */
.QRcode>p{
    font-size: 14px;
    line-height: 1;
}
/* 鼠标悬停二维框显示 */
.app:hover>.QRcode{
    height: 148px;
}
/* 小三角的设置:绘制特殊图形的方式写 */
.sanjiao{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* 定位小三角并且隐藏 */
    position: absolute;
    left: 17px;
    top: 32px;
    display: none;
}
/* 鼠标悬停显示小三角 */
.app:hover>.sanjiao{
    display: block;
}
/* 白色导航部分 */
.white-nav{
    width: 100%;
    height: 100px;
    position: relative;
}
/* 居中部分 */
.white-wrap{
    width: 1226px;
    height: 100px;
    margin: 0 auto;
}
/* logo部分 */
.logo-mi{
    width: 55px;
    height: 55px;
    background: #ff6700;
    float: left;
    margin-top: 22.5px;
    /* 定位加隐藏 */
    position: relative;
    overflow: hidden;
    
}
/* 中间文字导航部分 */
.white-nav-center{
    width: 876px;
    height:100px;
    float: left;
}
/* 搜索框部分 */
.nav-input{
    width: 295px;
    height:100px;
    background: blue;
    float: right;
}
/* logo的图片大小 */
.logo-mi>a>img{
    width: 100%;
    height: 100%;
    /* 定位加过渡*/
    position: absolute;
    top: 0;
    transition: all .3s;
}
/* logo定位的设置 */
.mi-logo{
    top: 0;
    left: 0px;
}
/* logo-mi-home定位的设置 */
.mi-home{
    top: 0;
    left: -55px;
}
.logo-mi:hover>a>.mi-home{
    left: 0px;
}
.logo-mi:hover>a>.mi-logo{
    left: 55px;
}
/* 白色导航中间部分 浮动加字体间距 */
.white-nav-center ul>li{
    float: left;
    line-height: 100px;
    
}
/* 设置a的字体 颜色 内边距 */
.white-nav-center>ul>li>a{
   font-size: 16px;
   color: #333;
   padding:0 10px;
}
/* logo右边图标的调整 */
.white-nav-center>ul>li:first-child{
    margin-top: 9px;
    margin-left: 20px;
    margin-right: 40px;
}
/* 鼠标悬停a的文字变橘色 */
.white-nav-center>ul>li>a:hover{
    color: #ff6700;
}
/* 白色导航栏的下拉列表的属性 */
.pull-down{
    width: 100%;
    height: 230px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    position: absolute;
    top: 100px;
    left: 0;
    box-shadow: 0 1px 2px #aaa;
    box-sizing: border-box;
    display: none;
    transition: all .3s ;
    
}
.pull-down-center{
    width: 1226px;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
}
.img-box{
    width: 204px;
    height: 110px;
    border-right:2px solid #bdb8b8 ;
    margin-top: 30px;
    margin-bottom: 15px;
    
}
.img-box img{
    width: 160px;
    height: 110px;
}
.pull-down-center p{
    font-size: 12px;
    line-height: 20px;
    
}
.pull-down-center p:nth-of-type(1){
    color: #ff6700;
}
.pull-down-center p:nth-of-type(2){
    color: #333;
}
.white-nav li:hover>.pull-down{
    display: block;
   
}

白色导航栏的li下拉列表不显示过渡属性

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 17248楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/网络编程 17249楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 17250楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637