zoukankan      html  css  js  c++  java
  • 11.20 CSS定位智博星网页制作

    <html xmlns="http://www.w3.org/1999/xhtml">
      <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{ 100%; height:950px; position:relative; text-align:center;}
       
      .a2{
      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{ 100%; height:950px; position:relative; text-align:center; background-image:url(banner2.jpg); background-repeat:no-repeat; background-size:100%}
       
      #a4{ 100%; height:950px; position:relative; text-align:center; background-image:url(banner3.jpg); background-repeat:no-repeat; background-size:100%}
      #shang{
      100%; height:50px; position:fixed; background-color:#000; top:0px; left:0px; opacity:0.5; z-index:2;}
      #zuo{
      200px; height:50px; position:fixed; top:10px; left:20px; z-index:2; background-image:url(logo-01.png); background-repeat:no-repeat; }
      #zhong{
      600px; height:50px; color:#FFF; position:fixed; z-index:2; top:15px; right:100px; font-family:"黑体"}
      #you{
      400px; height:50xp; position:fixed; top:15px; right:100px; z-index:2;}
      #aa{
      border-radius:15px; position:fixed; top:10px; right:20px; 150px; height:25px; background:none;}
      .anniu{
      80px; height:20px; border:1px solid #03F; position:fixed; top:10px; right:300px; z-index:2; text-align:center; border-radius:6px;}
       
      #cc{
      100%; height:350px; position:relative; top:-280px; background-color:#000}
      .zz{
      240px; height:50px; background-repeat:no-repeat; position:relative;}
      .tt{
      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>&nbsp;&nbsp;</td>
      <td>下载</td><td>&nbsp;&nbsp;</td>
      <td>动态</td> <td>&nbsp;&nbsp;</td>
      <td>社区</td><td>&nbsp;&nbsp;</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>
  • 相关阅读:
    java学习疑问
    HTTP method GET is not supported by this URL
    详解ListView分页(带图片)显示用法案例
    MySQL 字段数据类型/长度
    getRequestDispatcher()与sendRedirect()的区别
    Codeforces Round #754 (Div. 2) D,E 题解
    CCPC2019 Harbin Site B.Binary Numbers
    2020 EC Final D. City Brain
    [USACO15JAN]Grass Cownoisseur G
    CF1295F Good Contest
  • 原文地址:https://www.cnblogs.com/hq233/p/6091672.html
Copyright © 2011-2022 走看看