前端小白训练营DAY7-DAY10

最新推荐文章于 2024-09-18 17:34:39 发布

1four

最新推荐文章于 2024-09-18 17:34:39 发布

阅读量506

点赞数

分类专栏：前端 html-css javascript 文章标签：前端博客

本文链接：https://blog.csdn.net/WahLokMa/article/details/70705688

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

html-css

4 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

前端小白训练营DAY7-DAY10

结业项目——做一个博客

首页

用了大表哥写好的JS插件

图片展览

用了CSS3属性


.content{
    width: 900px; 
    height: 1000px;
    overflow: hidden; 
    margin: 100px auto; 
    position: relative;
}
.pi{ 
    z-index: 1;
    width: 20%;
    height: auto;
    position: absolute;
    padding: 10px 10px 15px 10px;
    background: #ffffff;
    border: 1px solid #CCCCCC;
    /* 动画的时间 */
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
 }
.pi:hover{
    z-index: 2;
    transform: scale(1.5);
    -moz-transform: scale(1.5) ;
    -webkit-transform: scale(1.5) ;
    box-shadow: -10px 10px 20px #000000;
    -moz-box-shadow: -10px 10px 20px #000000;
    -webkit-box-shadow: -10px 10px 20px #000000;
}
.pic1{
    left: 100px;
    top: 50px;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
}
.pic2{
    left: 280px;
    top: 60px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

图片页

音乐播放

网上找的播放器。移植过来，做了样式和一点JS的修改
音乐页

总结

10天匆匆，如白驹过隙，在IMWeb前端学院的指导下学到了不少东西。引证一句话：师父领进门，修行看个人。虽然不是一个纯小白，但基础确实是没有打牢。经过10的训练，对HTML+CSS的运用更加熟练，不会说属性标签元素是什么来的，起码看了别人写的代码，能只知道是这样，至少复制之后自己能动手改成自己想要的效果。JS还是有难度，前端入门相对于其他语言来说是非常容易的。深入之后会发现要学习各方各面，因为一个好的页面是需要很多知识和技术去支撑的。HTML管内容 CSS管样式 JS改样式，三者缺一不可。以前端为职业发展的话，路不比其它语言短。
再次感谢IMWeb前端学院的老师和同学们！