div

如何将文本放置在div的底部显示呢?

别来无恙 提交于 2020-02-04 23:24:53
转自:将文本定位于div的底部的方法 摘要: 下文讲述将文本放于div的底部的两种方法,如下所示: 实现思路: 思路1:采用绝对定位的方式,将其放置于div的底部 思路2:使用Line-height属性将文本放置于div的底部 行高大小设置的计算公式:(height-(font-size/2))x2=***px (100-(12/2)*2 = 188px; 在web开发中,我们经常需要将div中的文本进行相关的定位,那么下文将通过举例的方法讲述 底部对齐的方法分享 <html> <head> <meta charset="utf-8"> <title>猫猫教程(www.maomao365.com)</title> <style> .div1{ height:180px; width:180px; border:1px solid blue; position:relative } .div1 p{ position:absolute; bottom:0px; padding:0px; margin:0px } .div2{ height:100px; width:180px; border:1px solid blue; font-size:12px; line-height:188px; } </style> </head> <body> <div class="div1">

滚动页面时DIV到达顶部时固定在顶部

邮差的信 提交于 2020-02-04 12:00:39
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150px;} #nav{padding:10px;position:relative;top:0;background:black;width:1000px;} a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;} </style> </head> <body> <div class="wrapper"> <div class="header"></div> <div id="nav"> <a href="#">小皇博客</a> <a href="#">小皇博客</a> <a href="#">小皇博客</a> <a href="#">小皇博客</a> <a href="#">小皇博客</a> </div> </div> </body> </html> <script type="text

Codeforces Round #616 (Div. 2) C. Mind Control

只谈情不闲聊 提交于 2020-02-04 02:47:14
题目链接: https://codeforces.com/contest/1291 You and your n−1 friends have found an array of integers a1,a2,…,an. You have decided to share it in the following way: All n of you stand in a line in a particular order. Each minute, the person at the front of the line chooses either the first or the last element of the array, removes it, and keeps it for himself. He then gets out of line, and the next person in line continues the process. You are standing in the m-th position in the line. Before the process starts, you may choose up to k different people in the line, and persuade them to always take

Codeforces Round #189 (Div. 1) D. Have You Ever Heard About the Word?

浪尽此生 提交于 2020-02-01 18:14:41
当前找出所有最短的重复串,删去之后,不会再出现小于等于当前长度的重复串了。 那么重复串的长度最多有 $O(\sqrt n)$ 种,删去就用后缀数组实现,枚举当前长度的分割点,求公共前缀长度和公共后缀长度,就是当前重复的长度了,然后就打标记删去即可。 #include <bits/stdc++.h> const int N = 1e5 + 7; namespace SA { int sa[N], rk[N], fir[N], sec[N], c[N], height[N]; char s[N]; // 有时候可以用int数组防止爆char int mn[N][20], lg[N]; inline int MIN(int a, int b) { return height[a] < height[b] ? a : b; } void init(int len, char *str, int num = 122) { register int i, j, k; s[len + 1] = 0; for (i = 1; i <= len; i++) s[i] = s[2 * len + 1 - i + 1] = str[i]; len = 2 * len + 1; s[len + 1] = 0; for (i = 1; i <= num; i++) c[i] = 0; for (i = 1;

现在流行的div弹出效果

坚强是说给别人听的谎言 提交于 2020-02-01 02:01:17
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>弹出特效</title> <script> var falpha falpha=0 function fchange(){ if (falpha!=90){ table1.style.filter="alpha(opacity="+falpha+")"; falpha=falpha+10; setTimeout("fchange()",200) } else { falpha=0; } } function sss(){ table1.style.height=(window.document.body.clientHeight>window.document.body.scrollHeight)?window.document.body.clientHeight:window.document.body.scrollHeight; table1.style.width="100%"; table1.style.display='block' table2.style.left=window.document.body.scrollWidth/2-100; table2.style.top=window

Codeforces Round #506 (Div. 3)

梦想的初衷 提交于 2020-01-31 02:15:44
题目链接: https://codeforces.com/contest/1029 A - Many Equal Substrings 题意:给一个长度为 \(n(1\leq n\leq50)\) 的字符串 \(t\) ,和一个正整数 \(k(1\leq k\leq50)\) ,要求构造一个最短的字符串 \(s\) ,使得 \(t\) 在 \(s\) 中恰好出现 \(k\) 次。 题解:看起来就像KMP算法,来个 \(O(n^3)\) 的做法就可以了,枚举重叠部分的两个开始位置,然后判断是否重叠,用此找出最长的重叠位置。但是直接复制一个前缀函数来用最简单。 在模板中提供的前缀函数是要求从0开始的,而 \(\pi(n)\) 即为整个字符串除去字符串本身的首尾重叠的最长长度。 注意留够空间。 int pi[3005]; void GetPrefixFunction(char *s, int sl) { pi[0] = 0, pi[1] = 0; for(int i = 1, k = 0; i < sl; ++i) { while(k && s[i] != s[k]) k = pi[k]; pi[i + 1] = (s[i] == s[k]) ? ++k : 0; } } char s[3005]; void test_case() { int n, k; scanf("%d%d%s",

div溢出处理css

一个人想着一个人 提交于 2020-01-29 06:23:20
单行 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行 overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:2;(行数,不用设置div高度) -webkit-box-orient: vertical; 来源: CSDN 作者: 艺外天羯 链接: https://blog.csdn.net/u012842714/article/details/103715225

DIV常用属性大全

余生颓废 提交于 2020-01-27 17:36:42
一、属性列表 color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weight:bold 文字粗体 vertical-align:sub 下标字 vertical-align:super 上标字 text-decoration:line-through 加?h除线 text-decoration:overline 加顶线 text-decoration:underline 加底线 text-decoration:none ?h除连接底线 text-transform : capitalize 首字大写 text-transform : uppercase 英文大写 text-transform : lowercase 英文写 text-align:right 文字*右对齐 text-align:left 文字*左对齐 text-align:center 文字置中对齐 这些是一些简单的文字效果,可以应用到css的页面中。  背景 background-color:black 背景颜色

Div 用图片作为背景

心已入冬 提交于 2020-01-27 05:38:11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <link rel="stylesheet" type="text/css" href="style.css"> --> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <!-- 1,Div背景图片 --> <div></div> </body> </html> * { margin: 0; padding: 0; } /*p { width: 300px; height: 40px; line-height: 20px; border: 1px solid black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }*/ div{ width: 200px; height: 200px; border:

盒模型中的div居中

不羁的心 提交于 2020-01-27 01:01:03
说到居中的问题,或许大多数童鞋都会想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的确,这些属性在某种程序上可以达到居中的效果。但是否是适用于每一种情况呢?我们先来温习一下这些个属性值的用处。 text-align:center; 行内元素的水平居中显示; margin:0 auto; 固宽盒子在浏览器中的居中显示效果; vertical-align:middle; 行内元素的垂直居中显示; line-height:height; 针对于单行文字垂直居中显示; ==================================== HTML: <div class="A"> <div class="B">测试</div> </div> ---------------------------------- CSS: 第一种方法:(常用) .A{ position: relative; height:500px; width:500px; background-color:#FF0000;} .B{ position: absolute; top:50%; left:50%; height:250px; width:250px; background-color:#FFF