网页前端：网站综合制作
生活随笔
收集整理的這篇文章主要介紹了
网页前端：网站综合制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 前言
- 具體操作
- 總結
前言
實驗目的： （1）加深對網頁制作的基本概念、操作方法和基本原理的理解； （2）提高學生對網頁標記語言掌握的熟練程度。 實驗內容： 按照要求完成以下網頁。要求主題內容不限，但頁面布局嚴格按照樣例設計，界面美觀漂亮，可以添加菜單特效。具體操作
網站綜合制作.css
body{background-color: pink; } .a1 img {width: 100%;height: 300px; }ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333; }li {float: left; }li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none; }li a:hover:not(.active) {background-color: #111; }.active {background-color: #4CAF50; }.a2 img {margin-left: 0;margin-right: 40%; }p b {font-size: 30px;color: dodgerblue; }p.text{background-color: aqua; } .a1 {border: 3px solid red;margin-top: 0; }.a2 {border: 3px solid red;width: 33.3%;height: 33.3%;float: left; }.a3 {border: 3px solid red;float: left;width: 33.3%;height: 33.3%; }.a4 img {border: 3px solid red;width: 20%; }.a5{float: left;border: 3px solid red;width: 30%;height: 1000px; }網站綜合制作.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><link rel="stylesheet" href="../css/網站綜合制作.css"> </head> <body> <div class="a1"><img src="../image/banner_3.jpg" alt=""><ul><li><a class="active" href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li><li><a href="#about">About</a></li><li><a href="#about">About</a></li><li><a href="#about">About</a></li><li><a href="#about">About</a></li><li><a href="#about">About</a></li><li><a href="#about">About</a></li></ul> </div><div class="a2"><p><b>地點一</b></p><img src="../image/jiangxuan_1.jpg" alt=""><p><b>地點二</b></p><img src="../image/jiangxuan_2.jpg" alt=""><p><b>地點三</b></p><img src="../image/jiangxuan_3.jpg" alt=""><p><b>地點四</b></p><img src="../image/jiangxuan_4.jpg" alt=""> </div><div class="a3"><img src="../image/guonei_1.jpg" alt=""><p><b>美景</b></p><div class="a4"><img src="../image/jiangxuan_4.jpg" alt=""><img src="../image/jiangxuan_1.jpg" alt=""><img src="../image/jiangxuan_2.jpg" alt=""><img src="../image/jiangxuan_3.jpg" alt=""></div><p><b>路線</b></p><p class="text">一晚超豪華酒店，蘇州游船，上海環球金融中心94層，靈山大佛許下美好的愿望！一晚超豪華酒店，蘇州游船，上海環球金融中心94層，靈山大佛許下美好的愿望！</p><img src="../image/jiangxuan_5.jpg" alt=""> </div><div class="a5"><img src="../image/jiangxuan_3.jpg" alt=""><p><b>特色美食</b></p><p class="text">大盤雞</p><p class="text">窩窩馕</p><p class="text">芝麻馕</p><p class="text">哈密瓜</p><p><b>新疆住宿</b></p><p class="text">馬航國際酒店亞中亞大酒店</p><p class="text">銀都大飯店</p><p class="text">如意大飯店</p><p class="text">好友大酒店</p><p class="text">王朝賓館</p><p class="text">神望賓館</p> </div> </body> </html>目錄結構
實驗結果（圖片來源網絡，侵權聯系立刪）
總結
（1）加深對網頁制作的基本概念、操作方法和基本原理的理解； （2）提高學生對網頁標記語言掌握的熟練程度。總結
以上是生活随笔為你收集整理的网页前端：网站综合制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 喜欢和什么样的人在一起?
- 下一篇： 2017年html5行业报告,云适配发布