定位：

 <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. 在 Visual Studio 中调试 XAML 设计时异常

    在 Visual Studio 中进行 WPF, UWP, Silverlight 开发时,经常会遇到 XAML 设计器由于遭遇异常而无法正常显示设计器视图的情况.很多时候由于最终生成的项目在运行时并 ...

  3. js实现选中当前元素并改变颜色（js、jq的各种循环）

    1.jq伪类选择器(:not)的使用 2.js jq运用数组循环 3.checkbox的选中循环事件 4.select的选中事件 <select class="ssss" o ...

  4. asp and javascript: sql server export data to csv and to xls

    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <% //塗聚文 //20131021 functio ...

  5. 前端小课堂 js：what is the function？

    js 函数: 概念:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 说白了就是响应用户操作所执行的代码,通过js事件触发,然后调用执行函数里代码的操作. 比如常见的用户点击事件,用户点击 ...

  6. jQuery可调整表和列宽插件-colResizable

    最基本的例子 引入JS <script src="js/jquery-1.8.0.min.js" type="text/javascript">&l ...

  7. .NET开源工作流RoadFlow-流程运行-菜单配置

    经过流程设计和表单设计后,一个流程就设置完成了,下面说说怎么让设计好的流程运行起来吧. 流程和表单设计完成发布后都在应用程序库里,我们只要将流程在角色应用中配置给相应的用户即可让流程选择了. 在系统管 ...

  8. 【Linux】sudo用户权限管理

    权力下放 一.权力分配- sudo Sudo是Unix/Linux平台上的一个非常有用的工具,它允许系统管理员分配给普通用户一些合理的"权力",让 他们执行一些只有超级用户或其他特 ...

  9. qt打开url

    QDesktopServices::openUrl(QUrl(QLatin1String(“http://blog.const.net.cn“)))

  10. Java性能调优实践

    1 导论 JVM主要有两类调优标志:布尔标志和附带参数标志 布尔标志:-XX:+FlagName表示开启,­-XX:-FlagName表示关闭. 附带参数标志:-XX:FlagName=somethi ...