浮动之电视剧详情页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>电视剧详情页面</title><link href="css/Page_232_3.css" rel="stylesheet" type="text/css"  /></head><body><div class="container"><!--明星荐片--><div class="top"><h1>明星荐片</h1></div><!--电影详情--><div class="middle"><img src="img/3.gif"  /><!--电视剧详情--><ul><li><h3>周秀娜荐片:让子弹飞</h3></li><li>导演：姜文</li><li>主演：姜文 周润发 葛优</li><li>点评：我最喜欢的要算《让子弹飞》<br />了,超喜欢...[详情]</li></ul></div><!--电视剧列表--><div class="bottom"><ul><li><a href="#">《巴别塔》：好的故事引人深思<span>阿朵</span></a></li><li><a href="#">《洛杉矶之战》：外星人那么弱智？<span>丁子俊</span></a></li><li><a href="#">《让子弹飞》：武侠里也可以有爱情<span>周秀娜</span></a></li><li><a href="#">《剑雨》：好的故事引人深思<span>叶年生</span></a></li><li><a href="#">《春风沉醉的夜晚》：非常真实<span>如小果</span></a></li><li><a href="#">《克洛伊》：故事简单却细致<span>刘若英</span></a></li></ul></div></div></body>
</html>//CSS样式
body{background: pink;
}
.container{/*border:1px solid red;*/background: white;width: 360px;margin: 0px auto;
}
.top,.middle,.bottom{margin: 0px auto;
}
.top{width: 350px;border:1px solid #e0e0e8;background: url(../img/1.gif) 10px 12px no-repeat;}
.top h1{font-size: 14px;padding-left: 45px;
}
.middle{width: 350px;/*border: 1px dashed gray;*/overflow: hidden;/*line-height: 142px;*/}
.middle img{display: block;float: left;margin-top:9px;padding: 2px;border: 1px solid #e0e0e8;
}
.middle ul{list-style: none;float: left;/*padding-top: 14px;*/padding-left: 4px;margin-top: 16px;margin-bottom: 30px;}
.middle ul li h3{color: black;
}
.bottom{/*border: 1px dashed gray;*/width: 350px;
}.bottom ul{list-style: none;/*float: left;*/padding: 0px;
}.bottom ul li{width: 350px;line-height: 20px;
}
.bottom ul li span{float: right;
}
li{color: #666666;font-size: 12px;
}
a{text-decoration: none;color:#666666 ;
}
a:hover{color: red;
}

浮动之电视剧详情页面相关推荐

Django博客系统(详情页面展示)
1. 页面展示 1.在home.views.py文件中定义视图 from django.views import Viewclass DetailView(View):def get(self,req ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
Xamarin.FormsShell基础教程（6）Shell项目内容详情页面
Xamarin.FormsShell基础教程(6)Shell项目内容详情页面轻拍内容列表页面中的任意一项内容后,进入内容详情页面,如图1.6和图1.7所示.该页面中显示了内容项的标题和具体内容.该页 ...
实战SSM_O2O商铺_43【前端展示】店铺详情页面从后端到前端的实现
文章目录概述 Dao层 Service层 Controller层 View层 shopdetail.html shopdetail.js shopdetail.css 联调商品详情待开发 Gith ...
（仿头条APP项目）8.新闻详情页面实现和butterknife插件使用
文章目录 butterknife插件使用导入依赖下载插件使用新闻详情页面显示效果图实现思路具体实现布局数据库添加收藏表新闻详情页面具体业务逻辑实现详情页面跳转效果图具体实现步 ...
最后一个页面：构建电影详情页面
笔记内容:最后一个页面:构建电影详情页面笔记日期:2018-02-02 电影搜索页面构建我们想要有一个搜索电影的功能,需要在电影资讯页面顶部编写一个搜索框,当我们的鼠标焦点位于该搜索框时,就会显示 ...
ionic：点击某个商品名称，跳转到相应的商品详情页面
实例: 在采购单审批页面(procurement),点击"商品名称"字段,跳到新的商品信息(goods-details)的详情页,其中商品信息通过点击的商品名称的id来查到: 首先 ...
全智通A+常见问题汇总解答—A+修正维修详情页面打印派工清单和领料清单按钮无效
问题描述:1.操作步骤:维修管理页面选择一张维修单点击详情,在详情页面点击打印派工清单和领料清单 2.页面其他情况显示:按F12时,页面报错: 3.该车辆在维修登记页面显示的结算公式在档案模块的结算公 ...
【Ruby on Rails全栈课程】4.3 评论功能实现（二）--创建帖子详情页面
1.完善样式,用来显示帖子详情以及评论信息等,编辑app/assets/stylesheets/posts.scss文件,在原有代码下面添加代码: .head {font-size: 18px;fon ...

浮动之电视剧详情页面

浮动之电视剧详情页面相关推荐

最新文章

热门文章