整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html期末考试网页设计作业分享 宫崎骏作品千与千寻网页设计制作

与千寻网页设计设计有五个页面组成,带登录表单。网页采用div+css布局设置而成。

如果有需要网页可以增加页面以及添加js轮播图,登录验证等js效果;

网页设计运行效果图

千与千寻网页设计首页源代码


<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/style.css">


<title>千与千寻</title>
</head>

<body>
<div class="wrapin"> 
  <!--头部-->
  <header>
    <ul class="nav clearfix">
      <li><a href="index.html">首页</a></li>
      <li><a href="juqing.html">剧情简介</a></li>
      <li><a href="juese.html">角色介绍</a></li>
      <li><a href="tupian.html">图片鉴赏</a></li>
	  <li><a href="denglu.html">用户登录</a></li>
    </ul>
  </header>
      <div class="banner"><img src="images/9.jpg" alt=""></div>
  
  <!--内容-->
  <div class="con">
    <div class="top clearfix">
      <div class="text">
        <h2><a href="http://74fan.com/player/868-4-1.html"><i>千与千寻</i></a></h2>
		<hr>
        <p>《千与千寻》是由吉卜力工作室制作的动画电影,由宫崎骏执导,柊瑠美、入野自由、中村彰男、夏木真理等人担任主要配音。该片主要讲述了千寻意外来到神灵世界后,为了救因惩罚而变成猪的家人,经历许多磨难的故事。2001年7月20日在日本上映。2019年6月21日在中国大陆公映。2022年8月5日起在中国台湾地区重映数字修复版本。</p>
      </div>
      <div class="pic"> <img src="images/11.jpg" alt=""> </div>
    </div>
    <div class="tupian">
      <div class="title">
        <h2>图片鉴赏</h2>
      </div>
      <ul class="clearfix">
        <li><img src="images/17.jpg" alt=""></li>
        <li><img src="images/9.jpg" alt=""></li>
        <li><img src="images/11.jpg" alt=""></li>
      </ul>
    </div>
	  
	
  <!--底部-->
  <footer> 

  
  <p>千与千寻</p>
  </footer>
  </div>
 
</div>

<div>
</div>
</body>
</html>


更多源码选择

HTML5网页设计成品作业模板

021来了,难得安静下来,或许变成了奢侈,多么想拽住时间的脚步,让风在这一刻静止,放下一切,随心随意,多么自由,多么自在。

这次整理了一款新的设计,取名《周末の启程》,这款与以往不同之处,就是简单、简单、简单,没有css外部样式表,没有js,纯html,div+css+table布局,代码结构也简单明了,希望大家能够喜欢。

情介绍


文章目录

  • 二、网站描述

  • 网站介绍

  • 四、网站演示

  • TML结构代码

  • 如何让学习不再盲目


  • 七、更多干货

题目


HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共有多个页面,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度

一套优质的网页设计应该包含 (具体可根据个人要求而定)


  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。

  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。

  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。

  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。

  5. 要有JS特效,如定时切换和手动切换图片轮播。

  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。

  7. 页面清爽、美观、大方,不雷同。。

  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

<h

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

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


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

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


网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)html文件包含:其中index.html是首页、其他html为二级页面;


(2) css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


<h



<h

HTML结构代码

<!--
* @Author: your name
* @Date: 2022-02-16 22:58:33
* @LastEditTime: 2022-02-16 22:58:54
* @LastEditors: your name
* @Description: 打开koroFileHeader查看配置 进行设置:
* @FilePath: 北京黎红学院 网页成品4页面\index.html

CSS样式代码

@charset "utf-8";body{ background:#fff;}.head{ width:100%; height:200px; margin:auto; background: url(../images/head_bj.png) top repeat-x #5d644a;}.head_in{ width:930px; height:200px; margin:auto; background: url(../images/head.png) top repeat-x #5d644a;}.head h1{ font-size:56px; line-height:158px; color:#900; text-align:center;}.nav{width:930px; height:40px; border:1px solid #646a52; margin:auto; background:#4c4d3d; }.nav ul{margin:auto;}.nav li{ height:30PX; float:left; padding:5px 20px;}.nav li a{ font-size:24px; color:#ccc; line-height:30px;}.nav li a:hover{ color:#362f2d;}.nav li:hover{ background:#fff}.nav li:hover a{ color:#362f2d;}.center{ text-align:center}.main{ width:100%; height:auto; min-height:500px; margin:auto;}.main_nav{width:940px; height:auto; margin:10px auto;}.main_nav li{ float:left; margin:10px; }.main_con{ width:100%; height:auto; min-height:300px; margin:auto;padding-top:20px; background:#006699;}.main_ad{ width:920px; height:260px; margin:auto; }.main_news{width:900px; height:auto; margin:auto; margin-top:10px; padding-bottom:20px;}.main_news h2{ font-size:26px; line-height:38px; color:#fff;}.main_news p{ font-size:14px; line-height:22px; color:#fff;}.main_news ul{padding-left:20px; }.main_news li{ padding-left:20px;}.main_news li a{ font-size:18px; line-height:32px; color:#fff; }.main_news li a:hover{ font-size:18px; line-height:32px; color:#ffd9b4; }.main_des{width:900px; height:auto; margin:auto; padding-bottom:50px; }.main_des h1{ font-size:28px; line-height:68px; color:#362f2d; text-align:center;}.main_des p{ font-size:16px; line-height:28px; color:#333; text-indent:2em;}.main_zhanshi{width:920px; height:auto; margin:auto;}.main_zhanshi li{ float:left; margin:10px;}.main_zhanshi img{ width:280px; height:200px;}.foot{ width:100%; height:90px; background:#600; margin:auto;text-align:center;}.foot_in{ width:960px; height:90px; padding-top:15px;margin:auto;text-align:center;}.foot_in p{ font-size:16px; line-height:26px; color:#fff; }*{ margin:0; padding:0; font-family:黑体; }.clear{ clear:both;}.fl{ float:left;}.fr{ float:right;}img{ border:none;}a{ text-decoration:none;}a:hover{ text-decoration:none;}li{ list-style-type:none;}.p10{ padding:10px;}.main .main_con .main_news h2 a {color: #FFF;}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<h

第一、带着目标去学习,无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么,是想解决什么问题,实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的,书籍是浩如烟海的。我们尽情徜徉其中的时候,千万不要被海水淹死,没有自我了。在学习过程中,我们会发现每一个知识点都是有她的边界和背景的,我们要善于归纳整理知识

第三、学到了就要用到

有时,我们一天下来感觉学到了很多干货,那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事,但只有会学习的人,才有价值。