box | 易学教程

Storing and using strings of varying length (ADA)

阅读更多关于 Storing and using strings of varying length (ADA)

问题 Im working on a problem where I need to make a set of boxes according to an input number where each and every box has a unique name. I've managed to create the boxes but I've only managed to insert one name on all of them as my names are overwritten in the name collecting procedure. here is the code https://pastebin.com/FBMvvrn4 with Ada.Text_IO; use Ada.Text_IO; with Ada.Float_Text_IO; use Ada.Float_Text_IO; with Ada.Integer_Text_IO; use Ada.Integer_Text_IO; procedure exercise is N : Integer

How to cut box corner Using CSS with transparent background?

阅读更多关于 How to cut box corner Using CSS with transparent background?

问题 I want to cut left top corner of a box using CSS like this. keep in mind that background is transparent. 回答1: Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner). This gradient will look the same regardless of .card width and height . body { background: purple; } .card { width: 200px; height: 200px; background: linear-gradient(135deg, transparent 20px, white 20px); } <div class="card"></div> 回答2: You can use a simple linear gradient for that

How to cut box corner Using CSS with transparent background?

阅读更多关于 How to cut box corner Using CSS with transparent background?

垂直居中的图片的高度也不确定

阅读更多关于垂直居中的图片的高度也不确定

在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。方法一将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title> <style type="text/css"> body {height:100%;} #box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff; }

css 自定义滚动条样式

阅读更多关于 css 自定义滚动条样式

以前写的，找不到效果图了，就不上效果图了，直接上代码好啦，免得自己忘了怎么写 .login-box { //login-box就是需要修改样式的盒子 width: 200px; margin-top: 10px; height: calc(100% - 88px); overflow-y: auto; .login { display: flex; justify-content: space-between; z-index: 9999; color: #6f7180; &.backgroundhover { color: #409eff; } &:hover { color: #409eff; z-index: 9999; } } .login:hover { cursor: pointer; } .login-left { margin-top: 10px; width: 200px; } } ::-webkit-scrollbar { //以下是修改滚动条样式的代码 width: 4px; height: 4px; } ::-webkit-scrollbar-track { border-radius: 5px; background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb { border-radius: 0;

[ORGINAL]OPP spin box ( numeric up down control) Design based on web!!

阅读更多关于 [ORGINAL]OPP spin box ( numeric up down control) Design based on web!!

Part 2 Spin Box control v Introduction The NumericUpDown control looks like a combination of a text box and a pair of arrows that the user can click to adjust a value. The control displays and sets a single numeric value from a list of choices. The user can increase and decrease the number by clicking up and down buttons, by pressing the UP and DOWN ARROW keys, or by typing a number. Clicking the UP ARROW key moves the value toward its maximum; clicking the DOWN ARROW key moves the position toward the minimum. An example where this kind of control might be useful is for a volume control on a

css 迷惑的position

阅读更多关于 css 迷惑的position

迷惑的position 小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑的position吧~ static 元素未定位，默认出现在普通流中，即元素从左到右，从上到下的方式布局～ HTML <div class="section"> <h3 class="section__title">Static - 普通流</h3> <div class="section__boxes row text-center"> <div class="header-box col-xs-12"> header box </div> <div class="left-box col-xs-4"> left box </div> <div class="right-box col-xs-8"> right box </div> <div class="bottom-box col-xs-12"> bottom box </div> </div> </div> CSS .section { margin-bottom: 100px; } .section__boxes { font-size: 22px; } .header-box { background-color: #0981B2; height:

用JS写的百叶窗3

阅读更多关于用JS写的百叶窗3

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0;list-style:none;} body{background:url(img/bg.gif) repeat top left;} #box{width:600px;height:400px;margin:50px auto; border:20px solid #fff; overflow:hidden; position:relative;} #box ul li{ opacity:0; width:600px; height:400px; position:absolute; top:0; left:0;} #box ul li span{ width:150px; height:400px; float:left;} #box ul .active{ opacity:1;} #box ol{width:100%; height:34px; position:absolute; bottom:20px;} #box ol li{ float:left; width:42px; height:42px; background:rgba(255,255,255,0.4);

响应式网站

阅读更多关于响应式网站

我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始，然后从左到右，再从上到下。很多网页都是基于网格设计的，这说明网页是按列来布局的。响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。为什么是12列呢，因为12可以被2、3、4、6整除，能2、3、4、6等分。创建网格视图 CSS.css * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}* { border: 1px solid red !important;}.row{ width:100%; display: flex; flex-wrap: wrap; text-align: center;}.col-1{ width:8.3%;}.col-2{ width:16.6%;}.col-3{ width:25%; padding: 0.5%;}.col-4{ width:33.33%;}.col-5{ width:41.66%;}.col-6{ width:50%;}.col-7{ width:58.33%;}.col-8{ width:66.66%;}.col-9{ width:75%; padding

利用vagrant来构建virtualbox

阅读更多关于利用vagrant来构建virtualbox

3 月，跳不动了？>>> 利用vagrant来构建环境 Vagrant是近年来比较火的一款工具，通过它可以实现自动化创建运行环境，实现基础设施即代码。 vargrant有以下好片。方便共享环境通过共享构建环境所需要的代码，任何人都可以重建相同的环境创建过程透明通过查看代码，可以很方便查看本地开发环境是如何构建、由什么构建等信息维护方便只要修改代码就可以实现对环境的维护。代码就是代表构建环境的具体操作步骤，所以操作步骤和环境信息之间不会产生不一致总是。 vagrant是由Hashicorp公司提供的一个虚拟机构建工具。通过它可以自动化生成你想要的虚拟机环境。创建操作系统对系统进行配置（主机名、网络地址) 对系统安装完成后的环境配置（构建中间件或部署应用程序） Vagrant基本用户在安装vagrant默认支持VirtualBox、Hyper-V和Docker的支持，除了这些默认的类型外，我们还可以通过安装相应的服务来提供其他平台的支持，接下来的案例，我们采用virtualbox来进行相应的讲解。我们可以访问 virtualbox官网点击Downloads进入下载界面，选择相应的平台进行下载安装。 Vagrant可以通过访问下载界面，来选择对应的平台进行下载就可以。新建Vagrant 我们可以通过下面的命令来生成一个Vagrant的工程目录

订阅 box