20190715——前端大集合

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36344771/article/details/95901809

element的el-row与el-col

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

其中

 border-radius: 4px; 
 向 div 元素添加圆角边框

max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.

p
  {
  height:100px;
  width:100px;
  }
npm i element-ui -S
import ElementUI from 'element-ui'
Vue.use(ElementUI);

css框模型
css框模型(Box Model)规定了元素框处理元素内容,内边距,外边距,边框和外边距的方式。
在这里插入图片描述

padding 内边距 属性的值接受长度值或者百分比,但不允许使用负值

h1 {padding: 10px;}

也可以按照上,右,下,左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比的值。

h1 {padding: 10px 0.25em 2ex 20%;}

css中的边框
元素的边框(border)是围绕元素内容和内边距的一条或者多条线
css border 属性允许你规定元素边框的样式、宽度 或者颜色

css边框,我们可以创建效果出色的边框,并且可以应用于任何元素。
每个边框都有三个方面:宽度、样式、以及颜色

css的外边距
margin与内边距一样
在这里插入图片描述
在这里插入图片描述

text-align
属性规定元素中的文本的水平对齐方式。
在这里插入图片描述

line-height

在这里插入图片描述

color色彩与icon图标和Button按钮

可以自己进行选取

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。

展开阅读全文

问题大集合

04-10

问题一:复杂网络的社区发现的GN算法怎样设置终止条件,如何区别每一个社区?更详细的参看这个帖子(也是我发的):[url=http://topic.csdn.net/u/20120330/16/d354e9f8-5400-41db-8479-cef966461b9a.html][/url]rnrnrn问题二:在求图中的最短路径的时候,怎么才能把路径记录下来?有代码参考的更好rnrnrn问题三:MyEclipse在启动的时候会有一个启动画面,显示加载的进度,这个是怎么实现的(不是问启动画面是怎么实现的,主要是进度)?加载的进度是怎么计算的?rnrnrn问题四:QQ不在线的时候小企鹅图标是淡色,那是不是qq会在一定的时间间隔内Ping服务器,要不然怎么能判断是否下线?rnrnrn问题五:学校的IP地址是动态获取的,是私有地址,只要插上网线不需要认证就可以校园网资源,访问外网就需要认证,现有如下疑问:在没有认证外网的情况下,打开QQ音乐,QQ音乐的图标是深色,就像QQ一样表示在线,当然了,认证了外网就更是深色的;但是,当认证外网之后,打开QQ音乐,显然是在线的,再把外网断开,此时只能访问校园网的资源,QQ音乐的小图标就会变成淡色。我想问的是,QQ音乐是不是也要向服务器之类的Ping一下?如果是,有是不是有时候Ping网关有时候Ping腾讯的服务器?要不然怎么解释在不认证外网的情况下,图标是深色的!这也只不过是我自己的猜想。rnrn由于最多只能给100分,大家别嫌分少啊;请大家不吝赐教! 论坛

设计模式大集合

10-29

这个电子书是从网收转载rn[url=http://www.8211.cn/books/list/book_2967.html][img]http://www.8211.cn/uploadfile/minImg/20090525/20090525224905_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_463.html][img]http://www.8211.cn/uploadfile/minImg/20081221/20081221163134_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_4517.html][img]http://www.8211.cn/uploadfile/minImg/20090919/20090919105138_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_308.html][img]http://www.8211.cn/uploadfile/minImg/20081219/20081219231253_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_1002.html][img]http://www.8211.cn/uploadfile/minImg/20090103/20090103000725_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_1374.html][img]http://www.8211.cn/uploadfile/minImg/20090112/20090112225430_min.jpg" alt="" width="96" height="120[/img][/url] rnrnrn[url=http://www.8211.cn/books/list/book_998.html][img]http://www.8211.cn/uploadfile/minImg/20090102/20090102233712_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_878.html][img]http://www.8211.cn/uploadfile/minImg/20081230/20081230213046_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_2460.html][img]http://www.8211.cn/uploadfile/minImg/20090329/20090329224133_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_4093.html][img]http://www.8211.cn/uploadfile/minImg/20090808/20090808002934_min.jpg" alt="" width="96" height="120[/img][/url] [url=http://www.8211.cn/books/list/book_363.html][img]http://www.8211.cn/uploadfile/minImg/20081220/20081220224948_min.jpg" alt="" width="96" height="120[/img][/url]rnrnrn rnrn rnrn 论坛

没有更多推荐了,返回首页