Practical Training Demo1-底部页脚（10.28）

2024-02-04 19:59:10

哇塞塞，不知这样写的形式可不可用，但是写出来了呢；哈哈哈，还挺开心的，虽然有待提高，但鼓励鼓励自己趴。留个纪念。哈哈哈...得瑟小张

HTML内容部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/foot.css"/>
    </head>
    <body>
        <!-- div.foot>ul>li>a[href=#]{关于我们}*5 -->
        <div class="foot">
            <div class="foot1">
                <ul>
                    <li>
                        <a href="#">关于我们</a>
                        <a href="#">人才招聘</a>
                        <a href="#">联系我们</a>
                        <a href="#">友情链接</a>
                        <a href="#">版权声明</a>
                        <a href="#">客服中心</a>
                    </li>
                </ul>
            </div>
            <!-- div.foot2>ul>li>span*3 -->
            <div class="foot2">
                <ul>
                    <li>
                        <img src="img/culture.png" >
                        <span>Copyright © 2009-2016 yinyuetai.com 广播电视节目制作经营 许可证编号（京）字第1891号 </span>
                        <span>京网文[2014]2037-287号</span>
                        <span class="color">网络视听许可证0110413号</span>
                        
                    </li>
                </ul>
            </div>
            <div class="foot3">
                <ul>
                    <li>
                        <!-- <img src="" alt=""> -->
                            <span>京公网安备1101052014900号</span>
                            <span>京ICP备11024134号-1</span>
                            <span>京ICP证060716号</span>
                            <span>出版物经营许可证 新出发京零字第朝130062号</span>
                            <span class="ss2">增值电信业务经营许可证B2-20140501</span>
                            <img class="img" src="img/biaoshi.gif" >
                        </li>
                </ul>
            </div>
            <div class="foot4">
                <ul>
                    <li>食品经营许可s证:JY111050485336</li>
                    <li>营业执照</li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS内容部分：

*{
    margin: 0px;
    padding: 0px;
}
.foot{
    width: 1300px;
    text-align: center;
    background-color: #111;
    /* background-color: #DE4767; */
    height: 200px;
}
.foot ul li{
    display: inline-block;
}
.foot .foot1{
    /* padding-right: 10px; */
}
.foot .foot1 ul li{
    margin-top: 40px;
    text-align: center;
    /* margin: 10px 30px; */
}
.foot .foot1 a{
    text-decoration: none;
    color: #666666;
    border-right: 2px dotted #FFFFFF;
    padding-right: 20px;
    margin-left: 10px;
    font-size: 14px;
}
/* 最后一个隐去 */
.foot .foot1 a:last-child{
    border-right: none;
}
/* 第二部分 */
.foot .foot2{
    margin-top: 40px;
}
.foot .foot2{
    vertical-align: baseline;
}
.foot .foot2 img{
    width: 25px;
    height: 25px;
    margin-right: -5px;
    margin-bottom: -5px;
}
.foot .foot2 span{
    color: #CCCCCC;
    font-size: 12px;
    border-right: 1px solid #CCCCCC;
    padding-right: 5px;
    margin-left: 5px;
    /* margin-bottom: -10px; */
}
.foot .foot2 .color{
    border-right: none;
    color: lightseagreen;
}

.foot .foot3 li{
    margin-top: -40px;
    margin-left: 20px;
    
}
.foot .foot3 span{
    color: #CCCCCC;
    font-size: 12px;
    border-right: 1px solid #CCCCCC;
    padding-right: 5px;
    /* margin-left: 5px; */
}
.foot .foot3 span:last-child{
    border-right: none;
}
.foot .foot3 .img{
    width: 40px;
    height: 45px;
    margin-left: -10px;
}
.foot .foot3 .ss2{
    border-right: none;
}
.foot .foot4 li{
    color: #CCCCCC;
    font-size: 12px;
    border-right: 1px solid #CCCCCC;
    padding-right: 5px;
    margin-left: 5px;
}
.foot .foot4 li:last-child{
    border-right: none;
}

码农公寓

相关文章