模板--01

1.代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>web</title>
		
		<style type="text/css">
			body{
				background: url(../img/1.jpg);
				background-size:100% 100%;
  				background-repeat:no-repeat;
			}
			
			.main{
				text-align: center;
				padding: 0 0 0 50px;
  				background-repeat:no-repeat;
			}
			.window{
				background-color:#9b59b6;
				height: 550px;
				width: 400px;
				padding: 0 20px ;
				
			}
			.top img{
				padding: 15px 0 0 0;
				width: 20%;
			}
			.top h5{
				padding: 0;
				color: white;
			}
			.top p{
				padding: 0 0 0 0;
				color: whitesmoke;
				font-size: small;
			}
			.top{
				padding: 0 0 0 30px;
				border-bottom: 1px solid floralwhite;
			}
			.mid{
				padding: 0 50px 0 0;
				
			}
			.mid p{
				text-align: left;
				font-size: 11px;
			}
			.sum{
				height: 8px;
				width: 100%;
				background:#B57BCC;
				border-radius: 8px;
			}
			.one,.two,.three{
				height: 8px;
				display: block;
				background:floralwhite;
			}
			.ji_lu{
				padding: 15px 0 0 0;
			}
			.ji_lu ul{
			margin: 0;
			padding: 0;
			}
			.ji_lu ul li{
		    display: inline-block;
		    list-style-type: none;
		    background: #fff;
		    width: 32.9%;
		    float: left;
		    height: 30px;
		    padding: 3px 0;
 		  	border-right:1px solid #D6D2D2;
			}
			.ji_lu ul li a{
   			text-decoration: none;
   			color: #CF9ED9;
		    font-size: 14px;
		    text-align: center;
		    padding-top: 32px;
		    display: block;
		    height: 23px;
			}
			.ji_lu ul li a.eay{
				background: url(../img/2.png) no-repeat 45px 8px;
			}
			.ji_lu ul li a.tok{
				background: url(../img/2.png) no-repeat -60px 8px;
			}
			.ji_lu ul li a.hert{
				background: url(../img/2.png) no-repeat -160px 8px;
			}
			.down{
				padding: 45px 0 0 0;
				text-align: center;
			}
			.down p{
				font-size: 10px;
			}
			.link ul{
				margin: 0;
				padding: 15px ;
			}
			.link ul li {
			list-style-type:none;
			display:inline-block;
			margin:0 1px;
			}
			.link ul li a{
			width:30px;
			height:30px;
			display:block;
			}
			.link ul li a.A{
				background: url(../img/3.png) no-repeat ;
			}
			.link ul li a.B{
				background: url(../img/3.png) no-repeat -30px ;
			}
			.link ul li a.C{
				background: url(../img/3.png) no-repeat -60px;
			}
			.link ul li a.D{
				background: url(../img/3.png) no-repeat -90px;
			}
			.link ul li a.E{
				background: url(../img/3.png) no-repeat -120px;
			}
			.follow {
				width: 150px;
				height: 30px;
				text-align:center;
    			width: 38%;
				background-color:#B57BCC;
				border: none;	
			}
		</style>
	</head>
	
	<body>
		<div class="main">
			<h2>MINI PROFILE WIDGET</h2>
			<div class="window">
				<div class="top">
					<img src="../img/1.png"/>
					<h5>Kimberly Thompson</h5>
					<p>Web Designer</p>
				</div>
				<div class="mid">
					<p>UX/UX</p>
					<div class="sum">
						<div class="one" style="width: 100%;border-radius: 8px;">
						</div>	
					</div>
					<p>HTML / CSS3 / SASS</p>
					<div class="sum">
						<div class="two" style="width: 80%;border-radius: 8px;">
						</div>
					</div>
					<p>JAVASCRIPT</p>
					<div class="sum">
						<div class="three" style="width: 70%;border-radius: 8px;">
						</div>
					</div>
				</div>
				<div class="ji_lu">
						<ul>
							<li><a class="eay" href="#"></a></li>
							<li><a class="tok" href="#"></a></li>
							<li><a class="hert" href="#"></a></li>
						</ul>
					</div>
				<div class="down">
						<p>Nemo enim ipsam volup sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>	
					
					<div class="link">
						<ul>
							<li><a class="A" href="#"></a></li>
							<li><a class="B" href="#"></a></li>
							<li><a class="C" href="#"></a></li>
							<li><a class="D" href="#"></a></li>
							<li><a class="E" href="#"></a></li>
						</ul>
					</div>
					<button class="follow">
						FOLLOW
					</button>	
				</div>
				
			</div>
		</div>
		<br /><br /><br /><br /><br /><br />
	</body>
</html>
网页模板----01

模板--01

1.代码展示

2.效果图
