首页 / HTML5 / 《HTML5与CSS3基础教程》学习笔记ThreeDay-逆光飞翔23

《HTML5与CSS3基础教程》学习笔记ThreeDay-逆光飞翔23

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了《HTML5与CSS3基础教程》学习笔记ThreeDay-逆光飞翔23，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3092字，纯文字阅读大概需要5分钟。

内容图文

第十一章

1、 box-sizing：border-box（让宽度和高度包含内边距和边框）

2、 clear让后面的元素显示在浮动元素的后面

3、 z-index只对只对绝对、固定、相对定位的元素有效

4、 vertical-aligh只用于行内元素

baseline/middle/sub/super/text-top/text-bottom/top/bottom/百分比/值

第十二章

1、

and (min-width/max-width/resolution:value)” href=”” />

2、

第十三章

1、

 body{

font-family:’ pt_sansregular’;

}

@font-face{

 font-family: 'pt_sansregular';
src: url('PTS55F-webfont.eot');
src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS55F-webfont.woff') format('woff'),
url('PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

第十四章

1、 渐变背景

1) 默认情况下，线性渐变是从上往下渐变的， 因此在属性值中不需要指定 to bottom

background: aqua;//要放在前面

background: linear-gradient(to top right,blue,green);

background: linear-gradient(90deg,blue,green);(起点：中上线)

2) 径向渐变

/* 默认 */
background: red;
background: radial-gradient(yellow, red);

 background: radial-gradient(at top,yellow, red);

 background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);
background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red)

2、 元素设置不透明度

  • opacity:value

3、 生成内容的效果

:before和：after

.more:after {
content: " »";
}

4、 使用 sprite 拼合图像

sprite 就是通过 content:" "; 生成的空格的背景图像。将其设置为display: block;，从而可以设置与图标大小匹配的高度和宽度

.icon:before {
background-image: url(sprite.png);
content: " ";//-------------------------------------------------
display: block;//
height: 16px; /* 图标高度 */
position: absolute;
width: 16px; /* 图标宽度 */
}
a[href$=".xls"]:before {
background-position: -17px 0;
}
a[href$=".docx"]:before {
background-position: -34px 0;
}

第十五章

1、 自定义标记

ul{

   list-style: none;

   margin-left: 0;

padding-left: 0;

}

li{

   background: url(../img/done_square.png) no-repeat 0 .1em;

   padding-left: 15px;

   line-height: 24px;

}

2、 选择列表的起始编号

1) 整个列表编码初始值ol里面增加start=”n”

2) 修改有序列表某个列表编码，影响接下来的列表，在li里面增加value=”n”

3、 控制标记的位置

list-style-position=”inside/outside(默认)”

4、 下拉式导航

HTML:

<nav role="navigation">

         <ul class="nav">

            <li><a href="/">Home</a></li>

            <li><a href="#">Products</a>

                <ul class="subnav">

                   <li><a href="#">Phones</a></li>

                   <li><a href="#">Accessories</a></li>

                </ul>

            </li>

            <li><a href="#">Support</a>

                <ul class="subnav">

                   <li><a href="#">Community Forum</a></li>

                   <li><a href="#">Contact Us</a></li>

                   <li><a href="#">How-to Guides</a></li>

                </ul>

            </li>

            <li><a href="#">About Us</a></li>

         </ul>

         

      </nav>

CSS:

/* 子菜单的默认状态 */

.nav .subnav {left: -999em;/* 将子菜单移出屏幕 */position: absolute;z-index: 1000;}

a,a:hover {text-decoration: none;}

ul {list-style: none;margin-left: 0;padding-left: 0;}

.nav {background: #fff;}

.nav>li {float: left;padding-right: 10px;}

.nav ul {background: #fff;z-index: 1000;border-bottom: 1px solid #fff;}

.nav ul li {border-bottom: 1px solid gray;line-height: 24px;padding: 2px 5px;}

/* 当鼠标停留在父元素li上时子菜单的状态 */

.nav li:hover .subnav {left: auto;/* 让子菜单回到自然状态 */}

内容总结

以上是互联网集市为您收集整理的《HTML5与CSS3基础教程》学习笔记ThreeDay-逆光飞翔23全部内容，希望文章能够帮你解决《HTML5与CSS3基础教程》学习笔记ThreeDay-逆光飞翔23所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/408730.html

来源：【匿名】