您的浏览器版本过低,为保证更佳的浏览体验,请点击更新高版本浏览器

以后再说X

欢迎访问绘芯科技网站!

全国订购热线:
027-87052087 13329706647

知识库

矩阵屏 关于城市旅游的HTML网页设计 HTML+CSS上海博物馆网站 dreamwea

作者:hxceshi 发布时间:2022-12-31 10:00 次浏览

旅游景点引见、旅游风景区、家乡引见、等网站的设计与制造。网站集中主要展示了的地方风土人情,并通过访客留言,增加游客的互动体验。网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;网站设计制造的重点是对网页整体设计的规划和对网页整体内容的选题。

【作者主页——获取更多优质源码】

【web前端期末大作业——毕设项目精品实战案例(1000套)】

文章目录

一、网站题目?

旅游景点引见、旅游风景区、家乡引见、等网站的设计与制造。

二、网站描述??

旅游景点引见、旅游风景区是一个引见简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情,并通过访客留言,增加游客的互动体验。同时,地方旅游网站里的每一个网页都采用了统一的设计风格,以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格,更能吸引浏览者的眼球。

三、网站引见

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

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

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

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

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

其中:

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

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

(3)js文件包含:js实现动态轮播特效, 点击事件等等(个别网页中运用到js代码)。

四、网站效果

网站设计制造的重点是对网页整体设计的规划和对网页整体内容的选题。

网站设计方面:计划实现简约大气的网页设计效果。

网站功能方面:计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

在这里插入图片描述

五、网站代码制造部分

(1)网站首页规划确定非常好各个板块的内容,并使用了DIV+CSS规划。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

(2)页面使用了DIV+CSS规划,使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

(3)表单部分页面使用了DIV+CSS规划,使用到的知识主要有运用了form表单、input文本框和input提交按钮,完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码


DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>上海博物馆集title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
head>
<body>
<div class="head clearfix"> <b class="fl"><img src="images/logo.jpg">b>
  <nav class="fr"><a href="index.html">主页a> <a href="#">博物馆介绍a> <a href="#">场馆图片a> <a href="#">博物馆资讯a>nav>
div>
<div class="main clearfix">
  
  <div class="banner">
    <img src="images/timg.jpg" width="100%">
  div>
  <div class="div2 bg000 ">
    <div class="bar">
      <h3>上海各大博物馆地址h3>
    div>
    <div class="fl w40" style=""><img src="images/1.jpg" width="460" style="margin: 0 10px;">div>
    
  div>
  <div class="div4 bg000 ">
    <div class="bar">
      <h3>博物馆资讯h3>
    div>
    <div class="">
      <ul>
        <li><a href="#">上海博物馆入选2021年上海市 “中华文化走出去”专项扶持资金项目a>li>
        <li><a href="#">上海博物馆举办“万年长春——海上千年书画国际学术研讨会”a>li>
        <li><a href="#">上海博物馆“东西汇融——中欧陶瓷与文化交流特展”开幕a>li>
        <li><a href="#">上海博物馆“汉淮传奇——噩国青铜器精粹展”开幕a>li>
        <li><a href="#">上海博物馆“高山景行——上海博物馆受赠文物展”开幕a>li>
        <li><a href="#">上海博物馆入选2021年上海市 “中华文化走出去”专项扶持资金项目a>li>
        <li><a href="#">上海博物馆举办“万年长春——海上千年书画国际学术研讨会”a>li>
        <li><a href="#">上海博物馆“东西汇融——中欧陶瓷与文化交流特展”开幕a>li>
        
      ul>
    div>
  div>
  <div class="clearfix">div>
  <div class="div7 bg000 clearfix">
    <div class="bar">
      <h3>场馆图片h3>
    div>
    <div class="">
      <ul id="jSearchHeroDiv" class="imgtextlist">
        <li><img src="images/x1.png" >
          <p>上海博物馆p>
        li>
        <li><img src="images/x5.png" >
          <p>上海世博会博物馆p>
        li>
        <li><img src="images/x9.png" >
          <p>上海当代艺术博物馆p>
        li>
        <li><img src="images/x13.png" >
          <p>上海工艺美术博物馆p>
        li>
      ul>
    div>
  div>
div>
<footer class="footer" > xxx版权所有footer>
body>
html>

上一篇:矩阵屏 告诉你一个真实的德国双元制

下一篇:没有了

客服