• 当前标签：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> 页头 <!--<h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6>--> </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 820 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> <!--<p>这两天真热 hot HOT</p>--> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> </body> </html>

2017-04-25 01:14:35 604 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 503 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 483 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 就会出现不换行 横向滚动条的现象 如果加上空格（键盘上的空格）则会在空格处换行 如果加上 实体 则就不会换行 因为此空格是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 885 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 762 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>费　用　报　销　单</h1> <p> <span>报销日期　　　　年　　月　　日</span> <span>附件　　　张</span> </p>

2017-04-14 20:39:00 988 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定义有序列表 默认带有16px的外间距 带有40px的左内间距--> <!--li定义列表的项 reversed 倒序 start 有序列表的初始值 如：start="4" type 有序列表的标记类型 如：type="A"--> <ol type="I" start="4"> <li>HTML</li> <li>JavaScript</li> <li>CSS</li> </ol> <!--ul定义无序列表--> <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表示引用内容 cite表示引用来源 通常是书籍 刊物 名称--> <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对特殊短语的定义--> <dfn> <!--使用strong强调定义的词 如果这个词是缩写 最好同时使用addr标签--> <strong><addr title="Hypertext Markup language">HTML5</addr></strong>是超文本标记语言的最新发展成果 它包含HTML5 CSS3 JavaScript 等前端开发技术的最新内容 HTML5是移动互联网时代事件的产物 </dfn> <p> <h1>一个简单的HTML文档</h1> <code> <!--code表示代码内容为某种代码 pre可以保留空格换行等代码格式--> <pre> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> <body> </body>

2017-04-13 23:26:47 538 0 0
阅读详情
  • 1
  • 2
  • 3
  • 4
前往
页

公告

由于中文域名续费比较贵，所以域名逐渐转为huangliangbo.com

中文域名访问截止时间2023-12-23


关注公众号

微信公众号：HLB_Blog

海南机动车摇号查询

海南机动车摇号查询

博客小程序

博客小程序

最新评论

站点统计

  • 文章：394篇
  • 评论：365条
  • 分类：5个
  • 页面：3个
  • 标签：630个
  • 最后更新：2021-6-3

标签云

更多