master

分支 (1)

管理

管理

master

shiyan20
/
shiyan5-1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ui布局</title>
    <style>
        body,
        * {
            padding: 0;
            margin: 0;
        }
        .clear {
            clear: both;
        }
        .box {
            width: 665px;
            border: 1px solid rgb(255, 211, 152);
            margin: 10px;
        }
        .left {
            width: 280px;
            float: left;
            margin: 10px 25px 10px 10px;
        }
        .right {
            width: 330px;
            float: left;
            /* background-color: brown; */
            margin: 10px 0 10px 15px;
        }
        .bottom {
            /* background: darkmagenta; */
            margin: 10px;
            color: rgb(234, 129, 68);
            font-size: 18px;
        }
        ul {
            color: rgb(213, 0, 0);
            list-style: square;
            font-size: 18px;
        }
        .li-black {
            color: black;
        }
        .li-orange {
            color: rgb(234, 129, 68)
        }
        li {
            margin: 8px 0 8px 8px;
        }
        .jQ {
            width: 280px;
            height: 180px;
            margin-bottom: 10px;
            border: 1px solid rgba(157, 157, 157, 0.367);
        }
        .jQuery-img {
            width: 260px;
            height: 85px;
            padding: 10px 10px 0px 10px;
        }
        .jQ-text {
            text-align: center;
            padding-top: 10px;
            font-size: 28px;
            font-family: 幼圆;
            padding-left: 8px;
            letter-spacing: 12px;
            margin: 0 10px;
            margin-top: -5px;
            height: 70px;
            background: linear-gradient(to left, rgb(185, 125, 87), white);
        }
        .DW {
            width: 120px;
            height: 145px;
            float: left;
            border: 1px solid rgba(157, 157, 157, 0.367);
        }
        .DW-img {
            width: 100px;
            height: 100px;
            padding: 10px 10px 0 10px;
        }
        .DW-text {
            text-align: center;
            font-size: 18px;
            color: rgb(137, 137, 137);
        }
        .PS {
            width: 120px;
            height: 145px;
            float: left;
            margin-left: 12px;
            border: 1px solid rgba(157, 157, 157, 0.367);
        }
        .PS-img {
            width: 100px;
            height: 100px;
            padding: 10px 10px 0 10px;
        }
        .PS-text {
            text-align: center;
            font-size: 18px;
            color: rgb(137, 137, 137);
        }
        .div-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">


        <div class="left">
            <div class="jQ">
                <div>
                    <img src="img/lx5-1.png" alt="" class="jQuery-img">
                </div>
                <div class="jQ-text"><b>高级网页设计</b> </div>
            </div>

            <div class="DW">
                <div class="div-center">
                    <img src="img/dw.jpg" alt="" class="DW-img">
                </div>
                <div class="DW-text"> DW CS5</div>
            </div>

            <div class="PS">
                <div class="div-center">
                    <img src="img/ps.jpg" alt="" class="PS-img">
                </div>
                <div class="PS-text">PS CS5</div>
            </div>
        </div>


        <div class="right">
            <ul>
                <li><span class="li-orange">高级CSS应用技巧 : 圆角矩形和a:hover</span></li>
                <li><span class="li-black">基于psd设计图的网页设计流程与实例</span></li>
                <li><span class="li-black">JavaScript基于语法与特性</span></li>
                <li><span class="li-black">Dreamweaver Spry框架的介绍与应用</span></li>
                <li><span class="li-orange">jQuery : The Write Less , Do More</span></li>
                <li><span class="li-black">jQuery动画插件的绚烂效果及实例</span></li>
                <li><span class="li-black">Tab选项卡的各种实现方法汇总</span></li>
                <li><span class="li-black">Web标准已经成为主流的网页设计方法</span></li>
                <li><span class="li-black">搜索引擎优化的外部方法和内部方法</span></li>
                <li><span class="li-black">主流RIA技术的概括和应用现状</span></li>
                <li><span class="li-black">Web服务器搭建和配置攻略</span></li>
            </ul>
        </div>


        <div class="clear"></div>
        <div class="bottom">说明:html、css、JavaScript、jQuery、SEO都是前端开发的重要技术。</div>
    </div>
</body>
</html>