Evey322: 2017

2017年2月19日星期日

点击展开，再次点击闭合功能

<head>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
</head>

<style>
#panel, #flip {
padding: 5px;
text-align: center;
//background-color: #d8d6d6;
background-color: grey;
border: solid 1px #c3c3c3;
color:white;
}

#panel {
padding: 30px;
display: none;

}
.pdt-index{
background-image: url(https://ooo.0o0.ooo/2017/02/17/58a693c65a5d8.jpg);
background-size: cover;
margin: 0 auto;

}
</style>


<body>
<div id="flip">点击扫描二维码，获取更多优惠</div>
<div id="panel">

<img src="https://ooo.0o0.ooo/2017/02/15/58a4053a5d32a.png" alt="">
</div>

</body>

<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>

2017年2月18日星期六

如何将商品变成圆形展示图片

代码(可以整体复制以下代码粘贴到html.erb文件当中去查看页面效果)：

<style>

.box-e {

background-color: #edeeee;

width: 100%;

overflow: auto;

clear: both;

position: relative;

}

.e-row1,.e-row2 {

width: 100%;

height: 340px;

background-color: grey;

}

.e1,.e2,.e3,.e4,.e5,.e6 {

height: 340px;

float: left;

width:33%;

}

.e-square {

height: 260px;

width: 260px;

background-color: white;

border-radius: 200px;

margin: 40px auto 0;

overflow: hidden;

}

.e-square:hover {

box-shadow: #42455F 0 1px 5px;

}

color:grey;

text-decoration:none;

}

a:hover{

color:orange;

}

</style>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

讲解：

方形变圆形办法：

e-square的宽和高分别是：

height: 260px;

width: 260px;

则border-radius（意为边框圆角）后面的值只要大于260的一半，即可以把方形变成圆形。

如果有任何疑问欢迎联系：zhongweninri（微信）

固定页脚的写法

无论页面怎么动，你的也脚都不会动，这样可以随时返回顶部。超爱的一个功能！
将以下代码整体复制粘贴到你的html.erb文件中即可。

效果预览：
https://fullstack.xinshengdaxue.com/works/197

<style media="screen">
.floatingevey{
width: 100%;
height: 50px;
background-color: rgba(0,0,0,0.5);
position: fixed;
right: 0;
bottom: 0;
z-index: 98;
}
.backtotop, .fl3{
color:white;
font-size: 16px;
line-height: 50px;
float: right;
margin-right: 20px;
}
.backtotop:hover{
color:orange;
}
.fl3 a{
color: white;

}
.fl3 a:hover{
color:orange;

}
a{
text-decoration:none;
}
</style>

<div class="floatingevey">

<div class="fl1">

</div>
<div class="fl4">
<a href="#" class="backtotop">返回顶部</a>

</div>

<div class="fl3">
<a href="http://www.weibo.com/zhongwen322?is_all=1"> 关注我们 <i class="fa fa-eye" aria-hidden="true"></i></a>
</div>

<div class="fl3">
<a href="Mailto:zhongwen322@gmail.com"> 联系我们 <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>

</div>