html制作网页案例代码----(故宫博物馆9页)特效很多

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | 等网站的设计与制作 | HTML期末大学生网页设计作业,Web大学生网页

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示








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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title>故宫博物馆title>
    
    
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/homecommon.css">
    <link rel="stylesheet" href="css/home.css">
    <script src="js/函数.js">script>
    <script src="js/common.js">script>
    <script src="js/home.js">script>
    <script src="js/jquery.min.js">script>
head>

<body>
    
    <header>
        <div class="logo">div>
        <div class="nav">
            <ul>
                <li><a href="">首页a>li>
                <li><a href="guide.html">导览a><b><img src="picture/arrow1.png" alt="">b>li>
                <li><a href="exhibition.html">展览a><b><img src="picture/arrow1.png" alt="">b>li>
                <li><a href="teach.html">教育a><b><img src="picture/arrow1.png" alt="">b>li>
                <li><a href="probe.html">探索a><b><img src="picture/arrow1.png" alt="">b>li>
                <li><a href="learning.html">学术a><b><img src="picture/arrow1.png" alt="">b>li>
                <li><a href="cultural.html">文创a><b><img src="picture/arrow1.png" alt="">b>li>
                <li><a href="about.html">关于a><b><img src="picture/arrow1.png" alt="">b>li>
            ul>
        div>

        <div class="tools">
            <ul class="clear">
                <li>
                    <a href="javascript:;"><img src="picture/tools1.png" alt="">a>
                    <div class="show">
                        <a href="signin.html">登录a>
                        <a href="signin.html">注册a>
                    div>
                li>
                <li>
                    <a href="javascript:;"><img src="picture/tools2.png" alt="">a>
                    <div class="show">
                        <a href="javascript:;">ENa>
                        <a href="javascript:;">青少版a>
                    div>
                li>
                <li>
                    <a href="javascript:;"><img src="picture/tools3.png" alt="">a>
                    <div class="show">
                        <a href="javascript:;">搜索a>
                    div>
                li>
            ul>
            <a href="#" class="tools4">
                <img src="picture/tools4.png" alt="">
            a>
        div>

        
        <div class="nav_child">
            <div class="child c1">
                <div class="nav">
                    <a href="javascript:;">开放时间a>
                    <a href="javascript:;">票务服务a>
                    <a href="javascript:;">交通路线a>
                    <a href="javascript:;">游览须知a>
                    <a href="javascript:;">全景故宫a>
                div>
            div>
            <div class="child c2">
                <div class="nav">
                    <a href="javascript:;">近期展览a>
                    <a href="javascript:;">专馆a>
                    <a href="javascript:;">原状陈列a>
                    <a href="javascript:;">赴外展览a>

                <

你可能感兴趣的:(web前端期末大作业,html,javascript,前端,dreamweaver,css)