css的基础用法（下）

番茄西红柿发布于2019-04-23 13:35 / 1955人阅读

摘要：定位定位相对定位，不改变元素的类型参照物是他自己本身作用是给绝对定位当父级用。固定定位参照物是屏幕可视区元素变成块注意加了定位就要写，，，。

定位：

 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;}

云服务器 GPU云服务器 php中css的用法 css基础基础css css基础教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2071.html

补习前端（css+html）基础-1：

摘要：标签将表单内容的一部分打包，生成一组相关表单的字段。提示和注释注释元素是空元素，它仅包含属性。注释此元素只能存在于部分，不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。 1.HTML 标签: 实例组合表单中的相关元素： health information height: weight: 定义和用法 fieldset 元素...

marek 2019-08-29 15:24 评论0 收藏0
补习前端（css+html）基础-1：

摘要：标签将表单内容的一部分打包，生成一组相关表单的字段。提示和注释注释元素是空元素，它仅包含属性。注释此元素只能存在于部分，不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。 1.HTML 标签: 实例组合表单中的相关元素： health information height: weight: 定义和用法 fieldset 元素...

douzifly 2019-08-02 10:26 评论0 收藏0
CSS基础篇-- :before && :after的用法，伪类和伪元素的区别

摘要：一的用法如同对伪元素的名称一样，是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，等等。一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .b...

X_AirDu 2019-08-28 18:15 评论0 收藏0
css的基础用法（上）

摘要：选择器可以可以标签选择器直接在标签里面，标签名字就可以选择到。内容会被修剪，并且其余内容是不可见的。规定应该从父元素继承属性的值。起到给加圆角的作用。代表的是上下，左右。代表的是上，右，下，左。css定义：　　CSS层叠式样表（Cascading Style Sheets）是一种用来表现html或xml等文件样式的计算机语言。CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态地对网页...

番茄西红柿 2019-04-23 13:35 评论0 收藏0
gulp基础和常用插件介绍

摘要：前提前端工程化是如今前端团队规范化管理项目和代码的概念，而前端工程化中往往是离不开前端自动化或打包工具这两种工具。参数介绍可以理解成一种类似于正则表达式的匹配模式，其值可以为匹配形式，文件路径，或者文件路径数组。前提：前端工程化是如今前端团队规范化管理项目和代码的概念，而前端工程化中往往是离不开前端自动化或打包工具这两种工具。本文将详细介绍其中一种常用的前端自动化工具---gulp....

Lsnsh 2019-08-21 17:12 评论0 收藏0