<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. EF架构~在T4模版中为所有属性加默认值

    回到目录 在项目开发过程中,出现了一个问题,就是新添加一个非空字段后,原来的程序逻辑需要被重新修改,即将原来的字段添加到程序里,这种作法是非常不提倡的,所以,我通过T4模版将原来的实体类小作修改,解决 ...

  2. Atitit 颜色平均值cloor grb hsv模式的区别对比

    Atitit 颜色平均值cloor grb hsv模式的区别对比 使用hsv模式平均后会变得更加的靓丽一些..2 public class imgT { public static void main ...

  3. 关于sass的介绍和基本语法

    引入 什么是sass?sass是css预处理器. 那预处理器又是什么?css本身不是一种编程语言,而预处理器是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 如今主流的预处理器 ...

  4. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  5. 编译原理LL1文法分析表算法实现

    import hjzgg.first.First; import hjzgg.follow.Follow; import hjzgg.tablenode.TableNode; import hjzgg ...

  6. poj1062昂贵的聘礼（Dijkstra**）

    /* 题意: 物主有一个物品,价值为P,地位为L, 以及一系列的替代品Ti和该替代品所对应的"优惠"Vi g[u][i] 表示的是u物品被i物品替换后的优惠价格!(u>0, ...

  7. java多线程的等待唤醒机制及如何解决同步过程中的安全问题

    /* class Person{ String name; String sex; boolean flag = true; public void setPerson(String name, St ...

  8. 《BI那点儿事》浅析十三种常用的数据挖掘的技术

    一.前沿 数据挖掘就是从大量的.不完全的.有噪声的.模糊的.随机的数据中,提取隐含在其中的.人们事先不知道的但又是潜在有用的信息和知识的过程.数据挖掘的任务是从数据集中发现模式,可以发现的模式有很多种 ...

  9. 后端码农谈前端（CSS篇）第三课：选择器

    一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...

  10. SQL*Loader之CASE10

    CASE10 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase10.sql rem host write sys$output "Building dem ...