css文字样式与div

文字与图片

如果要要将字移动到图片的上方，这里就需要定位一下，设置div为父级，为相对定位；设置h1为绝对定位：

div{position:relative;}

h1{font-size:16px;color:red;position:absolute;top:20px;left:10px;}

如果要使文字竖直放置：使用<br>，或者设置div的宽度刚好为文字的宽度

标题h系列：

h1 {
display: block;
margin: 0;
font-size: 13px;
font-weight: 500;
}

div浮动

float:right

div透明

css设置div背景透明有两种方法：第一种使用opacity：0~1，这个方法有个缺点，就是内容也会跟着透明；第二种方法就是background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。

body {background-position: center;//背景居中
background-repeat: no-repeat;//无重复
background-attachment: fixed;//固定不动}

background-size:cover

DIV文字居中的方法

<div class="font_div">
   DIV文字
 </div>

设置DIV样式

.font_div{
    background-color: red;
    height: 100px;
    width: 60px;
    text-align:center;   /* 水平居中 */
    line-height: 100px;  /* 垂直剧终 */

将footer固定在页面底部的实现方法

https://segmentfault.com/a/1190000004453249

CSS背景属性

• background-color
• background-image
• background-repeat          　　设置背景图像是否及如何重复
• background-attachment　　  背景图像是否固定或者随着页面的其余部分滚动
• background-position　　        设置背景图像的起始位置

详细：https://www.runoob.com/css/css-background.html

border

边框属性

让css背景图片占满全部背景，并且随着浏览器缩放图片保持长宽不变

<style>
    .body{
        background-image: url('${basepath}/resource/images/loginb1.jpeg');
        background-size: 100%;
        background-repeat:no-repeat;
    }
</style>

https://blog.csdn.net/qq_35624642/article/details/72843150

html+css实现鼠标移过，底部添加阴影

只要你给外层盒子添加这个样式就好了.t-hover-shadow：

.t-hover-shadow {
    transition: transform .3s ease-in-out, box-shadow .3s cubic-bezier(.47, 0, .745, .715), border .3s linear .1s;
}

.t-hover-shadow:hover {
    box-shadow: 0 10px 50px rgba(51, 51, 51, .25);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px)
}

使页面随着浏览器的放大，固定在中间，但元素不改变位置

以我的理解，加个套就行了

比如在最外层加一个div，div的宽度要自行设定，不然缩放时就会很不好看

#bg{
    width: 1345px;
    margin: 0 auto;
    height: 3200px;
    background-color: #F5F5F9;
}

另外，绝对大小和相对大小要注意一下