製作簡易的個人主頁(程式碼筆記）

阿新 • • 發佈：2019-01-02

//html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="This is a testing demo page">
    <meta name="keywords" content="testing,html,demo">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Testing Demo Project</title>
<link rel="stylesheet" type="text/css" href="project.css">
    <link rel="stylesheet"  href="lib/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div id="head">
        <div class="logo_title">
               <h1>LinuxCast.net Demo Site</h1>
               <h2>簡易的個性主頁</h2>
        </div>
        <div class="navi">
           <ul>
               <li><a href = "">首頁</a></li>
               <li><a href = "">閒言碎語</a></li>
               <li><a href = "">我是誰</a></li>
           </ul>
        </div>
        <div class="clear"></div>
    </div>


    <div id="wrapper">
        <div class="main">
              <div class="item">
                 <div class="item_img">
                    <img src="cast.png" alt="Testing Demo Project pic">
                 </div>
                 <div class="item_content">
                    <h3>LinuxCast測試標題測試標題</h3>
                    <p class="item_info">作者：XXX  發表於：2017年7月15號</p>
                    <p class="item_desc">LinuxCast測試內容測試內容測試內容測試文字測<br>
                    測試文字測試文字測試文字測試文字測試文字測試文字</p>
                 </div>
              </div>
              <div class="item">
                 <div class="item_img">
                    <img src="cast.png" alt="Testing Demo Project pic">
                 </div>
                 <div class="item_content">
                    <h3>LinuxCast測試標題測試標題</h3>
                    <p class="item_info">作者：XXX 發表於：2017年7月15號</p>
                    <p class="item_desc">LinuxCast測試內容測試內容測試內容測試文字測<br>
                    測試文字測試文字測試文字測試文字測試文字測試文字</p>
                 </div>
              </div>


              <div class="item">
                 <div class="item_img">
                    <img src="cast.png" alt="Testing Demo Project pic">
                 </div>
                 <div class="item_content">
                    <h3>LinuxCast測試標題測試標題</h3>
                    <p class="item_info">作者：XXX 發表於：2017年7月15號</p>
                    <p class="item_desc">LinuxCast測試內容測試內容測試內容測試文字測<br>
                    測試文字測試文字測試文字測試文字測試文字測試文字</p>
                 </div>
              </div>


              <div class="item">
                 <div class="item_img">
                    <img src="cast.png" alt="Testing Demo Project pic">
                 </div>
                 <div class="item_content">
                    <h3>LinuxCast測試標題測試標題</h3>
                    <p class="item_info">作者：XXX 發表於：2017年7月15號</p>
                    <p class="item_desc">LinuxCast測試內容測試內容測試內容測試文字測<br>
                    測試文字測試文字測試文字測試文字測試文字測試文字</p>
                 </div>
              </div>
        </div>
        <div class="side">
              <div class="author_info">
                   <div class="author_img">
                      <img src="author.jpg" alt="Testing Demo project pic">
                   </div>
                   <div class="author_desc">
                      <h4>Double Sweet</h4>
                      <p>emmm..<br>
                        emmmmmmmm...</p>
                   </div>
              </div>
              <div class="top_article">
                   <h4>推薦文章</h4>
                   <ul>
                   <li>好文要頂-1</li>
                   <li>好文要頂-2</li>
                   <li>好文要頂-3</li>
                   <li>好文要頂-4</li>
                   <li>好文要頂-5</li>
                   </ul>
              </div>
              <div class="site-info">
                   <p>訪客：555555</p>
                   <p>文章：666篇</p>
              </div>
        </div>
        <div class="clear"></div>


    </div>


    <div id="footer">
      <div class="site_about">
           <p>2015-2017 CopyRight LinuxCast.net Demo Site</p>
      </div>
      <div class="site_link">
           <ul>
              <li><a href = "">關於我們</a></li>
              <li><a href = "">聯絡我們</a></li>
              <li><a href = "">使用條款</a></li>
              <li><a href = "">意見反饋</a></li>
           </ul>
      </div>
      <div class="clear"></div>


    </div>


    <script src="lib/jquery-2.1.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

//CSS

body{
background-image: url("bg.jpg");
}


a{
color: grey;/*背景顏色*/
text-decoration: none;/*去除文字的下劃線*/
}


#head{
width: 960px;
margin: auto;
border-bottom: dotted 1px white; /*設定了白色的分界線*/ 
margin-bottom: 10px;
}


.logo_title{
    float: left;
}


.logo_title h1{
font-size: 30px;
color: white;
}


.logo_title h2{
font-size: 20px;
color: white;
}


.navi{
float: right;
}


.navi ul{
list-style: none;/*去除前面的黑點*/
margin-top: 75px;
}


.navi ul li{
display: inline-block;/*排列方式，排列到一行*/
font-size: 20px;
color: white;/*寫不寫都可以*/
margin-right: 20px;/*外填充距離*/
}


.navi ul li a{
color: white;
   border:solid 1px white;/*白色的方框*/
   border-radius: 6px;/*邊角設定弧度*/
   padding: 4px;/*上下內填充*/
   padding-left: 14px;/*左內邊距*/
   padding-right: 14px;/*右內邊距*/
}


.clear{
clear: both;
}
#wrapper{
margin: auto;
width: 960px;
margin-top: 20px;
}


.main{
   width: 640px;
   background-color: white;
   float: left;
   margin-right:10px;
   padding: 20px;
   border-radius: 4px;
}


.item{
margin-top: 14px;
padding-bottom: 20px;
border-bottom: dotted 1px #999;


}


.item_img{
float: left;
width: 100px;
}


.item_img img{
width: 80px;
}


.item_content{
    /*padding-left: 100px;*/
    /*float: right;*/
    margin-bottom: 10px;
}


.item_content h3{
font-size: 14px;
color: #FF6347;
margin: 0;
}


.item_info{
font-size: 12px;
font-style: italic;
margin:0;
color: #999;
}


.item_desc{
font-size: 14px;
margin: 0;
color: gray;
margin-top:10px; /*與h2有一定的邊距*/
border-left: solid 1px #ccc;/*設定左邊框*/
padding-left: 10px;/*設定左填充*/
}




.side{
   width: 220px;
   background-color: white ;
   float: right;
   padding: 20px;
   border-radius: 6px;
   margin-left: 10px;
   height: 450px;
}


.author_img{
   margin-top: 20px;
   width: 120px;
   margin:auto;
}


.author_img img{
width: 120px;
border:solid 1px #ccc;
border-radius: 4px;
}


.author_desc{
   text-align: center;
   border:solid 1px #ccc;
   border-radius: 4px;
   background-color: #eee;
   padding-top:10px;
   padding-bottom: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
}


.author_desc h4{
margin:0;
margin-bottom: 10px;
}


.author_desc p{
margin:0;
font-size: 14px;
margin-bottom: 10px;
}


.top_article h4{
font-size:14px;
font-style: italic;
margin:0;
border-bottom: dotted 1px #999;
border-top: 10px;
}


.top_article ul{
margin-left:0;
padding-left:10px;
list-style: none;


}


.top_article ul li{
margin:0;
font-size: 14px;
margin-top: 5px;


}


/*.site_info{
margin-top: 30px;
border-top: solid 1px #ccc; 
}


.site_info p{
font-size: 14px;
color: gray;
margin:0;
padding-left: 60px;
margin-top: 10px;
}*/
.site-info{
margin-top: 30px;
border-top: solid 1px #ccc;/*分界線*/
}


.site-info p{
font-size: 14px;
color: gray;
text-align: center;
/*padding-left: 60px;/*左填充*/
margin:0;
margin-top: 10px;
}


#footer{
margin: auto;
width: 960px;
border-top: dotted 1px #ccc;
margin-top: 20px;
}


.site_about{
float: left;
padding-top: 15px;
}


.site_about p{
font-size: 16px;
color: white;
}


.site_link{
float: right;
}


.site_link ul{
list-style: none;
margin-top: 30px;
}


.site_link ul li{
display: inline-block;
font-size: 14px;
margin-right: 10px;
color: white;
}


.site_link ul li a{
border-radius: 6px;
border:solid 1px white;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
color: white;
}

製作簡易的個人主頁(程式碼筆記）

//html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="This is a

製作html簡易個人主頁

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

簡潔風個人主頁（3） js背景圖片隨機切換

靜態頁面做完了，現在用js做一個背景圖片隨機切換的效果。 1.點選‘個人網站'這個字樣，實現body背景的切換。所以，首先獲取這兩個節點。 var body = document.body; var change_btn = document.getElementById("change

簡潔風個人主頁（2） css樣式設定

時間太久，差點忘記跟新了。靜態頁面完成之後，用css設定樣式。樣式主要分為兩大塊——背景圖設定、中間半透明標籤。 1.背景圖設定。背景圖片的設定，主要是將圖片能夠鋪滿整個螢幕。並且後期實現圖片切換的效果，將圖片路徑寫在background:url()內。 body { ba

IDEA+MAVEN 實現hiberate 一對一，一對多，多對多操作（程式碼筆記）

直接上步驟： 1.修改pom.xml,新增hibernate相關包 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0"

樹迴歸：CART演算法構建迴歸樹和模型樹（程式碼筆記）

分類迴歸樹（Classification And Regression Trees，CART）是一種構造樹的監督學習方法。和ID3決策樹作比較： 1. ID3每次直接用最佳特徵分割資料，即如果當前特徵有4個可能值，那麼資料將被分成4份，處理的是標稱型資料，不能直接處理連續

簡潔風個人主頁（1） html 靜態佈局

最近做了一個簡潔風個人網站主頁，和大家分享一下。介面如圖，（換了兩張背景圖片）：一、介面：背景為一組自定義圖片，中間一個透明標籤，標籤內包含header，content，footer三部分；二、

【KNN近鄰演算法】實現識別簡單數字驗證碼（演算法原理+程式碼筆記）

此筆記適合有一定python基礎，瞭解numpy科學計算庫的人，有一定線性代數基礎的人。對KNN演算法原理了解的更容易看懂，筆者水平受限，寫以下筆記主要目的是分享自己的學習過程以及便於以後複習檢視。 KNN 近鄰演算法實現原理：實現步驟： ①：處理資料

JavaScript製作元件特效及注意問題（個人整理筆記）

個人理解：所謂的動畫，就是利用定時器，把元素的屬性按某一規律變化的過程。在函式內利用引數當css屬性時，style[attr] <==> style.arr，比如arr等於border。注意問題 IE和其他瀏覽器的相容，IE的事件物件和其他瀏覽

潭州課堂25班：Ph201805201 django 專案第二十四課文章主頁多級評論資料庫設計，後臺程式碼完成 (課堂筆記）

載入新聞評論功能 1.分析業務處理流程：判斷前端傳的新聞id是否為空，是否為整數、是否不存在請求方法：GET url定義：'/news/<int:news_id>' 請求引數：url路徑引數引數型別前端是否必須傳描述

讀入優化~~~（個人學習筆記）

false == 學習學習筆記筆記 scanf ios sca tchar 基本模板：inline int read(){ int x=0,w=1; char ch=0; while(ch<‘0‘ || ch>‘9‘){if(ch==‘-‘)w=-1;ch=

CoreThink主題開發（九）使用H-ui開發博客主題之用戶個人主頁

.cn ref mas icon stat 用戶個人 html sta 感謝H-ui、感謝CoreThink！效果圖：這裏使用table布局 /Theme/Blog/User/Index/home.html <extend name="$_home_p

python控制結構、叠代器和生成器（個人筆記）

if while參考：https://docs.python.org/2.7/reference/compound_stmts.html#whilehttps://www.cnblogs.com/lclq/p/5586198.html （python的運算與表達式）https://www.zhihu.com/

彈性盒子的梳理（個人筆記）

只有一個數字 tween nts strong www 進行前行倒序 1.誰是彈性盒，誰寫（一般是父元素）Display:box 如果不兼容寫：display:-moz-box Display:-webkit-box; Display:-o-box;

js 數組方法（個人學習筆記）

rev 了解很多 com 過濾接收參數版本 push 操作數首先，創建數組的兩個方法：　　1.構造函數：　 var array = new Array();//新建一個空數組 var array1 = new Array(20);//新建一個長度為20位的空數組

js 字符串方法（個人學習筆記）

new substring for name var 基本正則表達 pattern 都是首先，創建數組的兩個方法：　　1.構造函數： var str = new String("a"); console.log(str);//"a" 　　2.字面量表示： var

js Math對象方法（個人學習筆記）

最大 eof null alert XP source floor app math.sqrt 方法： 1.丟棄小數部分,保留整數部分 parseInt(5/2) 2.向上取整,有小數就整數部分加1 Math.ceil(5/2) 3,四舍五入.

JQ ajax全局事件（個人學習筆記）

ron strong div sting UNC art append 屬性 res 作用：當你的頁面存在很多ajax事件的話，我們有一些信息是公共的，可以復用，我們可以用全局事件進行編寫，因為每一個ajax事件調用，都會觸發ajax全局事件。　　jquery的ajax方

Django中的ORM操作（個人筆記）

一、ORM 　　ORM：Object Relational Mapping(關係物件對映) 　　　　類名對應------》資料庫中的表名　　　　類例項對應---------》資料庫表裡的一行資料　　　　類屬性對應---------》資料庫裡的欄位　　　　obj.id obj.nam

吳恩達機器學習學習筆記（四）（附作業程式碼註釋）

吳恩達機器學習學習筆記（四）標籤：機器學習吳恩達機器學習學習筆記四代價函式與反向傳播Costfunction and Backpropagation 一代價函式 1邏輯分類的評價函式

製作簡易的個人主頁(程式碼筆記）

相關推薦