【HTML&CSS】搜狐頁(yè)面代碼編寫(xiě)

lakeside 發(fā)布于2019-04-23 13:15 / 4030人閱讀

摘要：韓順平老師講課最后一個(gè)用例就是還原搜狐門戶網(wǎng)站的首頁(yè)和部分，雖然視頻中他的是年前的網(wǎng)站頁(yè)面，蛋根本不妨礙我完成完成現(xiàn)在版本的搜狐頁(yè)面。

DOCTYPE html>




<html class="no-js">


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜狐首頁(yè)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">
                圖標(biāo)
            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">
                                    小圖標(biāo)題新聞1
                                div>
                            td>
                            <td>
                                <div class="smallimgall smallimg2">
                                    小圖標(biāo)題新聞2
                                div>
                            td>
                        tr>
                        <tr>
                            <td>
                                <div class="smallimgall smallimg3">
                                    小圖標(biāo)題新聞3
                                div>
                            td>
                            <td>
                                <div class="smallimgall smallimg4">
                                    小圖標(biāo)題新聞4
                                div>
                            td>
                        tr>
                    table>
                div>
                
                <div class="shipinbiaoti">
                    視頻標(biāo)題欄
                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">
                    新聞標(biāo)題8條
                div>
                <div class="textnewsall textnews2">
                    新聞標(biāo)題6條
                div>
                <div class="textnewsall textnews3">
                    新聞標(biāo)題6條
                div>
                <div class="textnewsall textnews4">
                    新聞標(biāo)題6條
                div>
                <div class="textnewsall textnews5">
                    新聞標(biāo)題6條
                div>
                <div class="textnewsall textnews6">
                    新聞標(biāo)題1條
                div>
            div>
            
            <div class="biaotilan">

                <div class="right1">
                    換一換廣告
                div>
                <div class="right2">
                    圖片廣告
                div>
                <div class="right3">
                    24小時(shí)熱文
                div>
            div>
        div>
    div>
    

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

html>

看完一整本書(shū)，結(jié)果寫(xiě)不出什么東西，按書(shū)上教程來(lái)，基本能把例子完成個(gè)七七八八，可是用padding還是margin完全整不清……，而且只要結(jié)構(gòu)一復(fù)雜，元素就各種不受控制。

沒(méi)辦法找來(lái)韓順平老師的視頻（沒(méi)錯(cuò)，就是在網(wǎng)上不知道怎么搞來(lái)的）

看完老師講完整個(gè)html&CSS部分2，終于把這個(gè)內(nèi)容吃透了。

韓順平老師講課最后一個(gè)用例就是還原搜狐門戶網(wǎng)站的首頁(yè)HTML和css部分，雖然視頻中他的是n年前的網(wǎng)站頁(yè)面，蛋根本不妨礙我完成完成現(xiàn)在版本的搜狐頁(yè)面。

?第一次看完視頻，寫(xiě)的亂七八糟，很多東西擺不到應(yīng)有的地方，沒(méi)辦法，在瀏覽器按f12鍵，查看人家的源代碼，發(fā)現(xiàn)很多東西用了ul和li的組合插入文字，圖片，而是原來(lái)HTML和css組合也沒(méi)這么難，大神的代碼實(shí)現(xiàn)也是很平凡很淡。

很多收獲記手機(jī)上，回頭整理發(fā)這里。

我做出來(lái)的效果圖是這樣的：

代碼如下：

DOCTYPE html>




<html class="no-js">


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜狐首頁(yè)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">
                圖標(biāo)
            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">
                                    小圖標(biāo)題新聞1
                                div>
                            td>
                            <td>
                                <div class="smallimgall smallimg2">
                                    小圖標(biāo)題新聞2
                                div>
                            td>
                        tr>
                        <tr>
                            <td>
                                <div class="smallimgall smallimg3">
                                    小圖標(biāo)題新聞3
                                div>
                            td>
                            <td>
                                <div class="smallimgall smallimg4">
                                    小圖標(biāo)題新聞4
                                div>
                            td>
                        tr>
                    table>
                div>
                
                <div class="shipinbiaoti">
                    視頻標(biāo)題欄
                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">
                    新聞標(biāo)題8條
                div>
                <div class="textnewsall textnews2">
                    新聞標(biāo)題6條
                div>
                <div class="textnewsall textnews3">
                    新聞標(biāo)題6條
                div>
                <div class="textnewsall textnews4">
                    新聞標(biāo)題6條
                div>
                <div class="textnewsall textnews5">
                    新聞標(biāo)題6條
                div>
                <div class="textnewsall textnews6">
                    新聞標(biāo)題1條
                div>
            div>
            
            <div class="biaotilan">

                <div class="right1">
                    換一換廣告
                div>
                <div class="right2">
                    圖片廣告
                div>
                <div class="right3">
                    24小時(shí)熱文
                div>
            div>
        div>
    div>
    

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

html>

css（html文件和css文件放同一個(gè)目錄層下）：

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;
}

/* 從這里開(kāi)始一律采用左/右浮動(dòng) */
.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;
}

?腦袋要炸了，繼續(xù)完善！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1638.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lakeside

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

GifCam – 一款綠色無(wú)需安裝Gif桌面錄屏動(dòng)畫(huà)工具亦可轉(zhuǎn).AVI格式

閱讀 3092·2021-10-12 10:17
hostarmada：管理型云服務(wù)器/vps，可選新加坡/美國(guó)等9機(jī)房，自帶cpanel授權(quán)，超大帶

閱讀 1684·2021-09-01 11:38
足球數(shù)據(jù)API接口 - 【球員列表資料】API調(diào)用示例代碼

閱讀 1206·2019-08-30 15:44
基于js的APP多語(yǔ)言處理

閱讀 3580·2019-08-26 18:36
Fetch()

閱讀 592·2019-08-26 13:25
前端面試每日3+1——第107天

閱讀 1976·2019-08-26 10:29
每日 30 秒 ? 終極等于

閱讀 2924·2019-08-23 15:58
【每日一包0001】is-sorted

閱讀 846·2019-08-23 12:59

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【HTML&CSS】搜狐頁(yè)面代碼編寫(xiě)

相關(guān)文章

**【前端芝士樹(shù)】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am**

**JavaWEB開(kāi)發(fā)02——CSS&JS**

**JavaWEB開(kāi)發(fā)02——CSS&JS**

新版selenium4.0+Python使用詳解

發(fā)表評(píng)論

0條評(píng)論

lakeside

男|高級(jí)講師

TA的文章

GifCam – 一款綠色無(wú)需安裝Gif桌面錄屏動(dòng)畫(huà)工具亦可轉(zhuǎn).AVI格式

hostarmada：管理型云服務(wù)器/vps，可選新加坡/美國(guó)等9機(jī)房，自帶cpanel授權(quán)，超大帶

足球數(shù)據(jù)API接口 - 【球員列表資料】API調(diào)用示例代碼

基于js的APP多語(yǔ)言處理

Fetch()

前端面試每日3+1——第107天

每日 30 秒 ? 終極等于

【每日一包0001】is-sorted

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【HTML&CSS】搜狐頁(yè)面代碼編寫(xiě)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！