套用黑黑先生的框学习下发代码贴的方法
本帖最后由 小文 于 2023-6-28 19:50 编辑 <br /><br /><p></p><style>#mydiv {
margin: 30px auto;
padding: 20px 10px;
width: 90%;
min-height: 400px;
border: 1px solid var(--fColor);
color: var(--fColor);
background: var(--bgMain);
position: relative;
pointer-events: none;
--bgMain: linear-gradient(snow,lightgreen,snow);
--bgTitle: lightgreen;
--fColor: black;
--btnWidth: 40px;
--state: paused;
}
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::before {
padding: 0 20px;
content: '谢谢黑黑先生';
left: 15px;
top: -18px;
font: bold 24px / 36px sans-serif;
text-shadow: 1px 1px 2px #111;
border: inherit;
background: var(--bgTitle);
}
#mydiv::after {
width: var(--btnWidth);
height: var(--btnWidth);
background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
border-radius: 50%;
bottom: calc(var(--btnWidth) / -2);
left: calc(50% - var(--btnWidth) / 2);
cursor: pointer;
pointer-events: auto;
animation: rot 5s infinite linear var(--state);
}
#mydiv p { padding: 10px 0; font-size: 16px; }
.txtRight { position: absolute; text-align: center; right: 10px; bottom: -10px; }
.txtMid { text-align: center; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<p>段落一</p>
<p class="txtMid"><img src="https://638183.freep.cn/638183/2-0.gif" alt="" /></p>
<p>段落二</p>
<p class="txtRight">资料/网络<br>2023年6月27日</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214980" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
好开心,好开心!谢谢黑师! 以前用过 Dreamweaver这些三剑客软件,并没有注意代码,自己天天在写G代码类,却对论坛代码全然不知.今天在红影恩师耐心指点下,知道了一点点,感动自己还能有此心用心去了解学习,太开心了.感恩论坛! 来看小文的精美制作，问好{:4_187:} 千羽 发表于 2023-6-28 20:19
来看小文的精美制作，问好
晚上好，不是我做的。我在学习一下，感谢您的问好，也祝福你！{:4_191:} 小文 发表于 2023-6-28 20:24
晚上好，不是我做的。我在学习一下，感谢您的问好，也祝福你！
小文不客气哈{:4_181:} 接触过DW，说明基础不弱。纯代码呢，需要理解一些东东：
一是 CSS、HTML、JS三者的关系：
CSS负责设置样式；
HTML负责前台表演；
JS负责后台支持。
比方说，一个段落标签，
<p class="wenben">文本内容</p>
它能直接在页面中显示文本内容，因为它就是演员，往台上那么一站，样纸是有的。
但是呢，CSS是化妆师，可以给他做各种修饰：
<style>
.wenben {
font-size: 40px;
color: red;
}
</style>
上面的CSS，令 <p class="wenben">...</p> 段落标签的字号是 40px，前景色是 红色。
然后，一些小妖术，则需要 JS 的支持：
<script>
let wenben = document.querySelector('.wenben');
wenben.onclick = () => wenben.style.color = 'green';
</script>
当我们单击第一个 class="wenben" 的 p 标签，它的文本颜色变成了绿色，这是JS的交互功能。
以上讨论的，代码按下面的形式去组织：
<style>
.wenben {
font-size: 40px;
color: red;
}
</style>
<p class="wenben">文本内容</p>
<script>
let wenben = document.querySelector('.wenben');
wenben.onclick = () => wenben.style.color = 'green';
</script> 二是，一点一点地去了解和掌握 CSS、HTML、JS。这需要时间与精力。 小文，学的也很快~~{:4_199:}{:4_187:} 马黑黑 发表于 2023-6-28 21:15
二是，一点一点地去了解和掌握 CSS、HTML、JS。这需要时间与精力。
回先生：感谢您的耐心指教，我一定好好学习，多了解一点这方面的知识。深感自己太少关注这方面了，好朋友做网站那么多年，我也没上心学习一下。只学了些做按钮、动画什么的，太关心有形的了，没有对Java这些知识的了解，大约知道什么前台后台，但太宽泛，还得用心去一点点学习领会。我不急功近利，学习一点是一点。问好！{:4_191:} 三月的阳光 发表于 2023-6-28 21:22
小文，学的也很快~~
谢谢鼓励，感觉自己太差了，还得下力气！不过挺开心的，因为有你们这些朋友老师的关心与帮助。{:4_190:} 欣赏精彩分享，点赞！{:4_178:} 小文 发表于 2023-6-28 21:30
回先生：感谢您的耐心指教，我一定好好学习，多了解一点这方面的知识。深感自己太少关注这方面了，好朋友 ...
嗯。了解原理，再根据需要一点点积累就好 马黑黑 发表于 2023-6-28 22:15
嗯。了解原理，再根据需要一点点积累就好
好的，多谢！{:4_204:} 小文也开始学习了，这是好事啊{:4_187:}
页:
[1]