<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{ 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>&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>

11.20 CSS定位智博星网页制作的更多相关文章

  1. java基础57 css样式、选择器和css定位（网页知识）

    本文知识点(目录): 1.CSS样式    2.选择器    3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构    2.css(层叠样式表)在一个页面中负责了一个页面 ...

  2. Selenium3自动化测试【20】CSS定位元素

    CSS 指层叠样式表 (CascadingStyleSheets),CSS一种用来表现HTML或XML等文件样式的计算机语言,其能够灵活的为页面提供丰富样式的风格. CSS使用选择器为页面元素绑定属性 ...

  3. 用CSS实现定位DIV绝对位于网页底部

    网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG.尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美. 下面是我找到的一个比较完美的方法,来自国外的设计达人, ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）

    Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...

  6. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS 定位 (Positioning) 实例

    CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...

  8. CSS学习总结3：CSS定位

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

  9. HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版​

    html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...

随机推荐

  1. 10 个 Redis 建议/技巧

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/145.html?1455790611 Redis 在当前的技术社区里是非常 ...

  2. 合法提交Html标签（2）

    提交合法的HTML标签(2) 上面用到了一个Inherits属性,它用来设置页面与后台代码中相关联的类.我们打开CodeFile属性所指的文件,会找到该属性所指的类名.但是这里仅仅存放的是用户定义的事 ...

  3. Atitit 泛型原理与理解attilax总结

    Atitit 泛型原理与理解attilax总结 1. 泛型历史11.1.1. 由来11.2. 为什么需要泛型,类型安全21.3. 7．泛型的好处22. 泛型的机制编辑22.1.1. 机制32.1.2. ...

  4. IBM appscan 9.0破解版分享

    简介:IBM AppScan该产品是一个领先的 Web 应用安全测试工具,曾以 Watchfire AppScan 的名称享誉业界.Rational AppScan 可自动化 Web 应用的安全漏洞评 ...

  5. XML学习笔记5——XSD复杂数据类型

    和简单数据类型对应就是复杂数据类型了,XML元素的数据类型可以是简单数据类型,也可以是复杂数据类型,而XML属性的数据类型就只能是简单数据类型.这篇笔记,就来学习一下XSD中的复杂数据类型了. 1.定 ...

  6. 快速入门系列--WCF--02消息、会话与服务寄宿

    经过WCF基础的ABC学习,已经可以构建简单的WCF的服务,使用不同的服务地址和绑定类型,根据业务提供所需的服务契约.但不禁想问,服务所使用的消息报文是什么样的形式么?蕴含什么样内容呢?WCF服务是否 ...

  7. 截取js数组中某段值（slice）

    // var a = [1,2,3]; // console.log(a.slice(1)); >>[2, 3] 从索引1开始截取. // console.log(a.slice(1,2) ...

  8. poj 2492A Bug's Life(并查集)

    /* 目大意:输入一个数t,表示测试组数.然后每组第一行两个数字n,m,n表示有n只昆虫,编号从1—n,m表示下面要输入m行交配情况,每行两个整数,表示这两个编号的昆虫为异性,要交配. 要求统计交配过 ...

  9. static 关键字

    static对象如果出现在类中,那么该对象即使从未被使用到,它也会被构造以及析构.而函数中的static对象,如果该函数从未被调用,这个对象也就绝不会诞生,但是在函数每次被调用时检查对象是否需要诞生. ...

  10. Oracle RMAN 备份一例

    Oracle RMAN备份一例: Solaris 10 + Oracle 11.2.0.3 Shell:csh,安装有bash,脚本调用bash 备份策略:周日0级备份,周一~周六1级备份,每6小时备 ...