search

博客列表 >328-网站首页前端实战-下

328-网站首页前端实战-下

小威的博客
小威的博客原创
2018年04月08日 16:38:421345浏览

  • 全网效果图

328.png


  • 全网源代码


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 导入初始样式表 -->
	<link rel="stylesheet" href="css/reset.css">
	<!-- 导入公共模式表 -->
	<link rel="stylesheet" href="css/common.css">
	<!-- 导入首页样式表 -->
	<link rel="stylesheet" href="css/index.css">
	<title>琪琪布电影网-最快最新的电影网站_2018最新电影电视</title>
</head>
<body>
	<!-- 公共顶部 -->
	<div class="header">
	    <div class="info">
		    <div class="logo"><a href="htt://www.qiqibu88.com"></a><img src="images/logo.png" alt="logo"></div>
		    <div class="suso-fl">
			<input type="text" name="name" placeholder="请在此处输入电视剧名称或电影名称">
			<button>搜 索</button>
			<p><strong>热门搜索：</strong>
				<a href="">余罪</a>
				<a href="">余罪第一季</a>
				<a href="">甄嬛传全集观看..</a>
				<a href="">笑傲江湖吕颂贤..</a>
				<a href="">新版三国演义</a>
			</p>
		    </div>
			<div class="suso-fr">
				<a href="">最新更新</a>
				<a href="">人气排行</a>
				<br>
				<a href="">求片反馈</a>
				<a href="">电视直播</a>
			</div>
		</div>
			<!-- 导航菜单 -->
		<div class="menu">
			<div class="info">
			<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="">欧美电视剧</a></li>
				<li><a href="">海外电视剧</a></li>
			</ul>
			</div>
		</div>
		<div class="menus">
			<div class="info">
			<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="">动漫片</a></li>
				<li><a href="">综艺</a></li>
				<li><a href="">战争片</a></li>
				<li><a href="">2018最新电影</a></li>
				<li><a href="">2018最新电视剧</a></li>
			</ul>
		    </div>
		</div>
		<!-- 广告区 -->
		<div class="gg">
			<div class="info"><a href="http://tool.php.cn/" target="_blank"><img src="images/gg.jpg" alt="php中文网"></a></div>
		</div>
	</div>
	<!-- 网站主体 -->
	<div class="maintop">
			<ul class="tijis">
				<li id="tiji">2018最新热门推荐</li>
			</ul>
		<div class="boxrm">
			<dl class="play">
				<li><a class="play-pic" href="" title="VR驱魔人粤语版">
					<img src="images/rm1.png" alt="VR驱魔人粤语版">
					<label class="bg"> </label>
					<label class="time">3集</label>
				</a>
				<p><a href="" title="VR驱魔人粤语版">VR驱魔人粤语版</a></p>
				</li>
				<li><a class="play-pic" href="" title="2018老男孩电视">
					<img src="images/rm2.jpg" alt="2018老男孩电视">
					<label class="bg"> </label>
					<label class="time">42集</label>
				</a>
				<p><a href="" title="2018老男孩电视">2018老男孩电视</a></p>
				</li>
				<li><a class="play-pic" href="" title="我站在桥上看风">
					<img src="images/rm3.jpg" alt="我站在桥上看风">
					<label class="bg"> </label>
					<label class="time">40集</label>
				</a>
				<p><a href="" title="我站在桥上看风">我站在桥上看风</a></p>
				</li>
				<li><a class="play-pic" href="" title="烈火如歌1-52全">
					<img src="images/rm4.jpg" alt="烈火如歌1-52全">
					<label class="bg"> </label>
					<label class="time">45集</label>
				</a>
				<p><a href="" title="烈火如歌1-52全">烈火如歌1-52全</a></p>
				</li>
				<li><a class="play-pic" href="" title="祖宗十九代">
					<img src="images/rm5.jpg" alt="祖宗十九代">
					<label class="bg"> </label>
					<label class="time">高清4K</label>
				</a>
				<p><a href="" title="祖宗十九代">祖宗十九代</a></p>
				</li>
				<li><a class="play-pic" href="" title="凤囚凰">
					<img src="images/rm6.jpg" alt="凤囚凰">
					<label class="bg"> </label>
					<label class="time">42集</label>
				</a>
				<p><a href="" title="凤囚凰">凤囚凰</a></p>
				</li>
				<li><a class="play-pic" href="" title="行尸走肉第八季">
					<img src="images/rm7.jpg" alt="行尸走肉第八季">
					<label class="bg"> </label>
					<label class="time">13集</label>
				</a>
				<p><a href="" title="行尸走肉第八季">行尸走肉第八季</a></p>
				</li>
				<li><a class="play-pic" href="" title="海贼王">
					<img src="images/rm8.jpg" alt="海贼王">
					<label class="bg"> </label>
					<label class="time">更新至829话</label>
				</a>
				<p><a href="" title="海贼王">海贼王</a></p>
				</li>
				<li><a class="play-pic" href="" title="三个女人一个因">
					<img src="images/rm9.jpg" alt="三个女人一个因">
					<label class="bg"> </label>
					<label class="time">粤语720P-12集</label>
				</a>
				<p><a href="" title="三个女人一个因">三个女人一个因</a></p>
				</li>
				<li><a class="play-pic" href="" title="芳华">
					<img src="images/rm10.jpg" alt="芳华">
					<label class="bg"> </label>
					<label class="time">TS抢先版</label>
				</a>
				<p><a href="" title="芳华">芳华</a></p>
				</li>
				<li><a class="play-pic" href="" title="槑头槑脑">
					<img src="images/rm11.jpg" alt="槑头槑脑">
					<label class="bg"> </label>
					<label class="time">全集</label>
				</a>
				<p><a href="" title="槑头槑脑">槑头槑脑</a></p>
				</li>
				<li><a class="play-pic" href="" title="槑头槑脑3">
					<img src="images/rm12.png" alt="槑头槑脑3">
					<label class="bg"> </label>
					<label class="time">20集全剧终</label>
				</a>
				<p><a href="" title="槑头槑脑3">槑头槑脑3</a></p>
				</li>
				<li><a class="play-pic" href="" title="吴承恩与西游记">
					<img src="images/rm13.jpg" alt="吴承恩与西游记">
					<label class="bg"> </label>
					<label class="time">46集全</label>
				</a>
				<p><a href="" title="吴承恩与西游记">吴承恩与西游记</a></p>
				</li>
				<li><a class="play-pic" href="" title="非常静距离">
					<img src="images/rm14.jpg" alt="非常静距离">
					<label class="bg"> </label>
					<label class="time">更新至03-25</label>
				</a>
				<p><a href="" title="非常静距离">非常静距离</a></p>
				</li>
			</dl>
		</div>
	</div>
	<div class="maintxp">
		<div class="mrqfl1">
			<div class="mt1">
				<span>
					<a href="">国产电视剧</a>
					<a href="">香港电视剧</a>
					<a href="">台湾电视剧</a>
					<a href="">韩国电视剧</a>
					<a href="">日本电视剧</a>
					<a href="">欧美电视剧</a>
					<a href="">海外电视剧</a>
				</span>
				<h3>【人气】电视剧</h3>
			</div>
			<ul class="mboxt">
				<li><label>46集</label><a href=""><img src="images/rm6.jpg" alt="凤囚凰"><p>凤囚凰</p></a></li>
				<li><label>14集</label><a href=""><img src="images/rm9.jpg" alt="三个女人一个因"><p>三个女人一个因</p></a></li>
				<li><label>6集</label><a href=""><img src="images/rm1.png" alt="VR驱魔人粤语版">VR驱魔人粤语版<p></p></a></li>
				<li><label>51集</label><a href=""><img src="images/rm4.jpg" alt="烈火如歌1-52全"><p>烈火如歌1-52全</p></a></li>
				<li><label>4集</label><a href=""><img src="images/rm15.jpg" alt="远大前程61全（陈思诚）"><p>远大前程61全（陈思诚）</p></a></li>
				<li><label>14集</label><a href=""><img src="images/rm7.jpg" alt="行尸走肉第八季"><p>行尸走肉第八季</p></a></li>
				<li><label>全集</label><a href=""><img src="images/rm16.jpg" alt="春光灿烂之欢乐元帅"><p>春光灿烂之欢乐元帅</p></a></li>
				<li><label>47集</label><a href=""><img src="images/rm2.jpg" alt="2018老男孩电视"><p>2018老男孩电视</p></a></li>
				<li><label>40集全剧终</label><a href=""><img src="images/rm3.jpg" alt="我站在桥上看风"><p>我站在桥上看风</p></a></li>
				<li><label>全集</label><a href=""><img src="images/rm11.jpg" alt="槑头槑脑"><p>槑头槑脑</p></a></li>
			</ul>
			<ul class="mboxf">
				<li><a href="">亲爱的翻译官</a></li>
				<li><a href="">他来了请闭眼全集</a></li>
				<li><a href="">致我们单纯的小美好</a></li>
				<li><a href="">夸世代粤tvb粤语</a><p>50</p></li>
				<li><a href="">溏心风暴3粤语</a><p>40</p>/li>
				<li><a href="">生逢灿烂的日子</a></li>
				<li><a href="">猎场 胡歌</a><p>58</p></li>
				<li><a href="">将军在上1-60全集</a><p>60</p></li>
				<li><a href="">溏心风暴3国语</a><p>40</p></li>
				<li><a href="">九州•海上牧云记</a></li>
				<li><a href="">琅琊榜第二部/琅琊榜之风起长林</a></li>
				<li><a href="">花谢花飞花满天</a></li>
				<li><a href="">亲爱的她们1-41全集</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="">第22条婚规第二部</a></li>
				<li><a href="">龙日一你死定了</a></li>
				<li><a href="">新三国演义全集高清</a></li>
				<li><a href="">你好，旧时光</a></li>
				<li><a href="">天下粮田</a><p>40</p></li>
				<li><a href="">僵尸道长1</a></li>
				<li><a href="">欲奴第一季</a><p>6</p></li>
			</ul>
		</div>
		<div class="mgxfr1">
			<div class="mt2">
			<h3><span><a href="">更多更新</a></span>最新更新电视剧</h3>
			</div>
			<div class="mboxgx">
				<!-- li*19>(em[class="red"]{$})>a+font[color=#0099ff]+{04-08} -->
				<li><em class="red">1</em><a href="">新豪门恩怨</a><font color="#0099ff">14</font> 04-08
				</li>
				<li><em class="red">2</em><a href="">爱神巧克力第二季</a><font color="#0099ff">15</font> 04-08
				</li>
				<li><em class="red">3</em><a href="">VR驱魔人粤语版 </a><font color="#0099ff">10</font> 04-08
				</li>
				<li><em class="red">4</em><a href="">玩偶之家韩剧</a><font color="#0099ff">30</font> 04-08
				</li>
				<li><em class="red">5</em><a href="">波浪啊波浪</a><font color="#0099ff">38</font> 04-08
				</li>
				<li><em class="red">6</em><a href="">永恒镇第一季</a><font color="#0099ff">20</font> 04-08
				</li>
				<li><em class="red">7</em><a href="">再见，黑鸟</a><font color="#0099ff">6</font> 04-08
				</li>
				<li><em class="red">8</em><a href="">我是大侦探</a><font color="#0099ff"></font> 04-08
				</li>
				<li><em class="red">9</em><a href="">斗罗大陆第一季</a><font color="#0099ff">13</font> 04-08
				</li>
				<li><em class="red">10</em><a href="">逆缘TVB(国语)</a><font color="#0099ff">5</font> 04-08
				</li>
				<li><em class="red">11</em><a href="">我的圣经生活/圣经狂想曲第一季</a><font color="#0099ff">6</font> 04-08
				</li>
				<li><em class="red">12</em><a href="">双面身份第一季</a><font color="#0099ff">11</font> 04-08
				</li>
				<li><em class="red">13</em><a href="">职场老妈/上班族妈妈第二季</a><font color="#0099ff">12</font> 04-08
				</li>
				<li><em class="red">14</em><a href="">I Sea U我爱有你的大海</a><font color="#0099ff">10</font> 04-08
				</li>
				<li><em class="red">15</em><a href="">远大前程61全集 （陈思诚</a><font color="#0099ff">12</font> 04-08
				</li>
				<li><em class="red">16</em><a href="">好久不见</a><font color="#0099ff">22</font> 04-08
				</li>
				<li><em class="red">17</em><a href="">海上嫁女记</a><font color="#0099ff">4</font> 04-08
				</li>
				<li><em class="red">18</em><a href="">南方有乔木</a><font color="#0099ff">25</font> 04-08
				</li>
				<li><em class="red">19</em><a href="">养母的花样年华</a><font color="#0099ff">50</font> 04-08
				</li>
			</div>
		</div>
		<div class="mrqfl1">
			<div class="mt1">
				<span>
					<a href="">喜剧电影</a>
					<a href="">动作电影</a>
					<a href="">爱情电影</a>
					<a href="">剧情电影</a>
					<a href="">恐怖电影</a>
					<a href="">科幻电影</a>
					<a href="">战争电影</a>
				</span>
				<h3>【人气】电影</h3>
			</div>
			<ul class="mboxt">
				<li><label>4K</label><a href=""><img src="images/rm17.jpg" alt="战狼2"><p>战狼2</p></a></li>
				<li><label>正片</label><a href=""><img src="images/rm5.jpg" alt="祖宗十九代"><p>祖宗十九代</p></a></li>
				<li><label>TS抢先版</label><a href=""><img src="images/rm10.jpg" alt="芳华"><p>芳华</p></a></li>
				<li><label>720P</label><a href=""><img src="images/rm18.jpg" alt="我的野蛮女友2"><p>我的野蛮女友2</p></a></li>
				<li><label>1080P</label><a href=""><img src="images/rm19.jpg" alt="黑豹"><p>黑豹</p></a></li>
				<li><label>1080P</label><a href=""><img src="images/rm20.jpg" alt="勇敢者游戏：决战丛林"><p>勇敢者游戏：决战丛林</p></a></li>
				<li><label>1080P</label><a href=""><img src="images/rm21.jpg" alt="前任3：再见前任">前任3：再见前任<p></p></a></li>
				<li><label>正片</label><a href=""><img src="images/rm22.jpg" alt="唐人街探案"><p>唐人街探案</p></a></li>
				<li><label>720P</label><a href=""><img src="images/rm23.jpg" alt="黑豹2018"><p>黑豹2018</p></a></li>
				<li><label>1080P</label><a href=""><img src="images/rm24.png" alt="垫底联盟"><p>垫底联盟</p></a></li>
			</ul>
			<ul class="mboxf">
				<li><a href="">英伦对决</a><p>电影</p></li>
				<li><a href="">金瓶梅之鸳鸯戏床</a><p></p></li>
				<li><a href="">暴雪将至</a><p>正片</p></li>
				<li><a href="">天际浩劫2</a><p>TC清晰版</p></li>
				<li><a href="">半条命3：特种兵之战</a><p>BD</p></li>
				<li><a href="">变形金刚5：最后的骑士</a><p></p></li>
				<li><a href="">密战</a><p>电影</p></li>
				<li><a href="">猩球崛起3：终极之战</a><p>正片</p></li>
				<li><a href="">大话西游3</a><p></p></li>
				<li><a href="">引爆者</a><p>正片</p></li>
				<li><a href="">战狼2完整版</a><p></p></li>
				<li><a href="">伏妖白鱼镇</a><p></p></li>
				<li><a href="">我是传奇</a><p>电影</p></li>
				<li><a href="">精武风云陈真</a><p></p></li>
				<li><a href="">战狼2</a><p></p></li>
				<li><a href=""移动迷宫2:烧痕审判></a><p>BD</p></li>
				<li><a href="">全球风暴</a><p正片></p></li>
				<li><a href="">王牌特工2：黄金圈</a><p>正片</p></li>
				<li><a href="">将军在上之极乐净土</a><p>HD1280高清国语中字版</p></li>
				<li><a href="">美少女特攻队/专扁衰仔</a><p></p></li>
				<li><a href="">天才枪手</a><p>正片</p></li>
				<li><a href="">自杀小队</a><p></p></li>
				<li><a href="">虐杀器官</a><p>BD1280高清中字版</p></li>
				<li><a href="">绝密飞行</a><p></p></li>
			</ul>
		</div>
		<div class="mgxfr1">
			<div class="mt2">
			<h3><span><a href="">更多更新</a></span>最新更新电影</h3>
			</div>
			<div class="mboxgx">
				<li><em class="score">1</em><a href="">绝命时钟2:22</a>04-08</li>
				<li><em class="score">2</em><a href="">追战时刻/浴血丛林/丛林奇兵</a>04-08</li>
				<li><em class="score">3</em><a href="">一路向南</a>04-08</li>
				<li><em class="score">4</em><a href="">一狱一世界：高登阔少蹲监日记</a>04-08</li>
				<li><em class="score">5</em><a href="">兄弟难当</a>04-08</li>
				<li><em class="score">6</em><a href="">古曼童之人偶</a>04-08</li>
				<li><em class="score">7</em><a href="">霸道将军网红情人</a>04-08</li>
				<li><em class="score">8</em><a href="">再喊一声爹娘</a>04-08</li>
				<li><em class="score">9</em><a href="">夜蒲之奶爸总裁</a>04-08</li>
				<li><em class="score">10</em><a href="">寻之亲爱的小孩</a>04-08</li>
				<li><em class="score">11</em><a href="">黑色星期五2/13号星期五</a>04-08</li>
				<li><em class="score">12</em><a href="">钻石</a>04-08</li>
				<li><em class="score">13</em><a href="">血溅13号警署</a>04-08</li>
				<li><em class="score">14</em><a href="">11 12 13 至死不渝</a>04-08</li>
				<li><em class="score">15</em><a href="">金陵十三钗</a>04-08</li>
				<li><em class="score">16</em><a href="">血战铜锣湾</a>04-08</li>
				<li><em class="score">17</em><a href="">午夜火车</a>04-08</li>
				<li><em class="score">18</em><a href="">末日病毒</a>04-08</li>
				<li><em class="score">19</em><a href="">老师你好</a>04-08</li>
			</div>
		</div>
		<div class="mrqfl2">
			<div class="mt1">
				<h3>【人气】动画</h3>
			</div>
			<ul class="mboxt">
				<li><label>全集</label><a href=""><img src="images/rm8.jpg" alt="海贼王"><p>海贼王</p></a></li>
				<li><label>全集</label><a href=""><img src="images/rm25.jpg" alt="爱宠大机密"><p>爱宠大机密</p></a></li>
				<li><label>720集</label><a href=""><img src="images/rm26.jpg" alt="火影忍者"><p>火影忍者</p></a></li>
				<li><label>全集</label><a href=""><img src="images/rm27.jpg" alt="大鱼海棠"><p>大鱼海棠</p></a></li>
				<li><label>10集</label><a href=""><img src="images/rm28.jpg" alt="宫河家的空腹"><p>宫河家的空腹</p></a></li>
			</ul>
			<ul class="mboxf">
				<li><a href="">捷德奥特曼国语版</a><p>25</p></li>
				<li><a href="">东京食尸鬼第三季</a><p>更新至01集/共12集</p></li>
				<li><a href="">死神</a><p>全集</p></li>
				<li><a href="">拳皇命运(中文版)</a><p>24</p></li>
				<li><a href="">超神学院雄兵连之雄芯篇</a><p>更新至第10集</p></li>
				<li><a href="">秦时明月之君临天下</a><p>72</p></li>
				<li><a href="">一人之下第二季</a><p>15</p></li>
				<li><a href="">黑暗圣经</a><p></p>16集全</li>
				<li><a href="">血色苍穹</a><p>26</p></li>
				<li><a href="">地灵曲</a><p>18</p></li>
				<li><a href="">熊出没之探险日记</a><p>52</p></li>
				<li><a href="">天行九歌之心之逆鳞/秦时明月兄弟</a><p></p></li>
			</ul>
		</div>
		<div class="mgxfr2">
			<div class="mt2">
			<h3><span><a href="">更多更新</a></span>最新更新动画</h3>
			</div>
			<div class="mboxgx">
				<li><em class="brown">1</em><a href="">没有心跳的少女BEATLESS</a>04-08</li>
				<li><em class="brown">2</em><a href="">逆光之颤</a>04-08</li>
				<li><em class="brown">3</em><a href="">皇帝圣印战记</a>04-08</li>
				<li><em class="brown">4</em><a href="">迷域行者</a>04-08</li>
				<li><em class="brown">5</em><a href="">万界仙踪</a>04-08</li>
				<li><em class="brown">6</em><a href="">博多豚骨拉面团</a>04-08</li>
				<li><em class="brown">7</em><a href="">魔法少女网站/魔法少女site</a>04-08</li>
				<li><em class="brown">8</em><a href="">欧布奥特曼英雄传</a>04-08</li>
				<li><em class="brown">9</em><a href="">樱花忍法帖/甲贺忍法帖第二季</a>04-08</li>
				<li><em class="brown">10</em><a href="">魔法总动员</a>04-08</li>
			</div>
			<div class="clear"></div>
		</div>
		<div class="mrqfl2">
			<div class="mt1">
				<h3>【人气】综艺</h3>
			</div>
			<ul class="mboxt">
				<li><label>全集</label><a href=""><img src="images/rm14.jpg" alt="非常静距离"><p>非常静距离</p></a></li>
				<li><label>全集</label><a href=""><img src="images/rm29.jpg" alt="24小时/二十四小时"><p>24小时/二十四小时</p></a></li>
				<li><label>20160817期</label><a href=""><img src="images/rm30.jpg" alt="暴走法条君"><p>暴走法条君</p></a></li>
				<li><label>全集</label><a href=""><img src="images/rm31.jpg" alt="不一样的偶像"><p>不一样的偶像</p></a></li>
				<li><label>20160814期</label><a href=""><img src="images/rm32.jpg" alt="笑傲江湖第三季"><p>笑傲江湖第三季</p></a></li>
			</ul>
			<ul class="mboxf">
				<li><a href="">喜剧总动员第二季</a><p>更新至第20171202期</p></li>
				<li><a href="">坑王驾到第2季</a><p>更新至：2018-04-01期</p></li>
				<li><a href="">天天向上</a><p>2018-03-30期</p></li>
				<li><a href="">同床异梦2：你是我的命运</a><p>20180319</p></li>
				<li><a href="">欢乐喜剧人第三季</a><p>20170409</p></li>
				<li><a href="">RunningMan</a><p>更新:2018-04-01期</p></li>
				<li><a href="">吐槽大会第二期</a><p></p></li>
				<li><a href="">爸爸去哪儿第五季</a><p>更新至第20171130期</p></li>
				<li><a href="">青春旅社</a><p>更新至第20171203期</p></li>
				<li><a href=""MIXNINE></a><p>更新至第171203期</p></li>
				<li><a href="">极限挑战第二季</a><p></p></li>
				<li><a href="">欢乐喜剧人第二季</a><p></p></li>
			</ul>
		</div>
		<div class="mgxfr2">
			<div class="mt2">
			<h3><span><a href="">更多更新</a></span>最新更新综艺</h3>
			</div>
			<div class="mboxgx">
				<li><em class="purple">1</em><a href="">中国情歌汇</a>04-08</li>
				<li><em class="purple">2</em><a href="">天天向上</a>04-08</li>
				<li><em class="purple">3</em><a href="">坑王驾到第2季</a>04-08</li>
				<li><em class="purple">4</em><a href="">歌手第二季</a>04-08</li>
				<li><em class="purple">5</em><a href="">偶像练习生</a>04-08</li>
				<li><em class="purple">6</em><a href="">王牌对王牌第3季</a>04-08</li>
				<li><em class="purple">7</em><a href="">二十四小时第三季</a>04-08</li>
				<li><em class="purple">8</em><a href="">热血街舞团</a>04-08</li>
				<li><em class="purple">9</em><a href="">欢乐集结号</a>04-08</li>
				<li><em class="purple">10</em><a href="">快乐大本营</a>04-08</li>
			</div>
		</div>
	</div>

	<!-- 公共底部 -->
	<div class="footer">
		<div class="top">
		    <div class="topfl">
				<p><strong>友情链接</strong></p>
		    </div>
			<div class="fopfr">
				<p><strong>友情提示:</strong>请大家更换新域名www.qiqibu88.com友情链接</p>
			</div>
		</div>
		<hr width="960px" color="#efefef" size="1">
        <div class="link">
	    	<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="">QVOD电影</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="">莉莉影院</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="">奇特影院</a></li>
	    		<li><a href="">2015电影网</a></li>
	    		<li><a href="">360影视</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>
	    	</ul>
	    </div>
    </div>

    <hr color="#0060a5" size="2">

    <div class="bottom">
    	<p>本网站个人爱好制作，内容系统自动收集于互联网，我们没能力承担任何由于内容的合法性及健康性所引起的争议和法律责任。</p>
    	<p>欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。</p>
    	<p>联系邮箱：123486888@qq.com</p>
    	<p>Copyright 2012-2017 <a href="http://www.qiqibu88.com">琪琪布电影网www.qiqibu88.com</a> All Right Reserved©版权所有</p>

    </div>
	</div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

  • 首页专用样式表 index.css


实例

.maintop {
	width: 960px;
	margin: auto;
}
.boxrm {
	width: 958px;
	height: 360px;
	border: 1px solid #268BC4;
}
.tijis {
	width: 958px;
	height: 33px;
	overflow: hidden;
	margin-bottom: -1px;
}
.tijis li {
	width: 191px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	border: 1px solid #268BC4;
}
#tiji {
	width: 188px;
	height: 32px;
	position: relative;
	color: #0060A5;
	background: white;
}
.boxrm dl li {
	width: 130px;
	height: 170px;
	float: left;
	text-align: center;
	padding: 2px 3px;
}
.boxrm dl li p {
	padding: 5px 0;

}

.play-pic img:hover{
	border: 1px solid #0060A5;
	filter:alpha(opacity=80);
	opacity:0.8;
}
.play-pic {
	width: 104px;
	height: 136px;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	background: white;
}
.play-pic img {
	width: 96px;
	height: 128px;
	display: block;
	overflow: hidden;
	padding: 3px;
	border: 1px solid #CCC;
}
.play-pic:hover img {
	border-color:#f30;
	background-color:#f30
}
.play-pic label.bg {
	width: 96px;
	height: 20px;
	display: block;
	overflow: hidden;
	background: black;
	position: absolute;
	left: 4px;bottom: 4px;
	filter: alpha(opacity=50);
	opacity: 0.5;
	z-index: 1;
}
.play-pic label.time {
	width: 86px;
	height: 20px;
	line-height: 20px;
	display: block;
	overflow: hidden;
	font-size: 12px;
	position: absolute;
	left: 4px;
	bottom: 4px;
	padding: 0 5px;
	text-align: right;
	z-index: 2;
	color: white;
	white-space: nowrap;
}
.maintxp {
	width: 960px;
	margin: auto;
}
.mt1, .mt2 {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #e3e3e3;
	background-color: #fdfdfd;
}
.mt1 span {
	float: right;
	padding-right: 10px;
}
.mt2 h3 {
	padding-left: 10px;
}
.mt2 h3 span {
	float: right;
	font-weight: normal;
	padding-right: 10px;
}
.mrqfl1 {
	width: 700px;
	height: 600px;
	float: left;
	margin-top:15px;
	border: 1px solid #e3e3e3;
	overflow: hidden;
}

.mgxfr1 {
	width: 250px;
	height:600px;
	float: right;
	margin-top:15px;
	border: 1px solid #e3e3e3;
}

.mrqfl2 {
	width: 700px;
	height: 340px;
	float: left;
	margin-top:15px;
	border: 1px solid #e3e3e3;
}
.mgxfr2 {
	width: 250px;
	height:340px;
	float: right;
	margin-top:15px;
	border: 1px solid #e3e3e3;
}
.mboxt li {
	float: left;
	width: 104px;
	height: 136px;
	padding: 15px 0 0 28px;
	text-align: center;
	position: relative;
	padding-bottom: 15px;
}
.mboxt li a {
	color: #333;
	text-decoration: none;
}
.mboxt li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mboxt img {
	width: 96px;
	height: 128px;
	padding: 3px;
	border: 1px solid #CCC;
}
.mboxt img:hover  {
	border-color:#268bc4;
}
.mboxt li label {
	width: 96px;
	height: 20px;
	line-height: 20px;
	color: #fff;
	text-align: right;
	position: absolute;
	right: 5px;
	top:126px;
	overflow: hidden;
	background: #000;
	opacity: 0.5;
	cursor: default;
}
.maintxp .mboxf {
	width: 632px;
	float: left;
	margin:10px 30px;
	border-top:1px #eee solid;
	padding-top:12px;
}
.mboxf li {
	width:210px;
	height:24px;
	float: left;
	line-height:24px;
	text-indent:18px;
	overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    background:url(../images/bg4.gif) 0 7px no-repeat;
}
.mboxgx{
	padding:3px 12px 6px 12px;
}
.mboxgx li a {
	float: left;
	width: 150px;
	height: 28x;
	text-align: left;
	overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.mboxgx li{
	height:28px;
	line-height:28px;
	color:#c51616;
	border-bottom:1px #dfdfdf dotted;
	text-align: right;
}
.mboxgx li em {
	width:16px;
	height:16px;
	line-height:16px;
	color:#fff;
	text-align:center;
	margin:7px 6px 0 0;
	float:left;
	background-color:#999;
	border-radius:2px
}
.mboxgx li .score {
	color:#fff
}
.mboxgx li em.red {
	background-color:#006699
}
.mboxgx li em.brown {
	background-color:brown
}
.mboxgx li em.purple {
	background-color:purple
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


上一条：2018/03/28html大作业（仿企业站点）下一条：0404
主体
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多