定位：

 <html>

          <head>

                   <meta charset="utf-8" />

                   <title>定位</title>

                   <style>

                            div{width:500px;height:500px;background:red;

                            position:relative;left:20px;top:20px;}

                            i{position:absolute;left:15px;bottom:15px;

                            width:30px;height:30px;background:blue;}

                            b{width:60px;height50px;background:yellow;

                            position:fixed;right:10px;top:10px;}

                   </style>

          </head>

          <body>

                    <div>

                           <i></i>

                    </div>

                    <b></b>

          </body>

 </html>

position：

　　相对定位：relative，1、不改变元素的类型；2、参照物是他自己本身；作用：是给绝对定位当父级用。

　　绝对定位：absolute，1、元素变成块；默认的参照物是body；如果父级给了相对定位，他的参照物是父级。　　

　　固定定位：position：fixed；1、参照物是屏幕可视区；2、元素变成块；

注意：加了定位就要写top，bottom，left，right。

京东页面导航栏：

 <html>

          <head>

                    <meta charset="utf-8" />

                    <title>京东</title>

                    <link rel="stylesheet" href="css/base.css" />

                    <style>

                             header_top{width:100%;

                             height:30px;background:#e3e4e5;

                             border-bottom:1px solid #dfdfe0;}

                             header_nav{width:989px;height:30px;

                             position:absolution;right:30px;}

                             .header_top .header_nav .fl li{float:right;color:#999999;

                             line-height:30px;}

                             .header_top .header_nav .fr li{float:left;color:999999;

                             line-height:30px;}

                    </style>

          </head>

          <body>

                   <div class="header_top">

                           <div class="header_nav">

                                   <ul class="fl">

                                        <li>位置</li>

                                   </ul>

                                   <ul class="fr">

                                        <li>你好，请先登录 免费注册</li>

                                        <li>我的订单</li>

                                        <li>我的京东</li>

                                        <li>京东会员</li>

                                        <li>企业采购</li>

                                        <li>客户服务</li>

                                        <li>网站导航</li>

                                        <li>手机京东</li>

                                   </ul>

                           </div>

                   </div>

          </body>

 </html>
 *{margin:;padding:;}

 body,h1,h2,h3,h4,h5,h6,p,div,ul,ol,dl,i,em,strong,background,form{font-size:12px,font-family:'Microsoft Yahei';}

 ui,ol,dl{list-style:none;}

 a{text-decoration:none;color:#000;}

 i,em{font-style:normal;}

 b,strong{font-weight:normal;}

 input,textarea{outline:none;resize:none;}

 .fl{float:left;}

 .fr{float:right;}

 .clearFix:after{display:block;content:'';clear:both;zoom:;}

css的基础用法（下）的更多相关文章

  1. css的基础用法之标签选择

    一.css的4种引入方式 #.内联式 <p style="color: red;font-size: 50px;text-align: center">Egon是一个非 ...

  2. 第12课：HTML+CSS的基础用法

    1. html之head部分的常用标签的使用 <!--指定html是标准的html还是其它的html--> <!DOCTYPE html> <html lang=&quo ...

  3. css的基础用法（上）

    css定义: CSS层叠式样表(Cascading  Style Sheets)是一种用来表现html或xml等文件样式的计算机语言.CSS不仅可以静态的修饰网页,还可以配合各种脚本语言动态地对网页个 ...

  4. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  5. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

  6. Smarty基础用法

    一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...

  7. 【Python爬虫】selenium基础用法

    selenium 基础用法 阅读目录 初识selenium 基本使用 查找元素 元素互交操作 执行JavaScript 获取元素信息 等待 前进后退 Cookies 选项卡管理 异常处理 初识sele ...

  8. 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)

    第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...

  9. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

随机推荐

  1. 深入理解JavaScript系列（31）：设计模式之代理模式

    介绍 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问. 代理模式使得代理对象控制具体对象的引用.代理几乎可以是任何对 ...

  2. js控制字符处理

    使用js在对json字符串转json对象时,如果遇到一些控制(特殊)字符会出现转化失败的情况 处理方法:通常我们可以把这些控制字符替换成空 function character(str) { retu ...

  3. 初识MySQL——人生若如初相逢

    CREATE TABLE `student`(`studentNo` INT (4) NOT NULL PRIMARY KEY COMMENT '学号',`loginPwd` VARCHAR(20) ...

  4. python 基础 知识

    Python Python 是一种强类型 的解释型 动态型语言Python 对象中的不可变 数字,字符串,元组 ,对于不能改变的会创建一个新的                可变  列表 , 字典   ...

  5. centos7 版本防火墻操作和配置

    1.关闭firewall:systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止fire ...

  6. flash8中利用遮罩制作图片切换效果

    http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html

  7. mybatis3 step by step 快速上手

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...

  8. 设计模式之简单工厂模式（Simple Factory）

    原文地址:http://www.cnblogs.com/BeyondAnyTime/archive/2012/07/06/2579100.html 今天呢,要学习的设计模式是“简单工厂模式”,这是一个 ...

  9. 一、选择与安装——Linux学习笔记

    A)为什么要用Linux做服务器? 网络理由: 1.linux本身是网络操作系统,支持所有TCP/IP协议,网络功能是内核中六大模块之一 2.linux和unix兼容,unix是早期的服务器霸主,现在 ...

  10. vue-cli run dev 和 run build 出现的问题（运行项目、打包项目）

    前些天做项目,过程中遇到了一个比较奇怪的问题:npm run dev 和 npm run build 的时候,出现了错误,导致项目无法启动.打包无法成功.报了一堆错误: 错误展示: 找了一下解决方案, ...