首页 > 代码库 > 今天晚上做的一点传智播客首页---做了一点点(回宿舍想做完头部再传,断电到现在!!!)

今天晚上做的一点传智播客首页---做了一点点(回宿舍想做完头部再传,断电到现在!!!)

2024-08-24 15:20:18   210人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传智官网</title>
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/index.css">
</head>
<body>
    <!--box开始-->
    <div class="box">
        <!--header开始-->
        <div class="header">
            <div class="top">
                专业的Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训机构
                <span class="floatR">
                    <a href="http://www.mamicode.com/#">网站首页</a>
                    <a href="http://www.mamicode.com/#">免费公开课</a>
                    <a href="http://www.mamicode.com/#">校园生活</a>
                    <a href="http://www.mamicode.com/#">传智特刊</a>
                    <a href="http://www.mamicode.com/#">人才服务</a>
                    <a href="http://www.mamicode.com/#">人才服务</a>
                    <a href="http://www.mamicode.com/#">人才服务</a>
                </span>
            </div>
        </div>
        <!--//header结束-->
        <!--left开始-->
        <div class="left floatL"></div>
        <!--//left结束-->
        <!--right开始-->
        <div class="right floatR"></div>
        <!--//right结束-->
        <div class="clear"></div>
    </div>
    <!--//box结束-->
    <!--footer开始-->
    <div class="footer"></div>
    <!--//footer结束-->
</body>
</html>
/*这里面写的是传智官网CSS*/
/*第一件事件将HTML中的一些有默认的内填充与外边距的标签清除*/
body,ul,li,p,img,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
/*给body标签设置样式*/
body{
    color: #444;
    font-size: 12px; /*字体大小为12*/
    background:#f1f1f1 url(../images/bg-body.gif) repeat-x;
}
.box{
    width: 973px;
    margin: 0 auto;
    border:1px solid #f00;
    
}
.header{
    height: 196px;
    border:1px solid #00f;
}
.header .top{
    color:#018CD3;
    height:27px;
    line-height:27px;
}
.header .top .floatR a{
    border-right:1px dotted #444444;
}
.left{
    width: 660px;
    height: 500px;
    background-color: #ccc;
}
.right{
    width: 295px;
    height: 500px;
    background-color: skyblue;
}


.footer{
    width: 100%;
    height: 200px;
    background-color: #000;
}



/*全局的样式*/
.floatL{
    float: left; /*专用于实现左浮动*/
}
.floatR{
    float: right; /*专用于实现右浮动*/
}
.clear{
    clear: both;
}
/*使用伪类选择器对超级链接进行美化*/
a:link,a:visited{text-decoration: none;color: #444;}
a:hover{color: #f00;}
ul{list-style: none;}

技术分享

今天晚上做的一点传智播客首页---做了一点点(回宿舍想做完头部再传,断电到现在!!!)


联系
我们