########################################################################################################################
# declare 吼吼吼！hohoho~~~~ 开始了开始了 #
# begin #
# 代码肌肉兄贵 ~~~~~~ { ] OH YEAH~~~ author:Vincent #
# ________ |^^\ } _____\ \ #
# \ ______ (_-__\ } ________\ 来到代码世界~展示我的超能力 #
# \ \ |____|____/ #
# [ } | __/__ / 祝小伙儿们看完文章后 #
# ^ ^ |__/__/ 工作顺利，吃啥啥没够儿~！ #
# 这里是ISO-8859-1 |__/__| 不要惹我，一拳从多线程给你打成hello world！ #
# 西欧字符集 ------> / \??/ \ 欢迎关注微信 2012letitgo2012 #
# 中文乱码！！！！ | | | | #
# \ / \ / #
########################################################################################################################前提：
今天我们来画一画网页，废话不多说，来上代码：
这段代码中，折页的做法需要进行考虑，用到了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>
<!--<table border="1"; bordercolor="#999999" cellspacing="0">
<tr valign="middle">
<td><</td>
<td>></td>
</tr>
</table>-->
<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！ #
# 西欧字符集 ------> / \??/ \ 欢迎关注微信 2012letitgo2012 #
# 中文乱码！！！！ | | | | #
# \ / \ / #
########################################################################################################################
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
