<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. 《Effective Java》—— 对于所有对象都通用的方法

    本节主要涉及Object中通用的一些方法,比如equals,hashCode,toString,clone,finalize等等 覆盖equals时请遵守通用约定 equals方法实现的等价关系: 自 ...

  2. Atitit 如何利用先有索引项进行查询性能优化

    Atitit 如何利用先有索引项进行查询性能优化 1.1. 再分析的话就是我们所写的查询条件,其实大部分情况也无非以下几种:1 1.2. 范围查找 动态索引查找1 1.2.1. 索引联合 所谓的索引联 ...

  3. Android Studio导入System Library步骤

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6242170.html 请尊重知识产权!!!  同步更新到CSDN:http://blog.csdn.net ...

  4. Android笔记——探究活动

    1.活动是什么       活动(Activity)是最容易吸引到用户的地方了,它是一种可以包含用户界面的组件,主要用于和用户进行交互.一个应用程序中可以包含零个或多个活动,但不包含任何活动的应用程序 ...

  5. Nodejs从有门道无门菜鸟起飞教程。

    这是一篇菜鸟教程,这是一篇菜鸟教程,如果你是菜鸟到话. 简单来说Nodejs并不是一门新的语言,但是它可以让我们的JS运行在服务器端,在服务器端写JS代码并且输入输出,也就是说以后要是有人问你JS是不 ...

  6. 一键配置本地yum源

    在使用RedHat系统过程中,经常会安装各种包,而包的安装又存在着依赖性的问题,即一个包的安装通常依赖其它很多包的安装.这样,就会相当不便.所幸,RedHat提供了Yum.Yum(全称为 Yellow ...

  7. UML学习总结

    UML中的4+1模型 UML的4+1模型是一个叫Kruchten的人发明的,但网上还有其它版本的4+1 模型:Use case view, Logic view, Process view, Impe ...

  8. javaccript学习3

    JavaScript - 捕获错误 当我们在网上冲浪时,总会看到带有 runtime 错误的 Javascript 警告框,同时会询问我们“是否进行 debug?”.像这样的错误信息或许对开发人员有用 ...

  9. Redis Lua脚本原理

    2.6版本之后支持嵌入Lua脚本,客户端使用Lua脚本,直接在服务器端原子的执行多条命令 Lua脚本执行过程 创建并修改Lua环境 1 创建基础Lua环境 2 载入函数库 3 创建全局表格Lua 4 ...

  10. nagios的nrpe的check_command配置优化

    问题处理了两个小时,MMD,各种问题: 先是出现了check_load的时候说参数错误. 然后我就希望 在nagios客户端获取到命令日志 在这篇:NREP将日志放入message中 的引导下终于解决 ...