千与千寻静态网页设计 6页HTML大作业很好看的配色和排版

最新推荐文章于 2024-03-01 08:23:24 发布

从前有个范特西

最新推荐文章于 2024-03-01 08:23:24 发布

阅读量1k

点赞数 1

文章标签：课程设计

本文链接：https://blog.csdn.net/lxidw7/article/details/131271416

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="icon.ico">
<title>千与千寻</title>
<link rel=stylesheet type=text/css href="css/style.css">
<style type="text/css">
#myweb {
	position:absolute;
	width:100%;
	height:1660px;
	z-index:1;
	left: 0px;
	top: 0px;
	background-color: #f9f9f9;
}

</style>
</head>

<body>
<div id="myweb">
  <div id="daohang">
    <div id="daohang01">
    <IFRAME frameBorder=0 height=70 width=1180 marginHeight=0 marginWidth=0 scrolling=no src="iframe/top.html" ></IFRAME>
    </div>
  </div>
  
  <div id="neirong">
    <div id="banner">
    <img src="img/banner.jpg" alt=" "  width="1180" height="400" />
      <div id="miaoshu">
      
      <div id="up01">宫崎骏先生很用心地写出了这部故事,就是要告诉大家关于爱、关于勇气、关于成长...</div>
        <a href="introduce.html" ><div id="up02"></div></a>
      </div>
      
    </div>
    <div id="situbiao">
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="img/tubiao01.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">爱好者交流</a></div>
      </div>
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="img/tubiao02.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">我的收藏</a></div>
      </div>
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="img/tubiao03.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">时光印记</a></div>
      </div>
      <div id="tubiao01">
        <div id="tubiaoup"><a href="#"><img src="img/tubiao04.png" alt=" "  width="85" height="85" border="0" /></a></div>
        <div id="tubiaodown"><a href="#">精彩瞬间</a></div>
      </div>
    </div>
<div id="zhutibufen">
      <div id="z-neirongzuo">
        <div id="shihenin">我不知道去哪里，但我一直在路上</div>
        <div id="shihenin1">不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。</div>
        <div id="tansuo" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="introduce.html">探寻千与千寻</a></div>
        
      </div>
      <div id="z-neirongyou">
      <img src="img/01.jpg" alt="tp" />
      </div>
    </div>
    
<div id="sanmokuai">
      <div id="mokuaia">
        <div id="topa"><a href="#"><img src="img/index01.jpg" alt=" "  width="385" height="175" /></a></div>
        <div id="topb">
          <div id="topb-neirong"><a href="#">心存善意 定能遇到天使</a></div>
          <div id="topb-neirong2"> <a href="#">查看更多</a></div>
        </div>
      </div>
      <div id="mokuaia1">
      <div id="topa"><a href="#"><img src="img/index02.jpg" alt=" "  width="385" height="175" /></a></div>
        <div id="topb">
          <div id="topb-neirong"><a href="#">大声地笑出来，就不那么害怕了</a></div>
          <div id="topb-neirong2"> <a href="#">查看更多</a></div>
        </div>
      </div>
      <div id="mokuaia1">
      <div id="topa"><a href="#"><img src="img/index03.jpg" alt=" "  width="385" height="175" /></a></div>
        <div id="topb">
          <div id="topb-neirong"><a href="#">当陪你的人要下车时，即使不舍也该心存感激</a></div>
          <div id="topb-neirong2"> <a href="#">查看更多</a></div>
        </div>
      </div>
    </div>
  </div>
  
  
<div id="foot">
    <div id="foot01">
    <IFRAME frameBorder=0 height=405 width=1180 marginHeight=0 marginWidth=0 scrolling=no src="iframe/footer.html" ></IFRAME>
    </div>
  </div>
</div>
</body>
</html>

千与千寻动漫主题静态页面设计，共六个html页面相互超连接，配色舒适优美，这套作品最大的看点就是风格的美学设计，配图的选择与优化，完成度堪比商业网站，LOGO设计根据千与千寻电影海报文字使用Photoshop设计演变而来，导航栏菜单鼠标划过有下划线效果，按钮有鼠标划过变色效果，有图片列表页、详情页等三层深度，有视频、音乐多媒体的运用，所有效果均为html css实现，无JavaScript的运用~ 论文写了5000字来描述作品的制作背景、过程、页面实现等...

很好看的配色和排版千与千寻静态网页设计 6页HTML大学生网页大作业论文5000字