永州商城网站建设,网页设计高端,自己怎么优化网站排名,多元网站建设圣诞节来啦#xff01;请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的#xff1a; 1. topbranch是圣诞树的上枝叶#xff0c;该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是#xff1a;宽度为100px、是直线、颜色为gr…圣诞节来啦请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的 1. topbranch是圣诞树的上枝叶该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是宽度为100px、是直线、颜色为green未显示的边框颜色都为透明 2. middleBranch是圣诞树的中枝叶该上枝叶仅通过边框属性即可实现。边框的属性依次是宽度为200px、是直线、颜色为green未显示的边框颜色都为透明 3. base是圣诞树的树干该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px颜色为gray。 注意 1. 上枝叶、树干的居中都是通过左外边距实现的 2. 没有显示的边框其属性都是透明属性 3. 仅通过border属性完成边框的所有属性设置 效果图如下 接下来我们就来完成这个简单的圣诞树吧
第一步我们需要搭建三个盒子分别代表上枝叶中枝叶下树根的操作 section classtopbranch/sectionsection classmiddleBranch/sectionsection classbase/section
接下来开始搭建样式
CSS样式
制作一个三角形我们需要让他的三条边进行隐形的操作
中枝叶的效果和上都是一样的但是需要边框的大小即可
下面树根只需要给高宽就行了。一个简单的圣诞树就搭好了。
.topbranch {width: 0px;height: 0px;/** TODO: 上枝叶效果*/border: 100px solid green;float: left;margin-left: 100px;border-left-color: transparent;border-right-color: transparent;border-top-color: transparent;}.middleBranch {width: 0px;height: 0px;/** TODO: 中枝叶效果*/border: 200px solid green;margin-left: 10px;border-left-color: transparent;border-right-color: transparent;border-top-color: transparent;}.base {/** TODO: 树干效果*/width: 70px;height: 200px;background-color: gray;margin-left: 170px;}
