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;
}
另外,绝对大小和相对大小要注意一下
css文字样式与div的更多相关文章
- CSS系列:CSS文字样式
1. 设置字体 在CSS中字体通过font-family属性来设置. font-family: Verdana, Arial, Helvetica, sans-serif; 上面的字体设置告诉浏览器首 ...
- CSS文字样式
font-family:通常文章的正文使用的是易读性较强的serif字体,用户长时间阅读下不easy疲劳.而标题和表格则採用较醒目的sans-serif字体.Web设计及浏览器设置中也推荐遵循此原则. ...
- css 文字样式
Gradient 3D text 代码区域 /*css */ body { background-color: #272727; } h1 { font-family: "Arial&quo ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- CSS之常见文字样式整理
常见文字样式 行高:line-height,当我i们将行高的大小设置成当前元素的高度时,可以实现当行文本在当前元素中垂直方向居中显示的效果 水平对齐方式:text-align:left|center| ...
- css文字与文本相关样式
css文字属性定义文本的字体系列,大小,加粗,风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- CSS/Compass修改placeholder的文字样式
在HTML5中,<input>与<textarea>标签支持placeholder属性,用来定义无任何输入时的默认文字. 可以通过CSS修改placeholder的文字样式: ...
- 文字添加响应事件,js动态加载CSS, js弹出DIV
文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
随机推荐
- What's binary search?
Binary Search: Search a sorted array by repeatedly dividing the search interval in half. Begin with ...
- koa2中间件
在我看来,前端框架的中间件的思想来源于传统后端的切面编程(AOP)思想,比如我们常见的身份校验(JWT). axios的拦截器也是基于这种程序设计模式的. 在koa中,实际上是由一个数组对象来保存所有 ...
- shell脚本常见的结构化函数
if-then if command then command fi if-then-else if command then command else command fi 嵌套if if comm ...
- vue中的样式穿透
参考一下的文章即可: https://www.cnblogs.com/karthuslorin/p/9038854.html http://www.php.cn/js-tutorial-399072. ...
- Java垃圾收集算法1
Java垃圾收集算法 由于垃圾收集算法的实现涉及大量的程序细节,而且每个平台的虚拟机操作内存的方法又各不相同,因此博客中不过多的讨论算法的实现,只是介绍几种算法的思想以及发展. 相关阅读: 1.深入理 ...
- go爬虫系列
一.go语言爬取豆瓣电影top250 package main import ( "net/http" "io/ioutil" "os" & ...
- python 字符串格式化 format
用法: 它通过{}和:来代替传统%方式 1.使用位置参数 要点:从以下例子可以看出位置参数不受顺序约束,且可以为{},只要format里有相对应的参数值即可,参数索引从0开,传入位置参数列表可用*列表 ...
- ARST 第五周打卡
Algorithm : 做一个 leetcode 的算法题 /////////////////////////////////////////////////////////////////// // ...
- c++学习笔记之引用
引用是 C++ 的新增内容,在实际开发中会经常使用:C++ 用的引用就如同C语言的指针一样重要,但它比指针更加方便和易用,有时候甚至是不可或缺的. 同指针一样,引用能够减少数据的拷贝,提高数据的传递效 ...
- LeetCode 19——删除链表的倒数第N个节点(JAVA)
给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链表变为 ...