2.CSS入门基础

1什么是CSS

  • 如何学习

    1. CSS是什么
    2. CSS怎么用(快速入门)
    3. CSS选择器(重点+难点)
    4. 美化网页(文字 阴影 超链接 列表…)
    5. 盒子模型
    6. 浮动
    7. 定位
    8. 网页动画(特效效果)

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现层(美化网页)

字体 颜色 边距 高度 宽度 背景图片 网页定位

2.CSS入门基础_第1张图片

1.2发展史

CSS1.0

CSS2.0 DIV(块)+CSS HTML和CSS结构分离 网页变得简单 SEO

CSS2.1 浮动 定位

CSS3.0 圆角 边框 阴影 动画… 浏览器兼容性

1.3快速入门

练习格式

在这里插入图片描述

基本入门

建议使用这种规范

2.CSS入门基础_第2张图片

CSS的优势

  1. 内容和表现分离
  2. 网页结构表现同一 可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO 容易被搜索引擎收录

1.4CSS的三种导入方式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        h1 {
      
            color: green;
        }
    style>
    <link rel="stylesheet" href="CSS/css.css">
head>
<body>



<h1 style="color: red">我是标题h1>
body>
html>
/*3.外部样式*/
h1 {
     
    color: yellow;
}

拓展 外部样式两种写法

  • 链接式 html内

    /*3.外部样式*/
    h1 {
           
        color: yellow;
    }
    
  • 导入式 @import是CSS2.1特有的


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        @import url("CSS/style.css");
    style>
head>
<body>
<h1>林宏程h1>
body>
html>

2选择器

作用:选择页面上的某一个或者某一类元素

2.1基本选择器

2.1.1标签选择权

选择一类标签 标签{}


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*标签选择器 会选择到页面上所有的这个标签的元素
        */
        h1{
      
            color: red;
            background: aqua;
            border-radius: 24px;
        }
        p{
      
            font-size: 80px;
        }
    style>
head>
<body>

<h1>学javah1>
<h1>学javah1>
<p>林宏程p>
body>
html>

2.1.2类选择器

选择所有class属性一致的标签 跨标签 .类名{}


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        /*类选择器的格式 .class的名称*/
        /*可以多个标签归类 是同一个class*/
        .title1{
      
            color: red;
        }
        .title2{
      
            color: aqua;
        }
    style>
head>
<body>
<h1 class="title1">标题1h1>
<h2 class="title2">标题2h2>
<h3 class="title1">标题3h3>

<p class="title1">P标签p>
body>
html>

2.1.3ID选择器

全局唯一 #id{}


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*id选择器 id必须保证全局唯一
          #id名称{}
          不遵循就近原则
          id选择器>类选择器>标签选择器
        */

        #title1{
      
            color: red;
        }
        .style1{
      
            color: green;
        }
        h1{
      
            color: aqua;
        }
    style>
head>
<body>
<h1 id="title1">标题1h1>
<h1 class="style1">标题2h1>
<h1 class="style1">标题3h1>
<h1>标题4h1>
<h1>标题5h1>
body>
html>

优先级

ID选择器>类选择器>标签选择权

2.2层次选择器

总体代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*后代选择器*/
        body p{
      
            color: red;
        }

        /*子选择器*/
        body>p{
      
            background: aqua;
        }

        /*相邻兄弟选择器 只有一个 向下一个*/
        .active +p{
      
            background: antiquewhite;
        }

        /*通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/
        .active~p{
      
            background: green;
        }
    style>
head>
<body>
<p>p0p>
<p class="active">p1p>
<p>p2p>
<p>p3p>
<ul>
    <li>
        <p>p4p>
    li>
    <li>
        <p>p5p>
    li>
    <li>
        <p>p6p>
    li>
ul>
<p>p7p>
<p>p8p>

body>
html>

html结构

2.CSS入门基础_第3张图片

2.2.1后代选择器

在某个元素后面所有标签 祖爷爷 爷爷 爸爸 你

/*后代选择器*/
body p{
     
    color: red;
}

在这里插入图片描述

2.2.2子选择器

在某个元素指定的后一代标签 儿子

/*子选择器*/
body>p{
     
    background: aqua;
}

在这里插入图片描述

2.2.3向下弟弟选择器

只有一个 向下一个 感觉应该叫弟弟选择器 因为他还只能向下选择

/*相邻兄弟选择器 只有一个 向下一个*/
.active +p{
     
    background: antiquewhite;
}

在这里插入图片描述

2.2.4向下所有弟弟选择器

当前选中元素的向下的所有兄弟元素

/*通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/
.active~p{
     
    background: green;
}

2.CSS入门基础_第4张图片

2.3结构伪类选择器

伪类:条件


"en">

    "UTF-8">
    Title
    
    


    

p1

p2

p3

"">a1

h1

  • li1
  • li2
  • li3

2.CSS入门基础_第5张图片

2.4属性选择器(常用)

id+class 结合的选择器

格式:

标签[属性名=属性值(正则)] {

}

= 绝对等于

*=包含

^=以什么开头

$=以什么结尾


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        .demo a{
      
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*
        格式
        标签[属性名=属性值(正则)] {}

        a[id]{}
        存在id属性的元素

        a[id=first]{} 包含id=first的元素
        =绝对等于
        */
        a[id=first]{
      
            background: green;
        }

        /*
         class中有links的元素
         *=包含这个元素
        */
        a[class*=links]{
      
            background: yellow;
        }

        /*选中href中以http开头的元素
        ^=以这个开头
        */
        a[href^=http]{
      
            background: red;
        }

        /* 选中以href中以pdf结尾的元素
        $=以这个结尾*/
        a[href$=pdf]{
      
            background: aqua;
        }

    style>
head>
<body>
<p class="demo">
    <a href="https://www.baidu.com/" class="links item first" id="first">1a>
    <a href="" class="links item active" target="_blank" title="test">2a>
    <a href="images/123.html" class="links item active" >3a>
    <a href="images/123.png" class="links item">4a>
    <a href="images/123.png" class="links item">5a>
    <a href="abc">6a>
    <a href="/a.pdf">7a>
    <a href="/abc.pdf">8a>
    <a href="abc.doc">9a>
    <a href="abcd.doc" class="links item last">10a>
p>


body>
html>

3美化网页元素

3.1为什么要美化

  1. 有效的传递页面信息
  2. 美化网页 页面漂亮才能吸引用户
  3. 凸显页面的主题
  4. 提高用的体验

span标签

重点要突出的字 使用span套起来


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>


    <style>
        #title1{
      
            font-size: 50px;
        }
    style>
head>
<body>
欢迎学习 <span id="title1">javaspan>
body>
html>

3.2字体样式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        body {
      
            font-family: "Arial Black",微软雅黑;
            color: aqua;
        }

        h1 {
      
            font-size: 50px;
        }

        p {
      

        }

        .p1 {
      
            font-weight: lighter;
        }
    style>
head>
<body>
<h1>  哼~~~
h1>

<p class="p1">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
p>

<p>
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!!
p>

<p>
    English is great
p>
body>
html>

3.3文本样式

  1. color 颜色:
    1.单词
    2.RGB:00~FF 红绿蓝三色调配 255 255 255
    3.RGBA:00~FF 红绿蓝三色调配 255 255 255 A是透明度 0~1

  2. text-align: 排版(如 居中);
    text-align: center;

  3. text-indent: 缩进;
    text-indent: 2em; em代表的是几个字体的距离

  4. line-height :行高
    background: blue;
    height: 300px;
    line-height: 300px;
    行高和块的高度一致 就可以上下居中

  5. 装饰
    text-decoration: underline;

  6. 文本图片水平对齐
    vertical-align: middle;


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        img,span{
      
            vertical-align: middle;
        }

        h1{
      
            color:rgba(0,255,255,0.2) ;
            text-align: center;
        }
        .p1{
      
            text-indent: 2em;
        }
        .p3{
      
            background: blue;
            height: 100px;
            line-height: 100px;
        }

        .l1{
      
            /*下划线*/
            text-decoration: underline;
        }
        .l2{
      
            /*中划线*/
            text-decoration: line-through;
        }
        .l3{
      
            /*上划线*/
            text-decoration: underline;
        }
        a{
      
            /*超链接去下划线*/
            text-decoration: none;
        }
    style>
head>
<body>
<p class="l1">123123p>
<p class="l2">123123p>
<p class="l3">123123p>

<h1>
    哼   哼~~~
h1>

<p class="p1">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
p>

<p class="p2">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!!
p>

<p class="p3">
    English is great
p>

<p>
    <img src="image/a.jpg" alt="图片错误">
    <spna>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊spna>
p>
body>
html>

3.4文本阴影和超伪链接


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*默认的颜色*/
        a {
      
            text-decoration: none;
            color: blue;
        }

        /*鼠标悬浮的状态*/
        a:hover {
      
            color: orange;
            font-size: 20px;
        }

        /*鼠标按住未释放的状态*/
        a:active {
      
            color: green;
            font-size: 100px;
        }

        /*未访问过链接*/
        a:link{
      
            color: aqua;
        }

        /*访问过链接*/
        a:visited{
      
            color: gray;
        }

        /*text-shadow: 阴影颜色 水平偏移 垂直偏移 模糊半径;*/
        #price{
      
            text-shadow: cornflowerblue 10px 0px 2px;
        }
    style>
head>
<body>
<a href="#">
    <img src="image/a.jpg" alt="图片失效">
a>

<p>
    <a href="#">a>
p>

<p>
    <a href="">作者 我a>
p>

<p id="price">
    $99
p>
body>
html>

3.5列表

html代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="style.css" type="text/css">
head>
<body>
<div id="nav">
    <h2 class="title">全部产品分类h2>
    <ul>
        <li><a href="">图书a>   <a href="">音箱a>   <a href="">数字商品a>li>
        <li><a href="">家庭电器a>   <a href="">手机a>   <a href="">数码a>li>
        <li><a href="">电脑a>   <a href="">耳机a>   <a href="">鼠标a>li>
    ul>

div>


body>
html>

css代码

#nav{
     
    width: 300px;
}

.title{
     
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    background-color: red;
}
/*ul li*/
/*
list-style: ;
none   去掉圆点 去掉数字
circle 空心圆
decimal 数字
square 正方形
*/

ul{
     
    background-color: gray;
}

ul li{
     
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
     
    text-decoration: none;
    font-size:14px;
    color: black;
}

a:hover{
     
    color:orange;
}

3.6背景

背景颜色和背景图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div {
      
            width: 1080px;
            height: 1920px;
            border: 1px solid #ff0000;
            background-image: url("image/a.jpg");
            /*默认是全部平铺的*/
        }
        .div1{
      
            background-repeat: repeat-x;
        }
        .div2{
      
            background-repeat: repeat-y;
        }
        .div3{
      
            background-repeat: no-repeat;
        }

    style>
head>
<body>
<div class="div1">div>
<br>
<div class="div2">div>
<br>
<div class="div3">div>

body>
html>

对淘宝导航做个模仿

HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="style.css" type="text/css">
head>
<body>
<div id="nav">
    <h2 class="title">全部产品分类h2>
    <ul>
        <li><a href="">图书a>   <a href="">音箱a>   <a href="">数字商品a>li>
        <li><a href="">家庭电器a>   <a href="">手机a>   <a href="">数码a>li>
        <li><a href="">电脑a>   <a href="">耳机a>   <a href="">鼠标a>li>
    ul>
div>


body>
html>

CSS

#nav {
     
    width: 300px;
}

.title {
     
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    margin: 0px;
    /* 颜色 图片 图片位置 平铺方式*/
    background: lightseagreen url("image/a.jpg") no-repeat 200px -33px;
}

/*ul li*/
/*
list-style: ;
none   去掉圆点 去掉数字
circle 空心圆
decimal 数字
square 正方形
*/

ul {
     
    background-color: gray;
    margin: 0px;
    padding: 0px;
}

ul li {
     
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
    background-color: aqua;
    background-image: url("image/a.jpg");
    background-repeat: no-repeat;
    background-position: 200px -27px;
}

a {
     
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover {
     
    color: orange;
}

3.7渐变


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{
      
            background-color: #0093E9;
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

        }
        
    style>
head>
<body>
    
body>
html>

4.盒子模型

4.1什么是盒子模型

2.CSS入门基础_第6张图片

margin 外边距

padding 内边距

border 边框

4.2边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{
      
            /*body总有一个外边距*/
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }
        #box{
      
            /*border 粗细 样式 颜色*/
            width: 300px;
            border:1px solid red ;
        }

        form{
      
            background: aqua;
        }
        div:nth-of-type(1)>input{
      
            border: 3px solid black;
        }

        div:nth-of-type(2)>input{
      
            border: 3px dashed blue;
        }

        h2{
      
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }

    style>
head>
<body>

<div id="box">
    <h2>会员登入h2>
    <form action="#">
        <div>
            <span>用户名:span>
            <input type="text">
        div>

        <div>
            <span>密码:span>
            <input type="text">
        div>

        <div>
            <span>邮箱:span>
            <input type="text">
        div>

    form>
div>
body>
html>

4.3内外边距

盒子的计算方式 你这个元素到底多大?

公式:margin+border+padding+内容宽度

2.CSS入门基础_第7张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>

        #box {
      
            /*border 粗细 样式 颜色*/
            /*外边框的妙用 居中元素
              margin: 0 auto;

           */
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2 {
      
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }

        form {
      
            background: aqua;
        }

        input {
      
            border: 1px solid black;
        }

        div:nth-of-type(1){
      
            padding: 10px 2px;
        }

    style>
head>
<body>

<div id="box">
    <h2>会员登入h2>
    <form action="#">
        <div>
            <span>用户名:span>
            <input type="text">
        div>

        <div>
            <span>密码:span>
            <input type="text">
        div>

        <div>
            <span>邮箱:span>
            <input type="text">
        div>

    form>
div>
body>
html>

4.4圆角边框

圆角边框


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>

        div{
      
            border: 10px solid red;
            width: 100px;
            height: 100px;
            /*圆圈:   圆角=半径*/
            /*左上 右上 右下 左上 顺时针方向*/
            border-radius: 50px 20px 10px 5px;
        }
    style>
head>
<body>
<div>div>
body>
html>

头像模拟


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
      
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background: red;
            /*圆圈:   圆角=半径*/
            /*左上 右上 右下 左上 顺时针方向*/
            /*先配置好width和height在配置边距会容易很多*/
            border-radius: 50px 50px 0px 0px;
        }
        img{
      
            /*头像像素100*100  半径是50 设置圆角50就是个圆  */
            border-radius: 50px;
        }
    style>
head>
<body>
<div>div>
<img src="image/a.jpg" alt="">
body>
html>

4.5盒子阴影


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        div {
      
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*阴影颜色 水平偏移 垂直偏移 模糊半径*/
            box-shadow: yellow 10px 10px 100px;
            margin: 0 auto;
        }

        img {
      
            border-radius: 50px;
            /*阴影颜色 水平偏移 垂直偏移 模糊半径*/
            box-shadow: yellow 10px 10px 100px;
        }
    style>
head>
<body>

<div><img src="image/a.jpg" alt="">div>

body>
html>

5浮动

5.1标准文档流

2.CSS入门基础_第8张图片

块级元素 独占一行

h1~h6 p div list...........

行内元素 不独占一行

span a img strong....

行内元素 可以包括在 块级元素 中 反之不行

5.2display

block-inline 就是将img这种块级元素放在行内元素中 因为图片经常会另起一行 想要多个图片放同一行就是用这个


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
      
            width: 100px;
            height: 100px;
            border: red solid 10px;
            display: inline-block;
        }
        span{
      
            /*block 块元素
              inline 行内元素
              block-inline 是块元素 但是可以内联 在一行
              none 消失
            */
            width: 100px;
            height: 100px;
            border: red solid 10px;
            display: inline-block;

    style>
head>
<body>
<div>div块元素div>
<span>span行内元素span>
<p>浮动的盒子可以向左浮动 也可以向右浮动 直到它的边缘碰到包含框或另一个浮动盒子为止p>
body>
html>
  1. 这个也是一种实现行内元素排列的方式 但是我们很多情况都使用float

5.3float

1.左右浮动 float


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
      
            width: 100px;
            height: 100px;
            border: red solid 10px;
            float: right;
        }
        span{
      
            /*
            float:
            right 右浮动
            left 左浮动
            */
            width: 100px;
            height: 100px;
            border: red solid 10px;
            float: right;
        }
    style>
head>
<body>
<div>div块元素div>
<span>span行内元素span>
<p>浮动的盒子可以向左浮动 也可以向右浮动 直到它的边缘碰到包含框或另一个浮动盒子为止p>
body>
html>

5.4父级边框塌陷的问题

clear

/*  clear: right;   右侧不允许有浮动元素
    clear: left;    左侧不允许有浮动元素
    clear: both     两侧不允许有浮动元素
    clear: none     允许有浮动元素
*/

解决方案

1.增加父级元素的高度

简单 元素假设有了固定的高度 就会被限制

#father{
    border: 1px #000 solid;
    height: 800px;
}

2.在最后增加一个空的div 清除浮动

简单 代码中尽量避免空div

<div class="clear">div>


.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3.overflow 在父级元素中增加一个overflow hidden属性 可以隐藏多出来的浮动元素

简单 下拉的一些场景避免使用

#father{
     
    border: 1px #000 solid;
    overflow: hidden;
}

4.父类增加一个伪类 after(推荐)

推荐 写法复杂一些 但是没有副作用

#father:after{
    content: '';
    display: block;
    clear: both;
}

5.5对比

  1. display

    方向不可控制

  2. float

    浮动起来会脱离标准文档流 所以要解决父级边框塌陷的问题

6.定位

6.1相对定位

相对定位 position:relative

相对于原来的位置 进行制定的偏移


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        body{
      
            padding: 20px;
        }
        div {
      
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
      
            border: 1px solid #de1717;
        }

        .first {
      
            background-color: #3e6a55;
            border: 1px dashed #3e6a45;
            position: relative;/*相对定位:上下左右*/
            /*距离上离近20px*/
            top: -20px;
            /*距离上离开10px*/
            left: 10px;
        }

        .second {
      
            background-color: #548555;
            border: 1px dashed #5485e5;
        }

        .third {
      
            background-color: #d59255;
            border: 1px dashed #d59230;
            position: relative;
            /*距离下离开10px*/
            bottom: 10px;
        }
    style>
head>
<body>
<div id="father">
    <div class="first">第一个盒子div>
    <div class="second">第二个盒子div>
    <div class="third">第三个盒子div>
div>
body>
html>
/*距离上离近20px*/
            top: -20px;
            /*距离上离开10px*/
            left: 10px;

 /*距离下离开10px*/
            bottom: 10px;

练习


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #box{
      
            width: 300px;
            height: 300px;
            border: red solid 2px;
            padding: 10px;
        }
        a{
      
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
      
            background-color: blue;
        }
        .a2{
      
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a4{
      
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a5{
      
            position: relative;
            top: -300px;
            right: -100px;
        }

    style>
head>
<body>
<div id="box">
    <a href="a1" class="a1">链接1a>
    <a href="a2" class="a2">链接2a>
    <a href="a3" class="a3">链接3a>
    <a href="a4" class="a4">链接4a>
    <a href="a5" class="a5">链接5a>

div>
body>
html>

6.2绝对定位

定位 基于XXX定位 上下左右

  1. 没有父级元素定位的前提下 相对于浏览器定位

  2. 假设父级元素存在定位 我们通常会相对于父级元素

  3. 在父级元素范围内移动

    总结 :相对于父级或浏览器的位置 进行制定的偏移 绝对定位的话 它仍然在标准文档流中 原来的位置会被保留

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            div{
            
                margin: 10px;
                padding: 5px;
                font-size: 12px;
                line-height: 25px;
            }
            #father{
            
                border: 1px solid #de1717;
                position: relative;
            }
            .first{
            
                background-color: #3e6a55;
                border: 1px dashed #3e6a45;
            }
            .second{
            
                background-color: #548555;
                border: 1px dashed #5485e5;
                position: absolute;
                right: 20px;
                top: -1px;
            }
            .third{
            
                background-color: #d59255;
                border: 1px dashed #d59230;
    
            }
        style>
    head>
    <body>
    <div id="father">
        <div class="first">第一个盒子div>
        <div class="second">第二个盒子div>
        <div class="third">第三个盒子div>
    div>
    body>
    html>
    

6.3固定定位


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{
      
            height: 1000px;
        }
        div:nth-of-type(1){
      
            /*绝对定位 相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
      
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    style>
head>
<body>
<div>div1div>
<div>div2div>
body>
html>

6.4z-index图层

opacity: 0.5;透明度

html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <link rel="stylesheet" href="style.css">
head>
<body>
<div id="content">
    <ul>
        <li><img src="image/a.jpg" alt="">li>
        <li class="tipText">学习Java 冲冲冲li>
        <li class="tipBg">li>
        <li>时间 2020.1.1li>
        <li>地点:月球一号基地li>
    ul>
div>

body>
html>

css

#content{
     
    width: 380px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;

}
ul,li{
     
    margin: 0px;
    padding: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content>ul{
     
    position: relative;
}
.tipText,.tipBg{
     
    position: absolute;
    width: 380px;
    height: 25px;
    top: 140px;
}
.tipBg{
     
    background: black;
}
.tipText{
     
    z-index: 999;
    color: white;
    /*rgba也可以设置透明度*/
    opacity: 0.5;

}

7.动画

略过 使用JS更加方便

8总结

2.CSS入门基础_第9张图片

你可能感兴趣的