line-height | 易学教程

商城项目日结5

阅读更多关于商城项目日结5

今天完成了商城的购物车功能，并细化了css样式使页面看起来更加舒适。项目地址购物车代码如下： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="../css/reset.css"> <link rel="stylesheet" href="../css/common.min.css"> <link rel="stylesheet" href="../css/index.css"> <link rel="stylesheet" href="../css/footer.css"> <link rel="stylesheet" href="../css/cart.css"> </head> <body style="background-color: #fff;">  <div class=

matplotlib模块 06

阅读更多关于 matplotlib模块 06

matplotlib模块 */ /*--> */ */ /*--> */ */ /*--> */ In [10]: import numpy as np import pandas as pd import matplotlib.pyplot as plt from matplotlib.font_manager import FontProperties # 修改字体最简单的图表 ¶ In [3]: x = [5,7,2,10] plt.plot(x) ### 画折线图,传入一个值的话，这个值就是y轴值 plt.show() In [5]: x = [5,7,2,10] y = [3,9,10,5] plt.plot(x,y) ### 画折线图,传入两个值的话，第一个代表x值，第二个代表y值。 plt.show() In [13]: x = [1,3,6,9] y = [12,5,10,20] font=FontProperties(fname='C:\Windows\Fonts\simhei.ttf') plt.figure(figsize=(10,6)) #### 设置画板大小，第一个值表示宽度，第二个值表示高度。 plt.title('两个参数的折线图',fontproperties=font, fontsize=20, color='red') ### 设置标题 plt

尚美的作业代码

阅读更多关于尚美的作业代码

!DOCTYPE html html head meta charset=“utf-8” / title></title style type=“text/css” html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dt,form,fieldset,legend,input,textarea,select{margin:0;padding:0;} body{font-size:16px;font-family: ‘微软雅黑’;} ul,ol,li{list-style:none;} h1,h2,h3,h4,h5,h6{font-size:16px;font-weight: normal;} b,strong{font-weight: normal;} i,em{font-style: normal;} a,u,ins{text-decoration: none;} img{border:0;display:block;} input,fieldset{outline: none;border:0;} .clear_fix:after{content:’.’; clear:both; height:0; overflow:hidden; display:block; visibility: hidden;} .clear_fix{zoom

css技巧:经典CSS使用技巧几则

阅读更多关于 css技巧:经典CSS使用技巧几则

MacJi “偷懒”翻译了部分，下午冒着被 BOSS 开除的危险将其补完（原文链接）。使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。清除容器浮动 #main { overflow:hidden; } 期前也提到过这样的问题，更多信息可以看这里。不让链接折行 a { white-space:nowrap; } 上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。始终让 Firefox 显示滚动条 html { overflow:-moz-scrollbars-vertical; } 更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用 body, html { min-height:101%; } 使块元素水平居中 margin:0 auto; 其实就是 margin-left: auto; margin-right: auto; 这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用 body{ text-align: center; } 然后定义内层容器 text

图片img与父元素div之间的间隙解决

阅读更多关于图片img与父元素div之间的间隙解决

之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题, 仔细看,图片和div之间有间隙。下面贴上简易的代码 <div class="content"> <img src="./img/user.jpg"> </div> .content{ float:left; margin:100px auto; background:pink; } 我外层容器content设置浮动,按浮动元素会收缩的原理,本不应该出现这条粉色的间隙,但为什么这里会有呢？之后去网上查了一下,其中涉及到了line-height以及vertical-align的问题。正文 vertical-align vertical-align 指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式(摘录自MDN)。 vertical-align的取值中有top、middle、baseline、bottom四个值,他们分别对应了橙色：top、粉色：middle、蓝色：baseline、绿色：bottom（手工做图，略丑，客官莫喷。 vertical-align中默认值是baseline也就是说图片的下边缘其实是和蓝色那条线对齐的,而文字元素<span>本身也有高度,所以会多出那么一部分空白的地方，也就是底部绿色线到蓝色线之间的距离。

如何设置文本不换行省略号显示等CSS常用文本属性

阅读更多关于如何设置文本不换行省略号显示等CSS常用文本属性

如何让多余的文本省略号显示首先要说几个属性的作用： whitespace:nowrap 中文行末不断行显示 overflow：控制超出文本的显示方式：hidden 超出范围文本隐藏；scroll 始终显示滚动条；auto 根据文字多少自动显示滚动条 text-overflow：在overflow设置隐藏的情况下怎么显示 clip裁剪ellipsis省略号显示那么让多余文字省略号显示需要以下三步： ①white-space：nowrap;如果是中文设置文字超出范围不断行 ②overflow：hidden；设置超出控件范围隐藏； ③text-overflow：ellipsis; 设置多余文本隐藏显示； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; } li{ color: red; list-style: none; } .li{ color: blue; font:italic bold 75%/1.8 "Microsoft Yahei",san-serif; font-weight: lighter; white

二十款漂亮的CSS字体样式

阅读更多关于二十款漂亮的CSS字体样式

样式一： body { margin: 0; padding: 0; line-height: 1.5em; font-family: "Times New Roman", Times, serif; font-size: 14px; color: #000000; background: #f2e7ca url(images/templatemo_body.jpg) top center no-repeat; } 样式二： body { background:#2f373a; font-family:Arial,Helvetica,sans-serif;font-size:100%; line-height:1em;color:#4e4e4e; min-width:920px; border-top:10px solid #0c0e0e } 样式三： body { font-family:Arial,Helvetica,sans-serif; font-size:1em; vertical-align:middle; font-weight:normal } 样式四： body { margin:0px; padding:0px; background-color:#E7EAEB; font-family:"微软雅黑","黑体","宋体"; font-size:12px;

jQuery实现密码强度检测

阅读更多关于 jQuery实现密码强度检测

jQuery普遍运用于JAVA_WEB前端，可以说jQuery的运用无处不在，学好jQuery，对于一个程序员来说是必由之路。下面简单介绍一下jQuery实现密码强度检测。如图所示：核心代码：第一步：css样式： /** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ /* table elements 表格元素 */ img/* img elements 图片元素 */{ border:medium none; margin: 0; padding: 0; } input::-ms-clear{display:none;} /** 设置默认字体 **/ body,button, input, select, textarea { font-family:微软雅黑, Verdana, Geneva, sans-ser;

css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

阅读更多关于 css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

一、上中下左固定 - fixed+margin 概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。 html： <header>我是头部position: fixed;z-index: 9;</header> <section class="flexModal fixedLeft"> <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li class="active">栏目三</li> <li>栏目四</li> <li>栏目五</li> </ul> </nav> <article> <h3> 内容区域 section.flexModal articel </h3> <p> section{ padding: 60px 0; } </p> <p> section.flexModal{ display: flex; } </p> <p> section.flexModal nav{ width: 200px; } </p> <p> section.flexModal article{ flex: 1; } </p> </article> </section> <footer>底部版权同头部 position: fixed;z-index: 9;<

如何精确的设置行与行之间的间距

阅读更多关于如何精确的设置行与行之间的间距

这是一篇专门针对刚入门前端的小白们，作为个前端开发人员，我们应该要具备的就是 99.9%的还原设计图，那么必不可少的就是设置页面中文字的上下间距问题，也是刚入门的人员比较难的一个点，怎样才可以写的跟设计图的一模一样呢。比如这样的一个图片，里面有几种字体大小和行间距都不一样，算是一个比较复杂一点的：以下我介绍两种设置这个间距的方法： 1.只用line-height（行高）使用行高来实现，首先我们要明白的是什么是行高？行高由什么来组成的概念：字面意思，就是这一行所占据的高度组成：字体大小 + 上行间距（这一行文字上边的距离） + 下行间距（这一行文字下边的距离）特别注意：行高中的上行间距 = 下行间距想要实现设计图上的效果，那么行高的值应该设置为多少呢这个行间距就是行与行之间的距离，但是这个距离的话是上一行文字的下行间距 + 下一行文字的上间距组成的，虽然没有到我们的重点设置值，但是明白这个比设置值可能要重要的多，我们了解这个有什么作用，了解这个我们就知道我们应该怎么样量行高了比如我要量这行文字的行高：我们知道行高中的上行间距与下行间始终相等，而且行与行之间的距离是上一行文字的下行间距 + 下一行文字的上行间距组成的，并且这个三行文字明显是一样的效果，其实就得到一个行与行之间的距离 = 行高中的上行间距 + 下行间距，为了更加准确的量行高我们应该这样

订阅 line-height