无聊的我无聊到再写一遍昨天无聊的样式图

无聊的样式图（1）.

h5:

 

<div class="work1_box">
        <h3>我是内容</h3>
        <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
    </div>

css:

 .work1_box{
            width: 442px;
            height: 186px;
            background-color: #ffffff;
        }
        .work1_box h3{
            margin: 0;
            width: 420px;
            height: 35px;
            font: bold 16px/35px "微软雅黑";
            color: white;
            padding-left: 24px;
            background-color: #00adef;
        }
        .work1_box p{
            border: 1px solid #00afeb;
            margin-top: 20px;
            font: 14px/22px "微软雅黑";
            padding: 10px;
        }
​

无聊的的样式（2）

h5

 <div class="wo">
        <div><img src="../day_3/work/images/2.jpg" alt=""></div>
        <h3>北京联通100M带宽包14个月</h3>
        <h4>办理送路由器</h4>
        <p>&yen;879 <span>&yen;880</span> </p>
    </div>

css

        .wo{
            width: 290px;
            height: 290px;
            background-color: #ffffff;
        }
        .wo div{
            width: 160px;
            height: 160px;
            margin: 0 auto;
        }
        .wo h3{
            font: 14px/30px "微软雅黑";
            text-indent: 54px;
            color: #333333;
        }
        .wo h4{
            font: 12px/26px "微软雅黑";
            padding-left: 109px;
        }
        .wo p{
            font: bold 16px/54px "微软雅黑";
            color: #e52e2e;
            text-indent: 102px;
        }
        .wo span{
            color: #af99a8;
            text-decoration: line-through;
            padding-left: 11px;
        }

无聊的样式图（3）

h5

<div class="phone">
        <div><img src="../day_3/work/images/3.jpg" alt=""></div>
        <p>非常完美，孩子使用防止沉迷于电话影响学习，做工很好，定位基本准确，通话清晰，如果加入时间显示就更完美...</p>
        <h4>来自于17857629的评价</h4>
        <h3>米兔定位电话 <span class="sep">|</span>  <strong >149元</strong> ;</h3>
    </div>

css

.phone{
            width: 296px;
            height: 416px;
            background-color: #fff;
        }
        .phone div{
            height: 220px;
        }
        .phone p{
            
            height: 74px;
            font: 14px/26px "微软雅黑";
            padding: 0 31px 0 27px;
        }
        .phone h4{
            font: 12px/20px "微软雅黑";
            padding: 20px 0 0 27px;
            color: #b0b0b0;
        }
        .phone h3{
            font: 14px/20px Arial, "微软雅黑";
            color: #333333;
            padding: 10px 0 0 30px;
        }
        .phone h3 span{
            color: #ece5e0;
            padding-left: 8px;
        }
        .phone h3 strong{
            font-weight: normal;
            color: #ff6700;
            padding-left: 9px;
        }

无聊的样式图（4）

h5

<div class="list">
        <h3>IT培训课程</h3>
        <ul>
            <li><a class="a" href="#">互联网营销培训</a></li>            
            <li><a href="#">SEO网站运营培训</a></li>            
            <li><a href="#">SEM与信息流培训</a></li>            
            <li><a href="#">新媒体运营培训</a></li>            
            <li><a href="#">高端电商培训</a></li>            
            <li><a href="#">UI/UE交互涉及培训</a></li>            
            <li><a href="#">JAVA培训</a></li>            
        </ul>
    </div>

CSS

 .list{
            background-color: white;
            width: 220px;
        }
        .list ul{
            border: 1px solid #e6e6e6;
            border-bottom: none;
            list-style: none;
            padding: 0;
           
        }
        .list li{
            border-bottom: 1px solid #e6e6e6;
        }
        .list h3{
            font: normal 18px/50px  "微软雅黑";
            background: url(images/downArrow_03.jpg) no-repeat 132px ;
            text-indent: 15px;
            background-color: #ff4a00;
            color: white;
        }
        .list li a{
           margin: 0;
           padding: 0;
           font-weight: normal;
           color: #333333;
           text-decoration: none;
       }
       .list li{
           font: 16px/46px "微软雅黑";
           text-indent: 20px;
       }
       .list li :hover{
           color: #ff4a00;
           text-decoration: underline;
       }
       .list ul li .a{
           color: #ff4a00;
           text-decoration: underline;
       }