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

来源:https://www.cnblogs.com/Caixingmin/archive/2019/07/06/11144408.html
-Advertisement-
Play Games

【本文為原創，轉載請註明出處】 技術【CSS+HTML】 佈局【Table】 圖片準備【百度圖標、10張不同類型圖】 步驟1 table 佈局 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl ...


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

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

圖片準備【百度圖標、10張不同類型圖】

------------------------------------------------------------------------------------------------------------

步驟1  table 佈局

 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樣式【大小、位置、顏色、圖片】

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

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

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

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

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

<!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;
}
完整的index.css

步驟4 知識點整理

設置背景圖片大小    background-size: 100%;

margin:0 auto; 與 text-aglin的區別 【未整理】

底部導航欄     position: fixed; bottom: 5px; left: 0;right: 0;*/

半透明背景色   background-color:rgba(255,255,255,0.3);

input和button對不齊   vertical-align:top；

-------------------------------------------------------------------------

【完整代碼鏈接：還未上傳，可私聊我】

【不足之處望指出，一起努力學習前端】


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Mysql數據處理/行轉列/列轉行/分割/拼接/數據複製彙總
    Mysql將欄位用逗號拼接、分割，行轉列/列轉行/兩表間複製數據/生成不同位數的隨機數 ...
  • QSqlDatabase
    QSqlDatabase 使用靜態方法addDatabase來創建一個資料庫連接。 如果你的程式中只有一個資料庫連接，可以使用如下語句創建連接 QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); 如果你的程式要處理多個資料庫連接，那麼就使用 ...
  • PostgreSQL limit
    1. select * from my_table limit 10 offset 5 數據是從第0條開始的，所以這句代碼表示從 第六條數據開始的10行數據。 2. select * from my_table limit 10 不帶 offset 時，表示查詢10條數據。 ...
  • Oracle資料庫備份---導出與導入
    利用windows的cmd命令備份導出數據（也可以連接上sqlplus進行操作）--導出--將資料庫orcl完全導出 exp system/oracle@orcl file=c:\oracle_bak\orcl_bak.dmp full=y --將資料庫中scott用戶的所有對象導出 exp sco ...
  • HTML連載20-並集選擇器&兄弟選擇器
    一、並集選擇器 1.作用：給所有的選擇器選中的標簽設置屬性。 2.格式： 3.例如： 4.註：支持多個標簽取並集，中間用逗號連接就行。上一節中交集選擇器也可以取多個交集 二、兄弟選擇器 1.相鄰兄弟選擇器 （1）定義：給指定選擇器後面緊跟的那個選擇器選中的標簽設置屬性。 （2）格式： （3）例子： ...
  • 簡單後臺管理系統框架--HTML練手項目2【Frameset】
    【本文為原創，轉載請註明出處】 技術【HTML】 佈局【Frameset】 無步驟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後臺管理系統框架</title> </head> <frameset row ...
  • 視頻網站大雜燴--HTML+CSS練手項目1【Frameset】
    【本文為原創，轉載請註明出處】 技術【CSS+HTML】 佈局【Frameset】 步驟1 Frameset 佈局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>視頻網站大雜燴</title> <link ...
  • Flask框架
    一、Web前端與後端（Python Web） 1.Web前端：網頁，包含HTML，CSS，JS。 靜態網頁：不能與伺服器交互的網頁 動態網頁：能夠與伺服器交互的網頁 2.Web後端：、Flask，Django、Ajax技術 二、伺服器 1.伺服器：為用戶提供服務的電腦，將數據抽象成URL，以供用戶 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類