您的位置：首页 > Web前端 > HTML

html文字旋转,放大,浏览器变小时右边的图片移动到下面

2017-11-30 19:19 375 查看

代码实现的效果有文字鼠标悬停旋转360度,标题背景放大,变色,文字变色,浏览器变小时右边的图片移动到下面显示

.bigdiv{width: 1000px; height: 600px; margin: auto;}

.head{width: 1000px; height: 130px; background-color: #AAAC90; position: relative;}

.body{width: 1000px; height: 470px;}

.title{width: 550px; height: 35px; background-color: #6495ED; position: absolute; left: 5px; top: 95px;}

.title:hover{background-color: red; transform: scale(1.2);}

.p1{font-size: 32px; margin-left: 80px; color: brown; float: left; margin-top: 15px;}

.p1:hover{ //文字旋转360度

-webkit-transform: rotateZ(360deg);

}

.p1{ //文字的背景大小,边框角度,播放速度

-webkit-background-size: 220px 220px;

-webkit-border-radius: 110px;

-webkit-transition: -webkit-transform 2s ease-out;

}

.p2{font-size: 18px; float: left; margin-top: 40px; margin-left: 10px;}

li{float: left; margin-left: 10px; font-size: 13px; color: white; list-style: none;}

li:hover{color: yellow;}

.b1{width: 680px; height: 470px; float: left;}

.b2{width: 320px; height: 470px; float: right;}

.text{font-size: 12px; line-height: 27px; margin-left: 60px; margin-right: 40px;}

.imgdiv{width: 260px; height: 440px; background-color: #000000; border-radius: 20px; margin-top: 15px;}

//当浏览器变小时右边的图片移动到下面显示
@media screen and (max-width: 1000px){  //max-width:最外面div的宽度
.bigdiv{  //最外面的div
width: 100%;
}
}
@media screen and (max-width: 680px){   //max-width:浏览器缩放的宽度为680时,右边的东西开始移动到下面
.b1{  //左边的div
width: 100%;
float: none;
}
.b2{ //右边的div
width: 100%;
float: none;
}
}

</head>
<body>
<div class="bigdiv">
<div class="head">
<p class="p1">散文集</p>
<span class="p2">朱自清</span>
<div class="title">
<ul class="t1">
<li>作者生平  |</li>
<li>故事背景  |</li>
<li>词语注释  |</li>
<li>作品手法欣赏  |</li>
<li>上一篇文章  |</li>
<li>下一篇文章</li>
</ul>
</div>
</div>
<div class="body">
<div class="b1">
<h5 style="margin-left: 60px;">荷塘月色(节选)</h5>
<p class="text">　　这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了;妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。 <br />
　　沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。<br />
　　路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。<br />
　　<span style="font-size: 30px; background-color:#89BAFF;">曲</span>曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色;而叶子却更见风致了。</p>
</div>
<div class="b2">
<div class="imgdiv">
<img style="width: 240px; height: 240px; margin-left: 10px; margin-top: 10px;" src="../img/10zhou/zhou1.png"/><br /><br />
<span style="color: white; line-height: 30px;">
　　朱自清（1898年11月22日—1948年8月12日），原名自华，号秋实，后改名自清，字佩弦。中国现代散文家、诗人、学者、民主战士
</span>
</div>
</div>
</div>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航