700字范文 > CSS+HTML 小米商品展示代码

CSS+HTML 小米商品展示代码

时间：2019-06-03 16:39:51

相关推荐

CSS+HTML 小米商品展示代码

######################################################################################################################### declare 吼吼吼！hohoho~~~~ 开始了开始了 # # begin##代码肌肉兄贵 ~~~~~~{ ] OH YEAH~~~ author:Vincent # # ________ |^^\ } _____\ \ # # \ ______ (_-__\ } ________\ 来到代码世界~展示我的超能力##\ \|____|____/ ## [ } | __/__ / 祝小伙儿们看完文章后# #^ ^|__/__/工作顺利，吃啥啥没够儿~！ ## 这里是ISO-8859-1 |__/__| 不要惹我，一拳从多线程给你打成hello world！ ## 西欧字符集 ------> / \??/ \ 欢迎关注微信 letitgo ## 中文乱码！！！！ | | || # # \ / \ / # ########################################################################################################################

前提：

今天我们来画一画网页，废话不多说，来上代码：

这段代码中，折页的做法需要进行考虑，用到了border的transparent属性。

另外阴影方面利用了阴影滤镜：filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .2));

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#div1{width: 1300px;height: 500px;background-color: #FFFFFF;margin: auto;margin-top: 250px;border-radius: 5px;padding-top: 15px;padding-left: 10px;padding-right: 10px;box-shadow: -2px -2px 12px -4px;}#div1::after{content: '';position: relative;bottom: 90px;left: 1219.7px;border: solid;border-bottom: 100px solid white;border-right: 100px solid white;border-left: 100px solid transparent;border-top: 100px solid transparent;}#divpage{margin-left:1250px;margin-top: 23px;/*background-color: greenyellow;*//*width: 60px;height: 60px;*/border-radius: 4px;box-shadow: -2.5px -2.5px 7px rgba(0,0,0,0.6);border:30px solid;border-top:31.0px solid greenyellow;border-left:31.0px solid greenyellow;border-bottom:31.0px solid transparent;border-right:31.0px solid transparent;filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .2));}#a{margin-left: 4px;color: black;font-family: 黑体;font-size: 20.5px;font-weight: 400;}/*table{margin-top: -20px;margin-left: 1200px;}table td{width: 35px;text-align: center;}*/#span1{margin-top: -22px;margin-left: 1215px;width: 34px;height: 22.9px;border: 1px solid #999999;display: block;text-align: center;font-size: 15px;}#span2{margin-top: -24.6px;margin-left: 1250px;width: 34px;height: 22.9px;border: 1px solid #999999;display: block;text-align: center;font-size: 15px;}#div2{margin-top: 40px;width: 1300px;height: 350px;background-color: #FFFFFF;border-radius: 5;text-align: center;/*box-shadow: -1px -1px 14px 0px;*/}/*.cc{width: 245px;height: 350px;background-color: #FAFAFA;border-radius: 5;display: inline-block;*//*box-shadow: -1px -1px 14px 0px;*//*text-align: center;margin: 5px;}*/#div3{width: 245px;height: 350px;background-color: #FAFAFA;border-radius: 5;display: inline-block;*//*box-shadow: -1px -1px 14px 0px;*/text-align: center;margin: 5px;}#div4{width: 245px;height: 350px;background-color: #FAFAFA;border-radius: 5;display: inline-block;*//*box-shadow: -1px -1px 14px 0px;*/text-align: center;margin: 5px;}#div5{width: 245px;height: 350px;background-color: #FAFAFA;border-radius: 5;display: inline-block;*//*box-shadow: -1px -1px 14px 0px;*/text-align: center;margin: 5px;}#div6{width: 245px;height: 350px;background-color: #FAFAFA;border-radius: 5;display: inline-block;*//*box-shadow: -1px -1px 14px 0px;*/text-align: center;margin: 5px;}#div7{width: 245px;height: 350px;background-color: #FAFAFA;border-radius: 5;display: inline-block;*//*box-shadow: -1px -1px 14px 0px;*/text-align: center;margin: 5px;}#div3:hover{border: 1px solid #FF7920;}#div4:hover{border: 1px solid #4DA6A6;}#div5:hover{border: 1px solid #2079FF;}#div6:hover{border: 1px solid #FF4D79;}#div7:hover{border: 1px solid #4DD2A6;}ul li{width: 245px;height: 160px;background-color: #FAFAFA;border-radius: 5;display: block;/*box-shadow: -1px -1px 14px 0px;*/text-align: center;padding-top: 45px;}#li1{border-top: 1px solid #FF7920;}#li2{border-top: 1px solid #4DA6A6;}#li3{border-top: 1px solid #2079FF;}#li4{border-top: 1px solid #FF4D79;}#li5{border-top: 1px solid #4DD2A6;}#a1{font-size: 14px;}#a2{font-size: 12px;color: #8C8C8C;}</style></head><body><div id="div1"><a id="a">小米明星单品</a><span id="span1"><</span><span id="span2">></span><div id="div2"><div id="div3"><ul><li id="li1"><img src="img/u760.png"/></li></ul><br></br><a id="a1">小米电视2/2s 全系列</a><br></br><a id="a2">40/48/49/55英寸现货购买</a></div><div id="div4"><ul><li id="li2"><img src="img/u798.png"/></li></ul><br></br><a id="a1">小米平版</a><br></br><a id="a2">全球首款 NVIDIA Tegra K1 平版</a></div><div id="div5"><ul><li id="li3"><img src="img/u800.png"/></li><br></br><a id="a1">小米盒子增强版 1G</a><br></br><a id="a2">首款4K超高清网络机顶盒</a></ul></div><div id="div6"><ul><li id="li4"><img src="img/u802.png"/></li><br></br><a id="a1">全新小米路由器</a><br></br><a id="a2">顶配路由器，企业级性能</a></ul></div><div id="div7"><ul><li id="li5"><img src="img/u804.png"/></li><br></br><a id="a1">小米头戴式耳机</a><br></br><a id="a2">媲美主流千元级头戴式耳机</a></ul></div></div><div id="divpagebefore"><div id="divpage"></div></div></div></body></html>

效果：

来一起看一下效果，走着~！

对前端制作感兴趣的小伙伴，喜欢漂亮网页的小伙伴可以继续关注我更新的博客噢^_^~~~~~!

#########################################################################################################################end; ##代码肌肉兄贵 ~~~~~~{ ] OH YEAH~~~ author:Vincent # # ________ |^^\ } _____\ \ # # \ ______ (_-__\ } ________\ 来到代码世界~展示我的超能力##\ \|____|____/ ## [ } | __/__ / 祝小伙儿们看完文章后# #^ ^|__/__/工作顺利，吃啥啥没够儿~！ ## 这里是ISO-8859-1 |__/__| 不要惹我，一拳从多线程给你打成hello world！## 西欧字符集 ------> / \??/ \ 欢迎关注微信 letitgo ## 中文乱码！！！！ | | || # # \ / \ / # ########################################################################################################################

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。