欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css的基础用法（下）

程序员文章站 2022-06-28 10:33:07
定位： position： 相对定位：relative，1、不改变元素的类型；2、参照物是他自己本身；作用：是给绝对定位当父级用。 绝对定位：absolute，1、元素变成块；默认的参照物是body；如果父级给了相对定位，他的参照物是父级。 固定定位：position：fixed；1、参照物是屏幕可 ......

定位：

 

 1 <html>
 2          <head>
 3                   <meta charset="utf-8" />
 4                   <title>定位</title>
 5                   <style>
 6                            div{width:500px;height:500px;background:red;
 7                            position:relative;left:20px;top:20px;}
 8                            i{position:absolute;left:15px;bottom:15px;
 9                            width:30px;height:30px;background:blue;}
10                            b{width:60px;height50px;background:yellow;
11                            position:fixed;right:10px;top:10px;}
12 
13                   </style>
14          </head>
15          <body>
16                    <div>
17                           <i></i>
18                    </div>
19                    <b></b>
20          </body>
21 </html>

 

position：

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

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

 

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

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

 

京东页面导航栏：

 1 <html>
 2          <head>
 3                    <meta charset="utf-8" />
 4                    <title>京东</title>
 5                    <link rel="stylesheet" href="css/base.css" />
 6                    <style>                    
 7                             header_top{width:100%;
 8                             height:30px;background:#e3e4e5;
 9                             border-bottom:1px solid #dfdfe0;}
10                             header_nav{width:989px;height:30px;
11                             position:absolution;right:30px;}
12                             .header_top .header_nav .fl li{float:right;color:#999999;
13                             line-height:30px;}
14                             .header_top .header_nav .fr li{float:left;color:999999;
15                             line-height:30px;}
16 
17                    </style>
18          </head>
19          <body>
20                   <div class="header_top">
21                           <div class="header_nav">
22                                   <ul class="fl">
23                                        <li>位置</li>
24                                   </ul>
25                                   <ul class="fr">
26                                        <li>你好，请先登录 免费注册</li>
27                                        <li>我的订单</li>
28                                        <li>我的京东</li>
29                                        <li>京东会员</li>
30                                        <li>企业采购</li>
31                                        <li>客户服务</li>
32                                        <li>网站导航</li>
33                                        <li>手机京东</li>
34                                   </ul>
35                           </div>
36                   </div>
37          </body>
38 </html>
 1 *{margin:0;padding:0;}
 2 body,h1,h2,h3,h4,h5,h6,p,div,ul,ol,dl,i,em,strong,background,form{font-size:12px,font-family:'Microsoft Yahei';}
 3 ui,ol,dl{list-style:none;}
 4 a{text-decoration:none;color:#000;}
 5 i,em{font-style:normal;}
 6 b,strong{font-weight:normal;}
 7 input,textarea{outline:none;resize:none;}
 8 .fl{float:left;}
 9 .fr{float:right;}
10 .clearFix:after{display:block;content:'';clear:both;zoom:1;}

 

上一篇： 中国移动互联网创客马拉松大赛，让梦想照进现实

下一篇： 华硕电脑用u盘装系统安装win8系统的详细教程

推荐阅读