网页设计期末作业题

2024-03-26 07:46:04
开发
19

作业目标:

作业要求:

作业效果图:

作业代码:

html代码:

css代码:

作业目标:

（1）由学生自设一个主题，可以以家乡的旅游、美食或特色产业为背景，制作推广家乡的网站，要求经济实用。

（2）准备文字和图片素材，素材与主题密切相关。

（3）设计出网站首页的色彩、布局，要求美观大方。

作业要求:

（1）创建一个网站，具体要求如下：

该网站里至少有三个文件夹，文件夹分别是images和style两个。
网站内至少有一张网页，即网站的首页，文件名为index.html。
网站首页必须采用独立的样式表文件style.css文件进行保存。
网页要使用Div.(盒子)模型进行设计。
设计的网页宽度建议为960px，高度为1200。
网页内必须包含LOGO、导航和大图轮换区、图片缩略图、版权申明。

作业效果图:

作业代码:

html代码:

<!DOCTYPE html>
<html>

<head>
    <title>深圳文化网</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

<body>
    <header>
        <div class="logo">
            <img src="./images/logo.png">

        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">建筑</a></li>
                <li><a href="#">文化</a></li>
                <li><a href="#">美食</a></li>
            </ul>
        </nav>
    </header>
    <div class="banner">
        <ul class="lunbo">
            <li class="item">
                <img src="./images/001.jpg" alt="">
            </li>
            <li class="item">
                <img src="./images/002.jpg" alt="">
            </li>
            <li class="item">
                <img src="./images/003.jpg" alt="">
            </li>
        </ul>
    </div>
    <section class="xx">
        <div class="intro">
            <h2>深圳简介</h2>
            <p>深圳是一个充满活力和创新的城市，它不仅是中国改革开放的重要窗口，也是全球科技创新的重要中心。在这里，你可以感受到快速发展的脉搏，看到高楼林立的城市风景，品尝到各种美食，体验到多元文化的碰撞和交流。
            </p>
        </div>
    </section>
    <section class="scenery">
        <h2>深圳风景</h2>
        <ul>
            <li>
                <div class="imgbox">
                    <img src="./images/华侨城.jpg">
                </div>
                <div class="textbox">
                    <h3>东部华侨城</h3>
                    <p>东部华侨城位于深圳大梅沙附近，是一个大型的度假观光旅游、探险、户外运动等为一体的生态旅游景区，来这里好玩的景点有茶溪谷休闲公园、云海谷体育公园、大华兴寺、大峡谷生态公园等，是旅游休闲的好地方。
                    </p>
                </div>

            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/西涌.jpg">
                </div>

                <div class="textbox">
                    <h3>西涌</h3>
                    <p>西涌位于大鹏半岛南澳南，这里的海滩是深圳最长最美丽的海滩，特别的安静适合情侣约会。是深圳十大景点之一，金色沙滩如绸缎般飘逸、舒畅</p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/植物园.jpg">
                </div>
                <div class="textbox">
                    <h3>仙湖植物园</h3>
                    <p>仙湖植物园位于罗湖区莲塘仙湖路，集研究、植物收集和旅游观光休闲为一体的游乐公园。在深圳十大景点中是观赏植物科学研究的重要基地。</p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/世界之窗.jpg">
                </div>
                <div class="textbox">
                    <h3>世界之窗</h3>
                    <p>世界之窗是很多外地游客来深圳旅游必去的一个景点，位于深圳市南山区。集世界奇观和名胜古迹以及民间歌舞表演为一体的大型主题公园，建筑风格很有特色可以拍照留念。
                    </p>
                </div>
            </li>
        </ul>
    </section>

    <section class="foods">
        <h2>深圳美食</h2>
        <ul>
            <li>
                <h3>宝安福永乌头鱼</h3>
                <img src="./images/宝安福永乌头鱼.jpg">

                <p>福永乌头鱼是深圳特色美食之一，肉质肥美、营养丰富，深受大家喜爱。乌头鱼以福永乌头鱼最为著名。乌头鱼又称“新鱼”，不食草类，专食小虾、小蟹，生活在蟹洞、海朗头和蚝塘中。乌头鱼体形较小呈圆形，最重不超过1斤，全身只有一条脊骨，肉多骨少，非常适合小孩子食用。
                </p>
            </li>
            <li>
                <h3>沙井蚝</h3>
                <img src="./images/沙井蚝.jpg">

                <p>沙井蚝是深圳著名的一道美食，沙井蚝产自深圳沙井，体型肥大，色泽乳白，肉质细嫩鲜美是深圳最著名的特产。沙井蚝不仅好吃，营养还丰富，富含蛋白质和维生素，含碘量是牛奶和蛋黄的200倍，被誉为“海底牛奶”。
                </p>
            </li>
            <li>
                <h3>南澳鲍鱼</h3>
                <img src="./images/南澳鲍鱼.jpg">

                <p>“食海鲜，到南澳”，南澳水产资源丰富，是金国最大规模的陆地养鲍基地之一。鲍鱼古称“石蝮”、“石决明”，又称“九孔螺”，肉质滑爽脆嫩、营养丰富，自古便被视为“鲍、参、翅、肚”四海味珍品之首，有可滋阴怡神功效。
                </p>
            </li>
            <li>
                <h3>南山荔枝</h3>
                <img src="./images/南山荔枝.jpg">

                <p>南山荔枝品种有糯米糍、桂味、妃子笑等，果实成熟在6月下旬。南山荔枝具有肉软滑细嫩、多汁、味浓甜等特点。营养价值高，被誉为“中华之珍品”。“一骑红尘妃子笑，无人知是荔枝来”，早在唐宋时期，荔枝便是进献的“贡品”。
                </p>
            </li>
        </ul>
    </section>
    <div class="footer">
        <p>版权所有 © 2020 深圳文化网</p>
    </div>
    <script>
        let lunbo = document.querySelectorAll(".lunbo .item")
        let num = 0
        let timer = setInterval(() => {
            console.log(num);
            lunbo[num].style.opacity = "0"
            num++
            if (num >= 3) {
                num = 0
            }
            lunbo[num].style.opacity = "1"
        }, 2000)

    </script>
</body>

</html>

css代码:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "微软雅黑", sans-serif;
    color: #333;
    background-color: #fff;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 80px;
}

.logo h1 {
    margin-left: 20px;
    font-size: 36px;
    font-weight: bold;
}

nav ul {
    display: flex;
    list-style: none;
}

nav li {
    margin-right: 20px;
}

nav a {
    color: #333;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

nav a:hover {
    color: red;
}

.banner {
    width: 100%;
    height: 400px;
    position: relative;
}

.banner .lunbo .item {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: all 1s;
}

.banner .lunbo .item:nth-child(1) {
    opacity: 1;
}

.banner img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.xx {
    background-color: #fff;
    margin: 10px auto;
}

.intro {
    width: 960px;
    padding: 50px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.intro h2 {
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

.intro p {
    line-height: 1.5;
    font-size: 16px;
    text-align: justify;
}

.scenery {
    width: 960px;
    margin: 0 auto;
    padding: 50px;
    background-color: #fff;
}

.scenery h2 {
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

.scenery ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin-top: 30px;
}

.scenery li {
    margin-bottom: 30px;
    width: 49%;
    height: 300px;
    position: relative;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;

}

.scenery li .imgbox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.scenery li .imgbox img {
    width: 120%;
    height: 120%;
}

.scenery li .textbox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(255, 255, 255, 1);
}

.scenery li .textbox h3 {
    text-align: center;
    width: 100%;
    margin-top: 40px;
}

.scenery li .textbox p {
    padding: 30px;
}

.scenery li:hover .imgbox {
    display: block;
}

.scenery li:hover .imgbox img {
    transition: all 0.5s;
    width: 100%;
    height: 100%;
}

.scenery li:hover .textbox {
    transition: all 1s;
    background-color: rgba(0, 0, 0, 0.3);
    transform: translateY(80px);

}

.scenery li:hover .textbox h3 {
    color: #fff;
}

.scenery li:hover .textbox p {
    color: #fff;
}




.foods {
    padding: 50px;
    width: 960px;
    margin: 0 auto;
    background-color: #fff;
}

.foods h2 {
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

.foods ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin-top: 30px;
}

.foods li {

    margin-bottom: 30px;
    width: 49%;
    position: relative;
    overflow: hidden;
}

.foods img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 10px;
    transition: all 0.5s;
}

.foods img:hover {
    transform: scale(1.1);
}

.foods h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.foods li:hover p {
    bottom: 30px;
    background-color: rgba(59, 58, 55, 0.846);
    color: #fff;

}

.foods p {

    font-size: 16px;
    box-sizing: border-box;
    padding: 20px;
    position: absolute;
    left: 0px;
    bottom: -150px;
    transition: all 1s;
}

.footer {
    padding: 20px;
    background-color: #000000;
    text-align: center;
    font-size: 14px;
    color: #fff;
}

原文地址:https://blog.csdn.net/qq_33449702/article/details/137018186 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1772409646112444416.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

网页设计期末作业题

作业目标:

作业要求:

作业效果图:

作业代码:

html代码:

css代码:

相关推荐

最近更新

热门阅读