仿百度圖片首頁--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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類