HTML5系列代码：设计⽹站服务条款页⾯
box-sizing属性定义及⽤法
box-sizing属性是css3中新增的属性，允许你以某种⽅式定义某些元素，以适应指定区域（假如您需要并排放置两个带边框的框，可通过将 box-sizing属性设置为"border-box"，这可令浏览器呈现出带有指定宽度和⾼度的框，并把边框和内边距放⼊框中）；
Internet
Explorer、Opera和Chrome浏览器⽀持box-sizing属性，Firefox还不⽀持该属性，但⽀持-moz-box-sizing属性替代box-sizing属性；
box-sizing属性语法格式
box-sizing: content-box/border-box/inherit;
参数说明
content-box：这是由CSS2.1规定的宽度⾼度⾏为，宽度和⾼度分别应⽤到元素的内容框，在宽度和⾼
度之外绘制元素的内边距和边框；border-box：为元素设定的宽度和⾼度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。通过从已设定的宽度和⾼度分别减去边框和内边距才能得到内容的宽度和⾼度;inherit：规定应从⽗元素继承box-sizing属性的值;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>⽹站服务条款</title>
<style type="text/css">
#policy {
font-family:Arial，宋体;
margin:10px auto;/* 页⾯居中 */
box-sizing:content-box;/* 尺⼨计算⽅式为content-box */
width:400px;/* 盒⼦宽400px */
padding:20px;/* 内边距20px */
background-color:#e4e4e4;/* 浅灰⾊背景 */
box-shadow:inset 0015px 5px #bbb;/* 向内的阴影 */
}
#policy header {
font-size:24px;
borderboxfont-weight:bold;
line-height:25px;
}
#policy section {
background-color:#fff;
font-size:12px;
line-height:25px;
box-sizing:border-box;/* 尺⼨计算⽅式为border-box */
width:400px;/* 盒⼦宽400px */
height:200px;/* 盒⼦⾼200px */
padding:10px;/* 内边距10px */
border:1px solid #CCC;
overflow-x:hidden;/* ⽔平⽅向不设置滚动条 */
overflow-y:scroll;/* 垂直⽅向设置滚动条 */
}
#policy footer {
text-align:center;
padding-top:5px;
}
#policy footer input {
border:1px solid #666;
box-shadow:2px 2px 1px #BBB;/* 按钮阴影 */
}
</style>
</head>
<body>
<div id="policy">
<div id="policy">
<header>⽹站服务条款</header>
<section>
<p>⽤户必须单独承担发布内容的责任。⽤户对论坛服务的使⽤是根据所有适⽤于本论坛的国家法律、地⽅法律和国际法律标准的。</p> <p>⽤户不得在本站论坛发布含有下列内容之⼀的信息:</p>
<p>(1)反对宪法所确定的基本原则;</p>
<p>(2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统⼀;</p>
<p>(3)损害国家荣誉和利益;</p>
<p>(4)煽动民族仇恨、民族歧视，破坏民族团结;</p>
<p>(5)破坏国家宗教政策，宣扬和封建迷信;</p>
<p>(6)散布谣⾔，扰乱社会秩序，破坏社会稳定;</p>
<p>(7)散布淫秽、⾊情、赌博、暴⼒、凶杀、恐怖或者教唆犯罪;</p>
<p>(8)侮辱或者诽谤他⼈，侵害他⼈合法权益;</p>
<p>(9)连锁信件,⾦字塔⽅案及蛊惑性⽂章;</p>
<p>(10)任何涉及他⼈版权的资料的⾮法复制和传播;</p>
<p>(11)任何未经本站许可的商业性质的⼴告;</p>
<p>(12)含有法律、⾏政法规禁⽌的其他内容。</p>
</section>
<footer>
<input type="button" value="同意"/>
<input type="button" value="不同意"/>
</footer>
</div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论