<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. 大叔也说Xamarin~Android篇~为HttpClient共享Session，android与api的session共享机制

    回到目录 杂谈 在进行android进行开发时,我们的数据一般通过接口来获收,这里指的接口泛指web api,webservice,wcf,web应用程序等:它们做为服务端与数据库进行直接通讯,而AP ...

  2. Atititi.名字 姓名 name 起名naming spec 的构成结构规范v2 qc2.docx

    Atititi.名字 姓名 name 起名naming spec 的构成结构规范v2 qc2.docx 1.1. 职业名 官职等 amir 阿米尔 放前面1 1.2. 本名1 1.3. 父名,祖名,一 ...

  3. java之设计模式

    一.代理模式 a.抽象角色(接口):声明真实对象和代理对象的共同接口 b.代理角色:代理对象角色内部含有对真实对象的引用,从而可以操作真实对象,同时代理对象提供与真实对象相同的接口以便在任何时刻都能替 ...

  4. Vagrant使用简介

    一.简介: Vagrant是一款用于构建及配置虚拟开发环境的软件,基于Ruby,主要以命令行的方式运行.主要使用Oracle的开源VirtualBox虚拟化系统,与Chef,Salt,Puppet等环 ...

  5. SQL Server的日期和时间类型

    Sql Server使用 Date 表示日期,time表示时间,使用datetime和datetime2表示日期和时间. 1,秒的精度是指使用多少位小数表示秒 DateTime数据类型秒的精度是3,D ...

  6. docker快速入门+搭建javaweb环境

    一.windows安装 不要安装旧的 boot2docker包,直接安装 DockerToolbox. 一路next,安装完成以后 试用 1.以管理员身份运行 docker quickstart te ...

  7. hdu4750Count The Pairs（最小生成树找瓶颈边）

    /* 题意:就是给你一个图,图的每两个点都有多条路径,每一条路径中都有一条最大边, 所有最大边的最小边(也就是瓶颈边)就是这两点之间的val值!然后给你一个值f, 问有多少个顶点对的val>=f ...

  8. Unity3D默认的快捷键

    shift +方向键             向“向方向键前进” Windows系统Unity3D中的快捷键 组合键 键 功能 File 文件 Ctrl   N New Scene 新建场景 Ctrl ...

  9. Floyd算法(三)之 Java详解

    前面分别通过C和C++实现了弗洛伊德算法,本文介绍弗洛伊德算法的Java实现. 目录 1. 弗洛伊德算法介绍 2. 弗洛伊德算法图解 3. 弗洛伊德算法的代码说明 4. 弗洛伊德算法的源码 转载请注明 ...

  10. [转载]"百度方法+"案例—从持续集成到持续交付

    前言 百度开放云(https://bce.baidu.com)是百度基于十五年基础架构核心技术积累推出的云服务,目前推出了14个云计算产品和9个大数据产品,并提供数字营销云.在线教育.物联网等10种解 ...