本文主要是介绍自创简易原神网页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
首先来看看效果图
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">更多 > ></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">更多 > ></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;
}这篇关于自创简易原神网页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
