Home > Web Front-end > HTML Tutorial > Rounded corner box implemented by div css compatible with ie6/ff/ch/op_html/css_WEB-ITnose

Rounded corner box implemented by div css compatible with ie6/ff/ch/op_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:27:07
Original
1137 people have browsed it

 

<!DOCTYPE html><html><head><title>青春不迷茫:寻梦时代的“蚁族”逆袭之旅- 职场管理专题-中国人力资源开发网-中人网 - 中国领先的人力资源门户,最佳HR学习成长平台</title><meta name="Keywords" content="蚁族 青春 梦想"><meta name="Description" content="“蚁族”一词并非一种昆虫族群。“蚁族”收入不高、工作不稳定、生活条件非常差,他们从村里的金凤凰变成了城市中的边缘人,成了没有话语权的弱势群体。然而,“蚁族”又充满着青春与梦想,谁又没年轻过?实现梦想,完成蜕变,更是蚁族需要去面对与挑战的。"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><style type="text/css">body {	color: black;	font-size: 12px;	margin: 0px;	padding: 0px;}img {	border: 0 none;}a {	color: blue;}a:hover {	color: gray;}div.bodyBox {	width: 960px;	margin: 0 auto;}.bgBox {	margin: 10px 0;	position: relative;	display: block;	zoom: 1;/*ie 触发haslayout*/}.bgBox .content {	border: 2px solid #a0a0a0;}.bgBox span.corner {	display: block;	position: absolute;	background-image: url("tpl/round.gif");	background-repeat: no-repeat;	background-color: white;	width: 10px;	height: 10px;	z-index: 2;}.bgBox .tl {	top: 0px;	left: 0px;}.bgBox .tr {	top: 0px;	right: 0px;	background-position: right 0;}.bgBox .bl {	bottom: 0px;	left: 0px;	background-position: bottom left;}.bgBox .br {	bottom: 0px;	right: 0px;	background-position: bottom right;}.bgBox .sideTop {	background: url(tpl/sideTop.gif) repeat-x 0 0;	zoom: 1;	z-index: 1;}.bgBox .sideBottom {	background: url(tpl/sideBottom.gif) repeat-x 0 bottom;	zoom: 1;	z-index: 1;}.bgBox .sideLeft {	padding: 25px;	background: url(tpl/sideLeft.gif) repeat-y left top;	zoom: 1;	z-index: 1;}.bgBox .sideRight {	background: url(tpl/sideRight.gif) repeat-y right top;	zoom: 1;	z-index: 1;}.bgBox .text {	color: yellow;}.w100p {	width: 100%;	display: block;	margin: 10px 0;}.clearfix:after {	content: ".";	display: block;	height: 0;	clear: both;	visibility: hidden;}.clearfix {	zoom: 1;}hr.clearHr {	clear: both;	float: none;	visibility: hidden;	width: 1px;	height: 1px;}div.titleDiv {	background: url("tpl/titleBG.jpg") no-repeat scroll 0 bottom transparent;	height: 65px;}div.titleDiv h1 {	margin-left: 100px;	font-weight: bold;	color: gray}h2.titleH2 a {	color: red!important;}h2.center {	text-align: center;}div.wh3 {	width: 290px;}div.wh2 {	width: 448px;}.floatLeft {	float: left;	margin-right: 10px;	display: block;}.floatRight {	float: right;	display: block;}</style></head><body><div class="bodyBox"> <img src="tpl/round.gif" class="w100p" height="200" />  <div class="titleDiv">    <h1>这是标题标题</h1>  </div>  <!--线框-->  <div class="bgBox"> <span  class="corner tl"></span><span   class="corner tr"></span><span   class="corner bl"></span><span   class="corner br"></span>    <div class="sideTop">      <div class="sideBottom">        <div class="sideRight">          <div class="sideLeft">             <!--内容-->                         <span style="font-size:20px;font-weight:bold;">导语:</span>kkkk导语导语导语导语导语导语            kkkk导语导语导语导语导语导语            kkkk导语导语导语导语导语导语            kkkk导语导语导语导语导语导语            kkkk导语导语导语导语导语导语            kkkk导语导语导语导语导语导语            kkkk导语导语导语导语导语导语            kkkk导语导语导语导语导语导语            <p>                         kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语 </p>            <p>                         kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语              kkkk导语导语导语导语导语导语 </p>                        <!--内容-->           </div>        </div>      </div>    </div>  </div>  <!--线框-->    <div class="titleDiv w100p">    <h1>这是标题标题</h1>  </div>  <!--线框-->  <div class="bgBox"> <span  class="corner tl"></span><span   class="corner tr"></span><span   class="corner bl"></span><span   class="corner br"></span>    <div class="sideTop">      <div class="sideBottom">        <div class="sideRight">          <div class="sideLeft">             <!--内容-->                        <div class="floatLeft wh3"> <img src="tpl/round.gif" width="100%" height="100" />              <h2 class="center"><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>            </div>            <div class="floatLeft wh3"> <img src="tpl/round.gif" width="100%" height="100" />              <h2  class="center"><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>            </div>            <div class="floatLeft wh3" style="margin-right:0px;"> <img src="tpl/round.gif" width="100%" height="100" />              <h2  class="center"><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>            </div>            <hr class="clearHr" />                        <!--内容-->           </div>        </div>      </div>    </div>  </div>  <!--线框-->  <div class="titleDiv w100p">    <h1>这是标题标题</h1>  </div>  <!--线框-->  <div class="bgBox"> <span  class="corner tl"></span><span   class="corner tr"></span><span   class="corner bl"></span><span   class="corner br"></span>    <div class="sideTop">      <div class="sideBottom">        <div class="sideRight">          <div class="sideLeft">             <!--内容-->                         <img src="tpl/round.gif" width="200" height="200" style="" class="floatLeft" />            <div class="floatLeft" style="width:500px;">              <h2><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>              <h2><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>              <h2><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>            </div>            <hr class="clearHr" />                        <!--内容-->           </div>        </div>      </div>    </div>  </div>  <!--线框-->  <div class="titleDiv w100p">    <h1>这是标题标题</h1>  </div>  <!--线框-->  <div class="bgBox"> <span  class="corner tl"></span><span   class="corner tr"></span><span   class="corner bl"></span><span   class="corner br"></span>    <div class="sideTop">      <div class="sideBottom">        <div class="sideRight">          <div class="sideLeft">             <!--内容-->                        <div class="floatLeft wh2">              <div class="floatLeft" style="width:200px;">                <h2 class="center"><a href="">标题</a></h2>                <p> kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk <a href="">【详细】</a> </p>              </div>              <img src="tpl/round.gif" width="200" height="200" class="floatRight" />              <hr class="clearHr" />              <div class="floatLeft" style="width:200px;">                <h2 class="center"><a href="">标题</a></h2>                <p> kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk <a href="">【详细】</a> </p>              </div>              <img src="tpl/round.gif" width="200" height="200" class="floatRight" />              <hr class="clearHr" />            </div>            <div class="floatLeft wh2" style="margin-right:0;">              <div class="floatRight" style="width:200px;">                <h2 class="center"><a href="">标题</a></h2>                <p> kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk <a href="">【详细】</a> </p>              </div>              <img src="tpl/round.gif" width="200" height="200" class="floatLeft" />              <hr class="clearHr" />              <div class="floatRight" style="width:200px;">                <h2 class="center"><a href="">标题</a></h2>                <p> kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk                  kkkkkkkkkk <a href="">【详细】</a> </p>              </div>              <img src="tpl/round.gif" width="200" height="200" class="floatLeft" />              <hr class="clearHr" />            </div>            <hr class="clearHr" />                        <!--内容-->           </div>        </div>      </div>    </div>  </div>  <!--线框-->  <div class="titleDiv w100p">    <h1>这是标题标题</h1>  </div>  <!--线框-->  <div class="bgBox"> <span  class="corner tl"></span><span   class="corner tr"></span><span   class="corner bl"></span><span   class="corner br"></span>    <div class="sideTop">      <div class="sideBottom">        <div class="sideRight">          <div class="sideLeft">             <!--内容-->                         <img src="tpl/round.gif" width="200" height="200" style="" class="floatLeft" />            <div class="floatLeft" style="width:500px;">              <h2><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>              <h2><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>              <h2><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>              <h2><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>            </div>            <hr class="clearHr" />                        <!--内容-->           </div>        </div>      </div>    </div>  </div>  <!--线框-->  <div class="titleDiv w100p">    <h1>这是标题标题</h1>  </div>  <!--线框-->  <div class="bgBox"> <span  class="corner tl"></span><span   class="corner tr"></span><span   class="corner bl"></span><span   class="corner br"></span>    <div class="sideTop">      <div class="sideBottom">        <div class="sideRight">          <div class="sideLeft">             <!--内容-->                        <div class="floatLeft wh3"> <img src="tpl/round.gif" width="100%" height="100" />              <h2 class="center"><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>            </div>            <div class="floatLeft wh3"> <img src="tpl/round.gif" width="100%" height="100" />              <h2 class="center"><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>            </div>            <div class="floatLeft wh3" style="margin-right:0px;"> <img src="tpl/round.gif" width="100%" height="100" />              <h2 class="center"><a href="kk.htm">上市房价</a></h2>              <p> 每位评委 <a href="">【详细】</a> </p>            </div>            <hr class="clearHr" />                        <!--内容-->           </div>        </div>      </div>    </div>  </div>  <!--线框-->  <div class="titleDiv w100p">    <h1>结语</h1>  </div>  <!--线框-->  <div class="bgBox"> <span  class="corner tl"></span><span   class="corner tr"></span><span   class="corner bl"></span><span   class="corner br"></span>    <div class="sideTop">      <div class="sideBottom">        <div class="sideRight">          <div class="sideLeft">             <!--内容-->             编辑人员信息                         <!--内容-->           </div>        </div>      </div>    </div>  </div>  <!--线框--> </div></body></html>
Copy after login


 

round.gif

sideBottom.gif

sideLeft.gif

sideRight.gif

sideTop.gif




chrome

ff

ie6

op


 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template