CSS3圓角仿QQ2012主窗口

2024-09-05 12:17:23

字體：大中小

供稿：網(wǎng)友

運(yùn)用CSS3的圓角技術(shù)，來(lái)仿寫(xiě)了QQ2012的主窗口，大家都知道QQ2012的主窗口現(xiàn)在都是使用的圓角框，看上去不那么呆板，用CSS3做圓角效果，也是學(xué)習(xí)CSS3的必修課，通過(guò)這一些小小的功能實(shí)現(xiàn)，你會(huì)慢慢了解CSS3的強(qiáng)大功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS3圓角技術(shù)仿寫(xiě)了QQ2012主窗口</title><style>body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset, img {border:0;}address, caption, cite, code, dfn, em, th, var {font-style:normal;font-weight:normal;}li {list-style:none;}caption, th {text-align:left;}h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}q:before, q:after {content:'';}abbr, acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input, textarea, select {font-family:inherit;font-size:inherit;font-weight:inherit;}input, textarea, select {*font-size:100%;}legend {color:#000;}ul,li{list-style:none;}a{text-decoration:none;}body{	font-size:12px;}	.cl{	clear:both;}	input{	border:0;	outline:none;	}	hr{	border:0;	}.main{	width:299px;	height:664px;	border:1px solid #616161;	border-radius:3px;	margin:50px;	position:relative;}.top{	height:50px;	background:#1CA4BA;	border:1px solid #89CED9;	border-radius:3px 3px 0 0;	}.top h1{	font-size:12px;	font-weight:bold;	margin:2px 0 0 8px;	font-family:"微軟雅黑";	text-shadow:0px 0 13px #fff;	}.toux{	width:60px;	height:60px;	border-radius:5px;	z-index:10000px;	position:absolute;	top:25px;	left:8px;	box-shadow:0 0 7px #ECECEC;	border:1px solid #AFB9C3;	}.toux:hover{	box-shadow:0 0 12px #06ACF1;	}.toux span{	width:58px;	height:58px;	display:block;	border-radius:5px;	border:1px solid #fff;	background:#44B6D0;	}.radiusnow{	border-radius:5px 0 0 0;	padding:10px;	border-top:1px solid #1596AB;	background:#fff;	}.radiustwo{	border-radius:0 30px 0 0;	padding:10px;	position:absolute;	left:60px;	top:35px;	background:#fff;	border-top:2px solid #1596AB;	}.radiusthree{	border-radius:17px;	background:#fff;	padding:20px;	position:absolute;	left:78px;	top:40px;	z-index:1000;	border-top:2px solid #1596AB;	}.radiusfour{	border-radius:40px;	background:#fff;	padding:40px;	position:absolute;	left:115px;	top:30px;	z-index:2000;	border-top:2px solid #1596AB;	}.radiusfive{	border-radius:25px;	background:#fff;	padding:20px;	position:absolute;	left:190px;	top:35px;	z-index:2000;	border-top:2px solid #1596AB;	}.radiussix{	border-radius:30px;	background:#fff;	padding:30px;	position:absolute;	left:229px;	top:28px;	z-index:2000;	border-top:2px solid #1596AB;	}.radiusseven{	border-radius:18px;	background:#fff;	padding:10px;	position:absolute;	left:279px;	top:37px;	z-index:2000;	border-top:2px solid #1596AB;	}.right{	left:85px;	top:25px;	z-index:3000;	position:absolute;	}.state{	width:8px;	height:8px;	border-radius:8px;	border:2px solid red;	background:#fff;	}.state em{	width:2px;	height:8px;	display:block;	background:red;	margin-left:3px;	-webkit-transform:rotate(-40deg);	}.san{	border-style:solid;	display:block;	left:16px;	top:3px;	border-color:#375357 #1CA4BA;	border-width:4px 4px 0 4px;	}	.name{	left:26px;	top:0;	width:70px;	margin-left:10px;	font-size:13px;	text-shadow:0 0 10px #fff;	}.search{	margin:30px 0 0 10px;	z-index:4000;	border-radius:4px;	border:1px solid #D0D0D0;	height:26px;	color:#808080;	line-height:26px;	width:283px;	text-indent:8px;	background:-webkit-radial-gradient(top, #E3E3E3 20px,#fff 20%);	}.search div .a{	width:10px;	height:10px;	display:block;	top:3px;	right:20px;	border-radius:8px;	border:2px solid #67979F;	}.search div .b{	width:3px;	height:10px;	display:block;	top:13px;	right:20px;	-webkit-transform:rotate(-35deg);	background:#67979F;	}.san_two{	border-style:solid;	display:block;	right:6px;	top:10px;	border-color:#375357 #fff;	border-width:4px 4px 0 4px;	}	.nav{	margin-top:70px;	}.nav ul{	height:33px;	border-radius:3px;	background:#fff;	}.nav ul .currte{	width:98px;	height:33px;	border-top-left-radius:6px;	border-bottom:1px solid #EFF6F8;	background:-webkit-linear-gradient(#D4ECEF,#EAF5F7,#fff);	}.nav ul .border{	height:32px;	width:199px;	border:1px solid #ccc;	}.nav dl{	padding-left:10px;	}.nav dl dd p{	padding-left:20px;	top:0;	font-family:'微軟雅黑';	}.nav dl dd em{	border-style:solid;	display:block;	top:4px;	border-color:#fff #787878;	border-width:4px 0px 4px 4px;	}.nav dl .now{	margin-top:10px;	}.nav dl .two{	margin-top:35px;	}.nav dl .three{	margin-top:60px;	width:200px;	}.about{	margin:50px;	line-height:30px;	}.f_left{	float:left;	}.f_right{	float:right;	}.absolute{	position:absolute;	}.relative{	position:relative;	}</style></head><body><div   id="iwvjtn8m0"   class="main f_left">	<div   id="iwvjtn8m0"   class="top">	<h1>QQ2012</h1>	</div>	<span id="iwvjtn8m0"    class="radiusnow"></span>	<span id="iwvjtn8m0"    class="radiustwo"></span>	<span id="iwvjtn8m0"    class="radiusthree"></span>	<span id="iwvjtn8m0"    class="radiusfour"></span>	<span id="iwvjtn8m0"    class="radiusfive"></span>	<span id="iwvjtn8m0"    class="radiussix"></span>	<span id="iwvjtn8m0"    class="radiusseven"></span>	<p class="toux"><span></span></p>	<div   id="iwvjtn8m0"   class="right">		<div   id="iwvjtn8m0"   class="state">		<em></em>		</div>		<em class="san absolute"></em>		<strong class="name absolute">VeVb</strong>		<p style="margin-top:15px;">離開(kāi)以后 第8天。。。</p>	</div>	<div   id="iwvjtn8m0"   class="search absolute">		<p class="f_left">搜索聯(lián)系人，網(wǎng)頁(yè)信息和問(wèn)問(wèn)答案</p>		<div   id="iwvjtn8m0"   class="f_right">			<em class="a absolute"></em>			<em class="b absolute"></em>			<em class="san_two absolute"></em>		</div>	</div>	<div   id="iwvjtn8m0"   class="nav">			<ul>				<li id="iwvjtn8m0"    class="currte f_left"></li>				<li id="iwvjtn8m0"    class="border f_left"></li>			</ul>			<dl>				<dd class="absolute now"><em class="absolute"></em> <p class="absolute">[201/689]</p></dd>				<dd class="absolute two"><em class="absolute"></em> <p class="absolute">[1/1]</p></dd>				<dd class="absolute three"><em class="absolute"></em> <p class="absolute">Myboss [1/3]</p></dd>			</dl>	</div></div><div   id="iwvjtn8m0"   class="about f_left">	運(yùn)用 css3屬性的 :	<p>漸變[radial-gradient();]</p>	<p>圓角[border-radius:;]</p>	<p>斜角[transform:rotate();]</p>	<p>字體陰影[text-shadow:;]</p>	<p>陰影[box-shadow:;]</p>	</div></body></html>

上一篇：css3的transition模仿Js的放大鏡效果

下一篇：CSS3模仿的圓角Js彈出框效果，圖片盒子