【网页设计】基于HTML+CSS上海旅游网站网页作业制作

一、👨‍🎓网站题目

旅游,当地特色,历史文化,特色小吃等网站的设计与制作。

二、✍️网站描述

👨‍🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

其中:

(1)📜html文件包含:其中index.html是首页、其他html为二级页面;

(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;

四、🌐网站效果

五、🪓 代码实现

🧱HTML
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.0">
    <title>zhanzhang</title>
    <link type="text/css" rel="stylesheet" href="css/5.css">
    <!--样式设置-->
    <style>
        script {
            color: rgb(140, 15, 15);
        }
    </style>
    <!--时钟显示-->
    <script>
        function showTime() {
            var time = new Date();
            var day = time.getDay();
            var date = time.getDate();
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            var hour = time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var day1 = day.toString();
            var nianyue = year + "年" + "&nbsp" + month + "月";
            var mytime = hour + ":" + minute + ":" + second;
            // document.getElementById("xinqi").innerHTML = day1;
            document.getElementById("ri").innerHTML = date;
            document.getElementById("nianyue").innerHTML = nianyue;
            document.getElementById("tt").innerHTML = mytime;
            setTimeout("showTime()", 1000);
        }
    </script>
</head>
 
<body>
    <div class="header">
        <!--头部-->
        <img id="hi1" src="https://ts1.cn.mm.bing.net/th/id/R-C.d973327cdca162a1d4e7a1c606642496?rik=f2qvc8PPs%2bQE6Q&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50143%2f0952.jpg_wh860.jpg&ehk=UGnEsnnh91Jr7wjBy4%2b6Jfh%2bT5D8%2bNS2nk4Rr4NwhXM%3d&risl=&pid=ImgRaw&r=0">
    </div>
 
    <div class="dh">
        <!--导航栏 -->
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="家乡.html">家乡简介</a></li>
            <li><a href="fengjing.html">风景名胜</a></li>
            <li><a href="meishi.html">美食特色</a></li>
            <li><a href="zhanzhang.html">站长简介</a></li>
            <li><a href="diaocha.html">在线调查</a></li>
        </ul>
    </div>
    <!--主体-->
    <div id="zhuti">
        <div id="right"><!--右边-->
            <div id="zhan1"><!--标题-->
                <h1>站长简介</h1>
            </div>
            <div id="zhan2"><!--内容-->
                <ul>
                    <li>姓名:     </li>
                    <li>性别:</li>
                    <li>家乡:上海</li>
                    <li>爱好:乒乓球、追剧、看书、散步、看电影
                        <ul id="tuijian">
                            <li>推荐的书:
                                <ul id="shu">
                                    <li>《从浪漫派到后现代》</li>
                                    <li>《心态与象牙塔》</li>
                                    <li>《不间断的人》</li>
                                </ul>
                            </li>
                            <li id="zong">推荐的综艺:
                                <ul id="zongyi">
                                    <li>在线学习平台课程</li>
                                    <li>职业技能培训</li>
                                    <li>语言学习</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li id="qita">其他:......</li>
                </ul>
            </div>
        </div>
 
    </div>
 
 
 
 
 
    <div id="" class="footer">
        <!--页尾-->
        <p><!--尾页文字-->
            上海市
        </p>
        <p>
            welcome to baoji上海!
        </p>
    </div>
</body>
 
</html>
🧱css
css 复制代码
* {
    /*全局选择器*/
    margin: 0px;/*外边距*/
    padding: 0px;/*内边距*/
}
 
body {
    /*主体*/
    color: rgb(42, 61, 79);
    font-family: 楷体;/*字体样式*/
}
 
.header {
    /*头部*/
    width: 100%;/*宽度*/
    height: 150px;/*高度*/
}
 
 
#hi1 {
    /*头部图片*/
    width: 100%;
    height: 150px;
}
 
.dh ul {
    /*导航栏*/
    width: 100%;
    padding: 0px;/*内边距*/
    height: 30px;/*高度*/
    margin-bottom: 30px;/*外边距*/
}
 
.dh ul li {/*导航栏行的设置*/

    height: 30px;
    width: 16.45%;
    list-style: none;/*列表样式*/
    float: left;/*左浮动*/
    display: inline;
    font: 0.9em;
}
 
.dh ul li a {/*导航栏链接设置*/
    text-align: center;/*文本位置*/
    color: white;
    font-size: larger;/*字体大小*/
    font-family: 楷体;
    width: 100%;
    margin: 0px;
    text-decoration: none;/*列表样式*/
    display: block;
    background-color: #FC6;
    line-height: 40px;
    border-bottom: 0px solid rgb(168, 164, 172);
}
 
.dh ul li a:hover {    /*鼠标划过导航栏时*/
    color: rgb(0, 0, 0);
    background-color: #FFF;
    border-bottom: 1px solid rgb(16, 4, 28);
    
}
 
.footer {
    /*尾部*/
    margin-top: 10px;
    clear: both;/*清楚浮动*/
    width: 100%;
    height: 70px;
    background-color: #FC6;
    color: rgb(99, 34, 34);
    font: italic 14px/20px 宋体;/*文字样式*/
    text-align: center;
}
 
.footer p{
    margin-top: 10px;
}
 

 
#zhuti {
    /*主体*/
    margin: 10px 300px 0px 300px;
    background-color: blueviolet;
 
}
 
#left {
    /*左边div设置*/
    width: 30%;
    padding: 5px;
    height: 600px;
    float: left;
    background-color: #FC6;
 
}
 
#geqian h2 {
    /*个签*/
    margin: 30px 0px 0px 0px;
    padding: 10px;
    height: 100px;
}
 
#right {
    /*右边*/
    width: 100%;
    height: 565px;
    background-color: #FC6;
    float: left;
    border: 0px double rgb(64, 151, 120);
    margin: 20px 0px 50px 50px;
    /*外边距*/
    box-shadow: 20px 20px 25px 10px #242443;
    /*阴影*/
    border-radius: 100px;
    /*弧度设置*/
}
 
#shijian {
    /*时间*/
    text-align: center;/*文本居中*/
    margin: 90px 0px 0px 0px;
    height: 150px;
}
 
#ri {
    /*日*/
    font-size: 45px;
    margin: 0px 0px 5px 0px;
}
 
#nianyue {
    /*年月*/
    font-size: 20px;
}
 
#tt {
    /*几点*/
    margin-top: 5px;
}
 
table {
    /*表格*/
    border-color: rgb(64, 151, 120);
}
 
#xinxi {
    /*信息*/
    height: 200px;
}
 
#zhan1 {
    /*右边标题*/
    margin: 30px 0px 30px 0px;
    text-align: center;
}
 
#zhan2 {
    /*右边内容设置*/
    font-size: large;
    width: 60%;
    margin: 40px 10px 0px 70px;
}
 
#zhan2 ul li {
    /*右边列表设置*/
    height: 30px;
    font: 0.9em;
}
 
#tuijian {
    /*推荐设置*/
    margin: 10px 0px 0px 30px;
}
 
#shu {
    /*书设置*/
    margin-left: 30px;
}
 
#zong {
    /*综艺设置*/
    margin-top: 80px;
}
 
#zongyi {
    /*综艺设置*/
    margin: 10px 0px 0px 30px;
}
 
#qita {
    /*其他*/
    margin-top: 250px;
}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 "👍点赞" "✍️评论" "💙收藏" 一键三连哦!

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试