电影主题HTM5网页设计作业成品——爱影评在线电影(10页面)使用dreamweaver制作采用DIV+CSS进行布局

VIP文章网页设计吧

于 2023-05-16 08:20:51 发布

阅读量1.1k

点赞数

分类专栏：静态网页设计文章标签： css dreamweaver 课程设计

本文链接：https://blog.csdn.net/qq_38515154/article/details/130696885

版权

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>首页</title> 
  <meta name="keywords" content="电视剧剧情,电视剧剧情介绍,电影剧情介绍" /> 
  <meta name="description" content="爱影评致力打造最新电视剧分集剧情介绍的剧情介绍网站,提供最新电影剧情介绍,分集剧情介绍,剧情简介,剧集评价,演职员表,花絮,最新电视节目预告等剧情资料.看最新剧情,就上爱影评剧情网!" /> 
  <link href="css/style.css" type="text/css" rel="stylesheet" /> 
  <meta http-equiv="x-ua-compatible" content="ie=7" /> 
  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
  <script type="text/javascript" src="js/common.js"></script> 
 </head> 
 <body> 
  <div class="top"> 
   <div class="w"> 
    <span>欢迎来到爱影评www.aiyingping.com最专业的剧情介绍网站</span> 
   </div> 
  </div> 
  <div id="header"> 
   <div class="w"> 
    <div class="logo"> 
     <a href="index.html" title="首页-爱影评,电视剧情网">爱影评</a> 
    </div> 
    <div id="search"> 
     <div class="ser"> 
      <form action="/e/search/index.php" method="post" name="searchform" id="searchform"> 
       <input type="text" id="kw" name="keyboard" class="search-input" value="请在此处输入影片片名或演员名称。" onfocus="if(this.value=='请在此处输入影片片名或演员名称。'){
       this.value='';}" onblur="if(this.value==''){
       this.value='请在此处输入影片片名或演员名称。';};" /> 
       <input type="submit" name="submit" class="sub" value="" /> 
       <input type="hidden" name="show" value="title,player" /> 
       <input type="hidden" name="tempid" value="1" /> 
       <input type="hidden" name="tbname" value="movie" /> 
      </form> 
     </div> 
     <p>热门搜索：<a href="/e/search/result/?searchid=47" target="_blank">清潭洞丑闻</a>&nbsp;<a href="/e/search/result/?searchid=27" target="_blank">神雕侠侣</a>&nbsp;<a href="/e/search/result/?searchid=78" target="_blank">狎鸥亭白夜</a>&nbsp;<a href="/e/search/result/?searchid=19" target="_blank">二炮手</a>&nbsp;<a href="/e/search/result/?searchid=17" target="_blank">匹诺曹</a>&nbsp;<a href="/e/search/result/?searchid=168" target="_blank">小时代4</a><br /></p> 
    </div> 
    <p class="plus"><a href="ranking_list.html" class="ph">排行榜</a><a href="/new.html" class="dq">最近更新</a><a href="javascript:void(0)" rel="nofollow" id="addFavorite" class="sc">收藏我们</a></p> 
   </div> 
  </div> 
  <div class="menu"> 
   <div class="w"> 
    <a href="index.html" titile="爱影评,电视剧情网">首页</a> 
    <a href="list.html">电视剧剧情</a> 
    <a href="list.html">电影剧情</a> 
    <a href="list.html">动漫剧情</a> 
    <a href="list.html" rel="nofollow">内地剧情</a> 
    <a href="list.html" rel="nofollow">港台剧情</a> 
    <a href="list.html" rel="nofollow">日韩剧情</a> 
    <a href="list.html" rel="nofollow">欧美剧情</a> 
    <a href="list.html" rel="nofollow">泰印剧情</a> 
    <a href="stars.html">明星库</a> 
    <a href="news.html">影视动态</a> 
   </div> 
  </div> 
  <!--/header--> 
  <div class="focusBox" style="margin:0 auto"> 
   <div class="w"> 
    <ul class="pic"> 
     <li><a href="detail.html"><img src="picture/adb95b16c9cfed604c968cabbb1f282f.jpg" /></a></li> 
     <li><a href="detail.html"><img src="picture/ed81799f0bffe2a4b0259b9a1f316196.jpg" /></a></li> 
     <li><a href="detail.html"><img src="picture/b1eba1166272276b9332812cb4814e26.jpg" /></a></li> 
     <li><a href="detail.html"><img src="picture/51e17535512db3b83e574b335a143488.jpg" /></a></li> 
    </ul> 
    <div class="txt-bg"></div> 
    <i class="ico"></i> 
    <div class="txt"> 
     <ul> 
      <li><a href="detail.html">封神英雄榜2</a></li> 
      <li><a href="detail.html">活色生香</a></li> 
      <li><a href="detail.html">医馆笑传</a></li> 
      <li><a href="detail.html">长大</a></li> 
     </ul> 
    </div> 
    <ul class="num"> 
     <li class="on"><a href="index.html" target="_blank"><img src="picture/acdbff34b17f1af4c40f785f23953e41.jpg" /></a></li> 
     <li><a href="detail.html"><img src="picture/b1563adb313ab9632c1512ceadc32772.jpg" /></a></li> 
     <li><a href="detail.html"><img src="picture/485dcf4cb82351929b6e18f1345b2609.jpg" /></a></li> 
     <li><a href="detail.html"><img src="picture/ab5061004445ae332c210b8e14aceb93.jpg" /></a></li> 
    </ul> 
   </div> 
  </div> 
  <script type="text/javascript">
		jQuery(".focusBox").slide({
      titCell:".num li", mainCell:".pic",effect:"fold", autoPlay:true,
			startFun:function(i){
     
				 jQuery(".focusBox .txt li").eq(i).animate({
     "bottom":0}).siblings().animate({
     "bottom":-56});
			}
		});
	</script> 
  <div id="main"> 
   <div class="banner"> 
    <script src="js/thea1.js"></script> 
   </div> 
   <div class="box"> 
    <div class="content"> 
     <div class="title"> 
      <h1><a href="list.html">电视剧剧情</a></h1> 
      <dl> 
       <dd> 
        <a href="list.html">推荐</a> 
       </dd> 
       <dd> 
        <a href="/tv/list-2-0-0-0.html">都市</a> 
       </dd> 
       <dd> 
        <a href="/tv/list-3-0-0-0.html">家庭</a> 
       </dd> 
       <dd> 
        <a href="/tv/list-4-0-0-0.html">生活</a> 
       </dd> 
       <dd> 
        <a href="/tv/list-5-0-0-0.html">偶像</a> 
       </dd> 
       <dd> 
        <a href="/tv/list-6-0-0-0.html">喜剧</a> 
       </dd> 
       <dd> 
        <a href="/tv/list-7-0-0-0.html">历史</a> 
       </dd> 
       <dd> 
        <a href="/tv/list-8-0-0-0.html">古装</a> 
       </dd> 
      </dl> 
     </div> 
     <div class="bd clearfix"> 
      <ul class="img-list dis clearfix"> 
       <li><a class="play-img" href="detail.html" target="_blank"><img src="picture/f28811fffb1a2ee5002e1bb1d06809b3.jpg" alt="虎妈猫爸" /></a><b><a href="detail.html" target="_blank">虎妈猫爸</a></b><p>赵薇,佟大为,李佳,纪</p></li> 
       <li><a class="play-img" href="/tv/472.html" target="_blank"><img src="picture/5c7ebf7d955c80b6b2219a31fe36fb1c.jpg" alt="听到传闻" /></a><b><a href="/tv/472.html" target="_blank">听到传闻</a></b><p>刘俊相,柳好贞,李准,</p></li> 
       <li><a class="play-img" href="/tv/461.html" target="_blank"><img src="picture/9b6dbc7d40bcafca6643d7b4dd4dc31b.jpg" alt="嘿！真不是闹着玩的" /></a><b><a href="/tv/461.html" target="_blank">嘿！真不是闹着玩的</a></b><p>李泽锋,解惠清,殷叶子</p></li> 
       <li><a class="play-img" href="/tv/429.html" target="_blank"><img src=

最低0.47元/天解锁文章

网页设计吧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
电影主题HTM5网页设计作业成品——爱影评在线电影(10页面)使用dreamweaver制作采用DIV+CSS进行布局

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
复制链接

扫一扫