仿百度圖片首頁--HTML+CSS練手項目1【Table】

時間 2019-12-08

標籤百度圖片首頁 html+css html css 項目 Table 欄目 CSS 简体版

原文原文鏈接

【本文爲原創，轉載請註明出處】css

技術【CSS+HTML】佈局【Table】html

圖片準備【百度圖標、10張不一樣類型圖】前端

------------------------------------------------------------------------------------------------------------瀏覽器

步驟1 table 佈局ide

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>仿百度網頁</title>
 6 </head>
 7 <body>
 8 <table">
 9     <tr>
10         <td></td>
11         <td></td>
12         <td></td>
13         <td></td>
14         <td></td>
15         <td></td>
16         <td></td>
17         <td></td>
18         <td></td>
19     </tr>
20     <tr>
21         <td colspan="9"></td>
22     </tr>    
23     <tr>
24         <td colspan="9">
25             <input type="text"/><button></button>
26         </td>
27     </tr>
28     <tr>
29         <td colspan="9">
30             <table >
31                 <tr>
32                     <td></td>
33                     <td></td>
34                     <td></td>
35                     <td></td>
36                     <td></td>
37                 </tr>
38                 <tr>
39                     <td></td>
40                     <td></td>
41                     <td></td>
42                     <td></td>
43                     <td></td>
44                 </tr>
45             </table>
46         </td>
47 
48     </tr>
49     <tr>
50         <td colspan="9">
51         </td>
52     </tr>
53 </table>
54 </body>
55 </html>

table佈局

步驟2 填充HTML內容佈局

html要求：跨行合併學習

table嵌套table字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿百度網頁</title>
</head>
<body>
<table>
    <tr>
        <td><a href="#">收藏本頁</a></td>
        <td><span>|</span></td>
        <td><a href="#">百度首頁</a></td>
        <td><span>|</span></td>
        <td><a href="#">百度圖片APP</a></td>
        <td><span>|</span></td>
        <td><a href="#">登陸</a></td>
        <td><span>&nbsp;</span></td>
        <td><a href="#">註冊</a></td>
    </tr>
    <tr>
        <td colspan="9"><img src="img/logo.png"/></td>
    </tr>    
    <tr>
        <td colspan="9">
            <input type="text"/><button>百度一下</button>
        </td>
    </tr>
    <tr>
        <td colspan="9">
            <table>
                <tr>
                    <td><a href="#"><img src="img/img01.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img02.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img03.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img04.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img05.jpeg" /></a></td>
                </tr>
                <tr>
                    <td><a href="#"><img src="img/img06.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img07.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img08.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img09.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img10.jpeg" /></a></td>
                </tr>
            </table>
        </td>

    </tr>
    <tr>
        <td colspan="9">
            <span>&copy;2016 Baidu</span>
            <a href="#">使用百度前必讀</a>
            <span>|</span>
            <a href="#">高級搜索</a>
            <span>|</span>
            <a href="3">幫助</a>
        </td>
    </tr>
</table>
</body>
</html>

完善網頁

步驟3 CSS樣式【大小、位置、顏色、圖片】url

css要求：導航欄浮右，字體顏色大小，內外邊距spa

百度圖標大小，位置居中，內外邊距

輸入框和按鈕顏色、長度和寬度，字體顏色，內外邊距

照片模塊的位置、半透明背景、圖片大小，內外邊距

底部導航欄位置居中，居於底部【不足之處，瀏覽器窗口大小改變任一直位於底部】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿百度網頁</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<table class="table-one">
    <tr class="nav">
        <td><a href="#">收藏本頁</a></td>
        <td><span>|</span></td>
        <td><a href="#">百度首頁</a></td>
        <td><span>|</span></td>
        <td><a href="#">百度圖片APP</a></td>
        <td><span>|</span></td>
        <td><a href="#">登陸</a></td>
        <td><span>&nbsp;</span></td>
        <td><a href="#">註冊</a></td>
    </tr>
    <tr class="logo">
        <td colspan="9"><img src="img/logo.png"/></td>
    </tr>    
    <tr class="search">
        <td colspan="9">
            <input type="text"/><button>百度一下</button>
        </td>
    </tr>
    <tr class="picture">
        <td colspan="9">
            <table class="table-two">
                <tr>
                    <td><a href="#"><img src="img/img01.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img02.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img03.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img04.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img05.jpeg" /></a></td>
                </tr>
                <tr>
                    <td><a href="#"><img src="img/img06.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img07.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img08.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img09.jpeg" /></a></td>
                    <td><a href="#"><img src="img/img10.jpeg" /></a></td>
                </tr>
            </table>
        </td>

    </tr>
    <tr class="foot">
        <td colspan="9">
            <span>&copy;2016 Baidu</span>
            <a href="#">使用百度前必讀</a>
            <span>|</span>
            <a href="#">高級搜索</a>
            <span>|</span>
            <a href="#">幫助</a>
        </td>
    </tr>
</table>
</body>
</html>

完整的index.html

*{
    /* 消除瀏覽器的影響*/
    margin: 0px;
    padding: 0px;
}
body{
    background: url("../img/background.jpg");
    /*設置背景圖片大小 background-size: 100%;*/
    background-size: 100%;
}
a{
    text-decoration: none;
}
table{
    width: 100%;
    height: 100%;
}
/*頂部導航*/
.nav{
    float:right;
}
.nav td{
    float: left;
    padding: 5px 2px 5px 0px;
}
.nav a{
    font-size: 11px;
    color: #FFFFFF;
}
.nav span{
    font-size: 11px;
    color: #FFFFFF;
}
/*網頁logo*/
.logo td{
    text-align: center;
}
.logo img{
    width: 250px;
    margin: 50px 0px 10px 0px ;
}
/*搜索框*/
.search td{
    text-align: center;
    padding: 0px 0px 40px 0px;
}
.search input{
    width: 450px;
    width: 450px;
    height: 33px;
    /*input和button對不齊 input和button都加上vertical-align:top；*/
    vertical-align: top;
}
.search button{
    width: 90px;
    height: 37px;
    font-size: 13px;
    color: #FFFFFF;
    background-color: #38f;
    /*input和button對不齊 input和button都加上vertical-align:top；*/
    vertical-align: top;
    border: #38f;;
}
/*圖片*/
.table-two{
    width: 674px;
    height: 272px;
    margin: 0 auto;
    /*半透明背景色  background-color:rgba(255,255,255,0.3);*/
    background-color:rgba(255,255,255,0.3);
    padding: 4px 4px 0px 4px;
}
.table-two img{
    width: 130px;
    height: 130px;
    margin: 2px 2px 2px 2px;
}
/*腳註*/
.foot td{
    position: fixed;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
}
.foot a,span{
    color: #FFFFFF;
    font-size: 15px;
    padding: 0px 2px 0px 0px;
}