首页 > 代码库 > css(一)

css(一)

2024-08-24 09:48:28   221人阅读

按照自己的设计做了传智首页的一部分,虽然网页调的好像差不多了,但是还是感觉结构有点混乱,全局统筹意思有点欠缺,第一是一些切图不知道对应的是哪一部分,第二我觉得也与老师给的作业里面只有半张网页有关系,哈哈哈...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>传智首页</title>
        <style type="text/css">
            /*全局css设置*/
            body,p,ul,li,h1{margin:0px;padding:0px;}
            ul,li{list-style:none;}
            body{background-color:#F1F1F1;font-size:12px;font-family:Arial,宋体;color: #444;}
            a:link,a:visited{color:#444;text-decoration:none;}
            a:hover{color:red;}
            .clear{clear:both;}
            /*top模块*/
            .top{
                width:958px;
                margin:0px auto;
                height:20px;
                line-height:20px;
                background-color:#DCDADB;
            }
            .top p{float:left;color:#1A8DC6;}
            .top li{float:right;padding-left:4px;}
            .top .red a:link,.top .red a:visited{color:red;}
            .top .blue a:link,.top .blue a:visited{color:blue;}
            .top .blue a:hover{color:red;}
            /*logo模块*/
            .logo{
                margin:0px auto;
                width:958px;
                height:102px;
                background:url("images/bg-logo.jpg") no-repeat;
                position:relative;
            }
            .logo .left{
                width:202px;
                height:76px;
                background: url("images/logo.gif") no-repeat;
                position: absolute;
                top:14px;
            }
            .logo .middle{
                position: absolute;
                width:390px;
                top:10px;
                left:250px;
            }
            .logo .middle h1{
                color:dodgerblue;
                float:left;
                width: 390px;
                padding-left:4px;
                padding-bottom: 4px;
            }
            .logo .middle li{
                background:url("images/li01.png") no-repeat;
                width:78px;
                height:20px;
                float:left;
                line-height:20px;
                text-indent:10px;
                margin:2px 50px 2px 0px;
            }
            .logo .right{
                background: url("images/topword.gif") no-repeat;
                width:358px;
                height:90px;
                position: absolute;
                right: 0px;
                top:6px;
            }
            .white:link,.white:visited{color:#fff;}
            .white:hover{color:red;}
            /*导航栏*/
            .index{
                width:958px;
                height:48px;
                margin:0px auto;
                background-color:#1A8DC6;
            }
            .index ul{
                padding-left:10px;
            }
            .index li{
                height: 19px;
                float: left;
                line-height:19px;
                font-size:14px;
                padding:14px 8px;
            }
            .index .bg{
                background: url("images/menu1.gif") no-repeat;
                width:75px;
                text-indent:21px;
                font-weight:bold;
            }
            /*分享,学院模块*/
            .box1{
                width:958px;
                margin:0px auto;
                height:35px;
                line-height:35px;
            }
            .box1 .share{
                float:left;
                padding-left:20px;
                width:455px;
                height:35px;
                }
            .box1 .colleges{float:right;padding-right:20px;}
            .box1 .colleges li{
                float:right;
                background:url(images/li02.jpg) no-repeat 0px 13px;
                text-indent:8px;
                margin:0px 3px;
            }
            .box1 .colleges .big{font-size:14px;font-weight:bold;}
            /*内容模块*/
            .content{
                width:958px;
                margin:0px auto;                
            }
            /*开学模块*/
            .content .box2{
                width:650px;
                background-color:#fff;
                float:left;
            }
            .content .box2 .kaixue{
                font-size:14px;
                border-bottom:1px dashed #ccc;
                float:left;
                padding-top:10px;
            }            
            .content .box2 .kaixue .blue{
                color:deepskyblue;
                font-size:24px;
                padding:0px 20px 0px 13px;
                font-weight:bold;
                }
                /*图片轮播模块*/
            .content .box2 .lunbo{
                padding-top:20px;
                float:left;
            }
                /*学员视频模块*/
            .content .box2 .xueyuan img{width:142px;height:88px;}
            .content .box2 .xueyuan ul{
                padding-top:20px; 
                float:left;width:320px;
                margin-left:20px;
                }
            .content .box2 .xueyuan li{
                float:left;
                padding-bottom:22px;
                padding-left:16px;
            }
            .content .box2 .xueyuan p{text-indent:10px;}
            /*开班信息模块*/
            .content .box3{
                background-color:#F8F8F8;
                width:295px;
                float:right;
            }
            .content .box3 .title{
                font-size:20px;
                background:url(images/righttitle.gif) no-repeat;
                height:35px;
                line-height:35px;
                padding-left:40px;
                color:#fff;
            }
            .content .box3 li{
                border-bottom:1px dashed #ccc;
                padding:5px 10px;
            }
            .content .box3 .kaiban .red{
                color:red;
                font-weight:bold;
                float:right;
            }
            .content .box3 .kaiban .blue{
                color:blue;
                font-weight:bold;
                float:right;
            }
            .content .box3 h4{padding-left:10px;}
        </style>
    </head>
    <body>
        <div class="top">
            <p>专业的Java,.net,PHP,C/C++,网页设计,平面设计,UI设计,ios培训机构</p>
            <ul>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">招贤纳士</a> |</li>
                <li><span class="red"><a href="#">传智特刊</a></span> |</li>
                <li><span class="blue"><a href="#">校园生活</a></span> |</li>
                <li><span class="blue"><a href="#">免费公开课</a></span> |</li>
                <li><a href="#">网站首页</a> |</li>
            </ul>
        </div>
        <div class="logo">
            <div class="left"></div>
            <div class="middle">
                <h1>PHP学员</h1>
                <ul>
                    <li><a href="#" class="white">北京校区</a></li>
                    <li><a href="#" class="white">上海校区</a></li>
                    <li><a href="#" class="white">广州校区</a></li>
                    <li><a href="#" class="white">武汉校区</a></li>
                    <li><a href="#" class="white">成都校区</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="right"></div>
        </div>
        <div class="index">
            <ul>
                <li class="bg"><a href="#" class="white">首页</a></li>
                <li><a href="#" class="white">PHP培训课程</a></li>
                <li><a href="#" class="white">PHP视频下载</a></li>
                <li><a href="#" class="white">人才服务</a></li>
                <li><a href="#" class="white">校园生活</a></li>
                <li><a href="#" class="white">师资力量</a></li>
                <li><a href="#" class="white">就业信息</a></li>
                <li><a href="#" class="white">报名流程</a></li>
                <li><a href="#" class="white">原创教材</a></li>
                <li><a href="#" class="white">常见问题</a></li>
                <li><a href="#" class="white">来校路线</a></li>
                <li><a href="#" class="white">技术论坛</a></li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="box1">
            <div class="share">
                <img src="images/share.jpg" usemap="#Map" />
                <map name="Map">
                    <area shape="rect" coords="332,5,402,31" href="#">
                    <area shape="rect" coords="262,5,332,31" href="#">
                    <area shape="rect" coords="192,5,262,31" href="#">
                    <area shape="rect" coords="133,5,192,31" href="#">
                      <area shape="rect" coords="74,5,133,31" href="#">
                </map>
            </div>
            <div class="colleges">
                <ul>
                    <li><a href="#">网页平面设计学院</a></li>
                    <li><a href="#">c/c++学院</a></li>
                    <li><a href="#">ios学院</a></li>
                    <li><a href="#">.net学院</a></li>
                    <li><a href="#">php学院</a></li>
                    <li><span class="big">其它学院入口:</span></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="content">
            <div class="box2">
                <div class="kaixue">
                    <p><span class="blue">我们开学了</span>今天我终于来到了心中向往已久的神圣学府--传智播客,开始了改变命运的征途<img src="images/jiantou.jpg"></p>
                </div>    
                <div class="lunbo">
                    <img src="images/ppt1.jpg" />
                </div>
                <div class="xueyuan">
                    <ul overflow="hidden">
                        <li><a href="#"><img src="images/img04.jpg" /></a><p><a href="#">曹伟-玩酷我的程序人生</a></p></li>
                        <li><a href="#"><img src="images/img02.jpg" /></a><p><a href="#">张巍专题-我为创业狂</a></p></li>
                        <li><a href="#"><img src="images/img03.jpg" /></a><p><a href="#">小林催人泪下经历</a></p></li>
                        <li><a href="#"><img src="images/img01.jpg" /></a><p><a href="#">陈建利专题-我有我原则</a></p></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <div class="box3">
                <div class="title">
                    PHP培训开班信息
                </div>
                <div class="kaiban">
                    <h4>PHP基础班</h4>
                    <ul>
                        <li><a href="#">北京--10月12号</a><span class="blue">爆满已开班</span></li>
                        <li><a href="#">北京--11月12号</a><span class="red">预约报名</span></li>
                    </ul>
                    <h4>PHP就业班</h4>
                    <ul>
                        <li><a href="#">北京--10月16号</a><span class="blue">爆满已开班</span></li>
                        <li><a href="#">北京--11月16号</a><span class="red">预约报名</span></li>
                    </ul>
                    <h4>PHP远程班</h4>
                    <ul>
                        <li><a href="#">北京--10月12号</a><span class="red">预约报名</span></li>
                        <li><a href="#">北京--11月12号</a><span class="red">预约报名</span></li>
                    </ul>
                </div>                
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>

效果图:

技术分享

css(一)


联系
我们