Practical Training Demo1-底部頁尾（10.28）

阿新 • • 發佈：2021-10-28

哇塞塞，不知這樣寫的形式可不可用，但是寫出來了呢；哈哈哈，還挺開心的，雖然有待提高，但鼓勵鼓勵自己趴。留個紀念。哈哈哈...得瑟小張

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;
}