H5学习

H5学习之筛选器、空标签选择器、属性选择器

* 所有标签标签名称所有同名的标签 #id 指定此id的标签 .className 含有此className的元素 A B 后代选择器 A>B 子代选择器 :nth-child(n) 第n个标签支持 2n+1 3n+2 等公式支持负值? :nth-of-type(n) 第n个同类标签冒号前需加上标签名 :nth-last-child(n) :nth-last-of-type(n) :first-letter 首字选择器 :last-child 最后一个子标签 :only-child 只有一个子标签 :only-of-type 类型只有一个 ~ 后面所有的同级标签 + 相邻选择器后面一个 , 同时定义多个样式选择某个标签前面的技巧 :not(selector) 选择器匹配非指定元素/选择器的每个元素 :nth-of-type(-n+4) :nth-child(-n+3) 筛选器： html： <body> <header> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> <section>7</section> <section>8</section> <section>9</section> 页头  </header> <p>ppp</p> <p>cccc</p> <section>section</section> </body> css： body{ background-color: #333; color: white; } /* *页面上的所有元素*/ /*header>*:nth-child(2n+1){ color: yellow; }*/ /*section:nth-child(2n+1){ color: red; } section:last-child{ color: yellow; }*/ header~p{ color: blue; } /*header>section:nth-child(-n+2){ color: salmon; }*/ section:not(:nth-last-of-type(3)){ color: rebeccapurple; } 空标签选择器： html： <body> <span>古人云</span> <span></span> <span>gurenyun</span> <div></div> <div>古人云</div> </body> css： :empty:before{ content: '可以放上任意文字' ',在加一些文字'; } span>:empty:before{ content: '完了'； } span>:empty:after{

2017-04-27 22:57:06 17 0 0

阅读详情

H5学习之单位

各种css常用单位： <html> <head> <meta charset="UTF-8"> <title>单位</title> <style> body{ font-size: 30px; } p{ /*缩进2个字符*/ text-indent: 2em; /*font-variant 小型大写字母中文没有作用也不用它*/ /*font-variant: small-caps;*/ /*text-transform 属性控制文本的大小写 */ /*text-transform: capitalize;*/ } hr{ border: 3px solid red; } hr:nth-child(1){ width: 5px; } hr:nth-child(2){ width: 5mm; /*打印时使用*/ } hr:nth-child(3){ width: 5cm; } hr:nth-child(4){ width: 5in; /*英寸 1英寸等于2.54cm 打印时使用*/ } hr:nth-child(5){ width: 5pt; /*磅 1/72英寸打印时使用表示文字大小印刷专业用的单位*/ } hr:nth-child(6){ width: 5%; /*适配多种尺寸的屏幕时常用*/ } hr:nth-child(7){ width: 5em; /*1em 当前字体的一个字符的大小适配多种尺寸的屏幕时常用更常用的是 rem 因为em是相对于容器的会继承的 rem是相对于html的根元素*/ } hr:nth-child(8){ width: 5ex; /*当前字体中x字母的大小中文环境下基本不用*/ } </style> <body>  <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> </body> </html>

2017-04-25 01:14:35 12 0 0

阅读详情

H5学习之标签类型、浮动

标签类型： <html> <head> <meta charset="UTF-8"> <title>标签类型</title> <style> span{ color: red; /*display: none; 可以隐藏标签*/ /*visibility: hidden; 也可以隐藏标签但标签的位置仍然被占据着*/ } strong,i,b,a{ /*display 属性规定元素应该生成的框的类型*/ /*display: block;把行元素变为块元素*/ width: 100px; height: 200px; color: red; /*这类元素会占据尽可能少的空间，并且会一个紧贴一个从左往右从上往下排列，它们不受width、height样式的影响即这些样式对它们无效的在窗口变化时，它们的大小不变但会自动换行它们叫行元素（标签）*/ } img,div,section,p,h1,header,aside{ display: inline; /*width: 400px; height: 200px;*/ border: 1px solid blue; color: palegreen; max-width: 800px; /*这类标签会独占一行，哪怕它们根本用不了右侧的空间它们受width、height控制在窗口变化时，不设定宽和高时它们会跟着变窄或变宽除非设置了width max-width min-width 它们纵向上也会尽可能少的占用空间它们叫做块元素（标签）*/ } /*display:inline 即行元素 display:block 即块元素 display:inline-block 即行内块元素*/ /*除了行标签、块标签之外，还有一个标签很特殊它兼有两者的特点即在行内，也会受到width和height的控制这类标签叫做行内块元素（标签） img */ /*还有一些元素不在这些类别中，或是很难分类如script link title td等*/ </style> <body> <img src="lry.jpg" alt=""> <span>HTML5</span> <strong>从广义上说</strong> <i>前端开发技术的总称</i> <b>包含</b> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a>的最新内容。 HTML5是移动互联网时代的产物。 <div>HTML</div> <p>从广义上说是</p> <section>前端开发技术的总称</section> <h1>包含</h1> <header> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a>的最新内容。 </header> <aside> HTML5是移动互联网时代的产物。 </aside> </body> </html> 浮动: <html> <head> <meta charset="UTF-8"> <title>浮动</title> <style> body{ margin: 0; } ul{ margin: 10px; padding-left: 0; } li{ /*浮动之后标签占据的空间最小化块元素会让出右侧的空间（float:left）还可以向右浮动右浮动时顺序保持不变的话可以在外面加一个nav标签将右浮动应用到nav上浮动与inline-block不同 inline-block会带来小块空白除非将标签全部紧贴在一起或者说是在父标签设置font-size为0 子元素在设置font-size的一个大小浮动标签会影响后续标签所以有时要清除浮动*/ /*display: inline-block;*/ float: left; list-style: none; background-color: #eee; padding: 6px 15px; margin-right: 5px; border-radius: 5px; }

2017-04-18 22:35:30 12 0 0

阅读详情

H5学习之背景图片、图片精灵、多重背景、背景图片位置

背景图片： <html> <head> <meta charset="UTF-8"> <title>背景图片</title> <style> body{ /* 流式布局从左到右从上到下 */ height: 100%; /*因为标签总是会尽最大努力占据最小高度所以当body中内容时高度为0 故将高度设置为100%*/ background-image: url(lry.jpg); margin: 0; /*因为body标签默认带有8px的外间距所以设置高度为100%时则会出现滚动条所以将margin设为0去除滚动条*/ background-repeat: no-repeat; /*背景图片小于标签尺寸时背景图片会在两个放向上重复自己直到填满整个空间除非设置了background-repeat 还可在一个方向上重复 background-repeat: repeat-x background-repeat: repear-y*/ background-color: red; /*背景图片小于标签时，且背景图片不重复时可以看到背景图片和颜色共存的背景图片在背景颜色的上方*/ background-position: 50% 50%; /*background-position样式可以决定从哪个位置开始绘制这张图片*/ /*如果使用百分比计算方式（容器的宽 - 图片的宽）× 百分比超出部分隐藏（容器的高 - 图片的高）× 百分比超出部分隐藏如果仅规定了一个值那另一个值为50% */ background-size: contain; /*设置图片大小如果只设置一个值（宽）那另一个值为auto 如果使用百分比计算方式为（图片的宽和高 × 百分比）*/ } </style> <body> </body> </html> 图片精灵： <html> <head> <meta charset="UTF-8"> <title>图片精灵</title> <style> /*body{ background-color: black; }*/ /*方案一 span{ display 属性规定元素应该生成的框的类型 display: block; width: 144.285px; height: 144.285px; background-image: url(icons.jpg); background-position: -144.285px -144.285px; 显示第二行第二个图标 } span>i{ display: none; 需要可以显示文字不需要可以将中间文字隐藏 }*/ /*方案二 .icons{ display: block; width: 144.285px; height: 144.285px; background-image: url(icons.jpg); } .r1c1{ background-position: -144.285px -144.285px; } .ric2{ background-position: -288.57px -144.285px; }*/ /*方案三*/ /*可以随便的设置任意大小*/ /*.icons{ display: block; width: 25px; height: 25px; background-image: url(icons.jpg); background-size: 700% 700%; } .r1c1{ background-position: -50px -50px; } .r1c2{ background-position: -50px -100px; }*/ </style>  <link rel="stylesheet" href="style.css">

2017-04-18 00:26:38 10 0 0

阅读详情

H5学习之边框、宽度、高度、内容溢出、固定背景

边框： <html> <head> <meta charset="UTF-8"> <title>边框</title> <style> hr{ width: 300px; color: red; } section{ width: 300px; height: 300px; /*设置边框*/ border: 20px solid red; /*border 三个值的先后顺序颠倒也能正常起作用但推荐使用 width style color 这个顺序来写*/ margin: 0 auto; /*border-width: 10px; border-style: solid; border-color: red;*/ /*border-top: 10px solid blue; border-bottom: 10px double green; border-right: 10px dotted red; border-left: 10px dashed yellow; border-radius: 20px;*/ /*border-image: url(lry.jpg);*/ /*border-image-source: url(lry.jpg); border-image-slice: 30; border-image-width: 80px; border-image-outset: 10px;*/ } </style> <body> <hr> <section> </section> </body> </html> 宽度、高度、内容溢出： <html> <head> <meta charset="UTF-8"> <title>宽度高度内容溢出</title> <style> section{ width: 300px; /*max-width: 800px;*/ /*会随着窗口的宽度的增减而变化但不会超过设置值（800px）*/ /*min-width: 400px;*/ /*默认是100%的宽度会随窗口变窄而减小宽度但不会小于设定值（400px）*/ /*max-width min-width 可以组合使用但标签总是尽可能占用尽可能多的横向空间（和尽可能少的纵向空间）但设置width时 max-width min-width不再起作用*/ overflow: scroll; /*overflow-y: scroll;*/ /*值scroll使内容滚动值hidden则完全剪切掉多余内容*/ /*如果标签的尺寸不足以容纳内部内容则会出现内容溢出现象使用overflow可以控制溢出行为*/ /* 中文字符可以任意两个字符之间换行所以会出现纵向滚动条英文默认不会在单词内部换行如果写一个很长的单词或者是url 就会出现不换行横向滚动条的现象如果加上空格（键盘上的空格）则会在空格处换行如果加上&nbsp;实体则就不会换行因为此空格是non-breaking space 不换行 */ /*word-wrap: break-word;*/ /*word-wrap 属性允许长单词或者url地址换行到下一行*/ /*overflow-wrap: break-word; 则能折断单词强制换行*/ height: 100px; border: 5px solid blue; margin: 0 auto; resize: both; /*允许用户手动调整大小如果希望resize此属性生效需要设置元素的overflow 值可以是auto hidden scroll*/ } </style> <body> <section> 1.买来的整鸡已经是清理过内脏的了，冲洗干净后，斩去鸡的头部和尾部，在尾部体内有很厚的左右两片脂肪，也要去掉，鸡脖子上的淋巴也去掉；把自己喜欢的蘑菇洗净，切块备用；红枣和枸杞洗净，放入温水中浸泡一会备用。 2.在锅中注入足够量的清水，冷水下入整鸡，大火煮滚后捞去浮沫，放入姜片、泡过的红枣和枸杞，还有香菇。你用的是干香菇吗，那泡香菇的水不如一起倒进汤中煮，香味更浓，这样的话可得仔细清洗香菇。 3.柴鸡、乌鸡的话小火煮2小时，三黄鸡1个小时足以了，喝前撒些盐调料即可。 zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz </section>

2017-04-15 21:33:24 9 0 0

阅读详情

H5学习之内间距和外间距

大家来学习下内间距和外间距。主要东西在代码注释中代码如下： <html> <head> <meta charset="UTF-8"> <title>内间距和外间距</title> <style> *{ /* *星号表示页面上的所有元素*/ box-sizing: border-box; /*它可以改变标签尺寸的计算方式默认的content-box则把内容作为宽度计算的范围 border-box则是把边框的粗细、内间距、内容都计算在宽度中*/ } hr{ width: 300px; } section{ width:300px; border: 0px solid black; margin: 50px auto; /*在固定宽度的情况下高度会随内容自动伸缩但总是尽可能占用最少的高度如果不设置宽度内容则会优先在横向空间伸展尽可能少占用纵向空间*/ padding: 30px; /*不设置高度的情况下（有一个放向不加限制）内间距能够得到充分的展现注意边框的宽度增加了 width:300px 是针对内容来计算的*/ /*height: 80px;*/ /*在同时设置宽高的情况下如果内容较多则会内容溢出*/ /*padding-left: 40px; padding-top: 30px; padding-bottom: 20px; padding-right: 20px;*/ /*outline: 10px dotted blue;*/ /*轮廓线紧贴边框线*/ outline-color: blue; outline-style: dotted; outline-width: 10px; outline-offset: -30px; /*设置轮廓线的偏移量可以使轮廓线外扩（正值）或向内收缩（负值）但注意轮廓线是漂浮在页面上方的它不会影响整体尺寸即使轮廓线很大页面也不会出现滚动条*/ background-color: gray; } p{ width: 300px; border: 10px solid green; margin: 80px auto; /*margin外边距会重合在一起重叠后最大的那个外边距即是最终外边距*/ } </style> <body> <hr> <section> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </section> <p> 天色已晚 </p> </body> </html>

2017-04-14 22:34:39 16 0 0

阅读详情

H5学习之制作费用报销单

表格的实践。代码： <html> <head> <meta charset="UTF-8"> <title>费用报销单</title> <style> main{ width: 21cm; margin: 3cm auto 0; box-shadow: 0 0 10px #111; padding: 0.5cm 1cm 0 1cm; box-sizing: border-box; } caption h1{ width: 6cm; font-size: 0.6cm; margin: 0.8cm auto 0; border-bottom: solid 1px black; } caption p{ margin: 0.2cm 0; } caption p span:nth-child(1){ position: relative; left: 40px; } caption p span:nth-child(2){ float: right; } table{ border: 1px solid black; margin: 0 auto; font-size: 0.35cm; border-spacing: 0; border-collapse: collapse; } td{ border: 1px solid black; height: 0.8cm; text-align: center; padding: 0; } tr:nth-child(1) td:nth-child(1){ width: 6cm; } tr:nth-child(1) td:nth-child(2), tr:nth-child(1) td:nth-child(3){ width: 2cm; } tr:nth-child(1) td:nth-child(4){ width: 3cm; } tr:nth-child(1) td:nth-child(5){ width: 3.5cm; } tr:nth-child(8) td{ text-align: left; } table table{ width: 100%; /*去除边框*/ border: none; } table table td{ border: none; border-right: 1px solid black; width: 5cm!important; } table table tr td:last-child{ border-right: none; } footer{ padding: 0.3cm; text-align: center; } </style> <body> <main> <table> <caption> <h1>费&#x3000;用&#x3000;报&#x3000;销&#x3000;单</h1> <p> <span>报销日期&#x3000;&#x3000;&#x3000;&#x3000;年&#x3000;&#x3000;月&#x3000;&#x3000;日</span> <span>附件&#x3000;&#x3000;&#x3000;张</span> </p>

2017-04-14 20:39:00 26 0 0

阅读详情

H5学习之列表、引用标签、定义标签、figure标签、表格

列表、引用标签、定义标签、figure标签、表格等标签用法的学习。列表： <html> <head> <meta charset="UTF-8"> <title>有序列表和无序列表</title> <style> ol{ counter-reset: ol; } li{ /*设置列表标记类型*/ list-style-type: none; /*设置如何放置标记符号的位置 list-style-position: inside;*/ /*设置图像替换列表的标记符号 list-style-image: url(fff.png);*/ /*list-style: disc inside url(fff.png);*/ } ol li:before{ counter-increment: ol; content: '['counter(ol)'] '; } ul{ padding-left: 80px; } ul li{ list-style-type: circle; } ul li:before{ content: '❤♠♢♣'; color: red; } </style> <body>   <ol type="I" start="4"> <li>HTML</li> <li>JavaScript</li> <li>CSS</li> </ol>  <ul> <li>JavaScript</li> <li>CSS</li> <li>NET</li> </ul> </body> </html> 引用标签： <html> <head> <meta charset="UTF-8"> <title>引用标签</title> <style> cite{ font-style: normal; } cite:before{ content: '《'; } cite:after{ content: '》'; } q{ quotes: '「' '」''〔' '〕'; } </style> <body>  <q>有朋自远方来不亦说乎</q>这句话来着<cite>论语</cite><br> <q>学而不思则罔 <q>思</q>而不学则殆</q> </body> </html> 定义标签： <html> <head> <meta charset="UTF-8"> <title>定义标签</title> <style> dfn{ font-style: normal; } </style> <body>  <dfn>  <strong><addr title="Hypertext Markup language">HTML5</addr></strong>是超文本标记语言的最新发展成果它包含HTML5 CSS3 JavaScript 等前端开发技术的最新内容 HTML5是移动互联网时代事件的产物 </dfn> <p> <h1>一个简单的HTML文档</h1> <code>  <pre> &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; &lt;/style&gt; &lt;body&gt; &lt;/body&gt;

2017-04-13 23:26:47 10 0 0

阅读详情