# 2019-10-01 上課程式碼 ## 圖片樣式 ### 例子一 * img.css ```css= img { width: 300px; height: 300px; border-width: 1px; border-color: #aaaaaa; border-style: solid; border-radius: 50%; } div { height: 300px; width: 300px; border-style: solid; border-width: 1px; border-color: #666666; border-radius: 50%; /* background-color: #2196F3; */ background-image: url(../img/01.jpg); background-size: cover; background-position-x: -25px; /* background-position-y: -50px; */ } ``` * img.html ```htmlmixed= <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圖片的版面練習</title> <link rel="stylesheet" href="./css/img.css"> </head> <body> <img src="./img/01.jpg" alt="燈塔"> <div></div> </body> </html> ``` ### 例子二 * img.css ```css= img { width: 300px; height: 300px; border-width: 1px; border-color: #aaaaaa; border-style: solid; border-radius: 50%; } #img2 { height: 300px; width: 300px; border-style: solid; border-width: 1px; border-color: #666666; border-radius: 50%; /* background-color: #2196F3; */ background-image: url(../img/01.jpg); background-size: cover; background-position-x: -25px; /* background-position-y: -50px; */ } .center { text-align: center; color: red; } ``` * img.html ```htmlmixed= <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圖片的版面練習</title> <link rel="stylesheet" href="./css/img.css"> </head> <body> <img src="./img/01.jpg" alt="燈塔"> 這段字會和img同行 <div class="center">這裡要上下要有點空白</div> <div id="img2"></div> </body> </html> ``` ### 例子三 * img.css ```css= img { width: 300px; height: 300px; border-width: 1px; border-color: #aaaaaa; border-style: solid; border-radius: 50%; } #img2 { height: 290px; width: 290px; border-style: solid; border-width: 1px; border-color: #666666; border-radius: 50%; /* background-color: #2196F3; */ background-image: url(../img/01.jpg); background-size: cover; background-position-x: -25px; /* background-position-y: -50px; */ } .center { text-align: center; color: red; } .img-center { margin-left: auto; margin-right: auto; } .border { border-style: solid; border-width: 1px; border-color: #00aabb; padding: 5px; } .img-radius { border-radius: 50%; height: 300px; width: 300px; } ``` * img.hrml ```htmlmixed= <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圖片的版面練習</title> <link rel="stylesheet" href="./css/img.css"> </head> <body> <img class="border" src="./img/01.jpg" alt="燈塔"> 這段字會和img同行 <div class="center border">這裡上下要有點空白</div> <div id="img2" class="img-center"></div> </body> </html> ``` ## span練習 * text.html ```htmlmixed= <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>span 練習</title> <link rel="stylesheet" href="./css/text.css"> </head> <body> <h1>出師表 <span id="p1">諸葛亮</span></h1> <p id="p1">臣亮言：先帝創業未半，而中道崩殂。今天下三分，益州 疲弊，此誠危急存亡之秋也。然侍衛之臣，不懈於內；忠志之 士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開 張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻 失義，以塞忠諫之路也。宮中府中，俱為一體，陟罰臧否，不 宜異同。若有作姦犯科，及為忠善者，宜付有司，論其刑賞， 以昭陛下平明之治，不宜篇私，使內外異法也。 </p> <p>侍中、侍郎 <span class="name">郭攸之</span>、<span class="name">費褘</span>、<span class="name">董允</span>等，此皆良實，志慮忠純 ，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以 咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行 淑均，曉暢軍事，試用於昔日，先帝稱之曰「能」，是以眾議 舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優 劣得所。親賢臣，遠小人，此先漢所以興隆也；親小人，遠賢 臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎 息痛恨於桓、靈也。侍中、尚書、長史；參軍，此悉貞良死節 之臣也，願陛下親之信之，則漢室之隆，可計日而待也。 </p> </body> </html> ``` * text.css ```css= h1 { color: #0099dd; } span#p1 { font-size: 20px; color: #888888; } span.name { color: #0000FF; font-weight: bold; border-bottom-style: solid; border-bottom-width: 1px; padding-bottom: 2px; } ``` * index.html ```htmlmixed= <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>前端程式設計</title> </head> <body> <h1>這是標題</h1> <p>這是段落</p> <a href="https://www.google.com">Google</a> <br> <a href="Emmet.html">Emmet 快速鍵</a> <br> <a href="./table.html" target="_blank">Table 練習</a> <br> <a href="./text.html" target="_blank">span 練習</a> </body> </html> ``` ###### tags: `前端程式設計` `108-1`