7、网页

网页制作:

代码:Index

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="Css.css" />
</head>
<body>
    <div class="divIndex">
        <!--Logo-->
        <div class="divLogo">
            <img class="myLogo" src="images/myLogo.png" />
            <div class="divTable1">
            <table >
                <tr>
                    <td><img src="images/qq_login.gif" /></td>
                    <td>账号:<input type="text" /></td>
                    <td><input type="checkbox" />自动登录</td>
                    <td>找回密码</td>
                </tr>
                <tr>
                    <td>只需一步,快速开始</td>
                    <td>密码:<input type="password" /></td>
                    <td><input type="submit" value="登录" /></td>
                    <td>立即注册</td>
                </tr>
            </table>
                </div>
        </div>

        <!--导航-->
        <div class="divNav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
            </ul>
        </div>

        <!--搜索-->
        <div class="divSearch">
         
        </div>

        <!--新年新气象-->
        <div class="divNewYear">
            <img src="news/news.gif" width="800px" height="100px" />
        </div>


        <!--网页内容-->
        <div class="divContent">
            <div class="divContent1"></div>
            <div class="divContent2"></div>
            <div class="divContent3"></div>
            <div class="divContent4"></div>
            <div class="divContent5"></div>
            <div class="divContent6"></div>
            <div class="divContent7"></div>
            <div class="divContent8"></div>

        </div>

        <div class="divPic1">
            <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="divPic2">
            <p>本站支持以下浏览器</p>
        </div>
        <div class="divPic3">
            <table>
                <tr>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                </tr>
                  <tr>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                    <td><img src="news/chrome.jpg" /></td>
                </tr>
            </table>
        </div>
        <div class="divPic4">
            <p>友情链接</p>
        </div>
        <div class="divPic5">
            <table>
                <tr>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                </tr>
                    <tr>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                </tr>
                    <tr>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                    <td><a href="#">百度</a></td>
                </tr>
            </table>
        </div>
        <div class="divPic6">
            <table>
                <tr>
                    <td><a href="#">关于我们</a></td>
                    <td><a href="#">关于我们</a></td>
                    <td><a href="#">关于我们</a></td>
                    <td><a href="#">关于我们</a></td>
                </tr>
                <tr>
                    <td><a href="#">关于我们</a></td>
                    <td><a href="#">关于我们</a></td>
                    <td><a href="#">关于我们</a></td>
                    <td><a href="#">关于我们</a></td>
                </tr>
            </table>
            <img src="news/mail.png" />
        </div>
    </div>
</body>
</html>

代码:css

div.divPic5 table {
    padding-top:5px;
    padding-left:5px;
}
div.divPic5 table td {
    padding-right:35px;
}


div.divPic4 p {
    font-size:15px;
    font-weight:bolder;
    padding-top:8px;
   
}
div.divPic4 {
    background-color:#cccccc;
}

div.divPic3 img
{
    padding-right:10px;
}
div.divPic3 table {
    padding-top:20px;
}

div.divPic6 table {
    margin:0px auto;
    padding-top:15px;
}
div.divPic6 img {
   padding-left:320px;
}

div.divPic2 p {
    font-weight:bolder;
    font-size:15px;
    padding-top:10px;

 

7、网页

上一篇:【linux】复制文件夹中文件,排除部分文件


下一篇:直接可用的loading.js