CodemySite_Web development

如何让内容两端对齐？text-align:justify 很强大。 不过，当应用的时候，难免有一些小脾气。 当我加上text-align:justify的时候，第一行内容对齐了，在这里是0px；可是第二行并没有应用这个属性。 如何解决？看了鑫大牛的思路真是受益匪浅。 第一种情况： 让最后一行垂直左对齐，即最后一行有左浮动的效果。 （垂直对齐左对齐） 重点: 在父元素内最后多加入多个div，设置样式为height:0，padding:0，overflow:hidden 。 复制 个数一般就是每行元素的列表个数。其中的   (不可缺)。 第二种情况： 最后一行占满整行两端对齐。  最终效果： （两端对齐）重点： 在父元素内最后多加入一个div，设置样式为height:0，overflow:hidden ，width:100%,display:inline-block。

简简单单的几幅图片加上解释文字的内容，想让每一行对齐显示。 曾经以为float：left可以解决一切， float真心很好用，不过真的有很大的坑。 我的实例中计划让六张图片显示在两行，可是。。。。 HTML:  CSS： 而我主要的想法就是让每一块左浮动，display:inline-block，可以显示在一行。 究其原因，是上面的文字溢出了，导致下一行放不下。 不过 如何解决 呢？ 然后我大胆的 去掉了float：left ;然后竟然变得更好看了，不过挤在一起。 因为它保证了图片加上文字是在一行的。那么，现在就是让每个块上下左右对齐。 当然为了让图片都一样大小，设置宽度100%，即父元素item的宽度大小。然后，嘿嘿，成功啦。 这就是果断放弃float的后果。 当然我是做的3列效果，如果想根据浏览器的大小，产生浮动效果，可以设置item的宽度为一个固定宽度。

Unexpectedly finding a easy plug-In called swiper.js made me feel activity a lot.   First,layout the html like this with the pagination and arrow buttons.  Of course, you need to link the swiper.css and the swiper.js in the head.  Secondly,It's flexible to style the div within main.css which should be linked in the Html head part. The last step is miracle using swiper() .  pagination is the nav at the bottom of div.  nextButton and preButton are two arrow buttons for clicking to slide. spaceBetween is the  space between slides. loop is for slide to the first one when you reach the last.  centeredSlides is centered the content. autoPlay is sliding automatically. autoplayDisableOnInteraction: when your mouse in the div, autoplay will not stop with the attribute false. More official functions check on  https://github.com/nolimits4web/Swiper My demo download here   https://pan.baidu.com/s/1dFpwSjn

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. For example, http://www.erikjohanssonphoto.com/work Today,I gonna try this plugIn with fashion topic.  When I narrow the browser, the images turn into two columns which are responsible to the browser size. Here is the code  part: HTML  I'll use Masonry.js in the rightArea, loading in different height images through json. SCSS:  I built a scss file to complete the styling part.   This main section is styling each kind of grid. JS:  First,I apply the masonry  on .grid div in the HTML.   Either  columnWidth  needs to be set to a fixed size, like  columnWidth: 120 , or items need to have a fixed size in pixels, like  width: 120px .  isFitWidth makes every co...

工具：考拉    http://koala-app.com/index-zh.html Less文件注释： /*被编译*/ /不被编译/ less中声明变量的话，一定要用@ 开头，例如：@变量名：值； 多种混合模式： 匹配模式应用：如何创建四个方向的三角形 运算 嵌套 @arguments 变量 避免编译

canvas创建图形： 1.创建画布 。制定宽度，高度。 2.绘制矩形。 获取对象》图形上下文》填充绘制边框》设置绘制样式（fillstyle）》指定画笔的宽度》设置颜色值》绘制矩形 3.绘制圆形。 创建路径》创建圆形路径》关闭路径》设置样式绘制 4.绘制文字。 设置文字字体》对齐方式 5.保存canvas图形。

什么是HTML5？ 用更简洁的代码实现网站更多的功能。 为开发人员节约时间，主要指兼容性问题。 网页结构 新： <header>头元素 <nav>导航元素 <article>不相关内容 <section>页面中的一块内容区域 <aside>和内容相关的辅助信息 <footer>页脚元素 主体结构元素 新： article/section/aside/nav/time/pubdate article元素： 独立出来的内容。 section元素： 内容分块元素。 div section article ，语义是从无到有，逐渐增强的。 div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。 aside元素： 页面附属信息部分。 nav元素： 导航部分。 1.用于传统的导航条 2.侧边栏导航 time元素： 时间，格式多种。 pubdate元素 ： 定义此项目的最后发布日期。 header元素： 引导或导航内容。 hgroup元素： 标题和子标题分组。 footer元素： 页脚。 address元素： 联系信息，电话地址等等。 figure元素和figcaption元素： 组合。figcaption在figue 内部，只出现一次。 detail元素和summary元素： 点击显示详细信息，再点击隐藏收起。 布尔值真时显示，为假时收缩。 mark元素： 高亮需要突出显示的文字，通常在引用文字。与原作者内容无关。 progress元素： 任务的完成进度。0-100.max .    value<max meter元素： 规定范围内的数值。value实际值。min最小值。max最大值。low范围下限。high范围上限。苹果IE不支持。 将强版ol列表元素： 重新定义后的dl元素：