boolan web ex 第四

本文介绍12306网站表格设计过程中的关键技术和解决方案,包括边框处理、文本显示优化、图标应用及三角形符号的实现。

这里写图片描述

到了实现该表格的阶段。
表格里面还是有很多坑:又发现编码过程种可能遇见的bug若干。
先看实现的效果

这里写图片描述

基本上实现了

基本上先了效果图种的效果
这里面的坑点有如下几个
**

1 table中 边线 上下 有空格*

*
这里写图片描述
有两种解决办法:
1.1 用内置div来实现
这里写图片描述
在th中内置一个div,设置该div的pading-top,与 pading-buttom属性。这个方法有个缺点就是会在每个表现都需要添加一个div;代码显的不是那么优雅。
1.2 用图片
这也是12306网站的实现方法,12306网站上小的元素基本上都是图片。包括等下要讲的始,终,过等小图标。
来看这里用图片实现的方式:
表格表头高100px,图片边框是宽1px,高82px;图片数据可以从设计要求中提取。
这里用伪类的方式实现。
原则上用:after 或者:before都可以。
如下:.thTableDouleRow为th的类选择器。在每个使用该选择器的th前添加一个边框图片。

.thTableDouleRow:before {
/*before的内容为content,会出现在含有该伪选择器的前面*/
    content: url(../img/borderGreen.png);
    height: 82px;
    float: left;
    margin: 0;
    padding-top: 12px;
    padding-bottom: 12px;
}

这里用:after会出现bug
这里写图片描述
双列进了换行,这使图片的插入偏离了预期的位置。需要重新设定文职。为了避免不必要的麻烦,估用before来实现相对简单。

2. HTML 定高外框 文本双行显示居中

上下宽度过高,这里采用的是用内置一个div的方式来实现,用pading-top 与pading-buttom的方式来实现。如果高度没有超过文字高度的三倍还是可以用 line-height来实现的。

用div的方式:
这里写图片描述

.thTableDouleRow .divDoubleRow {
    padding-top: 35px;
    padding-bottom: 25px;
    overflow: hidden;
    height: 106px;
    margin: 0;
}

用line-height的方式
字体是16px;外框高度为50px;
这里写图片描述

.tableIndex .tdTrainFromCityInfo {

    line-height: 22px;
    text-align: left;
}

各有适用情况吧~

3.文本后接三角符号

这里写图片描述

在第一版本中对各个属性操作不是很熟练,采用的方法是内置了2个div来实现的对齐。
其实用伪类来实现很high

如下所示:

.thTableDouleRow .upTriangle {}

.thTableDouleRow .downTriangle {}

.upTriangle:after {
    content: "";

    width: 0;
    height: 0;
    margin-left: 2px;
    /* bottom相对于原来位置的偏移,用来对齐。*/
    position: relative;
    bottom: 12px;
    border-bottom: 5px solid #ffffff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.downTriangle:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 2px;
    /* bottom相对于原来位置的偏移,用来对齐。*/
    position: relative;
    top: 12px;
    border-top: 5px solid #ffffff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

加入的方式很简单:

      <span class="spanDoubleRow upTriangle ">出发时间</span> 

span标签执行这个类选择器就好了~

12306中这个三角依然是用图片来实现的。不过我这样还是biG高一点,有木有!

4.小图标 始 终 过 HTML

这里写图片描述
这样的小图标放以前应该是要用图片来实现的,12306也是这么做的。翻了翻qunar发现,是用来实现,逐拷贝之。

实现如下:

.tableIndex .shi_icon {
    position: relative;
    display: inline-block;
    height: 19px;
    width: 19px;
    line-height: 19px;
    text-align: center;
    border: 0px solid #e0e0e0;
    font-style: normal;
    /* margin-top: 2px;*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: rgb(207, 151, 63);
    color: rgb(255, 255, 255);
}

.tableIndex .zhong_icon {
    background: rgb(62, 104, 0);
}

.tableIndex .guo_icon {
    background: rgb(107, 152, 218);
}

这里设置成inline-block是为了更改长宽
要红了,shi,guo,zhong。quner,12306也都是这样的命名。我了个大槽

用这种方式的是时候有个bug
这里写图片描述
这里写图片描述
坑爹有没有,中间居然多了一个空格出来~ 找了半天没找到原因。
于是只有换方法了

.tableIndex .tdTrainFromCitySpan {
    position: relative;
    left:-5px;*/
    display: inline-block; 
    font-size: 14px;
    font-family: "微软雅黑";
    font-weight: bold;
}

将postition相对位置,并设置left:-5px; 6不6。

这里写图片描述

撸完收工~ 要开始加javascript代码了

这里写图片描述

神还原有没有~
这里写图片描述

<think>好的,我现在需要帮助用户解决如何用Java定义一个Person类的问题。根据用户提供的引用内容,特别是引用[1]、[2]、[3]、[4],我需要确保类中包含指定的私有属性,并正确实现构造函数、toString方法、setter/getter方法,以及main方法的逻辑。 首先,用户的需求是创建一个Person类,属性顺序必须严格按照name、age、gender、id,并且都是private。然后需要无参构造函数和有参构造函数,其中无参构造函数需要打印特定信息,并且输出属性值。有参构造函数可能涉及如何初始化这些属性,尤其是id的处理,因为用户提供的示例输出中id都是0,可能暂时不需要处理id的赋值,或者需要根据某种规则生成。 接下来是toString方法,引用[2]中提到要按照类名[name=..., age=..., gender=..., id=...]的格式输出,建议使用Eclipse自动生成,这意味着可以使用IDE生成的toString方法,或者手动编写。同时,用户示例中的输出显示id=0,可能id字段在有参构造函数中没有被设置,而是默认初始化为0,或者在类中没有对id进行赋值,所以保持默认值。 关于setter和getter方法,需要为每个私有属性生成对应的公共方法,这部分比较直接,按照JavaBean的规范编写即可。 在main方法中,用户需要从输入读取n,然后读取n行的name、age、gender,创建对象,并逆序输出。示例输入中的第三行数据是c 10 false,而输出顺序是逆序的,所以创建的对象数组需要反向遍历。然后使用无参构造函数创建对象并打印,此时无参构造函数会打印"This is constructor",并且输出的属性值为null,0,false,0,对应示例中的最后一行输出。 现在需要注意的问题点: 1. 无参构造函数的实现:打印"This is constructor",并输出属性值。但是根据示例输出,无参构造函数创建的对象的toString输出是Person [name=null, age=0, gender=false, id=0],而引用[3]中提到无参构造函数需要将属性按照name,age,gender,id格式输出。可能这里存在混淆,可能无参构造函数需要打印的是属性值,而toString方法负责返回格式化的字符串。需要仔细核对用户提供的示例。 根据引用[1]中的第一条要求,无参构造函数需要打印"This is constructor",并将name,age,gender,id按格式输出。这里的输出可能指的是构造函数内部打印这些属性的值,而不是通过toString方法。但示例中的输出显示,当调用无参构造函数时,输出的是"This is constructor"和"null,0,false,0",然后打印对象时调用toString方法得到Person [name=null, ...]。因此,无参构造函数内部应该打印这四个属性的值,用逗号分隔,而toString方法是按照类名[name=...]的格式。 因此,在无参构造函数中,代码应该是: System.out.println("This is constructor"); System.out.println(name + "," + age + "," + gender + "," + id); 但根据示例输出,当使用无参构造函数创建对象时,输出是: This is constructor null,0,false,0 Person [name=null, age=0, gender=false, id=0] 所以构造函数内部打印的是这四个属性的当前值,而因为无参构造函数没有初始化这些属性,所以name是null,age是0,gender是false,id是0。然后,当打印对象时,toString方法被调用,输出格式化的字符串。 接下来是有参构造函数,根据引用[1]中的第二条,有参构造函数需要接收参数来初始化属性。但用户提供的输入样例中,每行输入是name age gender,例如"a 11 false",而id在输出中都是0。所以有参构造函数可能只接受name、age、gender三个参数,而id可能没有被设置,保持默认值0,或者需要从其他地方获取。但根据示例输出,所有对象的id都是0,所以可能id在构造函数中没有被赋值,或者有参构造函数没有处理id,而是由其他逻辑处理。但根据问题描述,用户要求的有参构造函数可能应该包含所有四个属性,但输入中只提供三个参数,这可能意味着用户的问题中存在矛盾,或者需要进一步明确。 查看用户提供的引用[2]中的输入样例和输出样例,输入是n行,每行是name age gender,例如: 输入样例: 3 a 11 false b 12 true c 10 false 然后输出样例中的每个对象的id都是0,说明在有参构造函数中,id没有被传入,而是设置为0。因此,有参构造函数应该接受name、age、gender三个参数,而id可能初始化为0,或者由类中的某个机制生成。但根据问题描述,用户可能希望有参构造函数接收name、age、gender,而id可能未被处理,或者需要其他方式处理。但根据示例中的输出,id始终为0,所以可能构造函数中没有处理id,所以它保持默认值0。 因此,有参构造函数的参数应该是name, age, gender,并且id可能没有被设置,或者设置为某个默认值。根据用户提供的引用[1]中的第二条,有参构造函数的描述没有明确提到id的处理,所以可能用户希望有参构造函数只初始化name、age、gender,而id保持0,或者在创建对象时由其他方式赋值,但根据示例输出,所有对象的id都是0,所以可能id在有参构造函数中没有被处理,所以有参构造函数的参数是name, age, gender,而id设为0? 但根据引用[1]中的第一条,无参构造函数的输出是name,age,gender,id,所以可能id是类中的一个属性,但如何在有参构造函数中处理?例如,用户示例中的输出显示,有参构造函数创建的对象id都是0,所以可能无论是有参还是无参构造函数,id都被初始化为0。或者,可能用户希望在有参构造函数中传入id,但输入中没有提供,这就需要进一步确认。 但根据用户的问题描述,用户提到“输入n行name age gender”,所以有参构造函数可能只接受这三个参数,而id如何处理?可能问题中存在遗漏,或者id应该由其他方式生成,比如静态变量自增。但根据示例输出中的id都是0,可能用户希望id暂时不被处理,保持默认值0。因此,有参构造函数的参数应为name, age, gender,而id设为0,或者没有处理,由类的其他部分处理。 总结: Person类中的属性为private String name; private int age; private boolean gender; private int id; 无参构造函数:打印"This is constructor",然后打印四个属性的当前值,即name(null),age(0),gender(false),id(0)。 有参构造函数:接受name, age, gender作为参数,初始化这三个属性,而id设为0。或者在用户提供的示例中,id可能未被处理,保持默认值0。 接下来是setter和getter方法,每个属性都需要。 toString方法生成类似Person [name=..., age=..., gender=..., id=...]的字符串。 在main方法中,读取n,然后n行输入,每行是name age gender,使用有参构造函数创建对象,存储到数组或列表中,然后逆序输出这些对象,接着使用无参构造函数创建对象,打印它。 现在需要考虑代码的实现: 根据引用[2]中的输出样例,有参构造函数创建的对象在逆序输出时的顺序是输入的逆序。例如输入顺序是a、b、c,输出是c、b、a。因此,在读取n个对象后,需要将它们逆序输出,比如使用一个数组,然后从后往前遍历。 在main方法中: 读取n,然后循环n次,每次读取name、age、gender,然后调用有参构造函数创建Person对象,参数是name、age、gender。注意,age是int,gender是boolean,需要转换输入的字符串。例如,输入中的"false"转换为boolean false,"true"转换为boolean true。 然后逆序输出这些对象,即最后创建的对象先输出。或者根据输入顺序,第一个输入的对象是a,第二个是b,第三个是c,逆序输出是c、b、a,即数组的第n-1到0索引。 然后,使用无参构造函数创建对象,此时会触发无参构造函数中的打印语句,打印"This is constructor"和属性值,接着打印该对象的toString结果。 现在开始编写代码: Person类: 属性: private String name; private int age; private boolean gender; private int id; 构造函数: 无参构造函数: public Person() { System.out.println("This is constructor"); System.out.println(name + "," + age + "," + gender + "," + id); } 这里,由于name是String,默认null;age是int,默认0;gender是boolean,默认false;id是int,默认0。因此,输出应为null,0,false,0。 有参构造函数: public Person(String name, int age, boolean gender) { this.name = name; this.age = age; this.gender = gender; this.id = 0; // 或者省略,因为int默认0 } 或者如果id需要从参数传入,但根据示例输出,id都是0,所以可能不需要传入id参数。 toString方法: @Override public String toString() { return "Person [name=" + name + ", age=" + age + ", gender=" + gender + ", id=" + id + "]"; } setter和getter方法: public String getName() { return name; } public void setName(String name) { this.name = name; } // 同理其他属性的setter和getter main方法: public static void main(String[] args) { Scanner scanner = new Scanner(System.in); int n = scanner.nextInt(); List<Person> persons = new ArrayList<>(); for (int i = 0; i < n; i++) { String name = scanner.next(); int age = scanner.nextInt(); boolean gender = scanner.nextBoolean(); persons.add(new Person(name, age, gender)); } // 逆序输出 for (int i = persons.size() - 1; i >= 0; i--) { System.out.println(persons.get(i).toString()); } // 无参构造函数创建对象并打印 Person p = new Person(); System.out.println(p.toString()); } 需要注意的是,在输入时,像"false"这样的字符串需要用scanner.nextBoolean()来读取,这可能需要正确的输入格式。例如,输入中的每个字段应该由空格分隔,并且gender字段必须是"true"或"false"。 测试输入样例: 3 a 11 false b 12 true c 10 false 处理过程: 读取n=3,然后读取三行数据,创建三个Person对象,参数分别是("a",11,false), ("b",12,true), ("c",10,false)。然后逆序输出,即第三个对象(c)先输出,接着是第二个(b),然后是第一个(a)。每个对象的id都是0。然后创建无参构造的对象,此时会先打印"This is constructor"和null,0,false,0,然后打印该对象的toString结果,即Person [name=null, age=0, gender=false, id=0]。 这样输出的结果与用户提供的示例一致。 现在,可能存在的问题是,在无参构造函数中,输出的格式是否应该用逗号分隔,而示例中的输出显示的是null,0,false,0,而构造函数中的打印语句是否正确。例如,在无参构造函数中: System.out.println(name + "," + age + "," + gender + "," + id); 当name为null时,输出null,其他为0和false,所以结果正确。 另外,关于有参构造函数是否需要初始化id,根据示例,id始终为0,因此不需要传入id参数,构造函数中也不设置id,保持默认值0即可。 这样,整个代码应该满足用户的需求。</think>根据需求实现的Person类代码如下: ```java import java.util.Scanner; import java.util.ArrayList; public class Person { private String name; private int age; private boolean gender; private int id; // 无参构造函数 public Person() { System.out.println("This is constructor"); System.out.println(name + "," + age + "," + gender + "," + id); } // 有参构造函数 public Person(String name, int age, boolean gender) { this.name = name; this.age = age; this.gender = gender; } // toString方法 @Override public String toString() { return "Person [name=" + name + ", age=" + age + ", gender=" + gender + ", id=" + id + "]"; } // Setter/Getter方法 public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public boolean isGender() { return gender; } public void setGender(boolean gender) { this.gender = gender; } public int getId() { return id; } public void setId(int id) { this.id = id; } public static void main(String[] args) { Scanner scanner = new Scanner(System.in); int n = scanner.nextInt(); ArrayList<Person> list = new ArrayList<>(); // 读取n个对象 for (int i = 0; i < n; i++) { String name = scanner.next(); int age = scanner.nextInt(); boolean gender = scanner.nextBoolean(); list.add(new Person(name, age, gender)); } // 逆序输出 for (int i = list.size()-1; i >= 0; i--) { System.out.println(list.get(i)); } // 无参构造函数创建对象 Person p = new Person(); System.out.println(p); } } ``` ### 代码要点解析 1. **属性声明**:严格按顺序声明四个私有属性$name, age, gender, id$,其中$id$未被显式初始化,默认为0 2. **构造函数**: - 无参构造函数输出构造提示后,打印未初始化的属性值$null,0,false,0$ - 有参构造函数通过参数初始化前三个属性,$id$保持默认值0[^2] 3. **toString()方法**:使用Eclipse自动生成格式,匹配输出要求$Person[name=..., age=..., gender=..., id=...]$ 4. **逆序输出**:通过ArrayList存储对象,倒序遍历实现逆序输出[^2] ### 执行流程说明 输入示例: ``` 3 a 11 false b 12 true c 10 false ``` 程序将: 1. 创建三个对象存入列表 2. 倒序输出时显示$c→b→a$ 3. 最后创建的无参构造对象打印两次: - 第一次由构造函数输出$null,0,false,0$ - 第二次由toString()输出格式化结果 ### 注意事项 1. 输入时需确保字段顺序为$name\ age\ gender$ 2. boolean类型输入须严格使用$true/false$字符串 3. 所有输出中的$id$字段保持默认值0,符合题目要求
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值