前端學習-案例：制作一個超簡單的靜態頁面

本文轉載自查看原文 2019-09-19 09:46 3980 HTML/CSS/JS/ 我的隨筆--測試案例/ 又臭又長的代碼筆記

前端學習-案例：制作一個超簡單的靜態頁面

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    
    
    <body>
        
        
        <!-- 網頁的上部分 -->
        <div id="header">
            <div id="header-img">
                <img src="img/top_logo.jpg"/>
            </div>
            <div id="header-font">
                <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>
                    <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>
        
        
        
        <!-- 網頁的中間部分 -->
        <div id="content">
            
                <div id="content-top">
                      <div id="content-top-1">
                            <img src="img/比賽.jpg" />
                      </div>
                      <div id="content-top-2">
                            <img src="img/事件1.jpg" />
                      </div>
                      <div id="content-top-3">
                            <div>
                                  <img src="img/1.jpg" align="center"/>
                                    托尼—帕克親筆:再次感謝你,聖安東尼奧
                            </div>
                            <div>
                                  <img src="img/2.jpg" align="center"/>
                                  8.7社交媒體動態 路威中國行認證"大腿"
                            </div>
                            <div>
                                  <img src="img/3.jpg" align="center"/>
                                    德拉蒙德的成長之路: 射程遠近與球場內外
                            </div>
                            <div>
                                  <img src="img/4.jpg" align="center"/>
                                    觀察: 熱火隊中 即將37歲的韋德仍然不可或缺？
                            </div>
                            <div class="clear"></div>
                      </div>
                      <div id="content-top-4">
                            <img src="img/要聞.jpg" />
                                  <ul>
                                      <li>傑拉德-格林:火箭會像接受我一樣擁抱甜瓜</li>
                                      <li>熱火無意交易理查德森 對其上限抱很大希望</li>
                                      <li>諾天王: 下賽季或仍不是終點 要視情況而定</li>
                                      <li>大洛談新賽季: 我們雄鹿會在東部脫穎而出</li>
                                      <li>布朗: 我們新賽季能進總決賽 這點毫無疑問</li>
                                      <li>格林: 我們幾乎不可阻擋 無需擔心任何對手</li>
                                      <li>倫納德自始至終未發聲 格林:這樣有利有弊</li>
                                      <li>猛龍年輕球員獲納什指導 格林:他很好相處</li>
                                      <li>ESPN預測新賽季MVP: 詹皇舉首 哈登第四</li>
                                      <li>沃爾:很多人說我不是前五的后衛 這是動力</li>
                                  </ul>
                                
                      </div>
                      <div class="clear"></div>
                </div>
                
                
                
                
                <div id="content-botton">
                    <div id="content-botton-1">
                        <div id="botton-1-logo">
                            <div id="logo-leff">
                                <img src="img/NEW_logo.jpg" />
                                <span >最新資訊</span>
                            </div>
                            <div id="logo-right">
                                添加主隊
                                <img src="img/添加符號.jpg">
                            </div>
                            <div class="clear"></div>    
                        </div>
                        <div id="botton-1-center">
                            換一換<img src="img/換一換.jpg" />
                        </div>
                        <div id="botton-1-pic">
                             <div class="tp01"><img src="img/Message01.jpg"/></div>
                             <div class="tp01"><img src="img/Message02.jpg"/></div>
                             <div class="tp02">
                                 <img class="tpclazz" src="img/Message03.jpg"/>
                                NBA中國 : CEO攜手球星肯巴-沃克到訪 NBA樂園<br>
                                <img src="img/小圖標.jpg" />
                                2018-08-14 10:16
                             </div>
                             <div class="tp02">
                                 <img class="tpclazz" src="img/Message04.jpg"/>
                                 被解雇后無人問津 大范甘迪:我現在非常迷失了<br>
                                 <img src="img/小圖標.jpg" />
                                2018-08-14 10:16
                             </div>
                             <div class="tp02">
                                 <img class="tpclazz" src="img/Message05.jpg"/>
                                 少帥談下賽季首發安排 每個人都能得到不同的安排<br>
                                 <img src="img/小圖標.jpg" />
                                2018-08-14 10:16
                             </div>
                        </div>
                    </div>
                    
                    <div id="content-botton-2">
                        <img src="img/排名.jpg" />
                    </div>
                </div>
            
        </div>
        
        
        
        <!-- 網頁的下部分 -->
        <div id="footer">
            
            <div id="f1">
                <table>
                    <tr height="30%" class="btfont">
                        <td width="17%">關於</td>
                        <td width="17%">NBA賽事</td>
                        <td width="17%">專題</td>
                        <td width="17%">NBA101</td>
                        <td width="17%">騰訊體育</td>
                        <td width="17%">NBA官方應用</td>
                    </tr>
                    
                    
                    <tr class="wzfont">
                        <td>NBA store</td>
                        <td>選秀大會</td>
                        <td>休賽期轉會</td>
                        <td>NBA歷史</td>
                        <td rowspan="4">
                            <img src="img/騰訊體育.jpg" />
                        </td>
                        <td rowspan="4">
                            <img src="img/騰訊官方應用.jpg" />
                        </td>
                    </tr>
                    
                    
                    <tr class="wzfont">
                        <td>NBA就職機會</td>
                        <td>JR.NBA高中聯賽</td>
                        <td>聯盟的驕傲</td>
                        <td>NBA50大巨星</td>
                    </tr>
                    
                    
                    <tr class="wzfont">
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>新春賀歲</td>
                        <td>NBA知識O&amp;A</td>
                    </tr>
                    
                    
                    <tr class="wzfont">
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>扣響盛夏</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>
            
            <div id="f2">
©2018年著作權 NBA 中國所有權。<br>
NBA.com/China上除去使用條款中所特別提及的部分之外，其它任何內容都不得以任何形式被復制、再傳播，或篡改。<br>
進入NBA.com/China后，即表示閣下同意遵守NBA.com/China的隱私政策和使用條款。<br>
有任何的建議和意見，都歡迎聯絡我們：NBAChinaInfo@nba.com<br>
有關NBA商品授權合作事宜，敬請聯系:GMGChinaBusinessInquiry@nba.com<br>
            </div>
        </div>
                    
    </body>
    
</html>

View Code

CSS部分

body{
    width: 100%;
    height: 2100px;
    background-color: #DCDCDC;
    padding: 0px;
    margin: 0px;
}


/*上面部分~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#header{
    height: 150px;
    width: 100%;
    background-color: #006BB7;
}

#header-img{
    height: 60%;
    width: 70%;
    margin: auto;
}
#header-img img{
    height: 100%;
    width: 100%;
}

#header-font{
    height: 28%;
    width: 70%;
    margin: auto;
}
#header-font ul{
    margin-left: -30px;
    margin-top: 20px;
}


#header-font ul li{
    font-size: 20px;
    list-style-type: none;
    display: inline;
    margin-right: 50px;
}

#header-font a{
    color: white;
}

#header-font a:link{
    text-decoration: none;
}
/*上面部分end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*中間部分~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#content{
    height: 1350px;
    width: 70%;
    margin: auto;
    background-color: white;
}

#content-top{
    margin: auto;
    height: 550px;
    width: 98%;
}

#content-top-1{
    height: 170px;
    width: 100%;
    padding-top: 10px;
}

#content-top-1 img{
    width: 100%;
    height: 100%;
}


#content-top-2{
    height: 350px;
    width: 40%;
    float: left;
    padding-top: 30px;
}


#content-top-3{
    padding-top: 30px;
    height: 350px;
    width: 30%;
    float: left;
    font-size: 13px;
}

#content-top-3 div{
    margin-bottom: 20px;
}


#content-top-4{
    padding-top: 30px;
    height: 350px;
    width: 30%;
    float: left;
}

#content-top-4 img{
    width: 100%;
    height: 30px;
}

#content-top-4 ul{
    margin-left: -30px;
}

#content-top-4 li{
    list-style-type: none;
    margin-bottom: 7px;
}

#content-botton{
    height: 800px;
    width: 100%;
}

#content-botton-1{
    height: 100%;
    width: 70%;
    float: left;
}

#content-botton-1 #botton-1-logo{
    height: 50px;
    width: 100%;
    background-color: white;
    border-bottom: 2px solid whitesmoke;
    margin-left: 30px;
}

#content-botton-1 #botton-1-logo span{
    font-size: 40px;
    color: #2464B5;
}


#content-botton-1 #botton-1-logo #logo-leff{
    width: 30%;
    height: 100%;
    float: left;
    border-bottom: 6px solid red;
}

#content-botton-1 #botton-1-logo #logo-right{
    width: 60%;
    height: 100%;
    float: left;
    text-align: right;
}


#content-botton-1  #botton-1-center{
    width: 90%;
    height: 20px;
    text-align: right;
}


#content-botton-1  #botton-1-pic{
    width: 100%;
    height: 720px;
}


#content-botton-1  #botton-1-pic .tp01{
    width: 46%;
    height: 46%;
    background-color: deepskyblue;
    float: left;
    margin-left: 20px;
}

#content-botton-1  #botton-1-pic .tp01 img{
    width: 100%;
    height: 100%;
}


#content-botton-1  #botton-1-pic .tp02{
    width: 30%;
    height: 30%;
    float: left;
    margin-left: 20px;
    margin-top: 30px;
}

#content-botton-1  #botton-1-pic .tpclazz{
    width: 100%;
    height: 80%;
}


#content-botton-2{
    text-align: right;
    height: 100%;
    width: 25%;
    float: left;
}


#content-botton-2 img{
    height: 90%;
    width: 90%;
}


/*中間部分end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer{
    height: 600px;
    width: 100%;
    background-color: black;
}

#footer #f1{
    width: 100%;
    height: 250px;
    background-color: #022E4F;
}


#footer #f1 table{
    height: 80%;
    width: 80%;
    margin: auto;
}

#footer #f2{
    width: 100%;
    height: 350px;
    background-color: #1F2428;
    text-align: center;
    color: #FFFFFF;
    line-height: 70px;
}

.clear{
    clear: both;
}

.btfont{
    color: #FFFFFF;
    font-size: 35px;
    font-weight: 800;
}

.wzfont{
    color: #FFFFFF;
}

View Code

圖片什么的初學者可以截屏，比如上面的圖片。也可以仿照上面的代碼，自己另外做一個簡單的靜態頁面。。。

案例二

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    
    <body>
        <!-- 網頁上部分 -->
        <div id="header">
             <div id="header-img">
                   <img src="img/log.png" />
             </div>
             <div id="header-font">
                    全國統一電話：<span>4008-770-550</span>
             </div>
             <div class="clear"></div>
        </div>
        
        <!-- 網頁中間部分 -->
        <div id="content">
             <div id="content-nav">
                  <ul>
                      <li><a href="http://www.baidu.com">關於我們</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>
                      <li class="noline"><a href="#">聯系我們</a></li>
                  </ul>
             </div>
             
             
             <div id="content-img">
                   <img src="img/banner.png"/>
             </div>
             
             
             <div id="content-body">
                    <p>最新產品</p>
                    <div class="tpstyle">
                             <img src="img/img1.png" />
                             <p>以舊換新雙旦特大驚喜</p>
                    </div>
                    <div class="tpstyle">
                             <img src="img/img2.png" />
                             <p>以舊換新雙旦特大驚喜</p>
                    </div>
                    <div class="tpstyle">
                             <img src="img/img3.png" />
                             <p>以舊換新雙旦特大驚喜</p>
                    </div>
                    <div class="clear"/>
             </div>         
             
             <div id="content-menu">
                 <ul>
                     <li id='redli'>友情鏈接：</li>
                     <li>中國農業銀行&nbsp;&nbsp;|</li>
                     <li>招商銀行&nbsp;&nbsp;|</li>
                     <li>中國建設銀行&nbsp;&nbsp;|</li>
                     <li>中國郵政&nbsp;&nbsp;|</li>
                     <li>交通銀行&nbsp;&nbsp;|</li>
                     <li>深圳發展銀行&nbsp;&nbsp;|</li>
                     <li>中國工商銀行&nbsp;&nbsp;|</li>
                     <li>廣東發展銀行&nbsp;&nbsp;|</li>
                     <li>銀聯&nbsp;|</li>
                     <li>中國銀行&nbsp;|</li>
                 </ul>
                 
             </div>
             
             
        </div>    
        
        <!-- 網頁下部分 -->
        <div id="footer">
            <p>地址：北京市經濟技術開發區榮京東街3號榮京麗都B座 電話：4008-770-550</p>
            <p>Copyright © 2015 北京雲邦網絡科技有限公司 版權所有 京ICP備 15011040號 技術支持：雲邦建站</p>
        </div>
    </body>
    
</html>

View Code

CSS部分

body{
     width: 100%;
     height: 1000px;
     margin: 0px;
     padding: 0px;
}

#header{
    text-align: right;
    height: 70px;
    width: 100%;
}
#header-img{
    height:100%;
    width: 30%;
    padding-top: 30px;
    float: left;
}

#header-font{
    font-size: 15px;
    height:100%;
    width: 60%;
    float: left;
    padding-top: 30px;
}

#header-font span{
    color: red;
}

#content{
    height: 800px;
    width: 100%;
    margin-top: 30px;
}
#content-nav{
    height: 50px;
    width: 100%;
    background-color: #D81406;
}



#content-nav ul{
    height: 50px;
    width: 70%;
    margin-left: 300px;
    font-size:smaller ;
}

#content-nav ul li{
    list-style-type: none;
    background: url(../img/nav_line.png) no-repeat right 3px;
    float: left;
    height: 40px;
    width: 100px;
    margin-right: 70px;
    padding-top: 10px;
    line-height: 30px;
    
}

#content-nav ul .noline{
    background: none
}

#content-nav ul li a{
    color: white;
    text-decoration: none;
}


#content-nav ul li a:hover{
    text-decoration:underline;
}


#content-img{
    height: 400px;
    width: 1350px;
    margin: auto;
}

#content-body{
    height: 400px;
    width:1050px;
    margin: auto;
    padding: 0px;
    
}

#content-body p{
    color: #666666;
    font-size: 25px;
    text-align:center;
    padding-top:20px ;
}



#content-body .tpstyle{
    width: 320px;
    height: 197px;
    background-color: #A8A8A8;
    float: left;
    margin-right: 20px;
}

#content-body .tpstyle img{
    height: 160px;
    width: 100%;
    display: block;
}
#content-body .tpstyle p{
    height: 40px;
    text-align: left;
    background: url(../img/arr.png) no-repeat right top;
    margin: 0px;
    line-height: 20px;
    padding-top: 10px;
    color: white;
    font-size: 10px;
}


#content-menu{
    height: 100px;
    width: 100%;
    position: relative;
    right: 30px;
}


#content-menu li{
    list-style-type: none;
    float: left;
    margin-right: 10px;
    font-size: small;
}

#content-menu #redli{
    color: red;
}


#footer{
    height: 100px;
    width: 100%;
    background-color: #393631;
    text-align: center;
    margin-top:-100px ;
    color: white;
}
#footer p{
    padding-top:15px ;
}

/*類標簽~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.clear{
    clear: both;
}

View Code

圖片什么的初學者可以截屏，比如上面的圖片。也可以仿照上面的代碼，自己另外做一個簡單的靜態頁面。。。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS樣式案例(2)-制作一個簡單的登錄界面 winform制作一個簡單的聊天小程序（剛剛學習到），分享給大家一個簡單的Webservice的demo(中)_前端頁面調用用github來展示你的前端靜態頁面前端知識 | 一個簡單的登錄頁面包含多少前端基礎知識？關於Graphics/Graphics2D以及簡單的幾何圖像制作（一個簡單鍾表的實現）超簡單實用的前端分頁---jquery插件一個簡單的java jdbc案例 Servlet以及一個簡單的登錄案例一個簡單的Ajax請求案例