• 当前标签:emmet

程序开发 H5学习之内容分栏、emmet、display总结

内容分栏: HTML: <body> <article> <h1></h1> <section></section> <section> <h2></h2> <p></p> <p></p> <p></p> </section> <section> <h3></h3> <p></p> <h3></h3> <p></p> </section> </article> </body> CSS: article{ margin: 50px; -moz-column-count: 3; -webkit-column-count: 3; /*分栏数量*/ -moz-column-rule: 1px solid gray; -webkit-column-rule: 1px solid gray; /*分割线 于边框线不同 分栏线不会将内容区域撑大或压小*/ -moz-column-gap: 60px; -webkit-column-gap: 60px; } article h1{ -moz-column-span: all; /*目前火狐浏览器还不支持分栏合并*/ -webkit-column-span: all; /*分栏合并*/ } emmet: HTML: <body> <!-- >子代 +同级 ^上一级 ()整体部分 .Class #ID $排序 @-倒序 --> <!--nav>ul>li*3--> <nav> <ul> <li></li> <li></li> <li></li> </ul> </nav> <!--div+p+section--> <div></div> <p></p> <section></section> <!--div+div>p>span+em^^bq--> <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote> <!--div(header>ul>li*2>a)+footer>p--> <div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> </div> <footer> <p></p> </footer> <!--(div>dl(dt+dd)*3)+footer>p--> <div> <dl> <dt></dt> <dd></dd> </dl> <dl> <dt></dt> <dd></dd> </dl> <dl> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer> <!--div.c11#i3--> <div class="c11" id="i3"></div> <!--ul>li.item$*5--> <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> <!--h$[title=item$]{Header $}*3--> <h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3> <!--ul>li.item$$$*5--> <ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> <!--ul>li.item$@-*8--> <ul>

2017-05-02 23:15:46 151 0 0
阅读详情
  • 1
前往