定位：

 <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. 关于微信小程序的动态跳转

    最近在研究微信小程序.在做一个简单的购物小程序时,遇到一个问题:如何通过扫码实现动态的跳转页面功能, 通过研究终于找到了解决方法: 首先当然要实现扫码解析功能js的代码: click: functio ...

  2. maven module

    通过将一个maven项目拆分成多个module,会引入一定的项目复杂度,但随着后期项目代码的逐渐增多,最直观的感受是,每次build代码,不必build整个项目,可节省很多时间. 如果各个module ...

  3. idea 正则全局替换文件文本

    上一遍写到了log4j2分层输出日志的内容,但因为项目原先采用的log4j,现使用log4j2,需将原有log4j的代码进行替换,以前的代码类似如下: private static final Log ...

  4. python数据类型(集合)

    一.集合概念 集合是一个数学概念:由一个或多个确定的元素所构成的整体叫做集合. 集合中的元素三个特征: 确定性(元素必须可hash) 互异性(去重)——将一个列表变为集合,就自动去重了 无序性(集合中 ...

  5. JS文本中间显示省略号

    众所周知,文本溢出显示省略号用CSS就可以: 单行文本: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display ...

  6. html跨域获取数据

    a.com下的a.html,需要嵌入b.com下的b.html.这时建一个静态页面c.html将c.html放到a.com服务器中.b.html在嵌入c.html.这样,将参数值传输到c.html中, ...

  7. 2018年哔哩哔哩bilibili前端开发工程师在线笔试1

    ##基础编程能力考查(共1题) 给定一个数组,其中有n(1<n<10000)个整数,检查是否能通过修改不多余一个元素就能让数组从小到大排列. 例1: 输入:[4,2,3] 输出:true ...

  8. Laravel 单元测试-模拟认证的用户

    在 Laravel 编写单元测试时经常会遇到需要模拟认证用户的时候,比如新建文章.创建订单等,那么在 Laravel unit test 中如何来实现呢? 官方解决方法 Laravel 的官方文档中的 ...

  9. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  10. linux中启动网卡报错:Bringing up interface eth1: Error: Connection activation failed

    在重启linux网络服务的时候提示: Active connection path: /org/freedesktop/NetworkManager/ActiveConnection/2 并且产生报错 ...