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(源文件)所需的知识点。
代码如下(示例):以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/clear.css">
<title>首页</title>
<link rel="icon" href="images/title-lolg.png">
</head>
<body>
<header>
<div class="header-body">
<a href="index.html?123" class="logo">猫眼电影</a>
<div class="city">成都
<span class="caret"></span>
</div>
<div class="city-list">
<div class="now-city">
定位城市: 定位失败
</div>
<div class="citys">
<span class="icon"></span> 定位失败
</div>
</div>
<div class="nav">
<ul class="nav-list">
<li><a href="index.html?123" class="nav-model active">首页</a></li>
<li><a href="movies.html" class="nav-model">电影</a></li>
<li><a href="cinemas.html" class="nav-model">影院</a></li>
<li class="nav-model">演出</li>
<li class="nav-model">榜单</li>
<li class="nav-model">热点</li>
<li class="nav-model">商城</li>
</ul>
</div>
<div class="app-download">
<a href="#">
<span class="phone"></span> APP下载
<span class="caret"></span>
<div class="appcode">
<img src="images/phonecode.png" class="app-code"></img>
<p class="down-tip">扫码下载APP</p>
<p class="down-text">选座更优惠</p>
</div>
</a>
</div>
<div class="search">
<div type="text" class="searchinput">
<input type="text" class="input" placeholder="找影视剧、影人、影院">
<input class="submit" type="submit" value="">
</div>
</div>
<div class="userimg">
<img src="images/user.png" alt="">
<span class="caret"></span>
</div>
<div class="userlogin">
<a href="login.html" class=" notlogin">登录</a>
<div class="islogin nologin">
<a href="personal.html">个人中心</a>
<a href="index.html">退出</a>
</div>
</div>
</header>
<!-- 轮播图 -->
<div class="wrap" id="wrap">
<ul class="content"></ul>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
<!-- 页面主体 -->
<div class="container">
<div class="main">
<!-- 正在热映 -->
<div class="hot-movie">
<h2>正在热映(4部)</h2>
<div class="movies" id="hotmovies">
</div>
</div>
<!-- 即将上映 -->
<div class="movie-box">
<div class="movie-header">
<h2>即将上映(115部)</h2>
<a href="#">
<span>全部></span>
</a>
</div>
<div class="movies">
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>46461661人想看</p>
<button onclick="alert('123')">预告片</button>
<button onclick="alert('123')">预售</button>
<p>9月31日上映</p>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie2.png" alt="" srcset="">
</a>
<p>46461661人想看</p>
<button onclick="alert('123')">预告片</button>
<button onclick="alert('123')">预售</button>
<p>10月2日上映</p>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie3.png" alt="" srcset="">
</a>
<p>46461661人想看</p>
<button onclick="alert('123')">预告片</button>
<button onclick="alert('123')">预售</button>
<p>11月1日上映</p>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie4.png" alt="" srcset="">
</a>
<p>46461661人想看</p>
<button onclick="alert('123')">预告片</button>
<button onclick="alert('123')">预售</button>
<p>9月23日上映</p>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>46461661人想看</p>
<button onclick="alert('123')">预告片</button>
<button onclick="alert('123')">预售</button>
<p>9月31日上映</p>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>46461661人想看</p>
<button onclick="alert('123')">预告片</button>
<button onclick="alert('123')">预售</button>
<p>9月31日上映</p>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>46461661人想看</p>
<button onclick="alert('123')">预告片</button>
<button onclick="alert('123')">预售</button>
<p>9月31日上映</p>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>46461661人想看</p>
<button onclick="alert('123')">预告片</button>
<button onclick="alert('123')">预售</button>
<p>9月31日上映</p>
</div>
</div>
</div>
<!-- 热播电影 -->
<div class="movie-box">
<div class="movie-header c hotmovie ">
<h2>热播电影(115部)</h2>
<a href="#">
<span>全部></span>
</a>
</div>
<div class="movies movies-hot">
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie2.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie3.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie4.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
</div>
</div>
<!-- 喜剧电影 -->
<div class="movie-box">
<div class="movie-header">
<h2>喜剧电影(115部)</h2>
<a href="#">
<span>全部></span>
</a>
</div>
<div class="movies">
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie2.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie3.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie4.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
</div>
</div>
<!-- 动作电影 -->
<div class="movie-box">
<div class="movie-header c hotmovie ">
<h2>动作电影(125部)</h2>
<a href="#">
<span>全部></span>
</a>
</div>
<div class="movies movies-hot">
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie2.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie3.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie4.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
<div class="movies-model">
<a href="">
<img src="images/hotmovie1.png" alt="" srcset="">
</a>
<p>9.0分</p>
<button class="buynow">立即购票</button>
</div>
</div>
</div>
</div>
</div>
<!-- 页面底部 -->
<div class="footer" style="visibility: visible;">
<p class="friendly-links">
关于猫眼 :
<a href="#" target="_blank">关于我们</a>
<span></span>
<a href="#" target="_blank">管理团队</a>
<span></span>
<a href="#" target="_blank">投资者关系</a> 友情链接 :
<a href="#" data-query="utm_source=wwwmaoyan" target="_blank">美团网</a>
<span></span>
<a href="#" data-query="utm_source=wwwmaoyan">格瓦拉</a>
<span></span>
<a href="#" data-query="utm_source=wwwmaoyan" target="_blank">美团下载</a>
<span></span>
<a href="#" data-query="utm_source=maoyan_pc" target="_blank">欢喜首映</a>
</p>
<p class="friendly-links">
商务合作邮箱:v@maoyan.com 客服电话:10105335 违法和不良信息举报电话:4006018900
</p>
<p class="friendly-links">
用户投诉邮箱:tousujubao@meituan.com 舞弊线索举报邮箱:wubijubao@maoyan.com
</p>
<p class="friendly-links credentials">
<a href="#" target="_blank">中华人民共和国增值电信业务经营许可证 京B2-20190350</a>
<span></span>
<a href="#" target="_blank">营业性演出许可证 京演(机构)(2019)4094号</a>
</p>
<p class="friendly-links credentials">
<a href="#" target="_blank">广播电视节目制作经营许可证 (京)字第08478号</a>
<span></span>
<a href="#" target="_blank">网络文化经营许可证 京网文(2019)3837-369号 </a>
</p>
<p class="friendly-links credentials">
<a href="#" target="_blank">猫眼用户服务协议 </a>
<span></span>
<a href="#" target="_blank">猫眼平台交易规则总则 </a>
<span></span>
<a href="#" target="_blank">隐私政策 </a>
</p>
<p class="friendly-links credentials">
<a href="" target="_blank">京公网安备
11010102003232号</a>
<span></span>
<a href="#/" target="_blank">京ICP备16022489号</a>
</p>
<p>北京猫眼文化传媒有限公司</p>
<p>
?<span class="my-footer-year">2020</span> 猫眼电影 maoyan.com</p>
<div class="certificate">
<a href="#" target="_blank">
<img src="http://p0.meituan.net/moviemachine/e54374ccf134d1f7b2c5b075a74fca525326.png">
</a>
<a href="#" target="_blank">
<img src="http://p1.meituan.net/moviemachine/805f605d5cf1b1a02a4e3a5e29df003b8376.png">
</a>
<a href="h#" target="_blank">
<img src="http://p0.meituan.net/scarlett/3cd2a9b7dc179531d20d27a5fd686e783787.png">
</a>
</div>
</div>
</body>
</html>
body {
background-color: #ffffff;
}
header {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
min-width: 1200px;
background-color: #fff;
border-bottom: 1px solid #d8d8d8;
background-color: #ffffff;
}
header .header-body {
width: 1200px;
margin: 0 auto;
height: 80px;
display: flex;
position: relative;
}
header .header-body .logo {
display: block;
width: 133px;
height: 80px;
color: rgba(0, 0, 0, 0);
background: url(../images/header-bg.png) no-repeat center center;
}
header .header-body .city {
display: inline-block;
width: 60px;
height: 80px;
line-height: 80px;
color: #000000;
font-size: 16px;
margin-left: 10px;
box-sizing: border-box;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
header .header-body .city .caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 5px solid #666;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
-webkit-transition: all 0.2s ease;
transition: all 0.5s ease;
}
header .header-body .city:hover {
height: 81px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
z-index: 999;
background-color: #ffffff;
}
hea
一套合格的网页应该包含(具体可根据个人要求而定)
1.看到这里了就 【点赞收藏博文】
三连支持下吧,你的支持是我创作的动力, 【关注作者 |获取更多源码| 优质文章】
。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.