【HTML&CSS】搜狐頁面程式碼編寫

阿新 • • 發佈：2018-12-18

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><! 
-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜狐首頁</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1" 
>
    <link rel="Shortcut Icon" href="./META-INF/images/souhulogo.png" />
    <link rel="stylesheet" href="./sohu.css">
</head>

<body>
    <div class="top">
        <div class="logo">
            <div class="logoimg">
                圖示
            </div> 

            <div class="dapp">
                下載app
            </div>
        </div>
    </div>
    <div class="mast">
        <!-- 第一部分 -->
        <div class="sousuo">
            <div class="sousuo1">
                搜尋1
            </div>
            <div class="sousuo2">
                搜尋2
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="toutiaolianjie">
            頭條連結
        </div>
        <!-- 第三部分 -->
        <div class="guanggaolan">
            <div class="guanggaolan1">
                廣告1
            </div>
            <div class="guanggaolan2">
                廣告2
            </div>
        </div>
        <!-- 第四部分 -->
        <div class="xinwen">
            <!-- 第四部分第一列  圖片新聞-->
            <div class="imgxinwen">
                <div class="bigimg">
                    大圖新聞
                </div>
                <!-- 小圖新聞 -->
                <div class="smallimg">
                    <table class="smallimgtable">
                        <tr>
                            <td>
                                <div class="smallimgall smallimg1">
                                    小圖示題新聞1
                                </div>
                            </td>
                            <td>
                                <div class="smallimgall smallimg2">
                                    小圖示題新聞2
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="smallimgall smallimg3">
                                    小圖示題新聞3
                                </div>
                            </td>
                            <td>
                                <div class="smallimgall smallimg4">
                                    小圖示題新聞4
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!--  視訊標題欄 -->
                <div class="shipinbiaoti">
                    視訊標題欄
                </div>
                <!--  視訊 -->
                <div class="shipin1">
                    大視訊
                </div>
                <div class="leftnews1">
                    文字新聞
                </div>
                <div class="shipin2">
                    視訊2
                </div>
                <div class="leftnews2">
                    文字新聞2
                </div>
            </div>
            <!-- 第四部分第二列  中間部分文字新聞-->
            <div class="textxinwen">
                <div class="textnewsall textnews1">
                    新聞標題8條
                </div>
                <div class="textnewsall textnews2">
                    新聞標題6條
                </div>
                <div class="textnewsall textnews3">
                    新聞標題6條
                </div>
                <div class="textnewsall textnews4">
                    新聞標題6條
                </div>
                <div class="textnewsall textnews5">
                    新聞標題6條
                </div>
                <div class="textnewsall textnews6">
                    新聞標題1條
                </div>
            </div>
            <!-- 第四部分第三列 右側內容標題-->
            <div class="biaotilan">

                <div class="right1">
                    換一換廣告
                </div>
                <div class="right2">
                    圖片廣告
                </div>
                <div class="right3">
                    24小時熱文
                </div>
            </div>
        </div>
    </div>
    <!-- 第五部分 -->

    <script src="" async defer></script>
</body>

</html>

看完一整本書，結果寫不出什麼東西，按書上教程來，基本能把例子完成個七七八八，可是用padding還是margin完全整不清……，而且只要結構一複雜，元素就各種不受控制。

沒辦法找來韓順平老師的視訊（沒錯，就是在網上不知道怎麼搞來的）

看完老師講完整個html&CSS部分2，終於把這個內容吃透了。

韓順平老師講課最後一個用例就是還原搜狐入口網站的首頁HTML和css部分，雖然視訊中他的是n年前的網站頁面，蛋根本不妨礙我完成完成現在版本的搜狐頁面。

第一次看完視訊，寫的亂七八糟，很多東西擺不到應有的地方，沒辦法，在瀏覽器按f12鍵，檢視人家的原始碼，發現很多東西用了ul和li的組合插入文字，圖片，而是原來HTML和css組合也沒這麼難，大神的程式碼實現也是很平凡很淡。

很多收穫記手機上，回頭整理髮這裡。

我做出來的效果圖是這樣的：

程式碼如下：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜狐首頁</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="Shortcut Icon" href="./META-INF/images/souhulogo.png" />
    <link rel="stylesheet" href="./sohu.css">
</head>

<body>
    <div class="top">
        <div class="logo">
            <div class="logoimg">
                圖示
            </div>
            <div class="dapp">
                下載app
            </div>
        </div>
    </div>
    <div class="mast">
        <!-- 第一部分 -->
        <div class="sousuo">
            <div class="sousuo1">
                搜尋1
            </div>
            <div class="sousuo2">
                搜尋2
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="toutiaolianjie">
            頭條連結
        </div>
        <!-- 第三部分 -->
        <div class="guanggaolan">
            <div class="guanggaolan1">
                廣告1
            </div>
            <div class="guanggaolan2">
                廣告2
            </div>
        </div>
        <!-- 第四部分 -->
        <div class="xinwen">
            <!-- 第四部分第一列  圖片新聞-->
            <div class="imgxinwen">
                <div class="bigimg">
                    大圖新聞
                </div>
                <!-- 小圖新聞 -->
                <div class="smallimg">
                    <table class="smallimgtable">
                        <tr>
                            <td>
                                <div class="smallimgall smallimg1">
                                    小圖示題新聞1
                                </div>
                            </td>
                            <td>
                                <div class="smallimgall smallimg2">
                                    小圖示題新聞2
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="smallimgall smallimg3">
                                    小圖示題新聞3
                                </div>
                            </td>
                            <td>
                                <div class="smallimgall smallimg4">
                                    小圖示題新聞4
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!--  視訊標題欄 -->
                <div class="shipinbiaoti">
                    視訊標題欄
                </div>
                <!--  視訊 -->
                <div class="shipin1">
                    大視訊
                </div>
                <div class="leftnews1">
                    文字新聞
                </div>
                <div class="shipin2">
                    視訊2
                </div>
                <div class="leftnews2">
                    文字新聞2
                </div>
            </div>
            <!-- 第四部分第二列  中間部分文字新聞-->
            <div class="textxinwen">
                <div class="textnewsall textnews1">
                    新聞標題8條
                </div>
                <div class="textnewsall textnews2">
                    新聞標題6條
                </div>
                <div class="textnewsall textnews3">
                    新聞標題6條
                </div>
                <div class="textnewsall textnews4">
                    新聞標題6條
                </div>
                <div class="textnewsall textnews5">
                    新聞標題6條
                </div>
                <div class="textnewsall textnews6">
                    新聞標題1條
                </div>
            </div>
            <!-- 第四部分第三列 右側內容標題-->
            <div class="biaotilan">

                <div class="right1">
                    換一換廣告
                </div>
                <div class="right2">
                    圖片廣告
                </div>
                <div class="right3">
                    24小時熱文
                </div>
            </div>
        </div>
    </div>
    <!-- 第五部分 -->

    <script src="" async defer></script>
</body>

</html>

css（html檔案和css檔案放同一個目錄層下）：

body {
  margin: 0 auto;
  border: 1px solid red;
}
.mast {
  margin: 0 auto;
  width: 1180px;
  background-color: rgb(88, 88, 88);
}
.top {
  background-color: #222222;
  height: 30px;
}

.logo {
  width: 1180px;
  margin: 0 auto;
  background-color: yellow;
}

/* 從這裡開始一律採用左/右浮動 */
.logoimg {
  float: left;
  width: 145px;
  height: 95px;
  background-color: #25c058;
}
.dapp {
  float: right;
  width: 160px;
  background-color: yellow;
}

.sousuo{
    float: right;
    width: 940px;
    height: 40px;
    background-color: #174b12;
    margin-top: 25px;
}
.sousuo1{
    float: left;
    width: 550px;
    height: 40px;
    background-color: rgb(0, 255, 98);
}
.sousuo2{
    float: right;
    width: 300px;
    height: 40px;
    background-color: rgb(10, 30, 92);
}

.toutiaolianjie{
    float: left;
    width: 1180px;
    height: 75px;
    background-color: #c9141d;
    margin-top: 26px;
}
.guanggaolan{
    float: left;
    width: 1180px;
    height: 100px;
    background-color: #DEE1EA;
    margin-top: 20px;
}

.guanggaolan1{
    float: left;
    width: 1030px;
    height: 100px;
    background-color: rgb(99, 75, 155);
}
.guanggaolan2{
    float: right;
    width: 144px;
    height: 100px;
    background-color: rgb(10, 30, 92);
}
.xinwen{
    float: left;
    width: 1180px;
    height: 1150px;
    background-color: rgb(71, 71, 71);
    margin-top: 20px;
}

.imgxinwen{
    float: left;
    width: 320px;
    height: 1120px;
    background-color: rgb(255, 123, 123);
}

.bigimg{
    float: left;
    width: 320px;
    height: 213px;
    background-color: rgb(251, 0, 0);
}

.smallimg{
    float: left;
    width: 320px;
    height: 320px;
    background-color: rgb(251, 0, 0);
    margin-top: 10px;
}

.smallimgtable{
    float: left;
    width: 320px;
    height: 320px;
    background-color: rgb(0, 153, 255);
}

.smallimgall{
    float: left;
    width: 155px;
    height: 155px;
    background-color: rgb(163, 163, 163);
}

.shipinbiaoti{
    float: left;
    width: 320px;
    height: 20px;
    background-color: rgb(163, 163, 163);
    margin-top: 30px;
}

.shipin1{
    float: left;
    width: 320px;
    height: 160px;
    background-color: rgb(123, 255, 0);
    margin-top: 12px;
}

.leftnews1{
    float: left;
    width: 320px;
    height: 70px;
    background-color: rgb(55, 0, 255);
    margin-top: 15px;
}
.shipin2{
    float: left;
    width: 320px;
    height: 104px;
    background-color: rgb(123, 255, 0);
    margin-top: 30px;
}

.leftnews2{
    float: left;
    width: 320px;
    height: 127px;
    background-color: rgb(230, 54, 186);
    margin-top: 15px;
}

.textxinwen{
    float: left;
    width: 440px;
    height: 1120px;
    background-color: rgb(30, 255, 49);
    margin-left: 25px;
}

.textnewsall{
    float: left;
    background-color: rgb(0, 202, 185);
}
.textnews1{
    float: left;
    width: 440px;
    height: 225px;
    background-color: rgb(0, 202, 185);
}
.textnews1,.textnews2,.textnews3,.textnews4,.textnews5{
    float: left;
    width: 440px;
    height: 180px;
    background-color: rgb(177, 106, 167);
    margin-top: 30px;
}

.textnews6{
    float: left;
    width: 440px;
    height: 20px;
    background-color: rgb(177, 106, 167);
    margin-top: 30px;
}

.biaotilan{
    float: right;
    width: 300px;
    height: 1120px;
    background-color: rgb(72, 52, 255);
}

.right1{
    float: left;
    width: 300px;
    height: 450px;
    background-color: rgb(217, 255, 0);
}

.right2{
    float: left;
    width: 300px;
    height: 250px;
    background-color: rgb(217, 255, 0);
    margin-top: 12px;
}
.right3{
    float: left;
    width: 300px;
    height: 414px;
    background-color: rgb(217, 255, 0);
    margin-top: 10px;
}

腦袋要炸了，繼續完善！

【HTML&CSS】搜狐頁面程式碼編寫

<!DOCTYPE html>  <!--[if IE 7]> <htm

【HTML+CSS】日歷備忘錄（靜態）

caption ica -s round width 實現 height html+css enter 需求：實現日歷備忘錄（靜態） <!DOCTYPE html> <html> <head> <meta charset=

Flask大標題下設定小標題（再加一個線）【html Css】

簡述參考： https://getbootstrap.com/docs/4.1/content/typography/ https://blog.csdn.net/think2me/article/details/7419028 核心程式碼 <

【html+css】ul中li水平居中，可以根據media查詢，不同個數的li水平居中

通過給ul設定寬度width，來控制頁面顯示幾個li，你是水平居中顯示的，具體的間距通過li的margin來設定： <div class="navContent" id="newGoods"> <ul> <li>

【HTML&CSS】基本的入門

在公司培訓一段時間不久就去流浪了一段時間，現在回來重新捧起心愛的程式設計，特別親切。自學HTML&CSS,別人說了很多，這那這那的，無論簡單還是困難，不親自去俯下身子學習，怎麼都學不會HTML和CSS。當然這只是進階的基礎，買了兩本，特別好，無論是內容的編排還是可學程度、排版和印刷，都是上上之選。

【HTML&CSS】簡單網頁佈局

一、學習內容回顧 ☆常用標籤列舉 <p></p>  <b></b>

【HTML&CSS】HTML表單：實現互動

瀏覽器通過HTML表單和伺服器實現互動，表單是一個可供使用者輸入資訊的頁面，使用者提交表單後，表單包含的資訊會發送到一個Web伺服器，由伺服器指令碼負責處理並響應，返回一個HTML頁面，最後瀏覽器顯示這個頁面。表單元素 <form> 所有表單

【HTML+CSS】web前端工程師

web前端開發工程師 1、web前端開發工程師是做什麼的？與網站打交道 2、成為一名web前端開發工程師具備的條件 1、興趣 2、敲程式碼 3、web前端開發工程師需要學習什麼 1、軟體（程式碼的鋪助工具）瀏覽器：瀏覽器有非常多，（谷歌chrome、火狐、IE）

【推薦系統】搜狐個性化視訊推薦架構設計和實踐

為什麼要做推薦系統？視訊的覆蓋率問題，好的視訊無法難以被人發現，隨著使用者的量的增加，大部分使用

【前端】【html/css】前端學習之路（五）：標籤顯示模式（display）

標籤的型別(顯示模式) HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。1.塊級元素（block-level）每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。總而言之就是比較霸

【HTML/CSS】浮動結構深入淺出

寫在前面的話：由於CSS內容比較多，小菜沒有精力從頭到尾講一遍，只能有針對性的講解。如果讀者理解CSS盒子模型，但對於浮動不理解，那麼這篇文章可以幫助你。小菜水平有限，本文僅僅是入門教程，不當之處請諒解！

【HTML+CSS】教你切圖篇4-iframe佈局、多列布局實現

iframe框架佈局；專案中經常會使用到iframe，iframe雖然比較多毛病，也比較老了，但是有些專案還是需要，一般專案情況如下圖：一般需求：讓iframe區域填充滿內容div區域，並且視窗大小改變時自適應。以往的解決方法是通過js判斷window的寬高，

【前端】【html/css】前端學習之路（十四）（製作京東專案心得）（完）

1.事前準備（1）工具使用的是 Webstrom的最新版和 Fireworks 8 作為切圖的輔助工具。（2）準備CSS Reset類庫（normalize.css），為跨瀏覽器相容做準備（也可以直接使用京東網站的初始化） normalize.css

【html】【一個簡單的網上購物頁面程式碼】

先看結果程式碼<!DOCTYPE html> <html> <head> <title>網上購物</title> <meta http-equiv="keywords" content=

【html】【一個簡單的使用者登入頁面程式碼】

結果程式碼<!DOCTYPE html> <html> <head> <title>使用者登入.html</title> <meta http-equiv="keywords" cont

【HTML+CSS+JavaScript】日歷生成器

itl you ava lse max 星期幾 mat mar 超出需求：實現日歷生成器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

【HTML+CSS+JavaScript】實現待辦事項（純DOM實現）

todolist ive relative spa java set 釣魚 scrip input 需求：實現待辦事項 <!DOCTYPE html> <html lang="en"> <head> <meta chars

【HTML+CSS+JavaScript】實現地址選擇聯動

div chang city UNC padding () 定義 html 寧波需求：實現地址選擇聯動 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

【HTML+CSS+JavaScript】網頁實戰開發筆記之二—關於Web標準，你不能不知道的事

毛星雲，網路ID「淺墨」，90後，熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術，就職於騰訊互娛。微軟最有價值專家著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》碩士就讀於南京航空航天大學航天學院（2013級碩士研究生），已於2016年三月畢業。本科

【總結】搜狐基於Spark的新聞和廣告推薦

原文：http://www.csdn.net/article/1970-01-01/2825353 摘要：對一個媒體網站來講，一個比較重要的任務就是獲取使用者對於不同型別文章的興趣分佈。使用者的興趣分佈會被作為使用者屬性標籤，和其他型別的標籤（例如人口屬性等）一起用作推薦的

【HTML&CSS】搜狐頁面程式碼編寫

相關推薦