网页前端：网站综合制作

sky-stars

已于 2024-08-27 20:31:41 修改

阅读量1.2k

点赞数 4

分类专栏：网页前端文章标签： html css html5

于 2021-11-22 00:32:33 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51917985/article/details/121463356

版权

网页前端专栏收录该内容

7 篇文章

订阅专栏

该实验旨在加深学生对网页制作的理解，通过创建一个具有导航菜单、图片展示和内容布局的网页，提高他们对HTML和CSS的熟练程度。网页采用粉色背景，包含顶部横幅、无序列表导航、多栏内容展示，以及特色美食和住宿信息。实验结果展示了良好的页面布局和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

实验目的：
（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）提高学生对网页标记语言掌握的熟练程度。