html+CSS 课程
第一天
工具：Brackets 插件1：Emmet 自动补全 插件2： Beautify 格式化
Brackets快捷键
插入注释:Ctrl+Shift+/
块注释:Ctrl+Shift+E
当前行注释:Ctrl+/
关闭Brackets:Ctrl+Q
关闭现在文件:Ctrl+W
搜索:Ctrl+F
替换:Ctrl+H
字选择:Ctrl+B
复制行:Ctrl+D
列移动:Ctrl+G
选择 添加:Alt+Shift+(上，下)
锁紧:Ctrl+]
突出:Ctrl+[
格式化:Ctrl+A,Ctrl+Shift+L
1 <h1>有h1~h6,但是常用的只有 h1~h3</h1> 2 3 <p>换行 有前后行</p> 4 <br>换行 没有前后行 5 <b>仅仅是粗体</b> 6 <strong>强调的粗体</strong> 7 <i>仅仅是斜体italy</i> 8 <address>地址斜体</address> 9 <em>强调的斜体</em> 10 <blockquote>"没法选择</blockquote> 11 <q>"可以选择</q> 12 <sup>科学公式上面小</sup> 13 <sub>科学公式下面小</sub> 14 <hr> 横线 15 <abbr title="提示内容">文字下面有点</abbr> 16 <del>删除线</del> 17 <ins>下划线</ins> 18 <ul> 19 标示无顺序列表 20 <li>列表内容</li> 21 </ul> 22 <ol> 23 有顺序列表 可配type属性和 start属性 24 <li>列表内容</li> 25 </ol> 26 27 <dl> 28 字典类型列表 29 <dt>标题</dt> 30 <dd>内容</dd> 31 </dl> 32 33 <img src="/xx.jpg" alt="没有图片时显示内容"> 34 <img src="/xx.jpg" alt="没有图片时显示内容" width="300px" title="鼠标在图片上提示内容"> 也可以改成百分比width="50%" 35 <img src="/xx.jpg" alt="没有图片时显示内容" usemap="#buy_link"> 36 <map name="buy_link"> 37 <area shape="rect" coords="38,27,431,568" href="http://www.naver.com" alt="" target="_blank"> 38 矩形 shape="rect" coords="4个坐标" 39 <area shape="circ" coords="129,161,10" href="http://www.daum.net" alt="" target="_blank"> 40 圆形 图像左上角的坐标x,y,圆形半径r 41 多边形shape="polygon" 42 </map> 43 44 <a href="xxx.html">显示内容</a> 45 <a href="mailto:123@456.com">发邮件</a> 46 <a href="tel:02000001111">打电话</a> 47 <a href="sms:010-5555-666">发短信</a> 48 49 <a href="http://www.naver.com" target="_self">在本页面打开</a> 50 <a href="http://www.naver.com" target="_blank">在新的页面打开</a> 51 <a href="http://www.naver.com" target="_parent">用在框架里上面打开</a> 52 <a href="http://www.naver.com" target="_top">用在框架里在整个窗口内打开</a> 53 54 <li><a href="#m1">跳转到被页面内id为m1的位置</a></li> 55 <h2 id="m1">id为m1的标题</h2> 56 <p>内容</p> 57 58 <li><a href="#">刷新，跳转到最上面</a></li> 59 60 61 <table border="1" width="300"> 表格 62 <tr> 行 63 <td>1月</td> 列 64 <td>2月</td> 65 <td>3月</td> 66 <td>4月</td> 67 </tr> 68 69 <tr> 行 70 <td>1月</td> 71 <td>2月</td> 72 </tr> 73 </table> 74 75 <table width="280" border="1"> 76 <tr> 77 <th>标题 粗体</th> 78 <th>周六</th> 79 <th>周日</th> 80 </tr> 81 <tr> 82 <th>数量</th> 83 <td>120</td> 84 <td>135</td> 85 </tr> 86 <tr> 87 <th>销量</th> 88 <td>$600</td> 89 <td>$675</td> 90 </tr> 91 </table>
1 <!-- 2 cellpadding:最里面的线离文字的间距 3 cellspacing：最里面的线跟最外面的线的距离 4 style="border-collapse: collapse" 最外面的边框就会消失 5 colspan:行合并 6 rowspan：列合并 7 bgcolor：背景颜色 8 caption>：标题 9 --> 10 <table border="1" width="500" cellpadding="6" cellspacing="10"> 11 <caption>标题</caption> 12 <tr bgcolor="lightgreen"> 13 <th>min</th> 14 <th>nor</th> 15 <th>max</th> 16 </tr> 17 <tr> 18 <td rowspan="2">12</td> 19 <td>34</td> 20 <td>56</td> 21 </tr> 22 <tr> 23 <td colspan="2">ef</td> 24 </tr> 25 </table> 26 <br> 27 <table border="1" style="border-collapse: collapse"> 28 <tr> 29 <td>123</td> 30 <td>456</td> 31 </tr> 32 </table> 33 <hr> 34 35 <!-- 36 controls:控制面板 37 auoplay：自动播放=已被屏蔽 38 loop：循环 39 muted:静音 40 --> 41 <audio src="sample.mp3" controls autoplay loop muted></audio> 42 <video src="sample.mp4" controls autoplay loop muted></video> 43 <hr> 44 45 46 47 48 <p> 49 用户名：<input type="text" size="10"> 50 </p> 51 <p> 52 密码:<input type="password" seize="10"> 53 </p> 54 <p> 55 <!-- 56 cols：行像素 57 rows:列数 58 --> 59 <textarea cols="30" rows="5"></textarea> 60 </p> 61 <p> 62 <!-- 63 radio单选框:name必须一致才是一组 64 checked:默认选中 65 --> 66 <input type="radio" name="music">经典 67 <input type="radio" name="music" checked>摇滚 68 </p> 69 <p> 70 <!-- 71 value="melon" 72 --> 73 <input type="checkbox" value="melon">多选框 74 </p> 75 76 <p> 77 <input type="submit" value="显示提交"> 78 </p> 79 <p> 80 <input type="reset" value="显示清空"> 81 </p> 82 83 <p> 84 <input type="button" value="一般按钮"> 85 </p> 86 87 <p> 88 <input type="image" src="image.png" alt="图片按钮"> 89 </p> 90 91 <p> 92 <input type="file"> 选择文件 93 </p> 94 95 <p> 96 <!-- 97 输入数字 98 value:默认值 99 min:最小值 100 max:最大值 101 step:步进 102 --> 103 <input type="number" value="2" min="1" max="9" step="2"> 104 </p> 105 106 <p> 107 <!--日期--> 108 <input type="date"> 109 </p> 110 111 <p> 112 <!-- 113 autofocus:自动 114 placeholder：灰色提示 115 --> 116 <input type="search" autofocus placeholder="key"> 117 </p> 118 119 <progress value="50" max="60"></progress> 120 <meter min="0" mmax="100" value="40"></meter> 121 122 <p> 123 <!-- 124 列表框 125 multiple:多选框 126 optgroup:列表标题 127 --> 128 <select multiple> 129 <optgroup label="apple"> 130 <option value="">iphone</option> 131 <option value="`">MacBook</option> 132 </optgroup> 133 </select> 134 </p> 135 136 <!-- 137 label点击文字也会选择 138 下面两个方式都一样 139 --> 140 <label> 141 用户名: <input type="CheckBox"> 142 </label> 143 144 <p> 145 <label for="id_check">用户名:</label> 146 <input type="CheckBox" id="id_check"> 147 </p> 148 149 150 <fieldset> 151 <legend>联系:</legend> 152 <p>电话: <input type="tel"> </p> 153 </fieldset> 154 155 <form action="login.php" method="post"> 156 <p>用户名： <input type="text" required> </p> 157 <input type="submit" value="提交"> 158 <input type="reset" value="清空"> 159 </form> 160 161 162 <frameset cols="25%,50%,25%"> 163 <frame src="frame_a.htm" /> 164 <frame src="frame_b.htm" /> 165 <frame src="frame_c.htm" /> 166 </frameset>
1 #ctext{color:blue;} /*根据ID*/ 2 .ctext{color:blue;} /*根据Class*/ 3 *{color:blue;}/*全部为蓝色*/ 4 p{color:blue;}/*P tag变蓝色*/ 5 li>p{color:blue;}/*li的孩子P*/ 6 .box li{color:blue;}/*类名box 下面的所有li tag*/ 7 p.more a{color:red;}/*类名为more的 p tag 下面子孙a 全部*/ 8 9 10 11 12 a:link/*链接被点击之前*/ 13 a:hover /*鼠标在链接上面的时候*/ 14 a:visited /*链接被点击过以后*/ 15 16 :first-child/*第一个元素*/ 17 :last-child/*最后一个元素*/ 18 :nth-child(n)/*第N个元素*/ 19 20 font/*字体*/ 21 font-family /*字体选择*/ 22 font-size/*px字体大小*/ 23 font-weight/*bold粗细*/ 24 font-style/*Italy斜体*/ 25 line-height/*px,% 行间距*/ 26 letter-spacing/*px,% 字之间间距*/ 27 28 text-align/*左右对齐*/ 29 /*left,right,center,justify(两端对齐)*/ 30 31 vertical-align/*上下对齐*/ 32 /*top,middle,bottom*/ 33 .scool{text-indent: 30px;}/*向右移30px*/ 34 35 text-transform/*字大小写*/ 36 /*uppercase(大写),lowercase(小写),capitalize(只有第一个字大写)*/ 37 38 text-decoration/*字上有线*/ 39 /*underline(底线),overline(顶线),line-through(中间线),none(去掉底线)*/ 40 41 42 background/*背景*/ 43 background-color/*背景颜色*/ 44 /*transparent(透明)，#ff0000*/ 45 background-image/*url("image/bg.png")背景图片*/ 46 background-repeat/*背景图片排列*/ 47 /*repeat(X,Y轴都重复),no-repeat(不重复),repeat-x(x轴重复),repeat-y*/ 48 49 background-position/*背景图片位置 默认:left,top*/ 50 /*x轴:left,right,center,px%值*/ 51 /*y轴:top,bottom,center,px%值*/ 52 53 background-attachment/*背景图片是否固定*/ 54 /*scrool(不固定),fixed(固定)*/ 55 56 BOX/*盒子*/ 57 width/*px,%크기*/ 58 height/*px%,높이(사용않하는것이 좋습니다.)*/ 59 padding/*px,上右下左 border内部*/ 60 margin/*border外部*/ 61 /*0 auto中间位置*/ 62 63 border-color:#00f/*线颜色*/ 64 border-width:2px/*线粗细*/ 65 border-style:solid/*线样式*/ 66 /*solid,dash(长点线),dotted,double(双),none*/ 67 68 border-top:1px solid red /*只设置上半部分*/ 69 border:1px solid red/*4个边框都设置*/ 70 71 72 layOut 73 74 float: 75 left 76 right 77 78 clear：블록 79 left 80 right 81 both 82 83 display: 84 block有换行 85 inline无换行 86 inline-block不换行的情况下有block的功能 87 none隐藏Box 88 89 90 overflow 91 hidden:隐藏超过的部分 92 auto：有溢出部分用scrollbar 93 scroll:没有溢出也用scor 94 scroll-y,scroll-x 设置X或Y轴 95 96 position 97 static 98 relative相对 99 absolute绝对 100 fixed
Day3 CSS
homepage01
1 <!DOCTYPE html> 2 <html lang="ko"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0 11 } 12 13 a { 14 text-decoration: none 15 } 16 17 body { 18 background-color: #f0f0f0; 19 } 20 21 .top_bar { 22 background-color: #010066; 23 height: 7px 24 } 25 26 .header { 27 width: 960px; 28 height: 52px; 29 } 30 31 .header_left { 32 background-color: #010066; 33 width: 12px; 34 } 35 36 .gnb { 37 text-align: right; 38 color: #999; 39 font-size: 11px; 40 } 41 42 .gnb a { 43 color: #999; 44 } 45 46 .header_logo { 47 padding-left: 10px 48 } 49 50 /* 푸터 영역 */ 51 .footer { 52 padding-left: 11px 53 } 54 55 .content_wrap { 56 width: 906px 57 } 58 59 .content_space { 60 width: 12px; 61 } 62 63 .content_right { 64 width: 447px 65 } 66 67 .content_left { 68 background-color: #fff; 69 vertical-align: top; 70 } 71 72 .content_table th { 73 vertical-align: top; 74 padding: 0px 14px 0px 7px; 75 } 76 77 .content_table td { 78 font-size: 12px; 79 color: #999; 80 line-height: 1.3; 81 text-align: justify 82 } 83 84 .content_table { 85 margin-bottom: 10px 86 } 87 88 .content_site th { 89 padding-bottom: 5px 90 } 91 92 .content_site td { 93 text-align: center 94 } 95 96 .main_wrap { 97 background-color: #ff0; 98 width: 960px; 99 margin: 0 auto; 100 } 101 102 embed { 103 display: block; 104 } 105 106 </style> 107 </head> 108 109 <body> 110 <div class="top_bar"></div> 111 <div class="main_wrap"> 112 113 <!--헤더영역--> 114 <table class="header" cellpadding="0" cellspacing="0"> 115 <tr> 116 <td class="header_left"></td> 117 <td class="header_logo"><img src="images/logo_header.png" alt=""></td> 118 <td class="gnb"> 119 <a href="#">Site Map</a> | 120 <a href="#">FAQ</a> | 121 <a href="#">INTRODUCTION</a> 122 </td> 123 </tr> 124 </table> 125 126 <!--콘텐츠 역역--> 127 <table cellpadding="0" cellspacing="0" class="content_wrap"> 128 <tr> 129 <td class="content_space"></td> 130 <!--좌측영역--> 131 <td class="content_left"> 132 <img src="images/main_text.png" alt=""> 133 <table cellpadding="0" cellspacing="0" class="content_table"> 134 <tr> 135 <td colspan="2" style="padding-bottom: 7px"> 136 <img src="images/title_bar1.jpg" alt=""> 137 </td> 138 </tr> 139 <tr> 140 <th> 141 <img src="images/image1.jpg" alt=""> 142 </th> 143 <td style="padding-right: 15px"> 144 <img src="images/arrow.jpg" alt=""> 145 2012 여수 세계박람회의성공 유치를 위한 범국민적인 유치 붐 조성이 점차 본격화되고 있습니다.해양수산부는 다음달 4일부터 2박 3일 일정으로 전국에서 2천여명이 참가해 자동차로 어촌을 체험하는 행사를 갖고 참가자 전원이 여수에 집결하는'자동차로 떠나는 남해안 찾아가기' 행사를 갖기로 했습니다. 146 </td> 147 </tr> 148 </table> 149 <table cellpadding="0" cellspacing="0" class="content_table"> 150 <tr> 151 <td colspan="2" style="padding-bottom: 7px"> 152 <img src="images/title_bar2.jpg" alt=""> 153 </td> 154 </tr> 155 <tr> 156 <th> 157 <img src="images/image2.jpg" alt=""> 158 </th> 159 <td style="padding-right: 15px"> 160 <img src="images/arrow.jpg" alt=""> 161 정부는 국무회의에서 세계 인정박람회를 여수에 유치하는것을 국가계획으로 확정했습니다.세계박람회는 '바다'우리가 살고 싶은곳' 이라는 주제로 2012년 5월부터 3개월 동안 여수 신항지구 61만여평에서 개최됩니다. 140여개 나라가 참가하고 천 500여만명의 관람객 162 참관할것으로 예상하며 사업비 1조 3천 804억원이 소요될 것으로 추정됩니다. 163 </td> 164 </tr> 165 </table> 166 <table cellpadding="0" cellspacing="0" class="content_site"> 167 <tr> 168 <th> 169 <img src="images/title_bar3.jpg" alt=""> 170 </th> 171 </tr> 172 <tr> 173 <td> 174 <img src="images/image3.jpg" alt=""> 175 </td> 176 </tr> 177 </table> 178 </td> 179 <!--우측영역--> 180 <td class="content_right"> 181 <table cellpadding="0" cellspacing="0"> 182 <tr> 183 <td> 184 <embed src="flash/main.swf" width="447" height="406"> 185 </td> 186 </tr> 187 <tr> 188 <td> 189 <img src="images/image5.jpg" alt="" usemap="#link"> 190 </td> 191 </tr> 192 </table> 193 </td> 194 </tr> 195 </table> 196 197 <!--푸터 영역--> 198 <div class="footer"> 199 <img src="images/image4.jpg" alt=""> 200 </div> 201 </div> 202 203 <map name="link"> 204 <area shape="rect" coords="9 13 92 25" target="_blank" href="http://www.naver.com"> 205 <area shape="rect" coords="122 13 209 25" target="_blank" href="http://www.daum.net"> 206 </map> 207 </body> 208 </html>
lesson001.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{color:#ff0000;font-family: '궁서체'; font-size: 12px} p{font-weight:700;font-style: italic;text-align: justify; line-height: 1.8} h6{text-decoration: underline} a{text-decoration: none} h5{background-color: #ffff00} .blue{color:#0000FF;} .green{color:#00FF00;} body{background-color: #0000FF} </style> </head> <body> <a href="http:www.naver.com">www.naver.com</a> <p>안녕하세요. 반갑습니다.</p> <p>안용수 기자 = 도널드 트럼프 미국 대통령의 신종 코로나바이러스 감염증(코로나19) 관련 "살균제 인체 주입 검토" 발언이 대혼란을 야기한 가운데, 한 표백제 업자가 며칠 전 백악관에 표백제가 코로나19를 치료할 수 있다고 주장하는 서한을 보냈다고 영국 일간 가디언이 24일(현지시간) 보도했다.</p> <h1>스타일시트 첫날 입니다.</h1> <h2 class="green">스타일시트 첫날 입니다.</h2> <h3>스타일시트 첫날 입니다.</h3> <h4>스타일시트 첫날 입니다.</h4> <h5>스타일시트 첫날 입니다.</h5> <h6>스타일시트 첫날 입니다.</h6> <h1>스타일시트 첫날 입니다.</h1> <h2>스타일시트 첫날 입니다.</h2> <h3 class="blue">스타일시트 첫날 입니다.</h3> <h4>스타일시트 첫날 입니다.</h4> <h5>스타일시트 첫날 입니다.</h5> <h6 style="color: #fff;">스타일시트 첫날 입니다.</h6> </body> </html>
lesson002.html
1 <!DOCTYPE html> 2 <html lang="ko"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 *{color:red} 9 .yellow{color:yellow} 10 </style> 11 </head> 12 13 <body> 14 <a href="http:www.naver.com">www.naver.com</a> 15 <p>안녕하세요. 반갑습니다.</p> 16 <p>안용수 기자 = 도널드 트럼프 미국 대통령의 신종 코로나바이러스 감염증(코로나19) 관련 "살균제 인체 주입 검토" 발언이 대혼란을 야기한 가운데, 한 표백제 업자가 며칠 전 백악관에 표백제가 코로나19를 치료할 수 있다고 주장하는 서한을 보냈다고 영국 일간 가디언이 24일(현지시간) 보도했다.</p> 17 18 <h1>스타일시트 첫날 입니다.</h1> 19 <h2 class="green">스타일시트 첫날 입니다.</h2> 20 <h3>스타일시트 첫날 입니다.</h3> 21 <h4>스타일시트 첫날 입니다.</h4> 22 <h5>스타일시트 첫날 입니다.</h5> 23 <h6>스타일시트 첫날 입니다.</h6> 24 25 26 <h1>스타일시트 첫날 입니다.</h1> 27 <h2>스타일시트 첫날 입니다.</h2> 28 <h3 class="blue">스타일시트 첫날 입니다.</h3> 29 <h4>스타일시트 첫날 입니다.</h4> 30 <h5>스타일시트 첫날 입니다.</h5> 31 <h6 class="yellow">스타일시트 첫날 입니다.</h6> 32 </body> 33 </html>
123.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 .box_wrap { 9 width: 500px; 10 height: 500px; 11 border: 1px solid #000; 12 position: relative 13 } 14 15 .box_wrap div { 16 width: 100px; 17 height: 100px; 18 position: absolute; 19 } 20 21 .box_1 { 22 background-color: #f00; 23 24 } 25 26 .box_2 { 27 background-color: #0f0; 28 right: 0 29 } 30 31 /* 32 .box_3{background-color: #00f;position: fixed; 33 bottom:0;left:0;right:0;height:50px;width:100%;} 34 */ 35 .box_3 { 36 background-color: #00f; 37 bottom: 0; 38 left: 0; 39 } 40 41 .box_4 { 42 background-color: #ff0; 43 bottom: 0; 44 right: 0; 45 } 46 47 .box_5 { 48 background-color: #f0f; 49 left: 50%; 50 top: 50%; 51 margin: -50px 0 0 -50px; 52 } 53 54 </style> 55 56 </head> 57 58 <body> 59 <div class="box_wrap"> 60 <div class="box_1">1</div> 61 <div class="box_2">2</div> 62 <div class="box_3">3</div> 63 <div class="box_4">4</div> 64 <div class="box_5">5</div> 65 </div> 66 </body> 67 </html>
style.css
1 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); 2 3 * { 4 margin: 0; 5 padding: 0; 6 } 7 8 body { line-height: 1 /* 줄간격*/} 9 10 a { text-decoration: none;} 11 12 body { font-family: 'Noto Sans KR', sans-serif;} 13 14 .main_wrap { 15 border-right: 1px solid #9b9a9a; 16 width: 771px; 17 margin: 0 auto; 18 /*중앙정렬*/ 19 } 20 21 /* footer */ 22 .footer { 23 border-top: 3px solid #9b9a9a; 24 width: 100% 25 } 26 27 .footer th { 28 width: 235px; 29 background-color: #e7e7e7 30 } 31 32 .footer td { 33 background-color: #9e0b0e; 34 color: #fff; 35 font-size: 12px; 36 text-align: center; 37 font-weight: 700; 38 } 39 40 /* header */ 41 .header { 42 width: 100%; 43 height: 51px 44 } 45 46 .header th { 47 text-align: left; 48 padding: 10px 0 0 10px; 49 } 50 51 .header td { 52 text-align: right; 53 padding-right: 15px 54 } 55 56 .header a { 57 color: #3d3d3d; 58 padding-left: 15px; 59 } 60 61 .header a:hover { 62 color: #9e0b0e; 63 text-decoration: underline 64 /*밑줄있음*/ 65 } 66 67 .header td img {vertical-align: -6px;} 68 69 .lnb { 70 width: 100%; 71 height: 17px; 72 border-top: 1px solid #9e0b0e; 73 border-bottom: 3px solid #9e0b0e; 74 margin-bottom: 8px 75 } 76 77 .lnb a { 78 color: #3d3d3d; 79 display: block; 80 font-size: 14px 81 } 82 83 .lnb a:hover { color: #ff0;} 84 85 .lnb th { position: relative;} 86 87 .lnb span { 88 width: 1px; 89 height: 13px; 90 background-color: #9e0b0e; 91 position: absolute; 92 right: 0; 93 bottom: 0 94 } 95 96 /*--좌측 영역--*/ 97 98 .left_title { 99 background-color: #9e0b0e; 100 color: #fff; 101 height: 17px; 102 line-height: 17px; 103 padding-left: 14px; 104 font-size: 14px; 105 } 106 107 .left_selector { 108 text-align: center; 109 padding: 6px 0; 110 background-color: #ffffff; 111 } 112 113 .left_wrap embed { display: block;} 114 115 .left_wrap { 116 vertical-align: top; 117 background-color: #f0f0f0; 118 } 119 120 .left_white { 121 height: 10px; 122 background-color: #ffffff; 123 } 124 125 .right_wrap { vertical-align: top; 126 } 127 128 .main_visual { 129 display: inline-block; 130 margin-bottom: 10px 131 } 132 133 .content_table { margin-bottom: 20px;} 134 135 .content_table th { width: 120px;} 136 137 .content_table td { 138 padding-left: 10px; 139 color: #666; 140 font-size: 12px; 141 line-height: 1.2; 142 text-align: justify 143 } 144 145 .content_table h4 { 146 color: :#663300; 147 padding-bottom: 2px; 148 }
index.html
1 <!DOCTYPE html> 2 <html lang="ko"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <link rel="stylesheet" href="css/style.css" type="text/css"> 8 </head> 9 10 <body> 11 <div class="main_wrap"> 12 <!--헤더 영역--> 13 <table cellpadding="0" cellspacing="0" class="header"> 14 <tr> 15 <th> 16 <a href="/"><img src="images/logo_head.png" alt=""></a> 17 </th> 18 <td> 19 <a href="#"><img src="images/icon_flower.png" alt=""> KOREAN </a> 20 <a href="#"><img src="images/icon_flower.png" alt=""> CHINESE </a> 21 <a href="#"><img src="images/icon_flower.png" alt=""> JAPANESE </a> 22 </td> 23 </tr> 24 </table> 25 26 <!-- 콘텐트--> 27 <table cellpading="0" cellspacing="0" class="lnb"> 28 <tr> 29 <th width="16%"> <a href=""></a>Welcome<span> </span></th> 30 <th width="16%"> <a href=""></a>Hisory<span> </span></th> 31 <th width="16%"> <a href=""></a>Goverment<span> </span></th> 32 <th width="17%"> <a href=""></a>Tour guide<span> </span></th> 33 <th> <a href=""></a>Historic Places<span> </span></th> 34 <th width="14%"> <a href=""></a>Q&A</th> 35 </tr> 36 </table> 37 38 <!--콘텐츠 영역--> 39 <table cellpadding="0" cellspacing="0" class="content_wrap"> 40 <tr> 41 <!--좌측 영역--> 42 <td width="235" class="left_wrap"> 43 <h3 class="left_title">Info Service</h3> 44 <div class="left_selector"> 45 <select name="" id=""> 46 <option value="">::::::: Info service ::::: 47 </option> 48 <option value="">::::::: Dolsan bridge ::::: 49 </option> 50 <option value="">::::::: Odongdo ::::: 51 </option> 52 <option value="">::::::: Hyangiram ::::: 53 </option> 54 </select> 55 </div> 56 <embed src="flash/main.swf" width="235" height="182" type=""> 57 <div class="left_white"></div> 58 <img src="images/image6.jpg" alt=""> 59 60 </td> 61 <td width="10"></td> 62 <!--우측 영역--> 63 <td class="right_wrap"> 64 <img src="images/image4.jpg" class="main_visual"> 65 66 <table cellpadding="0" cellspacing="0" class="content_table"> 67 <tr> 68 <td> 69 <img src="images/image1.jpg" alt=""> 70 </td> 71 <td> 72 <h4>Odongdo</h4> 73 Known far and wide for its camellias, Odongdo(Island) is withoutdoubt the most beautiful tourist spot in Yeosu. 74 </td> 75 </tr> 76 77 </table> 78 <table cellpadding="0" cellspacing="0" class="content_table"> 79 <tr> 80 <td> 81 <img src="images/image2.jpg" alt=""> 82 </td> 83 <td> 84 <h4>Odongdo</h4> 85 Known far and wide for its camellias, Odongdo(Island) is withoutdoubt the most beautiful tourist spot in Yeosu. 86 </td> 87 </tr> 88 89 </table> 90 <table cellpadding="0" cellspacing="0" class="content_table"> 91 <tr> 92 <td> 93 <img src="images/image3.jpg" alt=""> 94 </td> 95 <td> 96 <h4>Odongdo</h4> 97 Known far and wide for its camellias, Odongdo(Island) is withoutdoubt the most beautiful 98 </td> 99 </tr> 100 101 </table> 102 </td> 103 <td widrh="10"></td> 104 </tr> 105 </table> 106 107 <!-- 푸터 영역--> 108 <table cellpadding="0" cellspacing="0" class="footer"> 109 <tr> 110 <th> 111 <img src="images/image5.jpg" alt=""> 112 </th> 113 <td> 114 copy right 2012 Yeosu city.All right reserved. 115 </td> 116 </tr> 117 </table> 118 </div> 119 </body> 120 121 </html>
CSS笔记
https://yuyang0.github.io/notes/css.html
https://www.jianshu.com/p/ff5bee494500
https://www.zybuluo.com/xudongh/note/364235
https://www.mybj123.com/4357.html
https://cloud.tencent.com/developer/article/1516481
