--- 20210805/6.html
+++ 20210805/6.html
... | ... | @@ -16,6 +16,7 @@ |
16 | 16 |
#drama {vertical-align: bottom;} |
17 | 17 |
#secondText2 {color: rgb(173, 255, 047); font-weight: bolder; font-size: 20px; position: relative; right: 285px; margin-top: 110px;} |
18 | 18 |
#btn {width: 106px; height: 34px; margin-top: 200px; position: relative; right: 1010px; border-style: none; border-radius: 5px; font-weight: bold;} |
19 |
+ #btn:hover {background-color: honeydew;} |
|
19 | 20 |
#drop {background-color: rgb(034, 034, 034);} |
20 | 21 |
#thirdText {font-size: 30px; position: relative; left: 160px; top: 40px;} |
21 | 22 |
#thirdText2 {font-size: 20px; color: grey; position: relative; left: 160px; top: 40px;} |
... | ... | @@ -27,8 +28,8 @@ |
27 | 28 |
#this2 {margin-right: 75px;} |
28 | 29 |
.chill {color: rgb(170, 170, 170); font-size: 60px;} |
29 | 30 |
.four1 {position: relative; top: 80px; left: 160px; float: left;} |
30 |
- .anker {font-size: 40px; color: blueviolet;} |
|
31 |
- .anker:hover {color: blueviolet;} |
|
31 |
+ .anker {font-size: 40px; color: steelblue;} |
|
32 |
+ .anker:hover {color: steelblue; text-decoration: underline;} |
|
32 | 33 |
#one_one {margin-right: 200px;} |
33 | 34 |
#one_two {margin-right: 200px;} |
34 | 35 |
#pre1 {margin-bottom: 10px;} |
... | ... | @@ -41,6 +42,7 @@ |
41 | 42 |
#fiver_one {margin-right: 80px;} |
42 | 43 |
#fiver_two {margin-right: 70px;} |
43 | 44 |
.btn_last {width: 150px; height: 30px; border-radius: 5px; border-style: none; position: absolute; top: 190px;} |
45 |
+ .btn_last:hover {background-color: honeydew;} |
|
44 | 46 |
.lastAnker { color: cornflowerblue; font-size: 20px;} |
45 | 47 |
.lastAnker:hover {color: cornflowerblue;} |
46 | 48 |
#nice1 {border-right: 1px solid rgb(170, 170, 170);} |
... | ... | @@ -48,12 +50,15 @@ |
48 | 50 |
#lastAnkerSector {position: relative; left: 150px;} |
49 | 51 |
#realLast {color: grey; margin-left: 150px;} |
50 | 52 |
#footer {position: relative; bottom: 130px;} |
51 |
- #like {position: relative; left: 800px;} |
|
53 |
+ #like {position: relative; left: 810px;} |
|
52 | 54 |
#btn_search {border-radius: 5px; height: 37px; border-style: none; width: 70px; font-weight: bolder} |
55 |
+ #btn_search:hover {background-color: honeydew;} |
|
53 | 56 |
#searchText {height: 37px; border-radius: 5px; border-style: none;} |
54 | 57 |
#lastSpan {position: relative; bottom: 5px;} |
55 | 58 |
#check3 {position: relative; bottom: 5px;} |
56 | 59 |
#check1 {position: relative; bottom: 3px;} |
60 |
+ #select {background-color:rgb(034, 034, 034); color: white; border-style: none; width: 100px; font-size: 20px;} |
|
61 |
+ #intention {position: relative; left: 5px;} |
|
57 | 62 |
</style> |
58 | 63 |
</head> |
59 | 64 |
<body> |
... | ... | @@ -64,7 +69,7 @@ |
64 | 69 |
<li><a href="">Products</a></li> |
65 | 70 |
<li><a href="">Home</a></li> |
66 | 71 |
<li> |
67 |
- <select> |
|
72 |
+ <select id="select"> |
|
68 | 73 |
<option id="drop" value="">Service</option> |
69 | 74 |
</select> |
70 | 75 |
</li> |
... | ... | @@ -78,7 +83,7 @@ |
78 | 83 |
<div id="third"> |
79 | 84 |
<span id="thirdText">Superior Collaboration </span><span id="thirdText2">Visualize Quality</span> |
80 | 85 |
<hr id="hr"> |
81 |
- <span id="thirdText3">Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base<br>portals after maintainable products.</span> |
|
86 |
+ <span id="thirdText3">Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly multimedia visualize quality intellectual collaboration capital without superior collaboration and idea-sharing. Holistically pontificate installed base<br>portals after maintainable products.</span> |
|
82 | 87 |
<div id="imageSector"> |
83 | 88 |
<div id="this" class="three"><span class="chill">700X300</span></div> |
84 | 89 |
<div id="this2" class="three"><span class="chill">700X300</span></div> |
... | ... | @@ -89,7 +94,7 @@ |
89 | 94 |
<span><a class="anker" href="#">Efficiently Unleash</a></span> |
90 | 95 |
</div> |
91 | 96 |
<div class="four1" id="one_two"> |
92 |
- <span><a class="anker" href="#">Completely Synergize</a></span> |
|
97 |
+ <span><a id="intention" class="anker" href="#">Completely Synergize</a></span> |
|
93 | 98 |
</div> |
94 | 99 |
<div class="four1" id="one_three"> |
95 | 100 |
<span><a class="anker" href="#">Dynamically Procrastinate</a></span> |
... | ... | @@ -100,6 +105,7 @@ |
100 | 105 |
</pre> |
101 | 106 |
<pre class="pre" id="pre2"> |
102 | 107 |
|
108 |
+ |
|
103 | 109 |
Dramatically maintain clicks-and-mortar |
104 | 110 |
solutions without functional solutions. |
105 | 111 |
Efficiently unleash cross-media information |
+++ 20210806/1.html
... | ... | @@ -0,0 +1,119 @@ |
1 | +<!DOCTYPE html> | |
2 | +<html lang="ko"> | |
3 | +<head> | |
4 | + <meta charset="UTF-8"> | |
5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
7 | + <title>Smart Web Publisher</title> | |
8 | + <style> | |
9 | + * {margin: 0; padding: 0; box-sizing: border-box;} | |
10 | + header, section, footer, aside, nav, article, figure, figcaption {display: block;} | |
11 | + body { | |
12 | + color: #666; background:no-repeat url('http://web.miri.kr/example/images/bg.jpg')fixed; background-size: cover; font-family: sans-serif, serif; line-height: 1.4em; | |
13 | + } | |
14 | + .container {width: 1030px; margin: 0 auto; background-color: white; height: auto;} | |
15 | + .left {float: left;} | |
16 | + .right {float: right;} | |
17 | + nav, footer {clear: both; background-color: #aeaca8; color: white;} | |
18 | + ul, li {list-style: none;} | |
19 | + nav ul {padding: 10px;} | |
20 | + nav li { | |
21 | + display: inline-block; margin-right: 40px; font-weight: 600; font-size: 1.2em; | |
22 | + vertical-align: middle; | |
23 | + } | |
24 | + nav li a {text-decoration: none; color: white;} | |
25 | + nav li a:hover, nav li a.current {color: #555;} | |
26 | + section.courses {width: 700px; border-right: 1px solid #eee; padding-bottom: 20px;} | |
27 | + article {clear: both; overflow: hidden; width: 100%;} | |
28 | + hgroup {margin: 30px 20px 20px;} | |
29 | + figure {width: 290px; height: 220px; padding: 5px; margin: 20px; border: 1px solid #eee;} | |
30 | + figure img {width: 280px; height: 210px;} | |
31 | + figcaption {font-size: 90%; text-align: left;} | |
32 | + aside {padding-left: 20px;} | |
33 | + aside section a { | |
34 | + display: block; padding: 10px; border-bottom: 1px solid #eee; font-size: 90%; | |
35 | + text-decoration: none; | |
36 | + } | |
37 | + a { color: #de6581;} | |
38 | + aside section a:hover {background-color: #efefef; color: #985d6a;} | |
39 | + h1, h2 ,h3 {font-weight: normal;} | |
40 | + h2 {margin: 10px 0 5px 0;} | |
41 | + h3 {margin: 0 0 10px 0; color: #de6581;} | |
42 | + aside h2 {padding: 30px 0 10px;} | |
43 | + footer {font-size: 80%; padding: 10px;} | |
44 | + .courses{float: left;} | |
45 | + </style> | |
46 | +</head> | |
47 | +<body> | |
48 | + <div class="container"> | |
49 | + <header> | |
50 | + <nav> | |
51 | + <ul> | |
52 | + <li><img src="http://aiit.or.kr/images/logo.png"></li> | |
53 | + <li><a href="#" class="current">Company</a></li> | |
54 | + <li><a href="#">Product</a></li> | |
55 | + <li><a href="#">Service</a></li> | |
56 | + <li><a href="#">Cummunity</a></li> | |
57 | + <li><a href="#">Contact</a></li> | |
58 | + </ul> | |
59 | + </nav> | |
60 | + <div> | |
61 | + <ul> | |
62 | + <li><img src="http://web.miri.kr/example/images/main1.jpg"></li> | |
63 | + </ul> | |
64 | + </div> | |
65 | + </header> | |
66 | + <!-- 본문-Start --> | |
67 | + <section class="courses"> | |
68 | + <article> | |
69 | + <figure class="left"> | |
70 | + <img src="http://web.miri.kr/example/images/image1.jpg"> | |
71 | + <figcaption>[그림1]</figcaption> | |
72 | + </figure> | |
73 | + <hgroup> | |
74 | + <h2>Lorem, ipsum.</h2> | |
75 | + <h3>Lorem ipsum dolor sit amet.</h3> | |
76 | + <p> | |
77 | + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab eos omnis facere nesciunt harum dolore velit soluta, possimus illum a nostrum pariatur. Porro, et laborum itaque voluptatem facere namut. | |
78 | + </p> | |
79 | + </hgroup> | |
80 | + </article> | |
81 | + <article> | |
82 | + <figure class="right"> | |
83 | + <img src="http://web.miri.kr/example/images/image2.jpg"> | |
84 | + <figcaption>[그림2]</figcaption> | |
85 | + </figure> | |
86 | + <hgroup> | |
87 | + <h2>Lorem, ipsum.</h2> | |
88 | + <h3>Lorem ipsum dolor sit amet.</h3> | |
89 | + <p> | |
90 | + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab eos omnis facere nesciunt harum dolore velit soluta, possimus illum a nostrum pariatur. Porro, et laborum itaque voluptatem facere namut. | |
91 | + </p> | |
92 | + </hgroup> | |
93 | + </article> | |
94 | + </section> | |
95 | + <!-- 본문-End --> | |
96 | + <aside class="left"> | |
97 | + <section> | |
98 | + <h2>Walking Exersise</h2> | |
99 | + <a href="#">Lorem ipsum dolor sit amet.</a> | |
100 | + <a href="#">Lorem ipsum dolor sit amet.</a> | |
101 | + <a href="#">Lorem ipsum dolor sit amet.</a> | |
102 | + <a href="#">Lorem ipsum dolor sit amet.</a> | |
103 | + </section> | |
104 | + <section> | |
105 | + <h2>Contact Us</h2> | |
106 | + <p> | |
107 | + Gwangju Industrial Tools, <br> | |
108 | + Circulating Center, <br> | |
109 | + Maewol-dong, seo-gu, <br> | |
110 | + 062-000-1111 | |
111 | + </p> | |
112 | + </section> | |
113 | + </aside> | |
114 | + <footer> | |
115 | + Copyright © 2019 한국정보통신교육원 All rights reserved. | |
116 | + </footer> | |
117 | + </div> | |
118 | +</body> | |
119 | +</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?