自创简易原神网页

安澜ovo

已于 2023-07-09 12:21:51 修改

阅读量3.2k

点赞数 6

文章标签： html5 css3

于 2023-07-09 12:20:11 首次发布

本文链接：https://blog.csdn.net/weixin_65627925/article/details/131621516

版权

首先来看看效果图

html代码（部分）


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原神</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!----网站头部开始---->
<div class="top"></div>
<div class="nav">
  <ul class="nav_menu">
    <li class="nav_menu-item"><a target="_blank" href="main.html" >网站首页</a></li>
    <li class="nav_menu-item"><a target="_blank" href="" >不关于原神</a>
      <ul class="nav_submenu">
        <li class="nav_submenu-item"> <a target="_blank" src="111" >原神简介</a></li>
        <li class="nav_submenu-item"> <a target="_blank" href="" >剧情简介</a></li>
        </ul>
    </li>
    <li class="nav_menu-item"><a target="_blank" href="https://m.miyoushe.com/ys?channel=appstore/#/article/38161197" >原神资讯</a></li>
    <li class="nav_menu-item"><a target="_blank" href="" >原神剧照</a></li>
    <li class="nav_menu-item"><a target="_blank" href="" >原神图鉴</a></li>
    <li class="nav_menu-item"><a target="_blank" href="https://ys.mihoyo.com/" >游戏下载</a></li>
  </ul>
</div>
<!-----网站头部结束-------------->
<!------网站主体部分开始----------------------->
<div class="main">
<div class="banner" style="width: 1200px; height: 482px;">
<img src="head.jpg" style="object-fit: cover;width: 1200px; height: 482px;">
</div>
<div class="nr">
<marquee scrolldelay="400" scrollamount="100" class="gundong">欢迎来到原神网站，祝旅行者抽啥都歪</marquee>
<!--这是一个HTML标签代码，用于创建一个水平滚动的文本内容。具体来说，这个标签代码中包含了以下属性：

scrolldelay：用于设置文本滚动的延迟时间，单位是毫秒。
在这个例子中，延迟时间是400毫秒，也就是说每隔400毫秒文本内容会向左滚动一次。
scrollamount：用于设置文本滚动的速度，单位是像素/秒。
在这个例子中，滚动速度是100像素/秒。
class：用于给标签添加一个CSS类，从而可以通过CSS样式表对其进行样式设置。
因此，这个代码的作用是在网站页面中创建一个水平滚动的文本内容，显示欢迎用户来到电影《钢铁侠3》的网站。-->
<div class="tit-s">游戏百科<span><a target="_blank" src="111">更多&nbsp;> ></a></span></div>
<div class="box1">
<div class="box1-left"><img src="left1.jpg"style="width: 230px; height: 250px;"></div>
<div class="box1-right">
<P>在七种元素交汇的大陆——「提瓦特」，每个人都可以成为神。 你从世界之外漂流而来，降临大地。在这广阔的世界中，你自由旅行、结识同伴、寻找掌控尘世元素的七神，直到与分离的血亲重聚，在终点见证一切旅途的沉淀。</P>
<P> 维系者正在死去，创造者尚未到来。面对无法掌控的境遇，人类总会喟叹自身的无力…… 但在人生最陡峭的转折处，若有凡人的渴望达到极致，神明的视线就将投射而下。 当失散的双子在尘沙中重聚、世界的谜底在「神之眼」中尽数显现之时—— 旅行者，你将去往何方？ 《原神》是由米哈游自研的一款全新开放世界冒险RPG。你将在游戏中探索一个被称作「提瓦特」的幻想世界。 在这广阔的世界中，你可以踏遍七国，邂逅性格各异、能力独特的同伴，与他们一同对抗强敌，踏上寻回血亲之路；也可以不带目的地漫游，沉浸在充满生机的世界里，让好奇心驱使自己发掘各个角落的奥秘……</P>
</div>

</div>
<div class="tit-s">游戏图鉴<span><a target="_blank" href="xiangce.html">更多&nbsp;> ></a></span></div>
<div class="caiz">
<ul>
  
<li><a target="_blank" ><img src="middle1.jpg"style="width: 280px; height: 250px;"><p>图一</p></a></li>
<li><a target="_blank" ><img src="middle2.jpg"style="width: 280px; height: 250px;"><p>图二</p></a></li>
<li><a target="_blank" ><img src="middle3.jpg"style="width: 280px; height: 250px;"><p>图三</p></a></li>
<li><a target="_blank" ><img src="middle4.jpg"style="width: 280px; height: 250px;"><p>图四</p></a></li>

</div>


</div>
<div class="foot">
<div class="banquan">
版权所有 @ 叶艺衡

</div>
</div>

</body>
</html>

css代码


body {
	margin: 0 auto;
	font-size: 14px;
	font-family: "微软雅黑";
	line-height: 22px;
	background: #77aac7
}

div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
/*这段CSS代码中定义了一组选择器，并为它们设置了一些相同的样式，
这些选择器包括了div、p、input、ul、li、h1、h2、h3、h4、h5、h6、dl、dt、dd等HTML标签。
这些标签在Web开发中非常常见，所以使用这样的一组选择器来设置通用的样式，可以减少样式代码的重复。

接下来是这些标签的共同样式：

height: auto; 设置元素的高度为自适应，即高度根据元素内容的高度自动调整。
margin: 0; 将元素的外边距设置为0，消除默认的外边距，以便更好地控制元素在页面中的布局。
padding: 0; 将元素的内边距设置为0，消除默认的内边距，以便更好地控制元素内部的布局。
vertical-align: middle; 将元素的垂直对齐方式设置为中心对齐，使元素在垂直方向上更好地对齐。
这个属性对于内联元素（例如input）和表格元素（例如td）是有用的。对于其他元素，这个属性可能没有实际效果。
总的来说，这些样式的作用是为了使这些常用的HTML标签具有更好的默认样式，并且更容易在页面中进行布局和排版。*/

li {
	list-style: none;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}


a {
	color: #333;
	text-decoration: none;
}

a:link {
	color: #333;
}

a:hover {
	color: #629705;
	text-decoration: none;
	overflow: hidden;
}/*鼠标悬停时*/

.top {
	width: 1200px;
	height: 179px;
	margin: 0 auto;
	padding-top: 10px;
	background: url(title.jpg) no-repeat;
}

.main {
	width: 1200px;
	margin: 0 auto;
	height: auto;
	overflow: hidden;
}

.gundong {
	height: 40px;
	line-height: 40px;
	font-size: 30px;
	font-family: cursive;
}

.banner {
	height: 382px;
	width: 1200px;
}

.nav {
	width: 1200px;
	margin: 0 auto;
	background: #150b50;
	color: #70142a;
	;
}

.nav a {
	display: block;
	padding: 0 16px;
	line-height: inherit;
	color: #FFF;
}

.nav a:hover {
	color: #FFF;
}

.nav_menu {
	line-height: 45px;
	font-weight: 700;
}

.nav_menu-item {
	display: inline-block;
	position: relative;
	width: 196px;
	text-align: center;
}

.nav_menu-item:hover {
	background-color: #b20300;
}

.nav_menu-item:hover .nav_submenu {
	display: block;
}

.nav_submenu {
	font-weight: 300;
	text-transform: none;
	display: none;
	position: absolute;
	width: 196px;
	background-color: #b20300;
	text-align: left;
}

.nav_submenu-item:hover {
	background: #ce1b18;
}

.nr {
	width: 1200px;
	height: auto;
	overflow: hidden;
	background: #FFF;
	padding-top: 20px;
	padding-bottom: 20px;
}

.nr span {
	color: #900;
}

.wenzi {
	width: 854px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
}

.wenzi p {
	line-height: 25px;
	font-size: 14px;
	text-indent: 2em;
}

.box1 {
	width: 1200px;
	height: 260px;
}

.box1-left {
	width: 200px;
	height: 220px;
	padding: 20px;
	float: left;
}

.box1-right {
	width: 900px;
	margin-left: 20px;
	height: 220px;
	float: left;
	margin-top: 20px;
}

.box1-right-tit {
	font-size: 16px;
	color: #333;
	font-weight: bold;
	height: 40px;
	line-height: 40px;
}

.box1-right p {
	font-size: 14px;
	line-height: 22px;
	text-indent: 2em;
}

.tit {
	font-size: 16px;
	height: 40px;
	line-height: 40px;
	color: #333;
	margin-left: 20px;
	font-weight: bold;
}

.box2 {
	padding: 0px 20px;
}

.box2 p {
	font-size: 14px;
	line-height: 22px;
	text-indent: 2em;
}

.tit-s {
	font-size: 18px;
	height: 40px;
	line-height: 40px;
	color: #333;
	margin-left: 20px;
	font-weight: bold;
	border-bottom: #666 1px dashed;
	width: 1160px;
}

.tit-s span {
	float: right;
	font-weight: normal;
	font-size: 12px;
}

.imgs {
	display: block;
	margin: 0 auto;
}

.xq-box01 {
	width: 1000px;
	height: 600px;
	margin: 0 auto;
}

.xq-box01  ul {
	padding: 0px;
}

.xq-box01 ul li {
	width: 460px;
	float: left;
	padding: 20px;
}

.xq-box01 ul li img {
	width: 460px;
	height: 300px;
	display: block;
}

.xq-box01  .xiangq {
	width: 420px;
	height: 200px;
	padding: 20px;
	border-top: none;
	background: #f0f1f2;
}

.xq-box01  .xiangq h1 {
	height: 40px;
	font-size: 16px;
	line-height: 40px;
	margin-bottom: 10px;
	border-bottom: #D8D7D7 1px solid;
}

.xq-box01  .xiangq p {
	font-size: 12px;
	text-indent: 2em;
}

.news {
	width: 100%;
	height: 600px;
	background: #FFF;
}

.news-ner {
	width: 1200px;
	height: 600px;
	margin: 0 auto;
	margin-top: 50px;
}

.news-box {
	width: 960px;
	height: auto;
	margin: 0 auto;
	margin-top: 0px;
	margin-top: 0px;
	margin-top: 30px;
}

.news-box ul li {
	width: 465px;
	height: 88px;
	margin-bottom: 25px;
	float: center;
}

.news-box ul li .scm {
	width: 144px;
	height: 88px;
	margin-right: 15px;
	float: left;
}

.news-box ul li h1 {
	height: 30px;
	line-height: 30px;
	color: #4a525a;
	font-size: 16px;
	font-weight: normal;
}

.news-box ul li p {
	font-size: 12px;
	color: #666;
}

.news-box ul li span {
	background: url(../images/ico01.jpg) 0px 0px no-repeat;
	padding-left: 20px;
	color: #666 !important;
}

.mar30 {
	margin-right: 30px;
}

.lv-box {
	width: 1000px;
	height: 225px;
	padding: 20px;
}

.lv-box img {
	width: 300px;
	height: 203px;
	float: left;
	margin-right: 20px;
}

.lv-box-r {
	width: 605px;
	height: 225px;
	float: left;
}

.lv-box .lv-tit {
	font-size: 16px;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
}

.lv-box p {
	font-size: 14px;
	line-height: 30px;
	float: left;
	text-indent: 2em;
}

.lv-box-r span {
	color: #F00;
}

.xc {
	width: 854px;
	height: 387px;
	padding-top: 20px;
	font-size: 0;
	margin: 0 auto;
}

.xc img {
	float: left
}

.xcbtn {
	width: 854px;
	height: 349px;
	font-size: 0;
	padding-top: 9px;
	margin: 0 auto;
}

.caiz {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.caiz ul {
	margin-top: 20px;
	padding: 0px 10px;
}

.caiz ul li {
	width: 275px;
	height: 250px;
	padding: 10px;
	float: left;
}

.caiz ul li img {
	width: 230px;
	height: 200px;
}

.caiz ul li p {
	font-size: 14px;
	line-height: 24px;
	text-align: center;
}

.geyan {
	padding: 20px;
}

.neirong {
	width: 960px;
	height: auto;
	overflow: hidden;
	background: #FFF;
	padding: 20px;
}

.neirong p {
	text-indent: 2em
}

.neirong img {
	display: block;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.title {
	font-size: 16px;
	height: 80px;
	line-height: 40px;
	width: 960px;
	margin: 0 auto;
	text-align: center;
	color: #333;
	margin-left: 20px;
	font-weight: bold;
	border-bottom: #CCC 1px dashed;
	margin-bottom: 20px;
}

.title2 {
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	text-align: center;
	color: #999;
	font-weight: normal;
}

.title2 span {
	background: url(../images/ico01.jpg) 0px 0px no-repeat;
	padding-left: 20px;
	color: #666 !important;
	font-weight: normal;
}

.liuyan {
	padding: 0px 20px;
}

.liuyan {
	height: 696px;
	margin: 0 auto;
	margin-top: 30px;
}

.liuyan-left {
	width: 400px;
	height: 696px;
	float: left;
	background: url(../images/box12-1.jpg) no-repeat;
}

.liuyan-right {
	width: 540px;
	height: 600px;
	float: left;
}

.l-anniu {
	width: 150px;
	height: 40px;
	background: #da251c;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	color: #FFF;
	margin: 0 auto;
	margin-top: 45px;
	margin-bottom: 97px;
}

.l-liuyan {
	width: 520px;
	margin: 0 auto;
	height: auto;
	overflow: hidden;
}

.l-liuyan input {
	width: 330px;
	height: 30px;
	border: #cecccc 1px solid;
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
	padding-left: 30px;
	font-size: 16px;
	float: left;
}

.l-liuyan span {
	float: left;
	line-height: 30px;
	font-size: 18px;
	width: 120px;
}

.foot {
	width: 1200px;
	height: 83px;
	background: #150b50;
	margin: 0 auto;
	padding-top: 20px;
}

.banquan {
	width: 1200px;
	height: 40px;
	line-height: 40px;
	color: #FFF;
	margin: 0 auto;
	text-align: center;
	font-family: "仿宋";
	font-size: 20px;
}