web实验5 圣斗士网页

web实验5 圣斗士网页

实现效果

HTML部分


<html>
<head>
	<meta charset="utf-8">
	<title>ZZYtitle>
	<link rel="stylesheet" type="text/css" href="STYLE.css">
head>
<body>
	<div id="DEMO">
		<div id="NAV1">
			<a href="#">电脑网a> | <a href="#">汽车网a> | <a href="#">女性网a>
		div>
		<div id="HEADER">
			<ul>
				<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="#">话题PKa>li>
				<li><a href="#">论坛a>li>
			ul>
			<span><a href="#">首页a> | <a href="#">下载a> | <a href="#">攻略a> | 
			<a href="#">图库a> | <a href="#">美眉a> | <a href="#">相册a> | 
			<a href="#">快讯a> | <a href="#">产业a> | <a href="#">专题a> | 
			<a href="#">视频a> | <a href="#">烫碟a> | <a href="#">周边a> | 
			<a href="#">二手a> | <a href="#">硬件a> | <a href="#">投稿a> | 
			<a href="#">快搜a>span>
		div>
		<div id="sds">
			<img src="images/link.jpg" usemap="#Map">
		div>
		<div id="XIN">
			<div id="zuo">
				<div id="shang">div>
				<div id="zhong">
					<div id="tupian1">
						<a href="#"><img src="images/news_pic.jpg">a>
						<p><a href="#">《圣斗士》代班女神<br>(正剧+番外)a>p>
					div>
					<div class="WORD">
						<p><a href="#"><span>[10-18]span>· [同人] 儿时的英雄撒加a>p><hr>
						<p><a href="#"><span>[09-17]span>·《圣斗士》代班女神(正剧+番外)a>p><hr>
						<p><a href="#"><span>[08-16]span>·《圣斗士星矢 极乐净土篇》正式启动!a>p><hr>
						<p><a href="#"><span>[07-15]span>· [下载]《圣斗士冥界篇 后章》DVD-RIP珍藏版3a>p><hr>
						<p><a href="#"><span>[06-14]span>· [同人] 永恒的星光a>p><hr>
						<p><a href="#"><span>[05-13]span>· [周边] 典雅气质智慧女神,龙马精神紫龙星矢a>p><hr>
						<p><a href="#"><span>[04-12]span>· [杂谈] 冥界篇后章之叹息的墙壁a>p><hr>
						<p><a href="#"><span>[03-11]span>· [同人] 圣斗士同人:庆祝迪斯生曰快乐!a>p><hr>
					div>
				div>
				<div id="xia">div>
			div>
			<div id="you">
				<div id="youshang">div>
				<div id="youzhong">
					<div class="zi">
					<p><a href="#">·《冥王神话TLC》第42话:降临a>p><hr>
					<p><a href="#">·《冥王神话TLC》第41话:恸哭a>p><hr>
					<p><a href="#">·《冥王神话TLC》第40话:孤独a>p><hr>
					<p><a href="#">·《冥王神话TLC》第39话:无效a>p><hr>
					<p><a href="#">·《冥王神话TLC》第37,38话:黑色a>p><hr>
					<p><a href="#">·《冥王神话TLC》第36话:凶战士a>p><hr>
					<p><a href="#">·《冥王神话TLC》第35话:巨星a>p><hr>
					<p><a href="#">·《冥王神话TLC》第34话:流转a>p><hr>
				    div>
				div>
				<div id="youxia">div>
			div>
		div>
		<div id="zhuan">
			<div id="zhuanshang">div>
			<div id="zhuanzhong">
				<div id="zhuanzuo">
					<a href="#"><img src="images/xins.jpg" style="float: left;padding-top: 20px;padding-left: 10px;">a>
					<div id="fule">万众期待的大作《圣斗士星矢冥界篇后章》终于在网络上出现中文字幕版, 本站提供<a href="#">HTTP/FTP方式免费下载a>。 不同网段的网友可选择使用网通、电信或者广州E家宽专用线路下载。目前下载已全面开放。本站提供的冥界篇动画下载均为PPX字幕组的RMVB版本。更多《<a href="#">冥界篇a>》资讯可关注本专区以及冥界篇区的更新内容。div>
					<a href="#"><img src="images/pdl.jpg" style="margin-left: 10px;margin-top: 15px;">a>
				div>
				<div id="zhuanyou">
					<ul>
						<li><a href="#"><img src="images/ydn.jpg">a><a href="#">典雅气质智慧女神,龙马精神紫龙星矢a>li>
						<li><a href="#"><img src="images/sa.jpg">a><a href="#">教皇再临!“圣衣神话”冥衣史昂详介a>li>
					ul><br>
					<div class="WORD" style="margin-top: -10px;">
						<p><a href="#">· 典雅气质智慧女神,龙马精神紫龙星矢<span>[04-17]span>a>p><hr>
						<p><a href="#">· 二度奢华!“圣衣神话”专用支架B套问世<span>[05-15]span>a>p><hr>
						<p><a href="#">· 教皇再临!“圣衣神话”冥衣史昂详介<span>[06-14]span>a>p><hr>
						<p><a href="#">· 海魔女登场!“圣衣神话”暑期新品三则<span>[07-13]span>a>p><hr>
						<p><a href="#">· 正邪两面!水晶战士“圣衣神话”新图发表<span>[08-12]span>a>p><hr>
						<p><a href="#">· 最终天马“圣衣神话”胸像分解欣赏<span>[09-11]span>a>p><hr>
						<p><a href="#">· 冥衣史昂登场!“圣衣神话”完全新品三则<span>[10-11]span>a>p><hr>
					div>
				div>
			div>
			<div id="zhuanxia">div>
		div>
		<div id="yin">
			<div id="left">
				<div id="leftshang">div>
				<div id="leftzhong">
					<div id="tupian2">
						<a href="#"><img src="images/sdsxs.jpg">a>
						<p><a href="#">《圣斗士冥界篇 后章》<br>DVD-RIP珍藏版3-4话a>p>
					div>
					<div id="wenzi">
						<p><a href="#">·《圣斗士冥界篇 后章》DVD-RIP珍藏版1-2话<span>[03-15]span>a>p><hr>
						<p><a href="#">·《圣斗士冥界篇后章》DVD特典2《黄金档案2<span>[03-15]span>a>p><hr>
						<p><a href="#">· 预热!《圣斗士冥界篇 后章》清晰版预告篇<span>[03-15]span>a>p><hr>
						<p><a href="#">·《圣斗士冥界篇 后章》第1-2话字幕版下载<span>[03-15]span>a>p><hr>
						<p><a href="#">·《圣斗士冥界篇后章》DVD特典1《黄金档案》<span>[03-15]span>a>p><hr>
						<p><a href="#">·《冥界篇 后章》第5-6话正式字幕版下载<span>[03-15]span>a>p><hr>
						<p><a href="#">·《冥界篇 后章》第3-4话字幕版下载<span>[03-15]span>a>p><hr>
						<p><a href="#">·《冥界篇 后章》第1-2话字幕版下载<span>[03-15]span>a>p><hr>
					div>
				div>
				<div id="leftxia">div>
			div>
			<div id="right">
				<div id="rightshang">div>
				<div id="rightzhong">
					<div class="zi">
						<p><a href="#">·《圣斗士星矢 极乐净土篇》正式启a>p><hr>
						<p><a href="#">· 黄金最终集结!《冥界篇》DVD3华a>p><hr>
						<p><a href="#">·《冥界篇 后章》第5-6话情报汇总a>p><hr>
						<p><a href="#">·《冥界篇 后章》第5、6话收视指南a>p><hr>
						<p><a href="#">· 赤裸裸炫耀!《冥界篇》动画游戏a>p><hr>
						<p><a href="#">· 12黄金齐聚!《冥界篇》大结局官a>p><hr>
						<p><a href="#">·《冥界篇 后章》第3-4话字幕版下a>p><hr>
						<p><a href="#">·《冥界篇 后章》第3-4话情报更新a>p><hr>
					div>
				div>
				<div id="rightxia">div>
			div>
		div>
		<div id="tu">
			<div id="tuzuo">div>
			<div id="tuzhong">
				<ul>
					<li><a href="#"><img src="images/pics1.jpg">a><a href="#">神圣衣! 两位女神现真身a> li>
					<li><a href="#"><img src="images/pics2.jpg">a><a href="#">梦旅人圣迷社 圣斗士COS第二弹a>li>
					<li><a href="#"><img src="images/pics3.jpg">a><a href="#">正义与邪恶! 梦旅人圣迷社·圣斗士经典a>li>
					<li><a href="#"><img src="images/pics4.jpg">a><a href="#">《圣斗士》庆生 系列特辑活动专场a>li>
				ul>
			div>
			<div id="tuyou">div>
		div>
		<div id="ren">
			<div id="renshang">div>
			<div id="renzhong">
				<div id="qian">
				<p><a href="#">· 儿时的英雄撒加a>p><hr>
				<p><a href="#">·《圣斗士》代班女神(正剧+番外) a>p><hr>
				<p><a href="#">· 永恒的星光a>p><hr>
				<p><a href="#">· 冥界篇后章之叹息的墙壁a>p><hr>
				<p><a href="#">· 圣斗士同人:庆祝迪斯生曰快乐!a>p><hr>
				<p><a href="#">· 圣斗士同人:端午圣情a>p><hr>
				<p><a href="#">·《圣斗士》圣战·接近神的人a>p><hr>
				<p><a href="#">· 圣斗士同人:NEWSTART~欠了你的爱a>p><hr>
				<p><a href="#">· 碧色的约定-谨以此文献给那位我心目a>p><hr>
				<p><a href="#">· 天蝎情缘之米罗的爱情故事(一)a>p><hr>
				<p><a href="#">· 祭十四黄金之永恒的骄傲a>p>
				<p><a href="#">· 漫画与现实的碰撞-圣斗士漫画场景与a>p><hr>
				<p><a href="#">· 老“圣斗士”们的乐队梦a>p><hr>
				<p><a href="#">· 圣斗士大全中文版冥斗士部分人名/招a>p><hr>
				<p><a href="#">· 田正美漫画家生活30周年纪念访谈!a>p><hr>
				<p><a href="#">· 车田正美——小宇宙对谈a>p><hr>
				<p><a href="#">· 车田正美圣斗士后记全语录a>p><hr>
				<p><a href="#">·《圣斗士星矢》历史大事件年谱a>p><hr>
				<p><a href="#">· 车田正美和《圣斗士星矢》a>p><hr>
				<p><a href="#">· 碧色的约定-谨以此文献给那位我心目a>p><hr>
				<p><a href="#">· 圣斗士中几个特别地点a>p><hr>
				<p><a href="#">· 圣斗士5小强密件大览专题特辑a>p>
				<p><a href="#">· 圣斗士同人:庆祝迪斯生曰快乐!a>p><hr>
				<p><a href="#">· 车田正美圣斗士后记全语录a>p><hr>
				<p><a href="#">· 碧色的约定-谨以此文献给那位a>p><hr>
				<p><a href="#">· 祭十四黄金之永恒的骄傲a>p><hr>
				<p><a href="#">· 冥界篇后章之叹息的墙壁a>p><hr>
				<div id="hou">
					<img src="images/sds_58.jpg"><br>
					<table>
						<tr>
							<td><a href="#"><img src="images/869006_logo1.gif">a>td>
							<td><a href="#"><img src="images/869006_logo.gif">a>td>
						tr>
						<tr>
							<td><a href="#"><img src="images/869006_pcgames.gif">a>td>
							<td><a href="#"><img src="images/sds_62.jpg">a>td>
						tr>
					table>
				div>
				div>
			div>
			<div id="renxia">div>
		div>
	div>
	<map name="Map" id="Map">
		<area shape="rect" coords="30,5,100,25" href="#" style="outline: none;">
        <area shape="rect" coords="30,30,100,50" href="#" style="outline: none;">
        <area shape="rect" coords="157,5,228,25" href="#" style="outline: none;">
        <area shape="rect" coords="157,30,228,50" href="#" style="outline: none;">
		<area shape="rect" coords="290,5,360,25" href="#" style="outline: none;">
        <area shape="rect" coords="290,30,360,50" href="#" style="outline: none;">
        <area shape="rect" coords="425,5,495,25" href="#" style="outline: none;">
        <area shape="rect" coords="425,32,495,52" href="#" style="outline: none;">
		<area shape="rect" coords="555,5,626,25" href="#" style="outline: none;">
        <area shape="rect" coords="555,32,626,52" href="#" style="outline: none;">
        <area shape="circle" coords="30,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="100,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="30,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="100,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="157,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="228,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="157,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="227,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="290,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="360,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="290,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="360,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="425,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="495,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="425,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="495,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="555,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="626,15,10" href="#" style="outline: none;">
        <area shape="circle" coords="555,42,10" href="#" style="outline: none;">
        <area shape="circle" coords="626,42,10" href="#" style="outline: none;">
    map>
body>
html>

css部分

*
{
	margin: 0;
	padding: 0;
}
a
{
	text-decoration: none;
	color: white;
	font-size: 12px;
}
a:hover
{
	color: red;
}
body
{
	background-image: url("images/sds_bg.jpg");
	color: white;
	font-size: 12px;
}
ul
{
	list-style-type: none;
}
li
{
	border: none;
}
div
{
	border: none;
}
#DEMO
{
	width: 760px;
	margin: 0 auto;
	background-color: black;
}
#NAV a
{
	font-size: 14px;
}
#NAV
{
	background-image: url("images/top1.jpg");
	width: 760px;
	height: 35px;
	line-height: 35px;
	text-indent: 50em;
}
#HEADER
{
	background-image: url("images/top2.jpg");
	width: 760px;
	height: 55px;
}
#HEADER a
{
	font-size: 14px;
}
#HEADER  ul
{
	padding-left: 35px;
	height: 25px;
}
#HEADER  ul li
{
	display: inline-block;
	
	width: 86px;
	height: 25px;
	background-image: url("images/ng_index0809_4.jpg");
	line-height: 25px;
	text-align: center;
}
#HEADER  span
{
	padding-left: 60px;
	line-height: 30px;
}
#sds
{
	background-image: url("images/banner.jpg");
	height: 278px;
	width: 760px;
}
#sds img
{
	border: none;
	margin-top: 223px;
	margin-left: 57px;
}
#XIN
{
	margin-top: 10px;
	height: 240px;
}
#zuo
{
	float: left;
	padding-left: 13px;
}
#shang
{
	background-image: url("images/sds_34.jpg");
	width: 503px;
	height: 38px;
}
#zhong
{
	width: 503px;
	height: 183px;
	background-image: url("images/sds_36.jpg");
}
#xia
{
	background-image: url("images/sds_40.jpg");
	width: 503px;
	height: 20px;
}
#you
{
	float: left;
	padding-left: 12px;
}
#youshang
{
	background-image: url("images/sds_35.jpg");
	width: 220px;
	height: 37px;
}
#youzhong
{
	width: 220px;
	height: 183px;
	background-image: url("images/sds_36.jpg");
}
#youxia
{
	background-image: url("images/sds_41.jpg");
	width: 220px;
	height: 19px;
}
#zhuan
{
	margin-left: 13px;
	margin-top: 10px;
	height: 383px;
}
#zhuanshang
{
	background-image: url("images/sds_42.jpg");
	width: 734px;
	height: 36px;
}
#zhuanzhong
{
	width: 734px;
	height: 327px;
	background-image: url("images/sds_44.jpg");
}
#zhuanxia
{
	background-image: url("images/sds_45.jpg");
	width: 734px;
	height: 20px;
}
#yin
{
	margin-top: 10px;
	height: 240px;
}
#left
{
	float: left;
	padding-left: 13px;
}
#leftshang
{
	background-image: url("images/sds_46.jpg");
	width: 503px;
	height: 36px;
}
#leftzhong
{
	width: 503px;
	height: 183px;
	background-image: url("images/sds_36.jpg");
}
#leftxia
{
	background-image: url("images/sds_40.jpg");
	width: 503px;
	height: 20px;
}
#right
{
	float: left;
	padding-left: 12px;
}
#rightshang
{
	background-image: url("images/sds_47.jpg");
	width: 220px;
	height: 36px;
}
#rightzhong
{
	width: 220px;
	height: 183px;
	background-image: url("images/sds_36.jpg");
}
#rightxia
{
	background-image: url("images/sds_41.jpg");
	width: 220px;
	height: 19px;
}
#tu
{
	margin-left: 13px;
	margin-top: 10px;
	height: 185px;
}
#tuzuo
{
	background-image: url("images/sds_51.jpg");
	width: 50px;
	height: 185px;
	float: left;
}
#tuzhong
{
	width: 666px;
	height: 185px;
	background-image: url("images/sds_52.jpg");
	float: left;
}
#tuyou
{
	background-image: url("images/sds_53.jpg");
	width: 18px;
	height: 185px;
	float: left;
}
#ren
{
	margin-left: 13px;
	margin-top: 10px;
	height: 383px;
}
#renshang
{
	background-image: url("images/sds_54.jpg");
	width: 734px;
	height: 39px;
}
#renzhong
{
	width: 734px;
	height: 280px;
	background-image: url("images/sds_44.jpg");
}
#renxia
{
	background-image: url("images/sds_45.jpg");
	width: 734px;
	height: 20px;
}
#tupian1
{
	float: left;
	height: 183px;
	width: 158px;
}
#tupian1 img
{
	padding-left: 10px;
	margin: 10px auto;
}
#tupian1 p
{
	margin-top: -10px;
	text-align: center;
}
.WORD
{
	float: left;
	width: 340px;
	height: 160px;
	margin-top: 5px;
}
.WORD span
{
	float: right;
}
.WORD p
{
	height: 20px;
}
.WORD hr
{
	border: 1px dashed white;
}
.zi hr
{
	border: 1px dashed white;
	width: 200px;
}
.zi p
{
	height: 20px;
}
.zi
{
	padding-top: 5px;
	padding-left: 10px;
}
#tupian2
{
	float: left;
	height: 183px;
	width: 158px;
}
#tupian2 img
{
	padding-left: 10px;
	margin: 10px auto;
}
#tupian2 p
{
	text-align: center;
}
#wenzi
{
	float: left;
	width: 340px;
	height: 160px;
	margin-top: 5px;
}
#wenzi span
{
	float: right;
}
#wenzi p
{
	height: 20px;
}
#wenzi hr
{
	border: 1px dashed white;
}
#tuzhong li
{
	width: 150px;
	height: 170px;
	float: left;
	text-align: center;
	margin-left: 15px;
	margin-top: 15px;
}
#zhuanzuo
{
	width: 350px;
	height: 327px;
	float: left;
}
#fule
{
	text-indent: 2em;
	margin-top: 20px;
	margin-left: 10px;
	float: left;
	height: 170px;
	width: 180px;
	font-size: 13px;
}
#zhuanyou
{
	height: 327px;
	width: 350px;
	float: left;
	margin-left: 27px;
	margin-top: -3px;
}
#zhuanyou li
{
	width: 150px;
	height: 170px;
	float: left;
	text-align: center;
	margin-left: 15px;
	margin-top: 15px;
}
#qian
{
	column-width: 230px;
	column-gap: 10px;
	column-count: 3;
	column-rule: white 1px dashed;
	margin-left: 5px;
	margin-top: 15px;
	float: left;
}
#qian hr
{
	border: 1px dashed white;
	width: 200px;
	margin: 0 auto;
}
#qian p
{
	height: 20px;
	padding-left: 15px;
}
#hou
{
	width: 200px;
	height: 130px;
	float: left;
	margin-left: 15px;
	margin-top: 10px;
}
#tuzhong ul
{
	margin-top: 10px;
}
tr
{
	border: none;
	margin-top: 10px;
}
td
{
	width: 88px;
	height: 31px;
	border: none;
	margin-left: 10px;
}
table
{
	margin-left: -10px;
	border-spacing: 10px;
}
#zhuanzuo a
{
	color: black;
	font-weight: bold;
}
#zhuanzuo a:hover
{
	color: green;
	font-weight: bold;
}

你可能感兴趣的:(web前端,css,html,html5,vue.js,javascript)