<head>
<meta charset="UTF-8">
<title></title>
<style>
.bigdiv{width: 1050px; height: 560px; margin: auto;}
.nav{width: 1050px; height: 40px; background-color:red;}
.banner{width: 1050px; height: 60px;}
.body{width: 1050px; height: 450px;}
.bleft{width: 200px; height: 40px; float: left;}
.bright{width: 300px; height: 40px; float: right;}
.zuo{width: 335px; height: 450px; float: left;}
.zhong{width: 335px; height: 450px; float: left; margin-left: 20px;}
.you{width: 335px; height: 450px; float: right;}
.top{margin: 0px; padding: 0px; margin-left: 30px; list-style: none;}
.top li{margin-top: 10px; float: left; margin-left: 35px; color:white;}
.top li:hover{color: yellow; transform: scale(1.2);}
.title{font-size: 23px; font-weight: bold; color: red; position: absolute;}
.bannerleft{margin: 0px; padding: 0px; margin-left: 30px; list-style: none;}
.bannerleft li{margin-top: 10px; float: left; margin-left: 10px;}
.bigdiv{
width: 100%;
}
}
@media screen and (max-width: 800px) {
.you{
width: 100%;
float: none;
}
}
.imgs:hover{
transform: scale(1.5);
}
.imgs{
transition: transform 2s;
}
.title:hover{ //文字旋转
transform: rotateZ(360deg);
}
.title{
transition: transform 2s;
}
</style>
<script> //点击图片显示播放按钮
function clickimg(){
var d=document.getElementById("a");
if(d.style.display=='none'){
d.style.display="block";
}else{
d.style.display="none";
}
}
</script>
</head>
<body>
<div class="bigdiv">
<div class="nav">
<ul class="top">
<li>头条</li>
<li>社会</li>
<li>军事</li>
<li>娱乐</li>
<li>国际</li>
<li>国内</li>
<li>健康</li>
<li>体育</li>
<li>图片</li>
<li>汽车</li>
<li>科技</li>
<li>财政</li>
<li>星座</li>
<li>更多</li>
</ul>
</div>
<div class="banner">
<hr style="width: 1050px; height: 2px; background-color: #000000;" />
<div class="bleft">
<span class="title">娱乐</span>
<span style="color: gray; font-size: 13px; margin-left: 50px;">ENTERTAINMENT</span>
</div>
<div class="bright">
<ul class="bannerleft">
<li>电视</li>
<li>|</li>
<li>电影</li>
<li>|</li>
<li>综艺</li>
<li>|</li>
<li>八卦</li>
<li>更多</li>
</ul>
</div>
<hr style="width: 1050px; background-color:gainsboro;" />
</div>
<div class="body">
<div class="zuo">
<div style="width: 335px; height: 220px;">
<img class="imgs" style="width: 335px;" src="../img/模拟一/lc.jpg" />
<span style="margin-left: 20px;">《猎场》火了,深圳市一位市民的电话也</span>
</div>
<ul>
<li style="font-size: 18px; font-weight: bold; margin-top: 30px;">父亲比肩李嘉诚，自己美貌不输范</li>
<li style="font-size: 13px; line-height: 22px; margin-top: 10px;">“紫薇”海陆获清新女艺人奖，33岁她穿长裙秀长</li>
<li style="font-size: 13px; line-height: 25px;">王心凌出席活动，整容失败满脸褶皱显老态，甜心</li>
<li style="font-size: 13px; line-height: 25px;">谢天谢地！我们曾遇到最好的歌，一听就是一辈</li>
<li style="font-size: 13px; line-height: 25px;">郭碧婷裹披肩口罩遮面现身机场美丽动人，网友：</li>
</ul>
</div>
<div class="zhong">
<ul>
<li style="font-size: 18px; font-weight: bold;">谁说TVB电视剧已经没有看头了，</li>
<li style="font-size: 13px; line-height: 22px; margin-top: 10px;">63岁成龙和54岁李连杰的最大差距，9岁之差，看</li>
<li style="font-size: 13px; line-height: 25px;">【图】宋仲基个人资料一览 颜值演技并存的实力派</li>
<li style="font-size: 13px; line-height: 25px;">日系的帅哥是这个地球新生代高颜值物种</li>
<li style="font-size: 13px; line-height: 25px;">南师附中校园科技节！中学生体验人才招聘会</li>
<li style="font-size: 13px; line-height: 25px;">甄嬛传》中小丫鬟？比赵薇还“学霸”， 章子怡是</li>
</ul>
<ul style="margin-top: 30px;">
<li style="font-size: 18px; font-weight: bold;">欧阳娜娜亲下厨 一盘蛋炒饭几乎看不到饭粒了</li>
<li style="font-size: 13px; line-height: 22px; margin-top: 10px;">周星驰出名的敬业，但《食神》这个镜头，还真是</li>
<li style="font-size: 13px; line-height: 25px;">46岁小虎队陈志朋放飞自我!雷人造型有点“作妖”</li>
<li style="font-size: 13px; line-height: 25px;">当红小生出道前后对比，鹿晗杨洋马天宇气质蜕</li>
<li style="font-size: 13px; line-height: 25px;">27岁林允儿出席活动大秀好身材，网友：受不了这</li>
<li style="font-size: 13px; line-height: 25px;">史上最帅的平头男主，范世琦力压小美好江辰，变</li>
</ul>
</div>
<div class="you">
<span class="sp" style="font-size: 22px; font-weight: bold;">八方<span style="color: red; font-style: oblique;">爆料</span></span>
<div style="width: 335px; height: 140px; margin-top: 10px;">
<div style="width: 160px; height: 140px; float: left;">
<img class="img" οnmοuseοver="clickimg()" style="width: 160px; height: 80px; position: relative;" src="../img/模拟一/lst1.jpg" />
<img id="a" style="width: 30px; height: 30px; display:block; position: absolute; left: 820px; top: 180px;" src="../img/abc.png"/>
<span>《至暗时刻》乔赖特强硬魄力!丘吉尔坚信人</span>
</div>
<div style="width: 160px; height: 140px; float: right;">
<img style="width: 160px; height: 80px;" src="../img/模拟一/lit2.jpg" />
<span>网友广州偶遇周杰伦昆凌做活动,但周董明显</span>
</div>
<hr style="border: 1px dashed #AAAC90;width: 335px; height: 1px;" />
<div style="width: 335px; height: 80px; margin-top: 20px;">
<div style="width: 175px; height: 80px; float: left;">
<span>老婆你饿啦?我杀个人给你吃!这部丧尸片很牛逼了</span>
</div>
<div style="width: 150px; height: 80px; float: right;">
<img style="float: right; width: 150px; height: 80px;" src="../img/模拟一/a1.jpg" />
</div>
</div>
<div style="width: 335px; height: 80px; margin-top: 16px;">
<div style="width: 175px; height: 80px; float: left;">
<span>国际泳联年度颁奖盛典欢迎晚宴在三亚举行恰逢游泳冠军孙杨生日</span>
</div>
<img style="float: right; width: 150px; height: 80px;" src="../img/模拟一/a2.jpg" />
</div>
</div>
</div>
</div>
</div>
</body>
<meta charset="UTF-8">
<title></title>
<style>
.bigdiv{width: 1050px; height: 560px; margin: auto;}
.nav{width: 1050px; height: 40px; background-color:red;}
.banner{width: 1050px; height: 60px;}
.body{width: 1050px; height: 450px;}
.bleft{width: 200px; height: 40px; float: left;}
.bright{width: 300px; height: 40px; float: right;}
.zuo{width: 335px; height: 450px; float: left;}
.zhong{width: 335px; height: 450px; float: left; margin-left: 20px;}
.you{width: 335px; height: 450px; float: right;}
.top{margin: 0px; padding: 0px; margin-left: 30px; list-style: none;}
.top li{margin-top: 10px; float: left; margin-left: 35px; color:white;}
.top li:hover{color: yellow; transform: scale(1.2);}
.title{font-size: 23px; font-weight: bold; color: red; position: absolute;}
.bannerleft{margin: 0px; padding: 0px; margin-left: 30px; list-style: none;}
.bannerleft li{margin-top: 10px; float: left; margin-left: 10px;}
//浏览器缩小,右边布局显示到下面
@media screen and (max-width: 1050px) {.bigdiv{
width: 100%;
}
}
@media screen and (max-width: 800px) {
.you{
width: 100%;
float: none;
}
}
.imgs:hover{
transform: scale(1.5);
}
.imgs{
transition: transform 2s;
}
.title:hover{ //文字旋转
transform: rotateZ(360deg);
}
.title{
transition: transform 2s;
}
</style>
<script> //点击图片显示播放按钮
function clickimg(){
var d=document.getElementById("a");
if(d.style.display=='none'){
d.style.display="block";
}else{
d.style.display="none";
}
}
</script>
</head>
<body>
<div class="bigdiv">
<div class="nav">
<ul class="top">
<li>头条</li>
<li>社会</li>
<li>军事</li>
<li>娱乐</li>
<li>国际</li>
<li>国内</li>
<li>健康</li>
<li>体育</li>
<li>图片</li>
<li>汽车</li>
<li>科技</li>
<li>财政</li>
<li>星座</li>
<li>更多</li>
</ul>
</div>
<div class="banner">
<hr style="width: 1050px; height: 2px; background-color: #000000;" />
<div class="bleft">
<span class="title">娱乐</span>
<span style="color: gray; font-size: 13px; margin-left: 50px;">ENTERTAINMENT</span>
</div>
<div class="bright">
<ul class="bannerleft">
<li>电视</li>
<li>|</li>
<li>电影</li>
<li>|</li>
<li>综艺</li>
<li>|</li>
<li>八卦</li>
<li>更多</li>
</ul>
</div>
<hr style="width: 1050px; background-color:gainsboro;" />
</div>
<div class="body">
<div class="zuo">
<div style="width: 335px; height: 220px;">
<img class="imgs" style="width: 335px;" src="../img/模拟一/lc.jpg" />
<span style="margin-left: 20px;">《猎场》火了,深圳市一位市民的电话也</span>
</div>
<ul>
<li style="font-size: 18px; font-weight: bold; margin-top: 30px;">父亲比肩李嘉诚，自己美貌不输范</li>
<li style="font-size: 13px; line-height: 22px; margin-top: 10px;">“紫薇”海陆获清新女艺人奖，33岁她穿长裙秀长</li>
<li style="font-size: 13px; line-height: 25px;">王心凌出席活动，整容失败满脸褶皱显老态，甜心</li>
<li style="font-size: 13px; line-height: 25px;">谢天谢地！我们曾遇到最好的歌，一听就是一辈</li>
<li style="font-size: 13px; line-height: 25px;">郭碧婷裹披肩口罩遮面现身机场美丽动人，网友：</li>
</ul>
</div>
<div class="zhong">
<ul>
<li style="font-size: 18px; font-weight: bold;">谁说TVB电视剧已经没有看头了，</li>
<li style="font-size: 13px; line-height: 22px; margin-top: 10px;">63岁成龙和54岁李连杰的最大差距，9岁之差，看</li>
<li style="font-size: 13px; line-height: 25px;">【图】宋仲基个人资料一览 颜值演技并存的实力派</li>
<li style="font-size: 13px; line-height: 25px;">日系的帅哥是这个地球新生代高颜值物种</li>
<li style="font-size: 13px; line-height: 25px;">南师附中校园科技节！中学生体验人才招聘会</li>
<li style="font-size: 13px; line-height: 25px;">甄嬛传》中小丫鬟？比赵薇还“学霸”， 章子怡是</li>
</ul>
<ul style="margin-top: 30px;">
<li style="font-size: 18px; font-weight: bold;">欧阳娜娜亲下厨 一盘蛋炒饭几乎看不到饭粒了</li>
<li style="font-size: 13px; line-height: 22px; margin-top: 10px;">周星驰出名的敬业，但《食神》这个镜头，还真是</li>
<li style="font-size: 13px; line-height: 25px;">46岁小虎队陈志朋放飞自我!雷人造型有点“作妖”</li>
<li style="font-size: 13px; line-height: 25px;">当红小生出道前后对比，鹿晗杨洋马天宇气质蜕</li>
<li style="font-size: 13px; line-height: 25px;">27岁林允儿出席活动大秀好身材，网友：受不了这</li>
<li style="font-size: 13px; line-height: 25px;">史上最帅的平头男主，范世琦力压小美好江辰，变</li>
</ul>
</div>
<div class="you">
<span class="sp" style="font-size: 22px; font-weight: bold;">八方<span style="color: red; font-style: oblique;">爆料</span></span>
<div style="width: 335px; height: 140px; margin-top: 10px;">
<div style="width: 160px; height: 140px; float: left;">
<img class="img" οnmοuseοver="clickimg()" style="width: 160px; height: 80px; position: relative;" src="../img/模拟一/lst1.jpg" />
<img id="a" style="width: 30px; height: 30px; display:block; position: absolute; left: 820px; top: 180px;" src="../img/abc.png"/>
<span>《至暗时刻》乔赖特强硬魄力!丘吉尔坚信人</span>
</div>
<div style="width: 160px; height: 140px; float: right;">
<img style="width: 160px; height: 80px;" src="../img/模拟一/lit2.jpg" />
<span>网友广州偶遇周杰伦昆凌做活动,但周董明显</span>
</div>
<hr style="border: 1px dashed #AAAC90;width: 335px; height: 1px;" />
<div style="width: 335px; height: 80px; margin-top: 20px;">
<div style="width: 175px; height: 80px; float: left;">
<span>老婆你饿啦?我杀个人给你吃!这部丧尸片很牛逼了</span>
</div>
<div style="width: 150px; height: 80px; float: right;">
<img style="float: right; width: 150px; height: 80px;" src="../img/模拟一/a1.jpg" />
</div>
</div>
<div style="width: 335px; height: 80px; margin-top: 16px;">
<div style="width: 175px; height: 80px; float: left;">
<span>国际泳联年度颁奖盛典欢迎晚宴在三亚举行恰逢游泳冠军孙杨生日</span>
</div>
<img style="float: right; width: 150px; height: 80px;" src="../img/模拟一/a2.jpg" />
</div>
</div>
</div>
</div>
</div>
</body>
1312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
