zoukankan      html  css  js  c++  java
  • 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;
  • 相关阅读:
    字典
    字符串常用的方法
    切片,集合、文件处理
    蓝桥杯练习 Day6 题解
    spoj-ORDERS
    spoj-SUBSUMS
    spoj
    spoj --- ABCDEF
    C. Andryusha and Colored Balloons
    B. The Meeting Place Cannot Be Changed
  • 原文地址:https://www.cnblogs.com/wangqiangya/p/13125587.html
Copyright © 2011-2022 走看看