+++ 20210808/1.html
... | ... | @@ -0,0 +1,112 @@ |
1 | +<!doctype html> | |
2 | +<html lang="ko"> | |
3 | +<head> | |
4 | + <meta charset="UTF-8"> | |
5 | + <style> | |
6 | + * {margin: 0; padding: 0; color: #666666; box-sizing: border-box;} | |
7 | + body {background: no-repeat url("http://web.miri.kr/example/images/bg.jpg") fixed; background-size: cover;} | |
8 | + #container {margin: 0 auto; width: 1030px; background-color: #ffffff;} | |
9 | + #top {background-color: #aeaca8;} | |
10 | + #top ul li {display: inline-block; margin-right: 40px; vertical-align: middle;} | |
11 | + #top ul li a {text-decoration: none; color: white; font-size: 20px;} | |
12 | + #top ul li a:hover {color: black;} | |
13 | + #second {background: url("http://web.miri.kr/example/images/main1.jpg"); width: 1030px; height: 500px;} | |
14 | + #article {width: 1030px; height: 500px;} | |
15 | + #left {width: 68%; height: 100%; float: left; border-right: #aeaca8 1px solid;} | |
16 | + #right {width: 30%; height: 100%; float: left; margin-left: 20px;} | |
17 | + #leftTop {width: 100%; height: 50%;} | |
18 | + #leftBottom {width: 100%; height: 50%;} | |
19 | + #leftTopLeft {width: 50%; height: 100%; float: left;} | |
20 | + #leftTopRight {width: 50%; height: 100%; float: left;} | |
21 | + #img1 {width: 300px; height: 200px; margin-top: 20px; margin-left: 25px;} | |
22 | + .caption {margin-left: 25px;} | |
23 | + .lorem1 {font-size: 25px;} | |
24 | + .lorem2 {font-size: 20px; color: #de6581;} | |
25 | + #text1 {margin-top: 20px;} | |
26 | + #leftBottomLeft {width: 50%; height: 100px; float: left;} | |
27 | + #leftBottomRight {width: 50%; height: 100px; float: left;} | |
28 | + #text2 {margin-top: 20px; margin-left: 25px;} | |
29 | + #img2 {width: 300px; height: 200px; margin-top: 20px; margin-left: 25px;} | |
30 | + #rightTop {height: 50%; width: 100%;} | |
31 | + #rightBottom {height: 50%; width: 100%;} | |
32 | + #rightTop ul li {list-style: none; margin-top: 25px; width: 210px;} | |
33 | + #rightTop ul li:hover {background-color: #aeaca8;} | |
34 | + #rightTop ul li a {text-decoration: none; color: #de6581; border-bottom: #aeaca8 1px solid; padding-bottom: 10px;} | |
35 | + #walking {font-size: 20px; margin-top: 20px;} | |
36 | + #contact {font-size: 20px; color: #de6581;} | |
37 | + #footer {width: 1030px; background-color: #aeaca8; color: white;} | |
38 | + </style> | |
39 | +</head> | |
40 | +<body> | |
41 | + <div id="container"> | |
42 | + <div id="top"> | |
43 | + <ul> | |
44 | + <li><a href="#"><img src="http://www.aiit.or.kr/images/logo.png"></a></li> | |
45 | + <li><a id="company" href="#">Company</a></li> | |
46 | + <li><a href="#">Product</a></li> | |
47 | + <li><a href="#">Service</a></li> | |
48 | + <li><a href="#">Community</a></li> | |
49 | + <li><a href="#">Contact</a></li> | |
50 | + </ul> | |
51 | + </div> | |
52 | + <div id="second"> | |
53 | +<!-- 손 그림--> | |
54 | + </div> | |
55 | + <div id="article"> | |
56 | + <div id="left"> | |
57 | + <div id="leftTop"> | |
58 | + <div id="leftTopLeft"> | |
59 | + <img id="img1" src="http://web.miri.kr/example/images/image1.jpg"> | |
60 | + <p class="caption">그림 [1]</p> | |
61 | + </div> | |
62 | + <div id="leftTopRight"> | |
63 | + <p id="text1"> | |
64 | + <span class="lorem1">Lorem ipsum.</span><br> | |
65 | + <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br> | |
66 | + <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores autem beatae deleniti distinctio, dolores error ex excepturi laboriosam, laborum natus nostrum placeat quod sapiente sequi sunt tempore velit voluptas.</span> | |
67 | + </p> | |
68 | + </div> | |
69 | + </div> | |
70 | + <div id="leftBottom"> | |
71 | + <div id="leftBottomLeft"> | |
72 | + <p id="text2"> | |
73 | + <span class="lorem1">Lorem ipsum.</span><br> | |
74 | + <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br> | |
75 | + <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores autem beatae deleniti distinctio, dolores error ex excepturi laboriosam, laborum natus nostrum placeat quod sapiente sequi sunt tempore velit voluptas.</span> | |
76 | + </p> | |
77 | + </div> | |
78 | + <div id="leftBottomRight"> | |
79 | + <img id="img2" src="http://web.miri.kr/example/images/image2.jpg"> | |
80 | + <p class="caption">그림 [2]</p> | |
81 | + </div> | |
82 | + </div> | |
83 | + </div> | |
84 | + <div id="right"> | |
85 | + <div id="rightTop"> | |
86 | + <ul> | |
87 | + <br> | |
88 | + <span id="walking">Walking Exersise</span> | |
89 | + <li><a href="#">Lorem ipsum dolor sit amet.</a></li> | |
90 | + <li><a href="#">Lorem ipsum dolor sit amet.</a></li> | |
91 | + <li><a href="#">Lorem ipsum dolor sit amet.</a></li> | |
92 | + <li><a href="#">Lorem ipsum dolor sit amet.</a></li> | |
93 | + </ul> | |
94 | + </div> | |
95 | + <div id="rightBottom"> | |
96 | + <p> | |
97 | + <span id="contact">Contact Us</span><br><br> | |
98 | + <span>Gwangju Industrial Tools</span><br> | |
99 | + <span>Circulating Center,</span><br> | |
100 | + <span>Maewol-dong, Seo-gu,</span><br> | |
101 | + <span>Gwangju, Korea</span><br> | |
102 | + <span>062-000-1111</span> | |
103 | + </p> | |
104 | + </div> | |
105 | + </div> | |
106 | + </div> | |
107 | + <div id="footer"> | |
108 | + Copyright©2019 한국정보통신교육원 All rights reserved. | |
109 | + </div> | |
110 | + </div> | |
111 | +</body> | |
112 | +</html>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?