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{ 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>
时间: 2024-12-21 23:43:13

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

智博星科技:为了方便大家操作百度推广账户实名认证

百度推广账号相信大家都不陌生,如何有效的注册,2014年7月开始,百度推广账户的实名认证由一次性认证向每年认证一次发展,开通百度竞价的客户都知道,一年的时间过去了,不管过去的这段时间,竞价做得怎么样,投出比,转化率,等……多么好还是多么不好,但是但是到了年审的时候该年审就得年审,果不及时认证的,会影响整个推广账户的推广.现在我来给你们介绍怎么样年审吧可能大家就不能完全把握今天就带领大家详细了解一下百度推广账号该如何注册. 百度推广账户实名认证怎么操作?近年来百度推出年审加V认证,来净化互联网环境

css定位技术解析

css定位技术,在网页设计开发中有着很重要的作用.有许多的案例都可以用到它.比如说二级菜单,弹窗,图片轮播等等.现在我来总结一下它的使用. css定位属性是position,它有如下的几种属性值: 1:static:(默认值)无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. 2:relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置. 3:absolute:对象脱离正常文档流,使用top,r

Css3之基础-11 Css定位(定位概念 、定位方式)

一.CSS 定位概述 定位概念 - 普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级元素都会出现在一个新行中 - 内联元素将在一行中从左到右排列水平布置 - 浮动 - 相对定位 - 绝对定位 - 固定定位 定位属性 - position属性: - position: static/relative/absolute/fixed; - 偏移属性:实现元素框位置的偏移 - top/bottom/right/left: value; - 堆叠顺序 - z-index: val

【免费下载】全套最新 001网页制作HTML+CSS 视频教程+教学资料+学习课件+源代码+软件开发工具

001网页制作HTML+CSS视频教程 网盘地址: 链接:https://pan.baidu.com/s/1yTFfvxw8Mj9hoQfLh0G8TQ 提取码:bk9r 加公众号 获取更多新教程 教程目录大纲 ./001网页制作HTML+CSS ├── 01视频教程 │?? ├── 01HTML基础入门 │?? │?? ├── 10.HTML&CSS基础_实体.avi │?? │?? ├── 11.HTML&CSS基础_图片标签.avi │?? │?? ├── 12.HTML&C

《传智播客网页平面设计视频教程》

<传智播客网页平面设计视频教程>包括:网页设计制作平面设计 UI设计FLASH交互动画是传智播客最新传智播客网页美工PS平面设计培训学习视频教程全套视频里面有上课所有用到的PPT+代码等. <传智播客网页平面设计视频教程>下载地址:    www.dwz.cn/owvZ4 1:网页设计制作掌握页面设计制作的整体流程可以独立完成网页设计与制作 网页版式设计与配色技巧(8day)视频教程 HTML+Css(14day) 视频教程 html核心技术课程:认识什么是HTML. 标记的语法.

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

html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记--同时介绍了目前流行的web标准与css网页布局实例,以及基于语言的网页特效制作.需要的朋友们可以下载看看! HTML\CSS\JavaScript网页制作从入门到精通共分为18章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特效制作.为了便于读者学习,附录中

3)js的基础语法使用以及css定位

Css 定位: background-position: 20px 40px; (1)相对定位: 如果仅仅对当前盒子设置相对定位,那么他与原来的盒子没有任何变化 只有一个作用:  父相子绝,不适用相对定位来做压盖现象 不脱标.形影分离.老家留坑 (2)绝对定位: 设置绝对定位的盒子,脱离标准流 (3)固定定位 1):相对定位: <!DOCTYPE html><html lang="en"><head>    <meta charset=&quo

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10

CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: 1. 标准流   (最稳定) 2. 浮动流   (float 其次) 3. 定位流    ( 稳定性最后) 定位是完全脱离标准流的一种布局方式. 其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学