周六笔记和作业

最新推荐文章于 2024-07-21 23:58:44 发布

panshiyangmaye

最新推荐文章于 2024-07-21 23:58:44 发布

阅读量21

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/panshiyangmaye/article/details/134495341

版权

1、字体样式：
<style>
div{
font-family:"微软雅黑"; （字体名称）
font-size:12px; （字体大小）
font-style:italic; （italic、oblique倾斜 normal正常）
font-weight:800; （800、bolder加粗 400正常）
font:800 italic 12px "微软雅黑" （连写有顺序）
}
</style>

2、文本样式：
<style>
p{
text-indent:28px;（文本缩进）
text-indent:2em;（自适应）
font-size:19px;
line-height:40px; （行高）
word-spacing:30px;（改变单词的间隔）
}

div{
width:300px;
height:200px;
background-color:red;
text-aling:center;（文本行间的对齐方式）
line-height:200px; （可以使单行文本垂直居中）
margin:0 auto;（标签水平居中）
}
p span{
text-decoration:underline;（下划线）
a{
text-decoration:none;（链接下划线去除）
color：balck;
}
</style>

3、文本颜色：
<style>
div
,p{
color:brown
}
div{
width:300px;
height:300px;
background-color:rgba(24,211,24,0); （最后一个数字给0到1，越靠近0越透明，越靠近1越清晰）
}
</style>

4、文本方向：
<style>
div{
direction:rtl; （从右往左）
}
</style>

5、列表样式：
<style>
ul li{
list-style-type:none;（设置列表样式）
list-style-image:url(); （可以将图片作为列表前样式）
list-style:none;
}
</style>

6、背景：
<style>
body{
height:20000px;
background-image:url(); （背景图片）
background-repeat:no-repeat; （repeat-y：不在y轴上平铺 no-repeat：不在x轴上平铺）
background-position:left top; （图片定位）
background-size:cover; （atuo：自适应 cover：强行覆盖）
background-attachment:fixed; （背景图片固定）
}
</style>

7、元素的类型：
（1）块级元素：默认情况下会独占一行 (div、h、li、ol、dl)
可以设置宽、高、行高、内外边距
（2）内联元素：和其他元素在同一行 (span、a)
不能设置宽高，内外边距不能设置
（3）内联块级元素：既能设置宽高又不会独占一行(img、input)

元素互转：dispiy
<style>
a{
dispiy:block; （bolck：块级元素 inline-block：内联块级元素）
}
</style>

8、边框：
<style>
div{
width:600;
height:50px;
background-color:pink;
border-width:20px;
border-style:double; (solid:实线 dotted：虚线 double：双线)
border-color:black;
border:1px solid red; (复合写法)
border-radius:20px; (边框弧度：可以给像素可以给百分比)
border-top-right-radius:40%;
border-buttom-left-radius:40%;
}
</style>

9、合并相邻边框：
<style>
table{
border-collpase:collpase;
}
</style>

10、文本域：
<style>
textarea{
width:300px;
height:50px;
resize:none; (防止文本框被拖拽)
vertical-align:middle;
}
</style>

11、鼠标样式：
<style>
div{
cursor:copy;
}
</style>

12、绝对定位：
<style>
.father{
position: relative; (相对定位)
width: 800px;
height: 200px;
background-color: aqua;
margin:0 auto;
}
.son1{
position: absolute; （绝对定位）
top: 50px; （距离上部多少）
left: 0px;
width: 20px;
height: 100px;
background-color: blue;
}
</style>

13、定位中的优先级：
z-index:1; (默认为0，数值越大越优先)

14、固定定位：
<style>
boday{
height:2000px;
background-color:pink;

}
div{
position:fixed;
bottom:15px;
right:30px;
width:50px;
height:100px;
background-color:red;
}
</style>

16、粘性定位：
<style>
.posi{
position:sticky;
top:20px;
background-color:pink;
}
</style>

17、显示与隐藏：
<style>
div{
display:block; （none隐藏 block显示）
opacity:0; (0隐藏 1显示)
visibility:hidden;
width:300px;
height:300px;
background-color:aqua;
}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            display: inline-block;
            width: 1000px;
            height: 600px;
        } 
        .one{
            background-image: url(./sed.jpg); 
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center;
        }
        .two:hover{
            background-image: url(./arr.png);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <a href="#" class="one"></a>
    <a href="#" class="two"></a>
</div>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        a{
            display: inline-block;
            width: 1000px;
            height: 400px;
        }
        .one{
            background-image: url(./code.jpg);
            background-attachment: fixed;
            background-repeat: no-repeat;
            display: none;
        }
        .two:hover{
            background-image: url(./code.jpg);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <table border="1px" width="1000px" cellspacing="0">
        <tr>
            <td>我要投资</td>
            <td>平台介绍</td>
            <td>新手专区</td>
            <td>手机微金所</td>
            <td>个人中心</td>
        </tr>
    </table>
    <a href="#" class="one"></a>
    <a href="#" class="two"></a>   
</body>
</html>

panshiyangmaye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
周六笔记和作业

（最后一个数字给0到1，越靠近0越透明，越靠近1越清晰）background-repeat:no-repeat;（repeat-y：不在y轴上平铺 no-repeat：不在x轴上平铺）list-style-image:url();（bolck：块级元素 inline-block：内联块级元素）background-size:cover;font:800 italic 12px "微软雅黑" （连写有顺序）font-weight:800;
复制链接

扫一扫