<div class="fancy">
<h2>
<span class="ribbon-center">50% OFF!</span>
</h2>
<p>
<img src="/uploads/160501/glass.jpg">
Check out these killer deals from Oakley!
Get an additional 50% off sale items for a limited time.
</p>
</div>
接下来给卡片和商品描述添加样式，来限定高宽和间距：
[css] view plain copy
.fancy {
width: 340px
margin: 20px auto 20px auto
background: #E7E7E7
padding: 15px
}
.fancy p {
padding-top: 10px
margin: 5px 0
line-height: 1.5
}
.fancy img {
width: 340px
}
blob.png
现在页面看起来像上面这样，接下来就是要给标签（h2元素）添加样式，一个是背景色，一个是左边的3D折纸效果。
折边效果其实就是给h2的左下角拼接一个三角形的元素，我们使用伪元素来实现，代码如下：
[css] view plain copy
.fancy h2 {
font-style: italyc
line-height: 1
padding: 5px 0
color: #FFF
margin: 0
width: 205px
left: -35px// 相对卡片向左偏移35px
background-color: #e54439
position: relative
z-index: 6
}
.fancy h2:after {// 定义一个斜三角形
content: ""
width: 0
height: 0
position: absolute
font-size: 0
line-height: 0
z-index: 5
border-top: 0 solid transparent
border-bottom: 15px solid transparent
bottom: -15px
}
.fancy h2:after {
border-right: 20px solid rgb(230, 107, 97)
left: 0
}
.fancy h2 .ribbon-center {
display: block
padding: 10px 0
background-color: #e54439
}
可能是sharepoint2007和sharepoint2010的区别，发布后我的首页直接出错。之后还原了v4.master的版本也无济于事。于是想到直接修改v4.master文件，修改之前备份，这样即使出错只修改将备份文件还原就可以了，不需要用到sharepoint designer签入，签出，审批，发布。
搜索v4.master，有两个文件，一个是在C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS目录下，另一个是在C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL下，仔细分析v4.master文件，不难发现SharePoint:SPRibbon这样的sharepoint控件拥有权限控制，权限格式如下：PermissionsString=EditListItems, AddAndCustomizePages PermissionMode=All 顾名思义，PermissionsString就是哪些权限拥有可见权限，PermissionMode就是权限模式。
我们将SharePoint:SPRibbon修改成如下：<SharePoint:SPRibbon
runat=server
PlaceholderElementId=RibbonContainer
CssFile=
FixedPositioningEnabled=true
PermissionsString=EditListItems, AddAndCustomizePages
PermissionMode=All>
这样一般权限的用户就看不到ribbon了。但网站操作还在，我们想办法隐藏，于是想当然<SharePoint:SiteActions runat=server accesskey=<%$Resources:wss,tb_SiteActions_AK%>id=SiteActionsMenuMain
PrefixHtml=
SuffixHtml=
MenuNotVisibleHtml=&nbsp
PermissionsString=EditListItems, AddAndCustomizePages<BR>
<BR>PermissionMode=All>
结果页面报错，出错原因是SharePoint:SiteActions没有PermissionsString属性。于是Google了一番，找到将SharePoint:SiteActions和span放在<Sharepoint:SPSecurityTrimmedControl即可。<Sharepoint:SPSecurityTrimmedControl ID=SPSecurityTrimmedControl2 runat=server PermissionsString=EditListItems, AddAndCustomizePages
PermissionMode=All>
<span class=ms-siteactionsmenu id=siteactiontd>
<SharePoint:SiteActions runat=server accesskey=<%$Resources:wss,tb_SiteActions_AK%>id=SiteActionsMenuMain
PrefixHtml=
SuffixHtml=
MenuNotVisibleHtml=&nbsp
>
</SharePoint:SiteActions></span>
</Sharepoint:SPSecurityTrimmedControl>
修改之前首页如下：
修改之后首页如下：
，本站保留追究责任的权利。
方法/步骤 首先，先在中加入门 然后写好大门的css，如下：[由于本人设计不好，所以这里的门都是用颜色块代替的，大家在用的时候可以换成各种门的背景] div{ margin:0padding:0} .door{ width:450pxheight:450pxposition:relativebackg...
