页面效果如下:
实现代码如下:
实例
<?php //变量 $copyright ='快播'; //创建二个人变量来保存页面中的动态内容 $movies=['倚天屠龙记','都挺好','如果可以这样爱']; $navs=[ 'gc'=>'国产好剧', 'om'=>'欧美猛片', 'rh'=>'日韩新片' ]; $movies1=[ [ 'mov_id'=>1, 'name'=>'倚天屠龙记', 'image'=>'static\images\1.jpg', 'detail'=>'元朝末年，群雄纷起，武林动荡。江湖传闻，得到屠龙刀倚天剑者，可以成为武林至尊，号令天下，莫敢不从。一时间风云四起，引发了武林中对屠龙刀倚天剑的争夺，几段姻缘和孽缘也由此产生。武当派张翠山与天鹰教殷素素… ', 'cate_id'=>1, 'time'=>'2019-9-22 12:00:00', 'dianzan'=>'53242' ], [ 'mov_id'=>2, 'name'=>'都挺好', 'image'=>'static\images\2.jpg', 'detail'=>'苏母的的突然离世打破了这个家庭外表的平静，意想不到的隐患层层显露，对毫无主见却又自私、小气的苏父的安置和后续生活问题，引发了远在国外的大哥与本城的二哥、小妹三家规律生活的不再。一直被苏母压制的苏父翻… ', 'cate_id'=>1, 'time'=>'2019-9-22 12:10:00', 'dianzan'=>'23223' ], [ 'mov_id'=>3, 'name'=>'如果可以这样爱', 'image'=>'static\images\3.jpg', 'detail'=>'一对已婚男女突然徇情自杀，以为可以结束这一切，却不料悲剧才刚刚开始——他们的爱人，耿墨池和白考儿，同时在葬礼上邂逅。面对同样的背叛他们同时选择报复但又同时爱上彼此，注定饱受打击和折磨。然而他们想真心拥…', 'cate_id'=>1, 'time'=>'2019-9-22 12:20:00', 'dianzan'=>'533422' ], [ 'mov_id'=>4, 'name'=>'复仇者联盟4', 'image'=>'static\images\4.jpg', 'detail'=>'《复仇者联盟4：终局之战》将是漫威宇宙“无限传奇”（The Infinity Saga)的终结篇，是漫威电影宇宙十年的一个重要节点，结束部分英雄电影的故事，但也将展开新的剧情，呈现新的更为广阔宏大的宇…', 'cate_id'=>2, 'time'=>'2019-9-22 12:30:00', 'dianzan'=>'98792' ], ['mov_id'=>5, 'name'=>'波西米亚狂想曲', 'image'=>'static\images\5.jpg', 'detail'=>'弗雷迪·默丘里成名前在机场做行李搬运工。有一天，默丘里毛遂自荐加入杰·泰勒与布莱恩·梅的乐团，恰巧当天原本的主唱辞职，默丘里用自己横跨四个八度的超广音域说服两人，从此开启皇后乐团的摇滚传奇!', 'cate_id'=>2, 'time'=>'2019-9-22 12:40:00', 'dianzan'=>'5987972' ], [ 'mov_id'=>6, 'name'=>'阿丽塔:战斗天使', 'image'=>'static\images\6.jpg', 'detail'=>'弗雷迪·默丘里成名前在机场做行李搬运工。有一天，默丘里毛遂自荐加入杰·泰勒与布莱恩·梅的乐团，恰巧当天原本的主唱辞职，默丘里用自己横跨四个八度的超广音域说服两人，从此开启皇后乐团的摇滚传奇!', 'cate_id'=>2, 'time'=>'2019-9-22 12:50:00', 'dianzan'=>'98982' ], [ 'mov_id'=>7, 'name'=>'情书', 'image'=>'static\images\7.jpg', 'detail'=>'韩书珍将两个女儿的教育问题和对丈夫的贤内助工作都做得井井有条，在天空之城之中也是备受瞩目的女王，但其实书珍一直隐藏着不为人所知的秘密。李秀林是个充满了关怀和情感丰沛的童话作家，在书珍的引导之下成为了天…', 'cate_id'=>3, 'time'=>'2019-9-22 12:55:00', 'dianzan'=>'59892' ], [ 'mov_id'=>8, 'name'=>'天空之城', 'image'=>'static\images\8.jpg', 'detail'=>'为了方便妻子草壁靖子养病，草壁达郎决定带着两个女儿草壁皋月和草壁米搬到草壁靖子所在疗养院附近的乡下，父女三人入住了一间年久失修的老房子。小姐妹俩很快发现看似平凡无奇的乡下有很多神奇的事物，无人居住的房…', 'cate_id'=>3, 'time'=>'2019-9-22 12:59:00', 'dianzan'=>'57657562' ], [ 'mov_id'=>9, 'name'=>'龙猫', 'image'=>'static\images\9.jpg', 'detail'=>'弗雷迪·默丘里成名前在机场做行李搬运工。有一天，默丘里毛遂自荐加入杰·泰勒与布莱恩·梅的乐团，恰巧当天原本的主唱辞职，默丘里用自己横跨四个八度的超广音域说服两人，从此开启皇后乐团的摇滚传奇!', 'cate_id'=>3, 'time'=>'2019-9-22 12:00:00', 'dianzan'=>'586782' ], ]; ?>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<body>
<!-- 头部导航 -->
<div class='header'>
<ul class='nav'>
<li><a href="index,php">首页</a></li>
<?php foreach ($navs as $key=>$nav){?>
<li><a href="<?php echo $key .'.php';?>"><?php echo $nav;?></a></li>
<?php }?>
</ul>
</div>
<h2><?php echo $navs['gc'];?></h2>
<img src="static/images/1.jpg" alt="" width="300">
<!-- 对于数组,循环遍历更方便 -->
<ol>
<?php foreach ($movies as $movie){?>
<li><a href=""><?php echo $movie;?></a></li>
<?php }?>
</ol>
<p><?php echo $movies1[0]['detail'];?></p>
<!-- 发表评论 -->
<div >
<h3 class="w-100 bgc-y">发表评论</h3>
<form action="">
<textarea name="msg" id="" cols="60" rows="5">评论内容:非常***!</textarea><br>
<input type="submit" value="发表评论">
</form>
</div>
<!-- 评论区 -->
<div class="pinglin bgc-y">
<h3>最新评论</h3>
<?php foreach($movies1 as $movies11){?>
<img src="<?php echo $movies11['image'];?>" alt="" class="img f-l">
<p class=" m-0 f-l f-s-1"><?php echo$movies11['name'];?></p><br>
<span class="f-l f-s-1"><?php echo$movies11['time'];?></span>
<span class=" f-r f-s-1"><?php echo $movies11['dianzan'];?></span> <img src="static\images\10.png" alt="" class="f-r">
<p class="pinglunnr"><?php echo $movies11['detail'];?></p>
<?php }?>
</div>
<!-- 底部版权 -->
<div class='footer'>
<p class='copyright'><?php echo $copyright;?>©版权所有</p>
</div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.w-100{
width: 80px;
}
.h-500{
height: 500px;
}
.bgc-r{
background-color: red;
}
.bgc-y{
background-color:rgb(243,242,247);
}
***g{
width: 50px;
height: 50px;
border-radius: 100%;
}
.m-0{
margin: 0px;
}
.p-0{
padding: 0px;
}
.f-l{
float:left;
}
.f-r{
float:right;
margin-right: 10px;
}
.pinglin{
overflow: hidden;
}
.pinglunnr{
margin-top:50px;
}
.f-s-1{
font-size: 13px;
}
.header {
/*头部*/
background-color: brown;
/*背景颜色*/
height: 30px;
/*高度30像素*/
}
.nav li {
/*导航下面的列表*/
list-style: none;
/*取消列表前的标点*/
min-width: 80px;
/*最小宽度80像素*/
line-height: 30px;
/*行间距*/
float: left;
/*左浮动*/
}
.nav li a {
/*导航下的列表下的A链接*/
text-decoration: none;
/*文字装饰*/
color: white;
/*颜色白色*/
}
.nav {
/*导航*/
overflow: hidden;
/*清除浮动*/
}
.footer {
/*底部*/
height: 30px;
background-color: #636363;
/*背景颜色为灰色*/
color: white;
/*字体颜色为白色*/
text-align: center;
/*文本内容居中*/
line-height: 30px;
/*行间距30px*/
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结: 基本上能看懂代码, 缺少的就是实际业务的重复性训练.
