《HTML5与CSS3基础教程》学习笔记 Three Day - 逆光飞翔23
程序员文章站
2022-05-17 11:25:46
...
第十一章
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="/">Homea>li>
li>a href="#">Productsa>
ul class="subnav">
li>a href="#">Phonesa>li>
li>a href="#">Accessoriesa>li>
ul>
li>
li>a href="#">Supporta>
ul class="subnav">
li>a href="#">Community Foruma>li>
li>a href="#">Contact Usa>li>
li>a href="#">How-to Guidesa>li>
ul>
li>
li>a href="#">About Usa>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基础教程》学习笔记 --Three Day_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 Three Day - 逆光飞翔23
-
《HTML5与CSS3基础教程》学习笔记 Three Day - 逆光飞翔23
-
《HTML5与CSS3基础教程》学习笔记 --Four Day_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 --Four Day_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 --Two Day_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 --Two Day_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 Two Day - 逆光飞翔23
-
《HTML5与CSS3基础教程》学习笔记 Two Day - 逆光飞翔23