西安网站制作模板,最新源码,新型建筑模板设备,wordpress上下页效果图 可根据基础示例和进阶示例#xff0c;复制进行改造样式。 如下图所示#xff0c;本文提供 2 个示例。 基础示例
找个 HTML 页面#xff0c;一键复制运行。
bodyh1 styletext-align: center;基础示例/h1section class复制进行改造样式。 如下图所示本文提供 2 个示例。 基础示例
找个 HTML 页面一键复制运行。
bodyh1 styletext-align: center;基础示例/h1section classcontentdiv classrowdiv classcell张三/divdiv classcell李四/divdiv classcell王五/div/divdiv classrowdiv classcell张三/divdiv classcell李四/divdiv classcell王五/div/div/section
/bodystyle
body {background: #eeeeee;
}
/* 根节点 */
.content {display: table;/*display: table时padding会失效*/width: 800px;margin: 0 auto;background: #fff;
}
/* 每行 */
.row {display: table-row;/*display: table-row时margin、padding同时失效*//* background: red; */text-align: center;
}
.row:hover {/* 这里写鼠标移入时的样式 */background: #fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);font-weight: bold;
}
/* 每列 */
.cell {display: table-cell;/*display: table-cell时margin会失效*/padding: 15px;
}
/style进阶示例
找个 HTML 页面一键复制运行。
bodyh1 styletext-align: center;进阶示例/h1section classcontent!-- 头部自定义内容 --div classrow-hiddendiv classcelldiv classheaderh3普通会员/h3button classbutton立即开通/buttondiv styleheight: 20px;/div/div/divdiv classcelldiv classheaderh3中级会员/h3button classbutton立即开通/buttondiv styleheight: 20px;/div/div/divdiv classcelldiv classheaderh3高级会员/h3button classbutton立即开通/buttondiv styleheight: 20px;/div/div/div/div!-- END --!-- 激活高亮区域 --div classrowdiv classcelldiv classitem[普通会员] 这是第一行/div/divdiv classcelldiv classitem[中级会员] 这是第一行/div/divdiv classcelldiv classitem[高级会员] 这是第一行/div/div/divdiv classrowdiv classcelldiv classitem[普通会员] 这是第二行/div/divdiv classcelldiv classitem[中级会员] 这是第二行/div/divdiv classcelldiv classitem[高级会员] 这是第二行/div/div/div!-- END --!-- 底部自定义内容 --div classrow-hiddendiv classcelldiv classbottomdiv styleheight: 10px;/divh3底部内容/h3/div/divdiv classcelldiv classbottomdiv styleheight: 10px;/divh3底部内容/h3/div/divdiv classcelldiv classbottomdiv styleheight: 10px;/divh3底部内容/h3/div/div/div!-- END --/section
/bodystyle
body {background: #eeeeee;
}
/* 根节点 */
.content {display: table;/*display: table时padding会失效*/width: 1300px;margin: 0 auto;border-collapse: collapse;
}
/* 每行 */
.row {display: table-row;/*display: table-row时margin、padding同时失效*/text-align: center;
}
.row-hidden {display: table-row;/*display: table-row时margin、padding同时失效*/text-align: center;
}
.row:hover {/* 这里写鼠标移入时的样式 */font-weight: bold;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);cursor: pointer;color: red;
}
/* 每列 */
.cell {display: table-cell;/*display: table-cell时margin会失效*//* 这行代码是为了侧边留空隙使用,同背景色一致造成的假象 */border-right: 10px solid #eeeeee;
}/* 额外样式 */
.item {/* padding */background: #fff;text-align: left;padding-left: 30px;padding-right: 30px;/* padding-left: 35px; */padding-bottom: 10px;padding-top: 10px;
}
.header {background: #fff;padding: 20px;
}
.button {width: 90%;height: 30px;
}
.bottom {background: #fff;padding: 20px;
}
/style
