当前位置：首页 > news >正文

网站中图片怎么做的网页设计与制作教程电子版pdf

news 2025/11/6 17:28:25

网站中图片怎么做的,网页设计与制作教程电子版pdf,做一个小网站多少钱,网址我的上网主页圣诞节到来，看到网上多种多样的圣诞树，作为程序员也想用代码制作一棵圣诞树出来，于是用htmlcss做了一个圣诞树的网页送给朋友 html代码 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8&qu…

圣诞节到来，看到网上多种多样的圣诞树，作为程序员也想用代码制作一棵圣诞树出来，于是用html+css做了一个圣诞树的网页送给朋友

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="author" content="巴打的圣诞树"><title>html+css制作圣诞树</title><link rel="stylesheet" href="css/sd.css"/></head><body><p class="word">Merry Christmas</p><div class="tree"><div class=star><div class="star-in"></div></div><!--树叶--><div class="leaf-box"><div class="leaf"><div class="edge"></div><div class="edge right"></div></div><div class="leaf"><div class="edge"></div><div class="edge right"></div></div><div class="leaf"><div class="edge"></div><div class="edge right"></div></div><div class="leaf"><div class="edge"></div><div class="edge right"></div></div><div class="leaf"><div class="edge"></div><div class="edge right"></div></div></div><!--树干--><div class="trunk"></div><!--彩色的球--><div class="ball-box"><div class="ball b1"></div><div class="ball b2"></div><div class="ball b3"></div><div class="ball b4"></div><div class="ball b5"></div><div class="ball b6"></div><div class="ball b7"></div><div class="ball b8"></div><div class="ball b9"></div></div><!--闪烁--><div class="sparkle"><span>✦</span><span>✦</span><span>✦</span><span>✦</span><span>✦</span><span>✦</span></div><div class="blink"><div></div><div></div><div></div><div></div><div></div><div></div></div></div></body>
</html>

CSS样式

 html,body{width:100%;height:100%;
}
*{margin:0;padding:0;
}
body{background-color:#000000;
}
.word{font-size:60px;text-align:center;color:gold;padding-top:70px;letter-spacing:5px;text-shadow:2px 4px 9px rgba(255, 255, 255, 0.7);
}
/*圣诞树外层div*/
.tree{width:200px;height:300px;margin:110px auto 0 auto;position: relative;/*相对定位*//*border:1px solid #fff;*/
}
.star{width:10px;height:10px;position:absolute;/*background-color:#fff;*/border-radius: 50%;top:0px;z-index: 1000;left:50%;transform:translateX(-50%);box-shadow: 0 0 70px 30px rgb(253, 253, 253);
}
.star-in{position:absolute;left:35%;top:70%;border-right:200px solid transparent;border-bottom: 150px solid gold;border-left:200px solid transparent;transform:translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
}
.star-in::before{border-bottom:140px solid gold;border-left:65px solid transparent;border-right:65px solid transparent;position:absolute;top:-90px;left:-140px;content:'';transform:rotate(-35deg);
}
.star-in::after{border-bottom:140px solid gold;border-left:210px solid transparent;border-right:200px solid transparent;position:absolute;top:3px;left:-200px;content:'';transform:rotate(-70deg);
}
.leaf{position:absolute;left:50%;top:3%;margin-left:-30px;background-color:rgba(14,110,14);width:60px;height:60px;border-radius:0 10px 35px 10px;transform:rotate(45deg);box-shadow: 2px 7px 2px rgba(43,43,43,0.2);
}
.edge{position:absolute;left:0;bottom: 0;background:rgba(14,110,14);width:25px;height:30px;border-radius:0 10px 35px 10px;transform:translateY(50%) translateX(0);
}
.edge.right{position:absolute;left:unset;bottom:unset;top:0;right:0;background:rgba(14,110,14);width:25px;height:30px;border-radius:0 10px 35px 10px;transform:translateY(0) translateX(50%);
}
/*双数修改背景色*/
.leaf:nth-child(eve){background-color: #0f880f;
}
.leaf:nth-child(eve).edge{background-color: #0f880f;
}
/*最上面*/
.leaf:nth-child(1){z-index: 100;transform: rotate(45deg) scale(0.8);
}
/*第二*/
.leaf:nth-child(2){z-index: 99;top:15%;transform: rotate(45deg) scale(1.3);
}
.leaf:nth-child(3){z-index: 98;top:28%;transform:rotate(45deg) scale(1.6);
}
.leaf:nth-child(4){z-index: 97;top:41%;transform:rotate(45deg) scale(1.9);
}
.leaf:nth-child(5){z-index: 96;top:54%;transform:rotate(45deg) scale(2.2);
}
.trunk{width:25px;height:45px;border-radius:0 0 3px 3px;position:absolute;left:50%;transform:translate(-50%);bottom:20px;z-index: 1;box-shadow: 0 0 80px 5px rgb(253, 253, 253);background:linear-gradient(0deg,#6d411b 0%,#5a341d 64%);
}
.ball{width:20px;height:20px;background:#f00;box-shadow: -1px -1px 6px inset #600,1px 1px 8px inset #ffc9c9;border-radius: 50%;z-index:101;position:absolute;
}
.b1{left:25%;top:30%;
}
.b2{left:35%;top:50%;
}
.b3{left:65%;top:20%;
}
.b4{left:45%;top:22%;
}
.b5{left:40%;top:72%;
}
.b6{left:60%;top:52%;
}
.b7{left:50%;top:62%;
}
.b8{left:80%;top:42%;
}
.b9{left:10%;top:62%;
}
.b4,.b5,.b6{background:#ececec;box-shadow: -1px -1px 6px inset #615f5f,1px 1px 8px inset #fff;
}
.b7,.b8,.b9{background:gold;box-shadow: -1px -1px 6px inset #3a3101,1px 1px 8px inset #fff;
}
.sparkle span{display:block;position:absolute;font-size: 20px;z-index: 101;color:#fff;animation: sparkle 1.5s ease infinite alternatel;
}
/*闪烁动画*/
@keyframes sparkle{0%,100%{transform: scale(1);}50%{transform: scale(1.5);}
}
.sparkle span:nth-child(1){left:30%;top:40%;
}
.sparkle span:nth-child(2){left:40%;top:27%;font-size: 15px;
}
.sparkle span:nth-child(3){left:50%;top:57%;font-size: 12px;
}
.sparkle span:nth-child(4){left:70%;top:67%;font-size: 14px;
}
.sparkle span:nth-child(5){left:54%;top:20%;font-size: 20px;
}
.sparkle span:nth-child(6){left:60%;top:33%;font-size: 20px;
}
.blink div{width:3px;height:3px;background: #fff;z-index: 101;position:absolute;border-radius: 50%;animation:blink 1.5s ease infinite alternate;
}
.blink div:nth-child(2){left:34%;top:13%;transform: scale(1.2);
}
.blink div:nth-child(3){left:54%;top:43%;transform: scale(0.6);
}
.blink div:nth-child(4){left:64%;top:33%;transform: scale(1.4);
}
.blink div:nth-child(5){left:34%;top:63%;transform: scale(1.8);
}
.blink div:nth-child(6){left:14%;top:76%;transform: scale(1.5);
}
@keyframes blink{0%{box-shadow: 0 0 0 0 #fff;}25%{box-shadow: 0 0 1px 1px #fff;}50%{box-shadow: 0 0 2px 2px #fff;}75%{box-shadow: 0 0 3px 3px #fff;}100%{box-shadow: 0 0 4px 4px #fff;}
}