黑马程序员技术交流社区

标题: 【上海校区】一个好看的HTML圆角模板 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-7-31 09:46
标题: 【上海校区】一个好看的HTML圆角模板

HTML代码：

• 
  
  <div class="yblan"><!--圆角模板开始-->
  
  
• 
  
          <div class="ybtop"><h3 style="font-size:13px"><font color=#666666>标题部分</font></h3></div>
  
  
• 
  
          <div class="ybmid" style="background:#FFFFFF"><!--内容写在这个里面-->
  
  
• 
  
  
  
  
• 
  
          </div><!--内容部分结束-->
  
  
• 
  
          <div class="ybbot"><div></div></div>
  
  
• 
  
  </div><!--圆角模板结束-->
  
  
  

圆角的css模板：

• 
  
  /*圆角的CSS模板*/
  
  
• 
  
  * { margin: 0; padding: 0; font-family: "宋体", Verdana, Geneva, sans-serif, "宋体"; }
  
  
• 
  
  * html * { font-family: "宋体"; }
  
  
• 
  
  .ybtop { background-image: url(../images/bg.rbar.png); background-repeat: no-repeat; }
  
  
• 
  
  .ybtop h1, .ybtop h2, .ybtop h3, .ybtop h4, .ybtop h5, .ybtop h6 { background-image: url(../images/bg.rbar.png); background-repeat: no-repeat; text-indent: 1em; }
  
  
• 
  
  .ybmid { padding: 5px; border-right-style: solid; border-left-style: solid; border-width: 1px; overflow: hidden; zoom: 1; background:#FAFAFA}
  
  
• 
  
  .ybbot, .ybbot div { background-image: url(../images/bg.rbar.png); background-repeat: no-repeat; overflow: hidden; }
  
  
• 
  
  .yblan .ybtop { background-position: left 0px; }
  
  
• 
  
  .yblan .ybtop h1, .yblan .ybtop h2, .yblan .ybtop h3, .yblan .ybtop h4, .yblan .ybtop h5, .yblan .ybtop h6 { background-position: right 0px; line-height: 28px;}
  
  
• 
  
  .yblan .ybmid { border-color: #A9BCCD; }
  
  
• 
  
  .yblan .ybbot { background-position: left -28px; }
  
  
• 
  
  .yblan .ybbot div { background-position: right -28px; height: 3px; }
  
  
• 
  
  .ybcheng .ybtop { background-position: left -31px; }
  
  
• 
  
  .ybcheng .ybtop h1, .ybcheng .ybtop h2, .ybcheng .ybtop h3, .ybcheng .ybtop h4, .ybcheng .ybtop h5, .ybcheng .ybtop h6 { background-position: right -31px; line-height: 28px; }
  
  
• 
  
  .ybcheng .ybbot div { background-position: right -59px; height: 2px; }
  
  
• 
  
  .yblanb .ybtop { background-position: left -61px; }
  
  
• 
  
  .yblanb .ybtop h1, .yblanb .ybtop h2, .yblanb .ybtop h3, .yblanb .ybtop h4, .yblanb .ybtop h5, .yblanb .ybtop h6 { background-position: right -61px; line-height: 30px; }
  
  
• 
  
  .yblanb .ybmid { border-color: #A5BFD6; border-width: 2px; }
  
  
• 
  
  .yblanb .ybbot { background-position: left -91px; }
  
  
• 
  
  .yblanb .ybbot div { background-position: right -91px; height: 4px; }
  
  
• 
  
  /*模板结束*/
  
  
  

---

作者: wuqiong    时间: 2018-7-31 10:27

---

作者: 不二晨    时间: 2018-7-31 11:52
奈斯，很赞

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2