簡單的個人介紹網頁-主頁面【附程式碼】

阿新 • • 發佈：2020-11-25

此文轉載自：https://blog.csdn.net/Baridhu/article/details/110004129

主頁面

程式碼1（style.css）

      .nav {
            height: 41px;
            border-top: 3px solid #b4fffa;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
           
            display: inline-block;
            height: 
 41px;
            font-size: 15px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0px 20px;
        }

        .nav a:hover {
            background-color: #fcfcfc;
            color: #93d9eb;
        }

程式碼2(主頁面）

<!DOCTYPE html>
<html lang="en">

< 
head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HOMEPAGE</title>
    <link rel="stylesheet" href="style.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body { 

            background: url(timg1MHDVFRB.jpg) no-repeat;
            background-size: cover;
        }

        .box {
            width: 1200px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin: 0 auto;
            text-align: center;
            margin-top: 7%;

        }

        .box .left a {
            display: block;
            width: 200px;
            height: 90px;
            background: rgba(0, 0, 0, 0.2);
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            padding-left: 30px;
            line-height: 90px;
        }

        .box .left a:hover {
            background-color: #ff6700;
        }

        .left {
            float: left;
            width: 230px;
            height: 540px;
            background-color: cadetblue;
            background: rgba(0, 0, 0, 0.2);
        }

        .right {
            float: right;
            width: 970px;
            height: 540px;
            background-color: rgba(152, 233, 233, 0.2);
            ;

        }

        .right>div {
            float: left;
            width: 470px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin-left: 14px;
            margin-bottom: 14px;
        }

        .right .one {
            background-color: rgb(152, 233, 233, 0.2);
        }

        .right .photo {
            width: 490px;
            height: 540px;
        }

        .right .one h1 {
            color: white;
            font-size: 60px;
        }

        .right .one p {
            font-size: 40px;
            font-weight: 500;
            color: rgb(148, 241, 248);
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">HOMEPAGE</a>
        <a href="hi.html" target="_blank">Chris</a>
        <a href="Andy.html" target="_blank">Andy</a>
        <a href="juerr.html" target="_blank">Juerr</a>
        <a href="Christenson.html" target="_blank">Christenson</a>
        <a href="Kevin.html" target="_blank">Kevin</a>
    </div>
    <div class="box">
        <div class="left">
            <a href="#">HOMEPAGE</a>
            <a href="hi.html" target="_blank">Chris</a>
            <a href="Andy.html" target="_blank">Andy</a>
            <a href="juerr.html" target="_blank">Juerr</a>
            <a href="Christenson.html" target="_blank">Christenson</a>
            <a href="kevin.html" target="_blank">Kevin</a>
        </div>
        <div class="right">
            <div class="one">
                <h1>About us</h1>
                <p>We are a group that loves learning and is positive</p>
                <p>Successful or failing, we should always feel hopeful about the future.</p>
            </div>
            <div>
                <img src="timg1MHDVFRB.jpg" alt="" class="photo">
            </div>
        </div>
    </div>
</body>

</html>

注：1.圖片大家可以去選擇自己喜歡的.
2. 我看到網上很多這些簡單網頁都要錢，雖然支援原創，但希望大家可以從中學到知識，所以公開，希望大家學到東西，不要一味的複製貼上。如果喜歡的話，就支援一下吧！

簡單的個人介紹網頁-主頁面【附程式碼】

此文轉載自：https://blog.csdn.net/Baridhu/article/details/110004129 主頁面程式碼1（style.css）

文章批量偽原創方法使用api介面批量呼叫【附程式碼】

最近公司要處理一批文章，於是寫了個批量處理工具，這個偽原創效果很滿意，而且對收錄很有幫助，有需要的朋友可以嘗試一下，程式碼python寫的。

如何對H.265視訊播放器EasyPlayer.js實現音訊開啟與關閉控制？【附程式碼】

EasyPlayer是可支援H.264/H.265視訊播放的流媒體播放器，效能穩定、播放流暢，可支援的視訊流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具備較高的可用性。TSINGSEE青犀視訊的Easy系列視訊平臺均集成了EasyPlayer播放器

簡單介紹Java中的【方法過載】

技術標籤：javajava筆記java方法過載java 方法過載方法過載：指在同一個類中，允許存在一個以上的同名方法，只要它們的引數列表不同即可，與修飾符和返回值型別無關。引數列表：個數不同，資料型別不同，順序不

【模擬】Carla介紹與基本使用 [1] (附程式碼基礎版)

0. 參考與前言主要介紹無人駕駛的模擬環境CARLA，開源社群維護，以下為相關參考連結：

原生JavsScript實現簡單購物車【面向物件】【原生程式碼】

原生js實現購物車功能 —面向物件；　　購物車在電商網站基本都需要用到，今天我們用面向物件程式設計思想來寫一個購物車

Java IO流的簡單使用通俗易懂超詳細【內含案例】

IO流簡單使用 InputStream 位元組輸入流 OutputStream 位元組輸出流 Reader 字元輸入流 Writer 字元輸出流

Java如何實現二維碼？【附原始碼】

步驟1 第一步首先建立一個普通的 Maven 專案，然後要實現二維碼功能，我們肯定要使用別人提供好的 Jar 包，這裡我用的是 google 提供的 jar，pom.xml 檔案配置如下：

發愁沒專案？用Java開發一個停車場系統【附原始碼】

現開發一個停車系統,使用者根據車位停車 1)車主檢視現在有無車位(最多100個車位),給車主隨機分配一個車位,如果該位置上有車,不能停

ThinkPHP5 如何介入阿里雲反文字垃圾敏感詞過濾【附原始碼】

很多時候我們給與客戶端在釋出內容的時候，就很擔心被客戶輸入惡意敏感詞等資訊，如若不慎還可能網站被封等；為了減少後臺人工稽核的成本，我們接入阿里雲反文字垃圾。

python爬蟲實現爬取網頁主頁資訊（html程式碼）

技術標籤：pythonweb python爬蟲實現爬取網頁主頁資訊（html程式碼） 1.爬取網站原始碼

用個人微信小號代替【Server醬】推送訊息通知

技術標籤：指令碼本外掛是基於vlw微信框架開發的，所以需要用本外掛還要安裝vlw框架。

selenium3+python3 網頁自動化測試【學習資料】

最近在寫網頁自動化測試，收集了一些資料學習，這裡記錄下。總結以上所述是小編給大家介紹的selenium3+python3環境搭建教程圖解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。

還在用BeanUtils拷貝物件？MapStruct才是王者!【附原始碼】

前幾天，遠在北京的小夥伴在群裡丟擲了“MapStruct”的概念。對於只聞其名，未見其人的我來說，決定對其研究一番。本文我們就從 MapStruct 的概念出發，通過具體的程式碼示例來研究它的使用情況，最後與“市面上”的

教你一小時做出推箱子游戲【附原始碼】

經典的推箱子是一個古老遊戲，目的是在訓練你的邏輯思考能力。在一個狹小的倉庫中，要求把木箱放到指定的位置，稍不小心就會出現箱子無法移動或者通道被堵住的情況，所以需要巧妙的利用有限的空間和通道，合理安

【優雅程式碼】02-自動化工具合集介紹

【優雅程式碼】02-自動化工具合集介紹歡迎關注b站賬號/公眾號【六邊形戰士夏寧】，一個要把各項指標拉滿的男人。該文章已在github目錄收錄。

Jetpack元件庫（含Jetpack Compose）從入門到精通全家桶【附Demo】

前言開發應用程式就像搭積木。我們對產品業務及功能模組的劃分和封裝，就像在搭建積木一樣。積木不能太大，這不利於修改和拆解;積木也不能太小，否則管理起來可能會很混亂。只有基於穩健、合理的架構，專案才能輕鬆

【hadoop生態之Hive】Hive的DML資料操縱語言【筆記+程式碼】

技術標籤：hadoop生態之Hivejavahivehdfshadoop大資料五、DML資料操作 5.1 資料匯入 5.1.1 向表中裝載資料（Load）

樸素貝葉斯分類器Numpy實現【原創程式碼】

技術標籤：個人雜記問題：已知 dayoutlooktemperaturehumiditywindPlaytennis1sunnyhothighweakno2sunnyhothighstrongno3overcasthothighweakyes4rainmildhighweakyes5raincoolnormalweakyes6raincoolnormalstr

【簡潔程式碼】1061 判斷題 (15分)_18行程式碼AC

技術標籤：PAT乙級PATPAT乙級立志用更少的程式碼做更高效的表達 Pat乙級最優化程式碼+題解+分析彙總——>傳送門

簡單的個人介紹網頁-主頁面【附程式碼】

相關推薦