Rumah > hujung hadapan web > html tutorial > 《HTML5与CSS3基础教程》学习笔记 --Three Day_html/css_WEB-ITnose

《HTML5与CSS3基础教程》学习笔记 --Three Day_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:21:23
asal
1078 orang telah melayarinya

第十一章

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;}
Salin selepas log masuk

第十四章

1、 渐变背景

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

background: aqua;//要放在前面background: linear-gradient(to top right,blue,green);background: linear-gradient(90deg,blue,green);(起点:中上线)
Salin selepas log masuk

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)
Salin selepas log masuk

2、 元素设置不透明度

  • opacity:value
  • 3、 生成内容的效果

    :before和:after.more:after {content: " »";}
    Salin selepas log masuk

    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;}
    Salin selepas log masuk

    第十五章

    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;}
    Salin selepas log masuk

    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>         <!-- end .nav -->      </nav>
    Salin selepas log masuk

    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;/* 让子菜单回到自然状态 */}
    Salin selepas log masuk

     

    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan