ORIGIN

Practice 开班信息

Web StudyProject 12 mins2.2k words

Practice how to use Photoshop to measure the heights of a given picture and write the picture using HTML and CSS.

img

This is how the picture looks like but it’s not the actual size since I can’t get the original picture. So this is only a reference about the style and structure.

Build Structure

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        /* clear default style */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* unify fonts in the page */
        
        body {
            font: 12px/1 "Microsoft Yahei UI"
        }
    </style>
</head>

<body>
    <!-- outer div that contains the all content-->
    <div class="outer">

        <!-- head of 开班信息 -->
        <div class="title"></div>

        <!-- content of 开班信息 -->
        <div class="content"></div>
    </div>
</body>

</html>

.outer

We can get the height and width of the Picture using PS and then set a style of the .outer to make it looks more comfortable.

1
2
3
4
5
6
.outer { 
    width: 300px;
    height: 473px;
    background-color: #fba;
    margin: 50px auto;
}

.title

We can also see from the picture using PS that the title of the picture has margin that is 2px and color is #019e8b.

Its height is 36px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 <!-- head of 开班信息 -->
<div class="title">
    <h3>近期开班</h3>
    <a href="#">16年面授开班计划</a>
</div>
/* set the style of title */
.title {
    border-top: 2px solid #019e8b;
    height: 36px;
    background-color: #f5f5f5;
    /* set vertical align to center */
    line-height: 36px;
    padding: 0px 22px 0px 16px;
}

/* set the hyper reference in title */
.title a {
    float: right;
    color: red;
}

/* or you can also change the order of h3 and a in html */
.title h3 {
    float: left;
    font: 16px/36px "Microsoft Yahei";
}

.content

We can see from the picture that the content has a all-direction border and color is #deddd9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!-- content of 开班信息 -->
<div class="content">
    <h3><a herf="#">JavaEE+云计算-全程就业班</a></h3>
    <ul>
        <li>
            <a class="right-item" href="#"><span class="time">预约报名</span></a>
            <a href="#">开班时间：<span class="time">2016-04-27</span></a>
        </li>
        <li>
            <a class="right-item" href="#"><span class="time">无座，名额爆满</span></a>
            <a href="#">开班时间：<span class="time">2016-04-07</span></a>
        </li>
        <li>
            <a class="right-item" href="#">开班盛况</a>
            <a href="#">开班时间：2016-03-15</a>
        </li>
        <li>
            <a class="right-item" href="#">开班盛况</a>
            <a href="#">开班时间：2016-02-25</a>
        </li>
        <li>
            <a class="right-item" href="#">开班盛况</a>
            <a href="#">开班时间：2016-12-26</a>
        </li>
    </ul>
    <h3><a herf="#">Android+人工智能-全程就业班</a></h3>
    <ul>
        <li>
            <a class="right-item" href="#"><span class="time">预约报名</span></a>
            <a href="#">开班时间：<span class="time">2016-04-10</span></a>
        </li>
        <li>
            <a class="right-item" href="#">开班盛况</a>
            <a href="#">开班时间：2016-03-17</a>
        </li>
        <li>
            <a class="right-item" href="#">开班盛况</a>
            <a href="#">开班时间：2016-02-20</a>
        </li>
        <li>
            <a class="right-item" href="#">开班盛况</a>
            <a href="#">开班时间：2016-12-23</a>
        </li>
    </ul>
    <h3><a herf="#">前端+HTML5-全程就业班</a></h3>
    <ul class="no-border">
        <li>
            <a class="right-item" href="#"><span class="time">预约报名</span></a>
            <a href="#">开班时间：<span class="time">2016-05-10</span></a>
        </li>
        <li>
            <a class="right-item" href="#">开班盛况</a>
            <a href="#">开班时间：2016-03-16</a>
        </li>
    </ul>
</div>
/* set style for content */
        
.content {
    border: 1px solid #deddd9;
    padding: 0 28px 0 22px;
}
/*set style for hyper reference in content */

.content a {
    color: black;
    text-decoration: none;
}
/* set style of ul */

.content ul {
    list-style: none;
    border-bottom: 1px dashed #deddd9;
}
/* set style for each red element */

.content .time {
    color: red;
    font-weight: bold;
}

.content .right-item {
    float: right;
}

.content h3 {
    margin-top: 14px;
    margin-bottom: 16px;
}

.content li {
    margin-bottom: 15px
}

.content .no-border {
    border: none;
}
</style>

NOTE: In IE6, even the item before the float item is a in-line element, it still won’t be in the same line as the upper element. So we need to set the upper element float or change their orders.

At last change the background of .outer into white.

Summary

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
css<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        /* clear default style */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* unify fonts in the page */
        
        body {
            font: 12px/1 "Microsoft Yahei"
        }
        /* set style for the outer div */
        
        .outer {
            width: 300px;
            height: 470px;
            background-color: white;
            margin: 50px auto;
        }
        /* set the style of title */
        
        .title {
            border-top: 2px solid #019e8b;
            height: 36px;
            background-color: #f5f5f5;
            /* set vertical align to center */
            line-height: 36px;
            padding: 0px 22px 0px 16px;
        }
        /* set the hyper reference in title */
        
        .title a {
            float: right;
            color: red;
        }
        
        .content a:hover {
            color: red;
            text-decoration: underline;
        }
        /* or you can also change the order of h3 and a in html */
        
        .title h3 {
            float: left;
            font: 16px/36px "Microsoft Yahei";
        }
        /* set style for content */
        
        .content {
            border: 1px solid #deddd9;
            padding: 0 28px 0 22px;
        }
        /*set style for hyper reference in content */
        
        .content a {
            color: black;
            text-decoration: none;
        }
        /* set style of ul */
        
        .content ul {
            list-style: none;
            border-bottom: 1px dashed #deddd9;
        }
        /* set style for each red element */
        
        .content .time {
            color: red;
            font-weight: bold;
        }
        
        .content .right-item {
            float: right;
        }
        
        .content h3 {
            margin-top: 14px;
            margin-bottom: 16px;
        }
        
        .content li {
            margin-bottom: 15px
        }
        
        .content .no-border {
            border: none;
        }
    </style>
</head>

<body>
    <!-- outer div that contains the all content-->
    <div class="outer">

        <!-- head of 开班信息 -->
        <div class="title">
            <h3>近期开班</h3>
            <a href="#">16年面授开班计划</a>
        </div>

        <!-- content of 开班信息 -->
        <div class="content">
            <h3><a herf="#">JavaEE+云计算-全程就业班</a></h3>
            <ul>
                <li>
                    <a class="right-item" href="#"><span class="time">预约报名</span></a>
                    <a href="#">开班时间：<span class="time">2016-04-27</span></a>
                </li>
                <li>
                    <a class="right-item" href="#"><span class="time">无座，名额爆满</span></a>
                    <a href="#">开班时间：<span class="time">2016-04-07</span></a>
                </li>
                <li>
                    <a class="right-item" href="#">开班盛况</a>
                    <a href="#">开班时间：2016-03-15</a>
                </li>
                <li>
                    <a class="right-item" href="#">开班盛况</a>
                    <a href="#">开班时间：2016-02-25</a>
                </li>
                <li>
                    <a class="right-item" href="#">开班盛况</a>
                    <a href="#">开班时间：2016-12-26</a>
                </li>
            </ul>
            <h3><a herf="#">Android+人工智能-全程就业班</a></h3>
            <ul>
                <li>
                    <a class="right-item" href="#"><span class="time">预约报名</span></a>
                    <a href="#">开班时间：<span class="time">2016-04-10</span></a>
                </li>
                <li>
                    <a class="right-item" href="#">开班盛况</a>
                    <a href="#">开班时间：2016-03-17</a>
                </li>
                <li>
                    <a class="right-item" href="#">开班盛况</a>
                    <a href="#">开班时间：2016-02-20</a>
                </li>
                <li>
                    <a class="right-item" href="#">开班盛况</a>
                    <a href="#">开班时间：2016-12-23</a>
                </li>
            </ul>
            <h3><a herf="#">前端+HTML5-全程就业班</a></h3>
            <ul class="no-border">
                <li>
                    <a class="right-item" href="#"><span class="time">预约报名</span></a>
                    <a href="#">开班时间：<span class="time">2016-05-10</span></a>
                </li>
                <li>
                    <a class="right-item" href="#">开班盛况</a>
                    <a href="#">开班时间：2016-03-16</a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

TOP
COMMENT
  • ABOUT
  • |
  • DONATE
o_oyao
  The Jigsaw puzzle is incomplete with even one missing piece. And I want to be the last piece to make the puzzle complete.
Like my post?
Default QR Code
made with ❤️ by o_oyao
©o_oyao 2019-2024

|