【世界顶级纯音乐 003】送大家！ - 第2页 - 欢乐水吧 - 花潮论坛

加林森 发表于 2022-1-27 10:45

本帖最后由加林森于 2022-3-15 20:40 编辑 <br /><br />马黑黑发表于 2022-1-27 10:15
对对对
{:4_181:}

<style type="text/css">
/* 背景图层 */
#mama {
margin: auto;
position: relative;
width: 760px;
height: 560px;
background: #000 url('https://pic.imgdb.cn/item/6230887b5baa1a80ab73884b.jpg') no-repeat center/cover;
background-position: 0 0;
backdrop-filter: blur(1px);
animation: chgBgd 1s ease infinite alternate;
}
/* 图片层 */
#sImg {
position: absolute;
left: 550px;
top: 32px;
width: 200px;
height: 200px;
border-radius: 50%;
opacity: 0.8;
filter: blur(2px);
}
/* 图片层鼠标滑过 */
#sImg:hover {
cursor: pointer;
filter: blur(0)brightness(110%);
transform: rotate(180deg);
}
/* 文本层 */
#txtC {
position: absolute;
width: 282px;
height: 20px;
line-height: 100px;
left: 20px;
top: 20px;
font-family: Arial;
font-size: 2em;
color: #eee;
text-align: center;
text-shadow: 1px 1px 1px #ffcc00, 2px 2px 2px #aaa;
background: rgba(255, 255, 255,.1);
animation: chgColor 1s ease-in-out infinite alternate;
}
/* 文本层iframe元素 */
#txtC iframe {
position: absolute;
left: -10px;
top: -10px;
border: none;
opacity: .9;
}
/* 文本层鼠标滑过 */
#txtC:hover {
cursor: pointer;
filter: brightness(120%);
}
/* 文本层变色 */
@keyframes chgColor{
0% { color: navy; }
20% { color: green; }
40% { color: red; }
60% { color: white; }
80% { color: olive; }
100% { color: tomato; }
}

@keyframes chgBgd {
to { background-position: -15px 0; }
}

</style>

<div id="mama">
<div id="txtC"> 箫、笛子独奏：戴亚</div>
<img id="sImg" alt="" src="https://pic.imgdb.cn/item/623068bc5baa1a80ab663103.jpg" />
</div>

<script>

var wy = document.createElement('iframe');
wy.src = "https://music.163.com/outchain/player?type=2&id=159339&auto=1&height=32";
document.getElementById('txtC').appendChild(wy);

</script>

马黑黑 发表于 2022-1-27 11:25

加林森发表于 2022-1-27 10:45

{:4_190:}

加林森 发表于 2022-1-27 11:39

本帖最后由加林森于 2022-3-15 17:41 编辑 <br /><br />马黑黑发表于 2022-1-27 11:25

{:4_191:}

<table style="left: 0px; top: 20px; width: 1000px; position: relative;" border="0" cellspacing="0" cellpadding="0" width="1000" height="5799">
<tbody>
   <tr class="firstRow">
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_1.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_2.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_3.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_4.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_5.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_6.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_7.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_8.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_9.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_10.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_11.jpg" width="500" height="579">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_12.jpg" width="500" height="579">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_13.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_14.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_15.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_16.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_17.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_18.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_19.jpg" width="500" height="580">
         </td>
         <td>
            <img alt="" src="http://image67.360doc.com/DownloadImg/2013/12/2920/37865477_20.jpg" width="500" height="580">
         </td>
   </tr>
   <tr>
         <td colspan="2">
            <embed style="left: 0px; top: 0px; width: 700px; height: 460px; position: absolute;" height="360" type="application/x-shockwave-flash" align="right" width="600" src="http://www.cctv118.com/yxxy/jungeyh/xslhk/cctv118/018.swf" wmode="transparent"><embed style="left: 450px; top: 280px; width: 150px; height: 150px; position: absolute;" height="360" type="application/x-shockwave-flash" align="right" width="600" src="http://www.cctv118.com/yxxy/jungeyh/xslhk/cctv118/一朵荷.swf" wmode="transparent"><embed style="left: 845px; top: 0px; width: 100px; height: 160px; position: absolute;" height="160" type="application/x-shockwave-flash" align="right" width="100" src="http://www.cctv118.com/yxxy/jungeyh/xslhk/cctv118/优透会员奖.swf" wmode="transparent">
            <div style="left: 200px; top: 570px; width: 700px; height: 460px; position: absolute;">
               <span style=""><span style="color:#1414ff"><span style="font-size: 16pt;">方法一：</span></span><br><br><span style="color:#1414ff"><span style="font-size: 16pt;">在表格的单元格中放入若干个图片，在表格的一套尾标签的下面粘贴要添加的若干个图片或者动画图片的标签，每个图片或者动画图片标签中都要设置scc的绝对定位样式。 </span></span><br><span style="color:#1414ff"><span style="font-size: 16pt;">如果要添加的内容是文字，则要把文字用块区标签包裹起来。块区标签中要设置scc的绝对定位样式。用这种添加方法，添加的内容的定位参考点是页面的左上角。</span></span><br><br><br></span>
            </div>
            <div style="left: 200px; top: 1550px; width: 700px; height: 460px; position: absolute;">
               <span style="color: rgb(20, 20, 255);font-size: 21px;">方法二：<br><br>在表格的单元格中放入若干个图片，在表格的一套尾标签的上面添加一段代码：<tr><td></td></tr>，在<td>与</td>之间粘贴若干个有dcc定位样式的图片标签或者动画图片标签。如果表格是多列的表格，一行中要合并为一个单元格。如果添加的内容是文字，则要把css的定位样式设置到块区标签中。例如：<div style="LEFT: 200px; WIDTH: 700px; POSITION: absolute; TOP: 600px; HEIGHT: 460px"></span>
            </div>
         </td>
   </tr>
</tbody>
</table>

页: 1 [2]

花潮论坛's Archiver