【凡哥教程第四讲作业】风光（元素复制及定位练习）

扬帆

扬帆

<style> #dsj {     position: relative;     margin: 230px 0 30px calc(50% - 690px);     width:1200px;     height: 750px;     background: url('http://qslt.net/data/attachment/forum/202407/25/020715cdorl0n2u2jd2v7l.jpg.thumb.jpg') no-repeat center/cover; }   .mypic {     position: absolute;     width: 270px;     height: 156px; } .mypic:nth-of-type(1) {     left: 10px;     top: 10px; } .mypic:nth-of-type(2) {     right: 10px;     bottom: 10px; } .mypic:nth-of-type(3) {     left: calc(50% - 140px);     top: calc(50% - 140px); }   .mypic:nth-of-type(4) {     right: 10px;     top: 10px; } .mypic:nth-of-type(5) {     left: 10px;     bottom: 10px; } </style>   <div id="dsj">     <img class="mypic" alt="" src="http://qslt.net/data/attachment/forum/202407/25/020734k7cyxb25c7t2yz9b.gif" />     <img class="mypic" alt="" src="http://qslt.net/data/attachment/forum/202407/25/020734k7cyxb25c7t2yz9b.gif" />     <img class="mypic" alt="" src="http://qslt.net/data/attachment/forum/202407/25/020734k7cyxb25c7t2yz9b.gif" /> <img class="mypic" alt="" src="http://qslt.net/data/attachment/forum/202407/25/020734k7cyxb25c7t2yz9b.gif" /> <img class="mypic" alt="" src="http://qslt.net/data/attachment/forum/202407/25/020734k7cyxb25c7t2yz9b.gif" /> </div>

花简静

扬帆作业很棒。
#dsj这个名称改成个性化的。。
margin: 230px 0 30px calc(50% - 690px);位置完美居中。。

花简静

把图片元素换成了动图，更加灵动漂亮。。

最中间的图片元素位置根据自己图片的宽度进行了更改
.mypic:nth-of-type(3) {
    left: calc(50% - 140px);
    top: calc(50% - 140px);

完美居中。。

花简静

学习效果极佳，消化了凡老师的教程，并有自己个性化的创意。。给扬帆点赞。。

花简静

扬帆 发表于 2024-7-25 03:48
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Anda ...

这个带行号的代码。。你是第一个跟发的，真是完美。。

扬帆

花简静 发表于 2024-7-25 10:10
这个带行号的代码。。你是第一个跟发的，真是完美。。

谢谢花简静版主鼓励！我是在凡老师指导下，跟您这个课代表学习的呦~

柒玥

杨帆很有专业范，欣赏学习，问好！

柒玥

杨帆的作业很用心，向你学习，祝学习快乐！

扬帆

感谢鼓励，问好柒玥~