目录
一、前言
本实例以游戏绝地求生为主题设计，应用html5+css，包括DIV布局、点击事件、超链接、留言板等，供大家参考。【本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游戏</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo"> <a href="index.html"><img src="images/logo.png" alt="LOGO" width="120"></a> </div>
<ul id="navigation">
<li class="selected"> <a href="index.html">首页</a> </li>
<li> <a href="about.html">介绍</a> </li>
<li> <a href="blog.html">资讯</a> </li>
<li> <a href="gallery.html">图片</a> </li>
<li> <a href="contact.html">联系作者</a> </li> |
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix">
<div class="info"> </div>
</div>
</div>
<div class="body clearfix">
<div class="">
<p>吃鸡即大吉大利，晚上吃鸡简称，网络流行词，该词最早来源于电影《决胜21点》，随后在游戏《绝地求生：大逃杀》而火遍网络，当你获得第一名的时候就会有一段台词出现：“大吉大利，晚上吃鸡”，所以，“吃鸡”即指玩家在《绝地求生：大逃杀》等逃杀类游戏中取得第一。</p>
</div>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li> <img src="images/astronaut.jpg" alt="Img" height="204" width="220">
<h3><a href="blog.html">游戏截图</a></h3>
</li>
<li> <img src="images/earth.jpg" alt="Img" height="204" width="220">
<h3><a href="blog.html">游戏截图</a></h3>
</li>
<li> <img src="images/spacecraft-small.jpg" alt="Img" height="204" width="220">
<h3><a href="blog.html">游戏截图</a></h3>
</li>
<li> <img src="images/space-shuttle.jpg" alt="Img" height="204" width="220">
<h3><a href="blog.html">游戏截图</a></h3>
</li>
</ul>
<div class="body">
<p >版权所有</p>
</div>
</div>
</body>
</html>
......
2.CSS
代码如下（节选示例）：
@font-face {
font-family: 'PTSerif-Caption';
src: url('../fonts/PT_Serif-Caption-Web-Regular.eot');
src: local('☺'), url('../fonts/PT_Serif-Caption-Web-Regular.woff') format('woff'), url('../fonts/PT_Serif-Caption-Web-Regular.ttf') format('truetype'), url('../fonts/PT_Serif-Caption-Web-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: url(../images/bg-body.jpg) repeat left top;
font-family: Arial, Helvetica, sans-serif;
min-width: 960px;
margin: 0;
}
img {
border: 0;
}
.wrapper {
width: 960px;
margin: 0 auto;
}
.clearfix:after {
clear:both;
content:"";
display:block;
height:1%;
line-height:0;
visibility:hidden;
}
/*------------------------------ HEADER ------------------------------*/
.btn1, .btn2, .btn3, #newsletter input {
background: url(../images/interface.png) no-repeat;
}
.btn1, .btn2, .btn3 {
color: #fdfdfd;
display: inline-block;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-shadow: -3px 0 3px #053131;
text-transform: uppercase;
}
.btn1 {
background-position: 0 0;
height: 34px;
line-height: 34px;
width: 202px;
padding: 0 3px 9px;
}
.btn2 {
background-position: 0 -53px;
height: 37px;
line-height: 37px;
width: 216px;
padding: 0 3px 8px;
}
.btn3 {
background-position: 0 -108px;
font: 22px/49px Georgia, "Times New Roman", Times, serif;
height: 49px;
width: 222px;
}
.btn1:hover {
background-position: -222px 0;
}
.btn2:hover {
background-position: -232px -53px;
}
.btn3:hover {
background-position: -232px -108px;
}
/*------------------------------ HEADER ------------------------------*/
#header {
background: url(../images/bg-header.png) repeat-x center top;
height: 50px;
padding: 16px 0 0;
text-align: right;
}
/** Logo **/
#logo {
float: left;
display: inline-block;
margin-left: 10px;
}
/** Navigation **/
#navigation {
display: inline-block;
height: 30px;
list-style: none;
margin: 0 10px;
padding: 0;
*width: 516px; /** Needed for IE7 **/
}
#navigation li {
float: left;
margin: 0 30px;
}
#navigation li:first-child {
margin-left: 0;
}
#navigation li a {
color: #efefef;
line-height: 30px;
padding: 0;
text-decoration: none;
}
#navigation li a:hover, #navigation li.selected a {
color: #44b2f1;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
background: url(../images/bg-content.png) repeat-x center top;
margin: 0 0 24px;
padding: 56px 0 0;
}
#contents h1, #featured h3 {
color: #fbfdfd;
font: italic 34px Georgia, "Times New Roman", Times, serif;
font-style: italic;
margin: 0 0 18px;
}
#contents p {
color: #e8eff4;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0 0 30px;
text-align: justify;
}
#contents p a {
color: #e8eff4;
}
#contents p a:hover {
color: #0aa3fa;
}
#contents p b {
display: block;
}
#contents .body {
width: 940px;
margin: 0 auto;
padding: 0 10px;
}
#contents .click-here {
float: right;
background: url(../images/spacecraft.jpg) no-repeat center top;
display: inline-block;
height: 162px;
width: 301px;
margin-left: 20px;
text-align: center;
}
#contents .click-here h1 {
color: #addcfe;
font-style: italic;
line-height: 36px;
margin: 18px 0;
}
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
/** Needed for IE7 **/
*margin: 0;
*position: relative;
*top: -56px;
}
#adbox .wrapper {
width: 940px;
padding: 54px 10px 26px;
}
#adbox .info {
height: 354px;
width: 330px;
overflow: hidden;
}
#adbox h1 {
color: #ffffff;
font-size: 48px;
font-style: italic;
line-height: 50px;
margin-bottom: 30px;
}
#adbox p {
color: #176eb0;
font-size: 14px;
line-height: 24px;
}
#adbox p a {
color: #176eb0;
}
#adbox div.highlight {
background: #171a1a url(../images/adbox-bg-heading.jpg) repeat-x left top;
min-height: 82px;
border-color: #000;
border-style: solid none;
border-width: 1px;
}
#adbox div.highlight h2 {
color: #484b4b;
font-size: 34px;
line-height: 82px;
width: 940px;
margin: 0 auto;
padding: 0 10px;
text-shadow: -3px 0 3px #121413;
}
#adbox div.highlight h2 i {
font-weight: normal;
}
/** main **/
.main {
padding: 0 10px;
}
/** sidebar **/
#sidebar {
float: right;
width: 220px;
margin: 0 10px 0 80px;
}
......
五、更多推荐
您的支持是我创作的动力！关注作者，点赞收藏博文，获取更多源码，3Q！
Web前端网页制作、网页完整代码、大学生期末大作业模板案例、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
标签：css3,Web,网页,color,height,width,background,font,margin From： https://blog.csdn.net/d321654987123/article/details/144973659