会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132498个问题
Python 全系列/第一阶段:Python入门/编程基本概念 23297楼

问题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 23298楼
JAVA 全系列/第一阶段:JAVA 快速入门/变量、数据类型、运算符 23299楼
JAVA 全系列/第八阶段:Linux入门到实战/Maven 23301楼
Python 全系列/第二阶段:Python 深入与提高/模块 23302楼

//服务端代码
import java.io.IOException;
import java.io.PrintWriter;
import java.net.Socket;

public class BasicSocketClient {
    public static void main(String[] args) {
        Socket socket=null;
        PrintWriter pw=null;

        try {
            //创建Socket对象,两个参数:1.服务端的IP地址,2.服务端所监听的端口
            socket =new Socket("127.0.0.1",8888);
            pw.println("服务端 你好");
            pw.flush();

        } catch (IOException e) {
            e.printStackTrace();
        }finally{
            if (pw!=null){
                pw.close();
            }
            if (socket!=null){
                try {
                    socket.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }

    }
}
//客户端代码

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.ServerSocket;
import java.net.Socket;

public class BasicSocketServer {
    public static void main(String[] args) {
        Socket socket=null;
        BufferedReader br=null;
        try {
            ServerSocket serverSocket=new ServerSocket(8888);
            System.out.println("服务器启动等待监听。。");
            //启动服务器监听
            socket= serverSocket.accept();
            //读取客户端发送的消息
            br= new BufferedReader(new InputStreamReader(socket.getInputStream()));
            System.out.println(br.readLine());
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if (br!=null){
                try {
                    br.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (socket!=null){
                try {
                    socket.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }


    }
}
为啥我的结果报错,服务端输出null

image.png

image.png


JAVA 全系列/第二阶段:JAVA 基础深化和提高/网络编程(旧) 23303楼
Python 全系列/第二阶段:Python 深入与提高/异常机制 23305楼
Python 全系列/第二阶段:Python 深入与提高/异常机制 23306楼
Python 全系列/第一阶段:Python入门/序列 23309楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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