• 当前标签:裁剪标签

程序开发 H5学习之裁剪标签、样式继承、相对字号em和rem、超链接选择器

裁剪标签: HTML: <body> <section> <div></div> </section> </body> CSS: section{ width: 416px; height: 105px; background-color: #444; border-radius: 30px; margin: 100px auto; position: relative; /*overflow: hidden; 可以切掉超出边界的子元素 方法简单 适用广泛 但对于绝对定位的元素 如果移到了父元素的外面 方法就没用了 这时需要使用clip*/ } div{ width: 180px; height: 180px; background-color: yellow; border-radius: 50%; position: absolute; top: -30px; left: 40px; opacity: 0.7; clip: rect(30px,180px,135px,0); /*裁剪:第一个值 上方切掉的范围 第二个值 从左到右保留的范围 第三个值 从上到下保留的位置 第四个值 左侧切掉的范围*/ } 样式继承: HTML: <body> <main> <article> <header> <h1>大标题</h1> <h3>副标题</h3> <address>作者,联系方式和继承</address> </header> <section> <h2>小标题1</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section> <section> <h2>小标题2</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section><section> <h2>小标题3</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section><section> <h2>小标题4</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section><section> <h2>小标题5</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section> </article> </main> </body> CSS: body{ color: red; /*将color应该body上 会使body内部所有的标签都加上颜色 这就是继承*/ background-color: blanchedalmond; font-size: 25px; font-family: 楷体; font-style: italic; text-decoration: underline; line-height: 30px; border: 1px solid blue; /*能够继承的样式多是与文字相关的样式 盒模型相关的样式和其它更多样式是不继承的*/ } 相对字号em和rem: HTML: <body> <section> <h2>小标题</h2> <p>正文段落1</p> <p>正文段落2</p> <p style="font-size:1em;">正文段落3</p> <p style="font-size:1.2em;">正文段落4</p> <p style="font-size:1.5em;">正文段落5</p> <p style="font-size:2em;">正文段落6 <span style="font-size:0.5em;">内部文字 <span style="font-size:0.5em;">内部的内部 </span> </span> </p> </section> <section> <h2>小标题</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> <p style="font-size:1.2rem;">正文段落4</p> <p style="font-size:1.5rem;">正文段落5</p> <p style="font-size:2rem;">正文段落6

2017-04-25 22:31:08 69 0 0
阅读详情
  • 1
前往