CSS基础教程-优快云博客

在这里插入图片描述

    #                       CSS基础2

5. 文本阴影和超链接伪类

5.1 文本阴影

/*  text_shadow :阴影颜色 水平偏移 垂直偏移 阴影半径 */

5.2 超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认状态*/
        a{
            text-decoration: none;
            color: darkmagenta;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: cyan;
            font-size: 60px;
        }
        /* 鼠标按住为释放的状态
         */
        a:active{
            color: brown;
            font-size: 50px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="1.jpg" alt="xjj" height="50"width="50" >
</a>
<p>
    <a href="#"> 辛晶晶 </a>
</p>
<p>
    <a href="#"> 性别女 年龄21  </a>
</p>

</body>
</html>

6.列表

列表的一些方法
/*
list-style :
list-style: none; 去掉原点
list-style: circle;空心圆
list-style: decimal; 数字
list-style:  square; 正方形
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="ml.css">
</head>
<body>
<div id="ml">
<h1>全部商品类</h1>
<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>  </li>
    <li><a href="#">家居</a>  <a href="#">装饰</a>  </li>
    <li><a href="#">服装鞋橱</a>  <a href="#">化妆</a>  </li>
    <li><a href="#">食品饮料</a>  <a href="#">保健食品</a>  </li>
    <li><a href="#">彩票</a>  <a href="#">旅行</a> </li>
</ul>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3pHX4w7m-1589540573866)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589512524120.png)]

7.背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("1.jpg") ;
            /*默认是平铺的*/
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qckniTG-1589540573868)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589534910964.png)]

8.盒子模型及边框的使用

 /*<!-- border 边框：粗细，样式，颜色-->*/
 样式 
 例如            border: 3px dashed  blue ;  虚线
 
                 border: 1px solid red; 实线 
                 ma
 /*body总有一个默认的外边距 margin:*/
  /*外边距的作用 margin 使其居中 auto */
  /*内边距 padding*/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AsgH6uKo-1589540573872)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589536609788.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*body总有一个默认的外边距 margin:*/
            margin: 0 ;
            padding: 0;
            text-decoration: none;
        }
        /*<!-- border 边框：粗细，样式，颜色-->*/
        #box {
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: #ffa4d0;

        }
        /*结构选择器  nth-of-type*/
        div:nth-of-type(1)  {
            border: 3px solid black ;
        }
        div:nth-of-type(2){
            border: 3px dashed  blue ;
        }
        div:nth-of-type(3){
            border: 3px solid rebeccapurple;
        }
        h2{
            background: rosybrown;
            line-height: 100px;
            color: red;
        }

    </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>!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sH5QgV1M-1589540573875)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589536516902.png)]

9.浮动

块级元素：独占一行

h1-h6 p div 列表

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素里面

9.1 display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px   ;
            height: 100px;
            border: 1px solid rosybrown ;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px dashed red;
        }
    </style>
</head>
<body>
<div>div元素 块元素</div>
<span>span 标签 行内元素</span>
</body>
</html>

以上代码的运行效果如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ZQ7QI5m-1589540573877)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589537642897.png)]

给行内元素span设置 dispaly后的效果如图

/*<
使用  display  block 将其变成块元素
 display inline 使其变成行内元素
display  inline-block  使其变成两种元素
display none 使其消失
*/

9.2 float

10.定位

10.1相对定位

position: relative  ; /* 相对定位：上 ，下， 左， 右*/、
相对于原来的位置进行移动
是反着来的
   top: 5px; 距离上5厘米 向下移动五厘米
   left: 20px; 向右移动20厘米
   bottom: 15px;

10.2绝对定位

定位：基于XXX定位，上下左右

1.没有父级元素定位的前提下基于浏览器页面定位

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

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

相对于父级和浏览器的位置进行指定偏移。它不在标准文档流

position: absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: rosybrown;
            position: absolute;
            right: 100px;
            bottom: 100px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>DIV2</div>
</body>
</html>

10.3固定定位 fixed

div:nth-of-type(2){
    width: 50px;
    height: 50px;
    background: blue;
    position:  fixed;
    right: 300px;
    bottom 300px ;

ute;
right: 100px;
bottom: 100px;
}

div1

DIV2

```

10.3固定定位 fixed

div:nth-of-type(2){
    width: 50px;
    height: 50px;
    background: blue;
    position:  fixed;
    right: 300px;
    bottom 300px ;