css3基础整合

最新推荐文章于 2024-06-13 18:31:56 发布

W.樂�

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量132

点赞数 4

分类专栏： java 文章标签： css

本文链接：https://blog.csdn.net/AA_le/article/details/116998988

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

4.美化网页元素

sapan标签：重点要突出的字
字体样式：
font-size：字体大小
font-family：字体样式
font-weight：blod：字体粗细
文本样式：
颜色
text-aline：排版对齐方式
text-indent：用em表示首行缩进
line-height行高
text-decoration：underline 下划线/none 取消a标签中的下划线
vertical-align：center ，文本图片水平对齐

5.文本阴影超链接

hover：鼠标悬浮的状态
active：点击后的状态
text-shadow：（阴影颜色，水平偏移，垂直偏移，阴影半径）阴影

6.列表

list-style：
none：去掉圆点
circle 空心圆
decimol 数字

7.背景图像应用及渐变

background-image:url(images/tx.jpg) 默认全部平铺
background-repeat：repeat-x：水平
background-repeat：repeat-y：垂直
渐变：
- background-img:linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);

8.盒子模型

margin外边距
padding：内边距
border边框
边框
边框的
border：粗细，样式，颜色

#box{
    width:300px
        border:1px solid red;
}

内外边距
padding
margin

圆角边框及阴影

border-radios：度数

    div{
            width: 100px;
            height: 100px;
            border: 10px solid goldenrod;
            border-radius: 100px;

        }

盒子阴影：

div{
    width: 100px;
    height: 100px;
    border: 10px solid goldenrod;
    border-radius: 100px;
    box-shadow: 10px 10px 100px yellow;

}

morgin：0 auto 居中
要求：块元素块元素有固定的宽度

10 父级边框塌陷问题

clear：right，右侧不允许有浮动
clear：left，左侧不允许有浮动
clear：both：两侧不允许有浮动
解决方案
增加父级元素高度
增加一个空的div标签
在父级元素中增加一个overflow：hidden
夫类添加一个伪类：after

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

小结
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，父元素假设有了固定高度就会被限制
overflow
见到那，下拉的一些场景避免使用
在父类添加伪类after
写法稍微复杂一点，但是没有副作用，推介使用

对比

display
方向不可移动
float
浮动起来的话回脱离标准文档流，所以要解决父级边框塌陷问题。

11.相对定位的使用及练习

定位：
11.1相对定位
相对定位：相对于自己原来的位置进行偏移
position：relative
上：top
下：bootm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box{
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 2px red;
    }
     a{
         width: 100px;
         height: 100px;
         text-decoration: none;
         background: aqua;
         line-height: 100px;
         text-align: center;
         color: wheat;
         display: block;
     }
     a:hover{
         background: #ffffff;
     }
     .a2,.a4{
         position: relative;
         left: 200px;
         top: -100px;
     }
     .a5{
         position: relative;
         left: 100px;
         top: -300px;
     }


</style>


<body>
<div id="box">
    <a class="a1">连接一</a>
    <a class="a2">连接二</a>
    <a class="a3">连接三</a>
    <a class="a4">连接四</a>
    <a class="a5">连接五</a>

</div>
</body>
</html>

任然在文档流中，原来的位置会被保留
绝对定位
定位：基于xxx定位，上下左右
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，塔不在标准文档流中，原来的位置不会被保留
固定定位
position： fixed
z-index及透明度

W.樂�

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
css3基础整合

4.美化网页元素sapan标签：重点要突出的字字体样式：font-size：字体大小font-family：字体样式font-weight：blod：字体粗细文本样式：颜色text-aline：排版对齐方式text-indent：用em表示首行缩进line-height行高text-decoration：underline 下划线/none 取消a标签中的下划线vertical-align：center ，文本图片水平对齐5.文本阴影超链接hove
复制链接

扫一扫