h5-11

背景色　　background-color

dashed实线

透明度

　　文字不透明

<style>
        *{
            margin: 0;
            padding: 0;
        }        
        .box{
            width: 200px;
            height: 200px;
            /*背景色 rgb() rgba() 透明不影响内容    a透明度 */
             background-color: rgba(255,0,0,.5);         /*0.5其中0可以省略*/
            border: 10px dashed blue;
        }
        
    </style>

<div class="box">hjhjh</div>

 　　文字透明

<style>
        *{
            margin: 0;
            padding: 0;
        }        
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255,0,0);
             opacity: 0.5; /*让整个盒子包括文字内容都会起作用*/
            border: 10px dashed blue;
        }
        
    </style>

 简易导航栏

　　导航一般使用列表制作

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .nav {
            width: 960px;
            height: 40px;
            margin: 100px auto;
        }

        .nav ul {
            overflow: hidden;
            /*溢出隐藏*/
        }

        .nav ul li {
            float: left;
            width: 120px;
            height: 40px;
            font-size: 18px;
            font-family: "Microsoft Yahei";
            line-height: 40px;
            text-align: center;
        }

        .nav ul li a {
            display: block;
            /*改为块状元素*/
            background-color: #ccc;
            color: #666;
            text-decoration: none;
            /*规定添加到文本的修饰，下划线、上划线、删除线等，此处为空*/
        }

        .nav ul li a:hover {
            background-color: yellowgreen;
            color: #fff;
            font-weight: bold;
            /*字体粗细：粗体*/
        }
    </style>

 <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
        </ul>
    </div>

background-image背景图片

    <style>
        *{
            margin: 0;
            padding: 0;
        }        
        .box{
            width: 400px;
            height: 500px;
            padding: 10px;
            background-color: #ccc;
            /*背景图 默认会从左上角显示 会水平或者垂直平铺 padding区域有背景图*/
            background-image: url(images/in_12.jpg);
            /* background: #ccc url(images/in_12.png); */
            border: 10px dashed blue;
        }
        
    </style>

<div class="box"></div>

图片在div内平铺

 background可合并为

<style>
        *{
            margin: 0;
            padding: 0;
        }        
        .box{
            width: 400px;
            height: 500px;
            /*background-color: #ccc;
            background-image: url(images/in_12.png);*/
            background:url(images/in_12.jpg) #ccc;
            /*background-repeat: repeat; 默认就是平铺*/
            /* background-repeat: no-repeat;  两个方向不平铺*/
            /* background-repeat: repeat-x; 只平铺水平方向*/
            /* background-repeat: repeat-y;  只平铺垂直方向*/
            border: 10px dashed blue;
        }
        
    </style>

与上图效果相同

建议导航栏-----渐变背景

将渐变线条平铺在块内

<style>
        *{
            margin: 0;
            padding: 0;
        }        
        ul{
            list-style:none;
        }
        .nav{
            width: 960px;
            height: 40px;
            margin: 100px auto;
        }
        .nav ul{
            overflow: hidden;
        }
        .nav ul li{
            float: left;
            width: 120px;
            height: 40px;
            font-size: 18px;
            font-family: "Microsoft Yahei";
            line-height: 40px;
            text-align: center;
        }
        .nav ul li a{
            display: block;
            /* 120px;
            height: 40px;*/
            background-image: url(images/jbbg.jpg);
            background-repeat: repeat-x; 
            /* background-repeat: no-repeat; */
            color: #FFF;
            text-decoration: none;
        }
        .nav ul li a:hover{
            background-image: url(images/jbbg2.jpg);
            color: #fff;
            font-weight: bold;
        }
    </style>

<div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
        </ul>
    </div>

background-position表示方法　　（图像定位）

1、单词表示法

<style>
        *{
            margin: 0;
            padding: 0;
        }        
        .box{
            width: 400px;
            height: 500px;
            background: #ccc url(images/jbbg.jpg);
            background-repeat: no-repeat;
            /*
              背景图定位 水平方向 垂直方向 
              默认  left   top
               水平 left/center/right
               垂直 top/center/bottom
            */
            background-position:right top;
            /* background-position:center center; */
            border: 10px dashed blue;
        }
        
    </style>

<div class="box"></div>

 2、像素表示法

<style>
        *{
            margin: 0;
            padding: 0;
        }        
        .box{
            width: 400px;
            height: 500px;
            background: #ccc url(images/1.jpg);
            background-repeat: no-repeat;
            /* 100px 表示水平向右移动100px 150px 表示垂直向下移动150px*/
            background-position: 100px 150px;
            /* background-position: -100px -150px; */
            border: 10px solid blue;
        }
        
    </style>

    <div class="box"></div>

百分比表示法

    <style>
        *{
            margin: 0;
            padding: 0;
        }    
        /*
          素材 234*248
        */    
        .box{
            width: 400px;
            height: 400px;
            border: 3px solid red;
            background-image: url(images/meng.jpg);
            background-repeat: repeat;
            /* 盒子的宽-图片的宽 看成100%*/
            background-position: 30% 50%; 
        }
    </style>

<div class="box"></div>

 background-position的body大背景

<style>
        *{
            margin: 0;
            padding: 0;
        }    
        body{
            background: url(images/c3.jpg) no-repeat center top #000;
        }
        /*.box{*/
        /*     400px;
            height: 400px;
            border: 3px solid red;
            background-image: url(images/meng.jpg);
            background-repeat: no-repeat;
            background-position: 30% 50%;
        }*/
    </style>

    <div class="box"></div>

 background-attachment　　背景图片固定

<style>
        *{
            margin: 0;
            padding: 0;
        }    
        body{
            background:fixed #fff url(images/c4.jpg) no-repeat 50% 0;
            /* background-attachment: fixed;    fixed表示背景图固定 */
            /* background: #fff url(images/c4.jpg) no-repeat 50% 0; */

            
        }
        .box{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            margin-bottom: 20px;
        }
    </style>

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <style>
        *{
            margin: 0;
            padding: 0;
        }    
        body{
            /* background:fixed #fff url(images/c4.jpg) no-repeat 50% 0; */
            /* background-attachment: fixed;    fixed表示背景图固定 */
            background: #fff url(images/c4.jpg) no-repeat 50% 0;    /*默认时*/

            
        }
        .box{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            margin-bottom: 20px;
        }
    </style>