定位：

 <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. SVM之Python实现

    SVM Python实现 Python实现SVM的理论知识 SVM原始最优化问题: \[ min_{w,b,\xi}{1\over{2}}{||w||}^2 + C\sum_{i=1}^m\xi^{( ...

  2. 细说C#中的序列化与反序列化的基本原理和过程

    虽然我们平时都使用第三方库来进行序列化和反序列化,用起来也很方便,但至少得明白序列化与反序列化的基本原理. 懂得人就别看了! 注意:从.NET Framework 2.0 开始,序列化格式化器类Soa ...

  3. Visual Studio 安装OpenCV及问题总结

    1.VS安装OpenCV基本步骤 1)安装Visual Studio 下载网址https://opencv.org/releases.html# 2)安装OpenCV 下载网址https://www. ...

  4. [转]ASP.NET MVC中的两个Action之间值的传递--TempData

    本文转自:ASP.NET MVC中的两个Action之间值的传递--TempData 一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在 ...

  5. javascript window.open in safari

    在ios系统中,无法使用 window.open 打开url,经过一番尝试终于找到了解决办法 var url='http://www.baodu.com'; var deviceAgent = nav ...

  6. php服务端学习感想

    php是全世界web开发领域最受欢迎的语言,学习php的人一般都会些前端,懂些html/js/css等,php用得最多的是用于写业务逻辑.如果浮于表面,写过几个月php的人和写几年php的人可能差别不 ...

  7. Node中使用mysql模块遇到的问题

    Node的mysql模块,本人的感受就是不好用,各种报错,各种坑,有一个问题困扰了我很久,也不知道是不是我使用的方式不对,不过后来用easymysql模块解决了,我才深信这是一个坑. 问题描述: 假设 ...

  8. BZOJ2438: [中山市选2011]杀人游戏(tarjan)

    题意 题目链接 Sol 这题挺考验阅读理解能力的.. 如果能读懂的话,不难发现这就是在统计有多少入度为\(0\)的点 缩点后判断一下即可 当然有一种例外情况是\(1 -> 3, 2 -> ...

  9. MicroService

  10. SharePoint Tricks - HTML & CSS & JavaScript

    1. 隐藏Quick Launch <style type="text/css">/*-- Hide Quick Launch --*/#s4-leftpanel{   ...