超链接伪类；文本阴影；列表样式；背景图片应用；盒子模型（边框；边距；阴影）

最新推荐文章于 2021-08-11 20:55:52 发布

大吖么大白菜

最新推荐文章于 2021-08-11 20:55:52 发布

阅读量159

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_45964083/article/details/116056232

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

超链接伪类

鼠标悬浮的状态： a：hover(基本上只用这一个，其他不常用)
a:hover{
color：red；
font-size：20px;
}

文本阴影

text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径。
如:

#id{
   text-shadow:red  10px  10px  2px;   
}

列表样式

list-style：none 去掉原点
list-style：decimal 换成数字
list-style：circle 空心圆
list-style：square 正方形

背景图片应用

background-image: url(“填写图片相对位置”); 默认是全部平铺
background-repeat:repeat-x; 水平平铺,改成-y是垂直平铺
background-repeat:no-repeat ; 不平铺，只保留一个图片
background-size:100% 100% ; 这是图片拉伸
还可以右击图片选中编辑，进行修改图片宽和高。

<style>
    div{
        width: 1500px;
        height: 900px;
        border: 1px solid red;
        background-image: url("images/2.jpg");/*默认是全部平铺*/
    }
    .div1{
        background-repeat:repeat-x; /*水平平铺,改成-y是垂直平铺，no-repeat是不平铺只有一个*/
    }
    .div2{
        background-repeat:no-repeat ;
        background-size:100% 100% ;  //这是图片拉伸
    }

</style>
<body>
   <div class="div1"></div>
   <div class="div2"></div>
</body>

例子：将图一，变成图二
在这里插入图片描述

 .title{                        (其他的字体大小之类无关的代码省略)
                /*颜色   图片地址                图片位置       平铺方式 */
       background:red url("../images/1.jpg")  270px  10px  no-repeat;
   }
    ul li{
        background-image: url("图片地址"); //图片地址
        background-repeat:no-reoeat;     //不平铺只有一个
        background-position: 150px 2px;  //图片的定位
    }

盒子模型

在这里插入图片描述
margin：外边距
border：边框
padding：内边距

一个元素究竟有多大：
margin+border+padding+内容宽度

边框

border:粗细样式颜色
border: 1px solid red;
solid是实线 dashed是虚线

h1,ul,li,a,body{  不设置body的外边距为0的话。它会有默认的值，这样的话，div这个块就不会紧贴左边
    margin: 0px;     往往做项目时会将他们都初始化
   padding:0px;
    text-decoration:none;

内外边距

margin:0; //上下左右边距都是0
margin:0 1px；//上下为0.左右为1；
margin:0 1px 2px 3px; //上右下左，顺时针赋值

如果想水平居中：margin:0 auto；
居中前提：要在块元素中，快元素有固定宽度

 padding也是这样

圆角边框

设置好高度和宽度之后
border-radius：。。；这里面填的数值分别对应左上、右上、右下、左下，顺时针
如果只填一个就是四个角都改变。
填两个a,b就是a为左上和右下的圆角边框的度数，b为右上和左下的圆角边框的度数。

** 还可以更改图片的边框**

盒子阴影

box-shadow:右边阴影长下边阴影长阴影模糊度颜色；
box-shadow:10px 10px 10px red;
在这里插入图片描述

大吖么大白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超链接伪类；文本阴影；列表样式；背景图片应用；盒子模型（边框；边距；阴影）

超链接伪类鼠标悬浮的状态： a：hover(基本上只用这一个，其他不常用)a:hover{color：red；font-size：20px;}文本阴影text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径。如:#id{ text-shadow:red 10px 10px 2px; }列表样式list-style：none 去掉原点list-style：decimal 换成数字list-style：circle 空心圆list-style：square
复制链接

扫一扫

专栏目录