首页 > 代码库 > 辅导自习(一)

辅导自习(一)

2024-08-23 12:31:34   211人阅读

今天做了一个学生感言的模块,刚开始是自己去设计的结构,但是结构设计的不是很合理,以至于后面排版的时候比较乱,自己都搞得有点晕头转向的,排了半天,排出了一边的效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css">
    /*css初始化*/
    body,img,ul,li{margin:0px; padding:0px;}
    ul,li{list-style:none;}
    a:link,a:visited{color:#000;text-decoration:none;}
    a:hover{color:red;}
    body{font-size:12.5px;background-color:gray;}
    /*整个大框架box设置样式*/
    .box{
        width:630px;
        margin:30px auto;
        background-color:#fff;
    }
    .clear{
        clear:both;
    }
    /*设置title的样式*/
    .title{
        height:34px;
        background:url("images/bg01.gif") no-repeat;
        font-size:20px;
        line-height:34px;
    }
    .title1{
        padding-left:20px;
        color:blue;
    }
    /*设置content1的样式*/
    .content1{
        width:295px;
    }
    li{
        float:left;
        padding:5px 0px;
        width:295px;
    }
    .content1 img,.content .span1{
        float:left;
    }
    .content1 img{
        padding:0px 5px;
    }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
<div class="box">
    <div class="title">
        <span class="title1">学员</span>感言
    </div>
    <div class="content1">
        <ul>
            <li class="li1">
                <img src="images/img08.jpg" />
                <span class="span1">
                    <img src="images/li06.gif" />
                    <a href="#">[php学员]钟玲玉:传智,我人生中重要的一站</a>
                </span>
            </li>
            <li class="li2">
                <img src="images/li07.gif" />
                <a href="#">[php学员]李久扬:90后,月薪10k,一封迟..</a><br /><br />
                <a href="#">[php学员]杜宏海:同学到其它机构学完..</a><br /><br />
                <a href="#">[php学员]杨*斌:一个小学生的奋斗史..</a><br /><br />
                <a href="#">[php学员]黄超:传智播客,让我月薪增长到..</a><br /><br />
                <a href="#">[php学员]刘传华:传智,我人生中的转折点..</a>
            </li>
        </ul>
    <div class="clear"></div>
    </div>
    <div class="content2"></div>
</div>
</body>
</html>

效果图:

技术分享

后面看了老师的思路,深受启发,后面自己又按照老师的思路重新排了一次,感觉思路清晰了很多:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css">
        /*css初始化*/
        body,p,ul,li,img{margin:0px;padding:0px;}
        ul,li{list-style:none;}
        a:link,a:visited{color:#444;text-decoration:none;}
        a:hover{color:red;}
        body{font-size:12px;background-color:#ccc;}
        .blue{color:blue;}
        .clear{clear:both;}
        .floatL{float:left;}
        .floatR{float:right;}
        .red{color:red;}
        .bold{font-weight:bold;}
        /*标题模块*/
        .box{
            margin:30px auto;
            width:630px;
            background-color:#fff;
        }
        .box .title{
            width:610px;
            height:34px;
            background:url("images/bg01.gif") no-repeat;
            line-height:34px;
            font-size:18px;
            padding-left:20px;
        }
        .box .title .span1{float:left;}
        .box .title .span2{float:right;padding-right:10px;}
        /*内容模块*/
        .box .content{
            width:300px;
            padding-top:10px;
            padding-left:10px;
        }
        .box .content img{float:left;}
        .box .content p{
            float:right;
            width:180px;
            background:url("images/li06.gif") no-repeat 0px 3px;
            padding-right:8px;
            text-indent:15px;
            height:20px;
            line-height:20px;
        }
        .box .content ul{background:url("images/li07.gif") no-repeat 0px 6px;padding-left:20px;}
        .box .content li{height:29px;line-height:29px;}
    </style>
    <script type="text/javascript"></script>
</head>
<body>
<div class="box">
    <div class="title">
        <span class="span1"><span class="blue">学生</span>感言</span>
        <span class="span2"><a href="#">+More</a></span>
    </div>
    <div class="content floatL">
        <img src="images/img08.jpg" />
        <p><a href="#">[php学员]钟玲玉:传智,我人生中重要的一站</a></p>
        <div class="clear"></div>
        <ul>
            <li><a href="#"><span class="red">[php学员]</span>杜宏海:同学到其它机构学完..</a></li>
            <li><a href="#"><span class="red">[php学员]</span>杨*斌:一个小学生的奋斗史..</a></li>
            <li><a href="#"><span class="red">[php学员]</span>黄超:传智播客,让我月薪增长到..</a></li>
            <li><a href="#"><span class="red">[php学员]</span>刘传华:传智,我人生中的转折点..</a></li>
        </ul>
    </div>
    <div class="content floatR">
        <img src="images/img09.jpg" />
        <p><a href="#">[php学员]王艳:美女网编,毕业薪水6500</li></p>
        <div class="clear"></div>
        <ul>
            <li><a href="#"><span class="red">[php学员]</span>吴思阳:传智之旅-真正的升华..</a></li>
            <li><a href="#"><span class="red">[php学员]</span>郝建设:短暂时光的改变..</a></li>
            <li><a href="#"><span class="red">[php学员]</span>李玉宝:零基础学员,刚毕业就拿..</a></li>
            <li><a href="#"><span class="red bold">查看更多学员感言</span></a></li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

效果图:

技术分享

刚开始排版没什么经验,看来还是要多去联系,排的多了就知道怎么做最方便了,要争当一个老司机...

 

辅导自习(一)


联系
我们