《網頁設計基礎》課件-13-4 制作“昆明介紹網”_第1頁
《網頁設計基礎》課件-13-4 制作“昆明介紹網”_第2頁
《網頁設計基礎》課件-13-4 制作“昆明介紹網”_第3頁
《網頁設計基礎》課件-13-4 制作“昆明介紹網”_第4頁
《網頁設計基礎》課件-13-4 制作“昆明介紹網”_第5頁
已閱讀5頁，還剩4頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

制作“昆明介紹網”目錄CONTENTS制作“昆明介紹網”制作“昆明介紹網”制作“昆明介紹網”案例描述：設計并制作“昆明介紹網”，網頁效果如下。制作“昆明介紹網”在body標簽中添加下列代碼<body> <divclass="city"><divclass="left"><divclass="bottom"><p>美麗的昆明，氣候溫和，夏無酷暑，冬無嚴寒，四季如春，氣候宜人</p></div></div><divclass="right"><divclass="icon"></div> <pclass="writer">昆明牛牛</p> <pclass="info">“一座享“春城”之美譽的城市”</p></div>

<divclass="context"> <p>昆明，這座美麗的城市，位于中國的西南地區，云貴高原的中部，享有“春城”的美譽。它不僅是云南省的省會，也是一座特大城市和滇中城市群的中心城市，被國務院批復確定為中國西部地區重要的中心城市之一。這座城市以其獨特的地理位置、豐富的民族文化、美食文化以及花卉文化而聞名于世。</p><p>昆明有許多的景點。翠湖公園是昆明市區的一顆“綠寶石”，這里綠樹成蔭，湖光山色相映成趣。滇池則是昆明的靈魂，作為云南最大的淡水湖，它擁有絕美的景色和豐富的生態資源。大觀公園不僅有美麗的自然風光，還擁有一個游樂園，其中的星際飛碟和極速風車等項目為游客帶來了刺激和樂趣。</p> </div> </div></body>制作“昆明介紹網”在style標簽中添加下列代碼*{ padding:0; margin:0; border:0;}.city{ width:1200px; height:400px; margin:40pxauto;}.city.left{ height:300px; width:800px; padding:30px; background-image:url(images/kunming.jpg);

float:left; position:relative;}.city.left.bottom{ position:absolute; left:0; bottom:0px; width:100%; height:50px; color:#FFF; background-image:linear-gradient(totop,rgba(0,0,0,0.2),rgba(0,0,0,0.6));}制作“昆明介紹網”在style標簽中添加下列代碼.city.left.bottomp{ padding:12px0030px; font-size:1.5em; font-family:"仿宋"; font-weight:bold;}.city.right{ width:280px; height:300px; background-image:repeating-linear-gradient(70deg,#0b10751%,#0f418c2%); padding:30px; float:left; position:relative;}

.city.right.icon{ width:120px; height:120px; border:4pxsolid#FFF; border-radius:50%; background-image:url(images/haiou.jpg); overflow:hidden; margin:0auto; box-shadow:1px3px5px1px#AAAinset}制作“昆明介紹網”在style標簽中添加下列代碼.city.right.writer{ color:#FFF; font-family:"宋體"; font-size:18px; line-height:3em; font-weight:bold; text-align:center; text-shadow:#4441px2px3px;}.city.right.info{ color:#FFF; font-family:"宋體"; font-size:18px; line-height:2em; font-weight:bold;

text-align:center; text-shadow:#4441px2px3px;}.context{ width:100%; padding-top:10px; color:#FFF; font-size:20px; line-height:2em; font-family:"楷體"; text-indent:2em; bac

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論