定位：

 <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. nyoj 568——RMQ with Shifts——————【线段树单点更新、区间求最值】

    RMQ with Shifts 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述     In the traditional RMQ (Range Minimum Q ...

  2. SQL Server Profiler(转载)

    SQL Server Profiler工具 一.SQL Profiler工具简介 SQL Profiler是一个图形界面和一组系统存储过程,其作用如下: 图形化监视SQL Server查询: 在后台收 ...

  3. Cookie的创建、读取、删除

    创建Cookie: HttpCookie cookie =  new HttpCookie(COOKIE_NAME_FOR_USER);cookie.Expires = DateTime.Now.Ad ...

  4. hello2详解

    1.GreetingServlet.java(显示问候页面表单) 此servlet重写该doGet方法,实现GETHTTP方法.servlet显示一个简单的HTML问候表单,其提交按钮就像hello1 ...

  5. Redis的Publish/Subscribe

    Publish/Subscribe 从字面上理解就是发布(Publish)与订阅(Subscribe),在Redis中,你可以设定对某一个key值进行消息发布及消息订阅,当一个key值上进行了消息发布 ...

  6. 五校联考模拟赛Day2T2矩阵(容斥原理)

    题意 $n * m$的网格,对其进行黑白染色,问每一行每一列至少有一个黑格子的方案数. Sol 考场上只会$n^3$的dp,还和指数级枚举一个分qwq 设$f[i][j]$表示到了第$i$行,已经有$ ...

  7. html5 嵌入元素 img map areaiframe embed meter object meter

    <img src="路径">            src 路径可以是img.jpg 也可以是 绝对和相对路径+img.jpg <img src="路径 ...

  8. Angular 基础教程(1)

    简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...

  9. Web系统常见安全漏洞及解决方案-SQL盲注

    关于web安全测试,目前主要有以下几种攻击方法: 1.XSS 2.SQL注入 3.跨目录访问 4.缓冲区溢出 5.cookies修改 6.Htth方法篡改(包括隐藏字段修改和参数修改) 7.CSRF ...

  10. (原创)攻击方式学习之(3) - 缓冲区溢出(Buffer Overflow)

    堆栈溢出 堆栈溢出通常是所有的缓冲区溢出中最容易进行利用的.了解堆栈溢出之前,先了解以下几个概念: 缓冲区 简单说来是一块连续的计算机内存区域,可以保存相同数据类型的多个实例. 堆栈     堆 栈是 ...