11.20 CSS定位智博星网页制作

编程入门行业动态更新时间:2024-10-08 08:27:19

11.20 CSS定位智博<a href=https://www.elefans.com/category/jswz/34/104411.html style= 星网页制作"/>

11.20 CSS定位智博星网页制作

<html xmlns="">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<style type="text/css">
	*{
	margin:0px;
	padding:0px;}
	body{
	background-image:url(banner.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:100%}

	#a1{ width:100%; height:950px; position:relative; text-align:center;}

	.a2{
	width:200px; height:30px; border:1px solid #03F; border-radius:10px; background-color:#09F; cursor:pointer;
	position:relative; margin:20px auto; line-height:30px; color:#FFF; transform:0.5s;}
	.a2:hover{
	background-color:#0FF
	}

	#a3{ width:100%; height:950px; position:relative; text-align:center; background-image:url(banner2.jpg); background-repeat:no-repeat; background-size:100%}

	#a4{ width:100%; height:950px; position:relative; text-align:center; background-image:url(banner3.jpg); background-repeat:no-repeat; background-size:100%}
	#shang{
	width:100%; height:50px; position:fixed; background-color:#000; top:0px; left:0px; opacity:0.5; z-index:2;}
	#zuo{
	width:200px; height:50px; position:fixed; top:10px; left:20px; z-index:2; background-image:url(logo-01.png); background-repeat:no-repeat; }
	#zhong{
	width:600px; height:50px; color:#FFF; position:fixed; z-index:2; top:15px; right:100px; font-family:"黑体"}
	#you{
	width:400px; height:50xp; position:fixed; top:15px; right:100px; z-index:2;}
	#aa{
	border-radius:15px; position:fixed; top:10px; right:20px; width:150px; height:25px; background:none;}
	.anniu{
	width:80px; height:20px; border:1px solid #03F; position:fixed; top:10px; right:300px; z-index:2; text-align:center; border-radius:6px;}

	#cc{
	width:100%; height:350px; position:relative; top:-280px; background-color:#000}
	.zz{
	width:240px; height:50px; background-repeat:no-repeat; position:relative;}
	.tt{
	width:130px; height:200px; position:absolute; color: #06C;}
	</style>






	</head>

	<body>
	<div id="shang"></div>
	<div id="zuo"></div>
	<div id="zhong">
	<table>
	<tr>
	<td>首页</td><td>  </td>
	<td>下载</td><td>  </td>
	<td>动态</td> <td>  </td>
	<td>社区</td><td>  </td>
	<td>智博星</td>
	</tr>
	</table>
	</div>
	<div class="anniu">登陆</div>
	<div class="anniu" style="top:10px; right:200px; background-color:#03F; color:#FFF" >注册</div>

	<div id="you"> <input id="aa" type="text" placeholder="搜索"/></div>




	<div id="a1">
	<img src="01.png" style="margin-top:300px";/><br />
	<img src="02 (1).png" style="margin:20px; opacity:0.8" /><br />
	<div class="a2">产品亮点</div><br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />


	<div id="a3">
	<img src='01 (1).png' style="margin-top:300px";/><br />
	<img src="02 (1).png" style="margin:20px; opacity:0.8" /><br />
	<div class="a2">用户故事</div>
	<br />
	<br />
	<br />

	<div id="a4">
	<img src="01 (2).png" style="margin-top:300px";/><br />
	<img src="02 (2).png" style="margin:20px; opacity:0.8" /><br />
	<div class="a2">功能列表</div>
	</div>
	<div id="cc">
	<div class="zz" style="background-image:url(IOS.png); top:50px; left:300px;">
	<div class="tt" style="top:100px">
	<ul><font color="#FFFFFF" face="宋体" size="+2">支持</font><br />
	<br />

	<li>产品介绍</li><br />
	<li>使用手册</li><br />
	<li>更新日志</li><br />
	<li>案例展示</li>
	</ul>

	</div>



	<div>
	<div class="zz" style="background-image:url(AN.png); top:0px; left:300px;">

	<div class="tt" style="top:100px">
	<ul><font color="#FFFFFF" face="宋体" size="+2">公司</font><br />
	<br />

	<li>关于团队</li><br />
	<li>招聘专栏</li><br />
	<li>新闻资讯</li><br />
	<li>合作专栏</li>
	</ul>

	</div>

	<div class="zz" style="background-image:url(PC.png); top:0px; left:300px;">


	<div class="tt" style="top:100px">
	<ul><font color="#FFFFFF" face="宋体" size="+2">支持</font><br />
	<br />

	<li>官方博客</li><br />
	<li>用户社区</li><br />
	<li>隐私声明</li><br />
	<li>服务条款</li>
	</ul>

	</div></div></div>




	</div>
	</div>



	</body>
	</html>