HTML+CSS综合实训（二）
目标效果图：
仿制思路
1网页由一个大得div包裹，中间包括三个小div
<div class="box">
<div class="top"></div>
<div class="mid"></div>
<div class="bottom"></div>
</div>
2top由两张图片及一个列表俩input,ul通过display: inline-block改变元素属性与图片并排
<div class="nav">
<img src="./images/logo.png" alt="" id="img1">
<ul class="nav-u">
<li><div class="search"><input type="text" name="" id="" class="btn1"><input type="submit" class="btn2" /></div></li>
<li><a href="#">我的影视</a></li><span>|</span>
<li><a href="">观看记录</a></li>
</ul>
<img src="./images/headerpic.png" alt="" id="img2">
</div>
3mid分为左右两块------左边又分为三块div
<div class="mid-left">
<img src="./images/stxz.png" alt="" srcset="">
<p>类型：剧情 警匪 悬疑 时装</p><br>
<p>地区：香港</p><br>
<p>年代：2014</p><br>
<p>语言：汉语普通话</p><br>
<div class="phb">
<div class="remen">
<h5>热门排行榜</h5>
<a href="#">更多>></a>
</div>
<div class="zuixin">
<button class="btn1">最新</button>
<button class="btn2">最热</button>
</div>
<div class="top-10">
<ul class="list1">
<li><a href="">猩球觉醒</a><span>7.9</span></li>
<li><a href="">敢死队3</a><span>7.2</span></li>
<li><a href="">忍者神龟</a><span>8.6</span></li>
<li><a href="">美国队长2</a><span>7.8</span></li>
<li><a href="">驯龙高手2</a><span>8.7</span></li>
<li><a href="">分手大师</a><span>6.9</span></li>
<li><a href="">京城81号</a><span>6.4</span></li>
<li><a href="">老男孩之猛龙</a><span>7.8</span></li>
<li><a href="">后会无期</a><span>8.7</span></li>
<li><a href="">冰封：重生之</a><span>5.3</span></li>
</ul>
</div>
<div class="share ">
<div class="zhuanti">
<h5>专题推荐</h5>
</div>
<div class="tv">
<button class="btn1">电视剧</button>
<button class="btn2">动漫</button>
<button class="btn3">综艺</button>
<button class="btn4">明星</button>
</div>
<div class="tap">
<ul class="list2">
<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>
</ul>
</div>
</div>
</div>
</div>
右边分为四块div
<div class="mid-right">
<div class="jianjie">
<div class="title"><h2>使徒行者</h2><span class="span2">点赞</span><span class="span1">加入剧集</span></div>
<span class="shao">主演：</span><p class="jie">苗侨伟 余诗曼 林峯 陈敏之 许绍雄</p>
<span class="shao">提示：</span><p class="jie">每周二至周六更新一集</p>
<span class="shao">看点：</span><p class="jie">阴谋 真相 惊险</p>
<span class="shao">简介：</span><pre class="jie">CIB总督察卓凯的好兄弟离奇死亡，卓凯在调查案件中竟发现好兄弟负责的五名卧底全部失去联络。卓凯成功接触其中一名失踪卧底
丁小嘉。丁小嘉毅然答应混入黑帮之中，助卓凯寻找其他失踪卧底。丁小嘉在帮会中认识双花红棍薛家强，丁小嘉为了从中得到情
报，千方百计接近薛家强，二人发展出一段建立在谎言,亦幻似真的感情。</pre>
<table class="juji">
<tr>
<td><input type="button" value="1集"></td>
<td><input type="button" value="2集"></td>
<td><input type="button" value="3集"></td>
<td><input type="button" value="4集"></td>
<td><input type="button" value="5集"></td>
<td><input type="button" value="6集"></td>
<td><input type="button" value="7集"></td>
<td><input type="button" value="8集"></td>
<td><input type="button" value="9集"></td>
</tr>
<tr>
<td><input type="button" value="10集"></td>
<td><input type="button" value="11集"></td>
<td><input type="button" value="12集"></td>
<td><input type="button" value="13集"></td>
<td><input type="button" value="14集"></td>
<td><input type="button" value="15集"></td>
<td><input type="button" value="16集"></td>
<td><input type="button" value="17集"></td>
<td><input type="button" value="18集"></td>
</tr>
<tr>
<td><input type="button" value="19集"></td>
<td><input type="button" value="20集"></td>
<td><input type="button" value="21集"></td>
<td><input type="button" value="22集"></td>
</tr>
</table>
</div>
<div class="juqin">
<div class="d1">分集剧情</div>
<div class="sm-box1">
<div class="lianjie"><a href="" class="a1">使徒行者第22集[立刻播放]</a></div>
<div class="jq22"><p>小嘉发现常到足浴店休息的欢喜收到神秘人来电后，便神色紧张地离开；小嘉从后追踪，见欢喜登上了七人车。欢喜受压，只好自带领手下向村民们施压收地，想不到看见村中小孩时动摇了决心。小嘉及家强假扮登山者游说村民，但却功亏一篑。在卓凯的上司兼师傅学华的安排下，卓凯终能开始安排恢复众卧底警员的身<a href="" class="a2">...查看全部>></a></div>
</div>
<div class="sm-box2">
<div class="lianjie"><a href="" class="a1">使徒行者第21集[立刻播放]</a></div>
<div class="jq21"><p>卓凯车上发现尸体，欢喜自从失去儿子后，便再不沾手社团的事务，并经常到小嘉的沐足店休息。有天，欢喜收到一个神秘人的来电后，便神色慌张地离开沐足店。欢喜匆忙地登上了一架七人车与神秘人见面，而此事亦被从后跟踪的小嘉看在眼内。她发现欢喜对神秘人必恭必敬的态度，心中亦不禁对神秘人的身份感到好奇。<a href="" class="a2">...查看全部>></a></div>
</div>
<div class="sm-box3">
<div class="lianjie"><a href="" class="a1">使徒行者第20集[立刻播放]</a></div>
<div class="jq20"><p>在归家途上，小嘉趁醉意向家强表白心中爱意;羡晴自从开始工作后便经常与卓凯见面，两人关系愈见深厚。富豪宋彦廷在木荣的泊车地盘遇上车内盗窃，木荣成功寻回失物令彦廷对他留下了印象。美贤跟踪任务时失踪后，兆良却未有派员寻找;卓凯等人自行搜查时，兆良竟带同全副武装警员前往小嘉等众卧底的藏身处。<a href="" class="a2">...查看全部>></a></div>
</div>
<a href="" class="more">更多分集剧情>></a>
</div>
<div class="write">
<h3>《使徒行者》怎么样？写出你的想法</h3>
<textarea name="" id="" cols="30" rows="10" placeholder="在这里输入......"></textarea>
<input type="submit" value="发表评论" class="fb">
</div>
<div class="others">
<h4>查看全部评论</h4>
<div class="o1">
<img src="./images/face1.png" alt="" class="yp"><div class="huifu1">陈蒙 1天前发表<br>好看<br><img src="./images/playbtn2.png" alt=""><a href="" class="a-huifu">回复（0）</a></div>
</div>
<div class="o1">
<img src="./images/face2.png" alt="" class="yp"><div class="huifu1">游客 1天前发表<br>更新太慢不够看啊<br><img src="./images/playbtn2.png" alt=""><a href="" class="a-huifu">回复（0）</a></div>
</div>
<div class="o1">
<img src="./images/face2.png" alt="" class="yp"><div class="huifu1">游客 1天前发表<br>更新太慢<br><img src="./images/playbtn2.png" alt=""><a href="" class="a-huifu">回复（0）</a></div>
</div>
<div class="o1">
<img src="./images/face3.png" alt="" class="yp"><div class="huifu1">游客 1天前发表<br>更新的能再慢点吗？<br><img src="./images/playbtn2.png" alt=""><a href="" class="a-huifu">回复（0）</a></div>
</div>
<div class="o1">
<img src="./images/face4.png" alt="" class="yp"><div class="huifu1">吖梅 1天前发表<br>最后一个卧底应该是木荣<br><img src="./images/playbtn2.png" alt=""><a href="" class="a-huifu">回复（0）</a></div>
</div>
</div>
</div>
</div>
尾部由一个span和一个列表结束
<div class="botton">
<div class="button-foot">
<ul>
<span class="span3">友情链接：</span>
<li><a href="#">优酷</a></li>
<li><a href="#">搜狐</a></li>
<li><a href="#">土豆</a></li>
<li><a href="#">PPTV</a></li>
<li><a href="#">迅雷</a></li>
<li><a href="#">乐视</a></li>
<li><a href="#">新浪</a></li>
<li><a href="#">爱奇艺</a></li>
</ul>
</div>
<span class="span4">Copyright©1998-2014版权所有 违者必纠</span>
</div>
</div>
css部分
*{
padding: 0;
margin: 0;
}
.top{
height: 90px;
}
.nav{
width: 1000px;
height: 90px;
margin: 0 auto;
}
.top ul{
display: inline-block;
}
.search{
width: 370px;
height: 90px;
line-height: 90px;
}
.btn1{
width: 300px;
height: 30px;
border: 2px solid #3a9b0d;
box-sizing: border-box;
line-height: 90px;
float: left;
margin-top: 30px;
}
.btn2{
width: 70px;
height: 30px;
background-color: #3a9b0d;
border: none;
box-sizing: border-box;
line-height: 30px;
float: left;
color:white;
margin-top: 30px;
}
.nav-u{
line-height: 90px;
}
.nav-u li{
float: left;
list-style: none;
font-size: 10px;
margin-left: 10px;
margin-right: 10px;
}
.nav #img1{
width: 220px;
height: 60px;
margin-bottom: 15px;
}
.nav #img2{
width: 200px;
height: 70px;
}
span{
float: left;
}
.nav li a{
text-decoration: none;
color: aqua;
}
/* mid-left list部分*/
.mid{
width: 1000px;
height: 1550px;
margin: 0 auto;
}
.mid-left img{
width: 200px;
height: 260px;
}
.mid-left p{
font-size: 12px;
line-height: 10px;
}
.mid-left{
width: 200px;
height: 1000px;
float: left;
}
.phd{
width: 200px;
height: 340px;
margin-top: 20px;
}
.remen{
background-color: #f5f5f5;
height: 30px;
width: 200px;
border: 1px solid #d8d8d8;
box-sizing: border-box;
}
.remen h5{
float: left;
margin-left: 10px;
line-height: 30px;
}
.remen a{
float: right;
text-decoration: none;
font-size: 10px;
color: steelblue;
margin-right: 10px;
line-height: 30px;
}
.zuixin{
width: 200px;
height:30px;
background-color: #f5f5f5;
border: 1px solid #d8d8d8;
box-sizing: border-box;
}
.zuixin .btn1{
width: 50px;
height: 25px;
background-color: #ffffff;
border-top: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
border-bottom: none;
color: #000;
font-size: 10px;
margin: 0;
float: left;
line-height: 25px;
box-sizing: border-box;
margin-top: 4px;
margin-left: 4px;
font-weight: bold;
}
.zuixin .btn2{
width: 50px;
height: 25px;
background-color: #f5f5f5;
border-bottom: 1px solid #d8d8d8;
color: #000;
font-size: 10px;
margin: 0;
float: left;
box-sizing: border-box;
margin-top: 4px;
line-height: 25px;
}
.list1{
height: 280px;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
border-top: none;
box-sizing: border-box;
}
.list1 li span{
float: right;
margin-right: 20px;
color: orange;
}
.list1 li a{
text-decoration: none;
color: #497391;
}
.top-10 ul {
counter-reset: section;
}
.top-10 li {
float: left;
width: 200px;
line-height: 22px;
height: 22px;
overflow: hidden;
color: #525C66;
font-size: 10px;
margin: 2px 10px;
}
.top-10 li:before {
counter-increment: section;
content: counter(section);
display: inline-block;
padding: 0 5px;
margin-right: 5px;
height: 18px;
line-height: 18px;
background: #b8c2cc;
color: #fff;
border-radius: 3px;
font-size: 9px
}
.top-10 li:nth-child(1):before {
background: red
}
.top-10 li:nth-child(2):before {
background: orange
}
.top-10 li:nth-child(3):before {
background: gold
}
.share{
width: 200px;
height: 340px;
margin-top: 20px;
}
.zhuanti{
background-color: #f5f5f5;
height: 30px;
width: 200px;
border: 1px solid #d8d8d8;
box-sizing: border-box;
}
.zhuanti h5{
float: left;
margin-left: 10px;
line-height: 30px;
}
.tv{
width: 200px;
height:30px;
background-color: #f5f5f5;
border: 1px solid #d8d8d8;
box-sizing: border-box;
}
.tv .btn1{
width: 45px;
height: 25px;
background-color: #ffffff;
border-top: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
border-bottom: none;
color: #000;
font-size: 10px;
margin: 0;
float: left;
line-height: 25px;
box-sizing: border-box;
margin-top: 4px;
margin-left: 4px;
font-weight: bold;
}
.tv .btn2{
width: 45px;
height: 25px;
background-color: #f5f5f5;
border-bottom: 1px solid #d8d8d8;
border-top: none;
border-bottom: none;
border-right: none;
color: #000;
font-size: 10px;
margin: 0;
float: left;
box-sizing: border-box;
margin-top: 3px;
line-height: 25px;
}
.tv .btn3{
width: 45px;
height: 25px;
background-color: #f5f5f5;
border-left: 1px solid #d8d8d8;
border-top: none;
border-bottom: none;
border-right: none;
color: #000;
font-size: 10px;
margin: 0;
float: left;
box-sizing: border-box;
margin-top: 3px;
line-height: 25px;
}
.tv .btn4{
width: 45px;
height: 25px;
background-color: #f5f5f5;
border-left: 1px solid #d8d8d8;
border-top: none;
border-bottom: none;
border-right: none;
color: #000;
font-size: 10px;
margin: 0;
float: left;
box-sizing: border-box;
margin-top: 3px;
line-height: 25px;
}
.list2{
height: 280px;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
border-top: none;
box-sizing: border-box;
}
.list2 li a{
text-decoration: none;
color: #497391;
}
.list2 li{
list-style: none;
float: left;
width: 200px;
line-height: 22px;
height: 22px;
overflow: hidden;
color: #525C66;
font-size: 10px;
margin: 2px 10px;
}
/* .mid-right */
.mid-right{
width: 750px;
height: 1500px;
float: right;
}
.jianjie{
width: 750px;
height: 350px;
padding: 10px 0;
box-sizing: border-box;
}
h2{
display: inline-block;
}
.title{
height: 30px;
width: 750px;
}
.span1{
background-color: blue;
color: white;
font-size: 12px;
float: right;
padding: 7px 10px;
border-radius: 3px;
margin-right: 30px;
}
.span2{
background-color: orange;
color: white;
font-size: 12px;
float: right;
padding: 7px 10px;
border-radius: 3px;
margin-right: 415px;
}
.jie{
font-size: 6px;
line-height: 20px;
}
.shao{
font-size: 6px;
line-height: 20px;
color: #7b7b7b;
}
.juji input{
width: 64px;
height: 32px;
border: 1px solid #ccc;
color: purple ;
border-radius: 3px;
margin-left:10px;
margin-top: 10px;
}
.juqin{
width: 750px;
height: 500px;
margin: 5px;
box-sizing: border-box;
}
.d1{
width: 100px;
height: 30px;
border: 1px solid #e2e2e2;
box-sizing: border-box;
background-color: #f5f5f5;
font-weight: bold;
font-size: 14px;
line-height: 30px;
text-align: center;
margin: 5px;
box-sizing: border-box;
}
.sm-box1,.sm-box2,.sm-box3{
height: 130px;
}
.lianjie{
height: 30px;
background-color: #f5f5f5;
}
.jq20,.jq21,.jq22{
height: 100px;
}
.juqin .a1{
text-decoration: none;
color: darkcyan;
line-height: 30px;
font-size: 12px;
font-weight: bold;
}
.juqin .a2{
text-decoration: none;
color: darkcyan;
line-height: 30px;
font-size: 12px;
}
.juqin p{
font-size: 12px;
line-height: 30px;
}
.more{
text-decoration: none;
color: darkcyan;
line-height: 30px;
font-size: 16px;
float: right;
}
.write{
width: 700px;
height: 200px;
}
textarea{
width: 700px;
height: 110px;
}
.fb{
width: 90px;
height: 30px;
background-color:#2285ea;
color: white;
border: none;
float: right;
margin-top: 20px;
}
.others{
width: 750px;
height: 500px;
}
h4{
color: #184fa9;
}
.yp{
float: left;
margin: 10px;
}
.huifu1{
float: left;
font-size: 12px;
line-height: 25px;
}
.a-huifu{
color: #184fa9;
text-decoration: none;
}
.o1{
width: 760px;
height: 90px;
border-bottom: 1px solid #e4e4e4;
}
.buttom{
height: 120px;
background-color: #e5dfdf;
}
.button-foot{
height: 80px;
width: 450px;
margin: 0 auto;
}
.button-foot ul li a{
text-decoration: none;
}
.button-foot ul li{
list-style: none;
float: left;
line-height: 80px;
margin-top: 10px;
margin-right: 20px;
font-size: 12px;
color: #184fa9;
}
.span3{
line-height: 80px;
margin-top: 10px;
font-size: 14px;
}
.span4{
line-height: 20px;
font-size: 12px;
display: block;
width: 100%;
text-align: center;
}
做出来效果图
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
