HTML_圣斗士星矢界面

已于 2022-03-14 16:57:31 修改
阅读量405 收藏 3
点赞数 2
分类专栏： html 文章标签： html css
于 2021-02-06 21:44:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47484523/article/details/113731222
版权

圣斗士星矢界面

  • sds.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>圣斗士星矢</title>
		<!--
			作者：shidiwen
			时间：2021-01-22
			描述：圣斗士星矢
		-->
		<link rel="stylesheet" href="css/sds.css" type="text/css">
	</head>
	<body>
		<div class="dbody">
			<div class="logo">          <!--css背景图片可以加文字,div里的图片不能加文字-->
				<a href="#">电脑网</a>&nbsp;|&nbsp;<a href="#">汽车网</a>&nbsp;|&nbsp;<a href="#">女性网</a>    <!--a href="#"刷新当前界面--> 
			</div>
			<div class="nav">            <!--nav导航,用列表写-->
			<ul>                               <!--在css里可以给列表样式加背景图片-->
				<li><a href="#">新游试玩</a></li>
				<li><a href="#">网路游戏</a></li>
				<li><a href="#">电脑游戏</a></li>
				<li><a href="#">电子竞技</a></li>
				<li><a href="#">电视游戏</a></li>
				<li><a href="#">动漫世界</a></li>
				<li><a href="#">话题P&nbsp;K</a></li>
				<li><a href="#">论&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;坛</a></li>
			</ul>
			<ol>
				<li><a href="#">首页|</a></li>
				<li><a href="#">&nbsp;下载|</a></li>
				<li><a href="#">&nbsp;攻略|</a></li>
				<li><a href="#">&nbsp;图库|</a></li>
				<li><a href="#">&nbsp;美眉|</a></li>
				<li><a href="#">&nbsp;相册|</a></li>
				<li><a href="#">&nbsp;快讯|</a></li>
				<li><a href="#">&nbsp;产业|</a></li>
				<li><a href="#">&nbsp;专题|</a></li>
				<li><a href="#">&nbsp;视频|</a></li>
				<li><a href="#">&nbsp;烫碟|</a></li>
				<li><a href="#">&nbsp;周边|</a></li>
				<li><a href="#">&nbsp;二手|</a></li>
				<li><a href="#">&nbsp;硬件|</a></li>
				<li><a href="#">&nbsp;投稿|</a></li>
				<li><a href="#">&nbsp;快搜|</a></li>
			</ol>
			</div>
			<div class="banner">
				<img src="img/link.jpg" width="646" height="55" usemap="#mymap"/> <!--热点地图，usemap:使用地图在一张图片中实现超链接-->
				<map name="mymap">
					<area coords="19,4,110,23" href="a1.html" shape="rect"/>  <!--coords定义区域点的坐标 shape形状 rect矩形-->
					<area coords="280,30,370,50" href="b1.html" shape="rect"/>
				</map>
			</div>
			<div class="main">
				<div class="zxgx">
					<h1>最新更新</h1>         <!--在代码里提供一个中文名称便于修改,css里用text-indent: -999px;文本锁进,使其不显示在界面上-->
					<div class="z-main"></div>
				</div>
				<div class="mh">
					<h1>圣斗士漫画</h1>
					<div class="m-main"></div>
				</div>
				<div class="ztqh">
					<h1>专题企划</h1>
					<div class="zh-main"></div>
				</div>
				<div class="yyxz">
					<h1>影音下载</h1>
					<div class="y-main"></div>
				</div>
				<div class="sykb">
					<h1>圣域快报</h1>
					<div class="s-main"></div>
				</div>
				<div class="pic">
					<h1>热血美图</h1>
					<div class="p-main"></div>
				</div>
				<div class="trcx">
					<h1>同人畅想</h1>
					<div class="t-main"></div>
				</div>
			</div>
		</div>
	</body>
</html>
  • a1.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		hiohposa;huhoilnjnloj;dcs
	</body>
</html>
  • b1.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/869006_pcgames.gif" />
	</body>
</html>
  • sds.css
@charset "utf-8";
*{
	padding: 0px;  /*0px与;之间不能有空格*/
	margin: 0px;
	color: #fff;       /*所有标签颜色都为白色*/
	font-size: 12px;
}
body{
	background-image: url(../img/sds_bg.jpg);
}
.dbody{
	width: 760px;
	height: 1858px;     /*先设为3000px*/
	background-color: #abc;
	margin-left: auto;
	margin-right: auto;
}
.logo{
	width: 740px;  /*760-padding-right的20*/
	height: 35px;
	background-image: url(../img/top1.jpg);
	text-align: right;
	padding-right: 20px;     /*给里面文字设置右边距*/
	line-height: 40px;         /*行高:就是一行文字的高度,所有行的行高加起来等于整个块的高度*/
}
a{
	text-decoration: none;       /*文本的链接特殊样式,none表示设置为无下划线*/
}
a:hover{
	text-decoration: underline;    /*文本的链接特殊样式,设置为下划线,a:hover指a标签的伪类,鼠标悬浮的样式*/
}
.nav{
	width: 760px;
	height: 55px;
	background-image: url(../img/top2.jpg);
}
.nav ul{                          /*不能直接写ul,会改变所有的列表 .nav里的ul*/
	width: 688px;            /*6*86*/
	height: 25px;
	list-style: none;           /*link-style:列表的项目符号样式设为无,没有前面的点*/
	margin-left: auto;
    margin-right: auto;	
}
.nav ul li{
	width: 86px;
	height: 25px;
	background-image: url(../img/ng_index0809_4.jpg);
	float: left;
	text-align: center;          /*text-align文本的左右居中*/
	line-height: 30px;                   /*line-height文本的上下移动*/
}
.nav ol{
	width: 760;
	height: 30px;
	list-style: none;               /*link-style:列表的项目符号样式设为无,没有前面的点*/
	text-align: center;
	line-height: 30px;
}
.nav ol li{
	display: inline;              /*元素的表现形式 使元素变成行内元素(内联) 与其他行内元素共享一行*/
}
.banner{
	width: 760px;
	height: 55px;             /*278-223*/
	background-image: url(../img/banner.jpg);
	text-align: center;        /*img src图片也属于一种文本*/
	padding-top: 223px;            /*banner高度278-图片高度55*/
}
.main{
	width: 736px;       /*要减去二倍padding的宽,否则图片会溢出 760px-24px*/
	height: 1470px;    /*先设为2000px*/
	background-color: #000;
	padding: 12px;
}
.zxgx{
	width: 503px;
	height: 239px;  /*38+183+20*=241    因为mh高是241,所以241变成239,少两像素*/
	background-image: url(../img/sds_40.jpg);
	background-repeat: no-repeat;    /*背景图片小于块的大小,会重复,设置为不重复*/
	background-position: bottom;      /*背景图片的位置定位到底部*/
	float: left;
}
.zxgx h1{
	width: 503px;
	height: 38px;
	background-image: url(../img/sds_34.jpg);
	text-indent: -9999px;       /*文本锁进,-9999是特殊值,表示不管在什么屏幕分辨率下都不显示 不显示h1里的最近更新*/
}
.z-main{
	width: 503px;
	height: 181px;      /*少两像素,所以183变成181*/
	background-image: url(../img/sds_36.jpg);       /*高为183的一根线重复显示,渐变的背景图只能比高度小,不能比高度大*/
}
.mh{
	width: 220px;
	height: 239px;
	background-image: url(../img/sds_41.jpg);
	background-repeat: no-repeat;
	background-position: bottom; 
	float: left;
	margin-left: 10px;         /*与左边距离加10px*/
}
.mh h1{
	width: 220px;
	height: 37px;
	background-image: url(../img/sds_35.jpg);
	text-indent: -9999px;
}
.m-main{
	width: 220px;
	height: 183px;
	background-image: url(../img/sds_36.jpg);
}
.ztqh{
	width: 734px;
	height: 384px;  /*37+327+20*/
	background-image: url(../img/sds_45.jpg);
	float: left;
	margin-top: 10px;    /*与zxgx的上边距*/
	background-repeat: no-repeat;
	background-position: bottom;
}
.ztqh h1{                     /*ztqh和h1之间没有点*/
	width: 734px;
	height: 37px;
	background-image: url(../img/sds_42.jpg);
	text-indent: -9999px;
}
.zh-main{
	width: 734px;
	height: 327px;
	background-image: url(../img/sds_44.jpg);
}
.yyxz{
	width: 503px;
	height: 238px; /*36+183+20*     238-1*/
	background-image: url(../img/sds_40.jpg);
	float: left;
	margin-top: 10px; 
	background-repeat: no-repeat;
	background-position: bottom;
}
.yyxz h1{
	width: 503px;
	height: 36px;
	background-image: url(../img/sds_46.jpg);
	text-indent: -9999px;
}
.y-main{
	width: 503px;
	height: 182px;   /*183-1*/
	background-image: url(../img/sds_36.jpg)
}
.sykb{
	width: 220px;
	height: 238px;   /*36+183+19*/
	background-image: url(../img/sds_41.jpg);
	float: left;
	margin-top: 10px;
	background-repeat: no-repeat;
	background-position: bottom;
	margin-left: 10px;
}
.sykb h1{
	width: 220px;
	height: 36px;
	background-image: url(../img/sds_47.jpg);
	text-indent: -9999px;
}
.s-main{
	width: 220px;
	height: 183px;
	background-image: url(../img/sds_36.jpg);
}
.pic{
	width: 734px;
	height: 185px;
	background-image: url(../img/sds_53.jpg);
	float: left;
	margin-top: 10px;
	background-repeat: no-repeat;
	background-position: right;          /*背景图片的位置定位到右边 左右结构*/
}
.pic h1{
	width: 50px;
	height: 185px;
	background-image: url(../img/sds_51.jpg);
	text-indent: -9999px;
	float: left;           /*左右结构里面的h1,p-main也要浮动*/
}
.p-main{
	width: 666px;       /*734-50-18=666*/
	height: 185px;
	background-image: url(../img/sds_52.jpg);
	float: left;
}
.trcx{
	width: 734px;
	height: 386px;   /*20+327+39=386*/
	background-image: url(../img/sds_45.jpg);
	float: left;
	margin-top: 10px;
	background-repeat: no-repeat;
	background-position: bottom;
}
.trcx h1{
	width: 734px;
	height: 39px;
	background-image: url(../img/sds_54.jpg);
	text-indent: -9999px;
}
.t-main{
	width: 734px;
	height: 327px;
	background-image: url(../img/sds_44.jpg);
}

圣斗士星矢界面的链接

运行结果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

SDWESCES
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
圣斗士网站
11-28
圣斗士网站制作，有图片。
web实验5 圣斗士网页
人生当苦无妨
08-20 1272
web实验5 圣斗士网页 实现效果 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZZY</title> <link rel="stylesheet" type="text/css" href="STYLE.css"> </head> <body> <div id="DEMO"> &lt
HTML_圣斗士星矢界面(2)
SDWESCES的博客
02-07 548
homework6 圣斗士星矢界面(2) sds2.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圣斗士星矢</title> <!-- 作者：shidiwen 时间：2021-01-23 描述：圣斗士星矢 --> <link rel="stylesheet" href="css/sds2.cs
【圣斗士星矢的状态模式和观察者模式】
09-17 148
星矢：动画片《圣斗士星矢》的男猪脚，超级小强，怎么打也打不死。 　　雅典娜：动画片《圣斗士星矢》的女猪脚，自称女神，手下有88个男人为他卖命。 　　状态模式：为了方便的控制状态的变化，避免一堆IF/ELSE，以及状态规则改变的时避免代码改动的混乱。 　　观察者模式：一个被观察者一动，多个观察者跟着动，经常用于界面UI。 　　话说星矢和很强的某斗士甲对打，雅典娜在一边看，星矢总是挨...
圣斗士星矢ol完整云服务器架设.txt
09-26
完整云服务器架设
圣斗士星矢——VB黄金十二宫(游戏+源码)
05-07
摘要:VB源码,游戏编程,VB游戏源码　圣斗士星矢——黄金十二宫(游戏+源码)，是一个典型的VB游戏 源码，编写的时间比较早了，不过现在仍然可以作为VB游戏开发的参考程序，希望对你有帮助。
【翻译】圣斗士星矢：圣域传说 制作介绍 特效合成等1
08-03
图A背景的渲染图图B进行全体的颜色校正。的素材构成的。图 D 配置 FumeFX 生成的爆破和着火素材 图 E AE 来追加发光和热处理。图 F lens 处理
圣斗士星矢 Matlab Game.zip:圣斗士星斗格斗游戏-matlab开发
06-01
用户应该运行saintseiya_att_sel.m 来开始格斗游戏。 用户可以随机获得一个圣人和一个敌人，并开始一对一的战斗。 每个圣人都有一个宇宙和生命（HP）属性。... 他们的中文名字是：星矢紫龙冰河瞬态一辉穆阿
HTML_注册信息表
SDWESCES的博客
01-20 1430
注册信息表 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册信息表</title> <!-- 作者：shidiwen 时间：2021-01-19 描述：注册信息表 --> </head> <body bgcolor="aliceblue">
HTML_移动端界面
SDWESCES的博客
03-06 1249
homework8 移动端界面 注: 点击图标放大,点击图片旋转180度 yyd.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>移动端</title> <link rel="stylesheet" href="css/ydd.css" type="text/css" /> </head> <body
HTML_龙湖地产界面自制
SDWESCES的博客
01-22 959
小案例—龙湖地产网页的制作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小案例</title> <style type="text/css"> ul{ color: white; } </style> <!-- 作者：shidiwen
HTML_非诚勿扰界面自制(div+css)
SDWESCES的博客
01-29 504
非诚勿扰界面自制(div+css) fc.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>非诚勿扰</title> <!-- 作者：shidiwen 时间：2021-01-21 描述：非诚勿扰 --> <link rel="stylesheet" href="css/f
HTML_个人简历表
SDWESCES的博客
01-20 328
个人简历 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人简历</title> <!-- 作者：shidiwen 时间：2021-01-18 描述：个人简历 --> </head> <body> <h1 align="center
HTML_DOM(练习)【复选框表单验证】
SDWESCES的博客
09-16 301
复选框练习 全选 objs[i].checked="checked";//true 不选 objs[i].checked=false; //' ' 反选 objs[i].checked=!objs[i].checked; 对Checkbox标签class对象 进行循环 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>quanxuan</title&gt
js校验
SDWESCES的博客
02-10 234
js基础 js.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js基础</title> <!-- 作者：shidiwen 时间：2021-01-26 描述：js基础 一: JavaScript是一种轻量级的编程语言,是可以直接插入到html页面的编程语言,用于html和web页面,完成服务器,pc,
HTML_旅行志界面
SDWESCES的博客
02-09 225
homework7 旅行志界面 lvxingzhi.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>旅行志</title> <!-- 作者：shidiwen 时间：2021-01-24 描述：lvxingzhi pre:原样输出(经常用于数学化学公式输出) white-space:空格 pre
HTML_css
SDWESCES的博客
01-26 199
div+css index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div+css</title> <link rel="stylesheet" href="css/index.css" type="text/css" /> <!--外部文件链入,必须写在头部--> <!-- 作者：shi
css3.0解析
SDWESCES的博客
02-13 152
css3.0解析 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css3.0</title> <style type="text/css"> *{ padding: 0px; margin: 0px; } .no1{ width: 300px; height: 300px; b
圣斗士星矢online 私服
最新发布
07-30
圣斗士星矢online私服是指由玩家自己搭建的非官方服务器，用于模拟和复刻原版游戏圣斗士星矢online的游戏环境和内容。在私服中，玩家可以免费游玩，并且不受官方服务器的限制和支付要求。 私服通常由一些游戏爱好者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值