整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
講 apache 虛擬網站 之前 ，我先給大家說說 怎么搭建 個人用戶主頁。
如果想為系統中每位用戶都建立一個獨立的網站，通常的方法只能是基于虛擬網站主機功能來部署出多個網站，但這未免會讓管理員感覺到很麻煩，而且在用戶管理自己網站的時候還可能碰到種種權限的限制，產生出很多不必要的工作。其實如果只是想為每位用戶建立獨立的網站，不妨試試httpd服務程序提供的個人用戶主機功能吧，這項功能可以讓系統內所有的用戶在自己的家目錄中管理個人的網站，訪問起來也非常容易。
第1步：開啟配置文件/etc/httpd/conf.d/userdir.conf 中的個人用戶主頁功能（配置文件默認是關閉的）
第二步：切換用戶，創建public_html目錄，給予755權限
為了演示好點 ，我這里 也新建了一個用戶，并設置了密碼
useadd feixiangkeji
密碼 ：feixiangkeji
切換到用戶下
創建文件夾public_html，寫入首頁文件
改變public_html的權限
然后 我們切換至 管理員 下重啟 httpd 服務
systemctl restart httpd
打開瀏覽器 輸入你的 網站IP地址 ，本機就用 http://127.0.0.1/~feixiangkeji (這里的feixiangkeji是我創建的那個用戶)
我們再次查看下
發現 報錯 ！！！！不用說 一定又是selinux 搞的鬼
我們用getsebool -a | grep http 查看一下 是不是什么東西 沒開
找到原因了 ，我們就來改變 SElinux的布爾值策略吧
setsebool -P httpd_enable_homedirs on （-P 的意思是永久寫入 ）
接著 我們再次重啟 httpd 服務試試
systemctl restart httpd
打開瀏覽器 ，輸入我們剛剛輸入的網址！！！！注意了 不是 單獨的IP地址 ，還要有你的用戶名（http://127.0.0.1/~feixiangkeji）
小編這里是使用的ssh登入的方式，在我windos 的瀏覽器中輸入Linux服務器的IP地址，進行訪問的（要注意了 ，如果linux 防火墻沒有做端口策略，你外面的機器是 不可能訪問到你的網站的 防火墻策略嘛 ，
簡單，firewall-cmd --add-service http --permanent 然后 也要重啟防火墻firewall-cmd --reload ）
所以 我這里訪問的地址是http://192.168.1.88/~feixiangkeji
緊接著我們輸入 剛剛創建用戶的賬號，密碼
當把個人用戶網站功能實現之后也會遇到一個很尷尬的顯示——或許用戶們并不希望直接就把網頁內容顯示出來，或者只想讓部分讀者看到里面的內容，這時就可以給網站上面加上口令驗證功能啦，給網頁內容增加一道安全防護吧。
第1步：需要先用htpasswd命令來生成密碼數據庫，-c參數代表第一次生成的意思，后面再分別追加上要生成到哪個文件中，以及驗證要用到的用戶名稱即可
（該用戶不必是系統中已有的帳戶）
htpasswd -c /etc/httpd/passwd 123 （123是我要指定的用戶，但我系統中卻沒有這個用戶存在）
建立密碼，連續輸入兩次
然后 需要再回去編輯一下個人用戶主頁功能的配置文件，把原本大約31-35行的參數信息修改成下列內容，其中#（井號）開頭的內容為劉遄老師添加的注釋信息，您無需照抄進去，保存退出后重啟httpd服務程序即可生效。
<Directory "/home/*/public_html">
AllowOverride all
#剛剛生成出來的密碼驗證文件保存路徑
authuserfile "/etc/httpd/passwd"
#當用戶嘗試訪問個人用戶網站時的提示信息
authname "My privately website"
authtype basic
#用戶進行帳號口令登陸時需要驗證的用戶名稱
require user 123
</Directory>
！！！！保存退出
systemctl restart httpd 重啟Httpd 服務
此時用戶再想訪問某個用戶的個人網站時，就必須要輸入密碼后才能正常訪問了，另外驗證時候的帳號和密碼是用htpasswd命令生成的專門用于網站登陸的口令密碼，而不是咱們系統中的用戶密碼，這一定不要搞混了哦，登陸界面如下圖所示：
這樣我們的 個人網站 加密訪問也就搭建好了！！！
歡迎大家在下面留言區評論 ！！！下一期 給大家講解 apache 的虛擬網站的搭建，是基于域名，還是基于IP 更是基于 D端口
HTML+CSS+JS網頁設計與制作，我的學校網頁設計與制作實例， 本實例適合于初學HTML+CSS+JS的同學。該案例里面有div+css的樣式布局設置，這個實例比較全面，有一級頁、二級頁、詳情頁、輸入表單等，共6個頁面。本文將介紹如何通過從零開始設計我的學校網站，并將其轉換為代碼的過程來實現設計與制作。（網頁設計與制作分享。源碼分享。）
1.網頁作品簡介方面 ：青綠色簡約風格，div+css布局。主要有：首頁、關于暨大、學校新聞、新聞詳情頁、校園風光、 聯系我們等總共6個頁面html下載。
2.網頁作品技術方面：使用CSS制作了網頁背景圖、鼠標經過及選中導航變色效果等。 首頁制作了搜索表單。
3.網頁作品布局方面：網頁布局整體為LOGO、導航、主體內容布局。子頁面多種布局，圖片居中布局，文本描述對齊方式設置了左對齊。
4.網頁作品編輯方面：此作品為我的學校網頁設計題材，代碼為 html+css 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、Vscode 、Sublime 所有編輯器均可使用）
視頻演示：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
截圖演示：
首頁
關于暨大
學校新聞
新聞詳情頁
校園風光
聯系我們
文件目錄：
HTML代碼：
首頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 頭部 -->
<div class="top-box">
<!-- logo -->
<img src="./images/logo2.svg" class="logo" alt="" />
<div class="right-box">
<a href="#">新門戶</a>
<a href="#">郵件</a>
<a href="#">網上服務大廳</a> |
<a href="#">圖書館</a>
<div class="in-row">
<input type="text" placeholder="請輸入您的關鍵詞">
<button class="button">搜索</button>
</div>
</div>
</div>
<div class="header">
<!-- logo -->
<img src="./images/hw_zxdj.png" class="logo" alt="" />
<!-- 導航欄 -->
<div class="nav">
<ul>
<li>
<a class="active" href="./index.html" target="_self">
<span title="首頁">首頁</span>
</a>
</li>
<li>
<a href="./about.html" target="_self">
<span title="關于暨大">關于暨大</span>
</a>
</li>
<li>
<a href="./news.html" target="_self">
<span title="學校新聞">學校新聞</span>
</a>
</li>
<li>
<a href="./scenery.html" target="_self">
<span title="校園風光">校園風光</span>
</a>
</li>
<li>
<a href="./contact.html" target="_self">
<span title="聯系我們">聯系我們</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 主內容 -->
<div class="main-content">
<div class="banner">
<img src="./images/banner.jpg" alt="" />
</div>
<div class="project-content">
<p class="content-title">暨南大學</p>
<div class="detail-content">
<div class="detail-pic">
<img src="./images/dasdasda.jpg" alt="" />
</div>
<div class="detail-desc">
<p>暨南大學是中國第一所由政府創辦的華僑學府。</p>
<p>“暨南”二字出自《尚書·禹貢》：“東漸于海，西被于流沙，朔南暨，聲教訖于四海。”意即面向南洋，將中華文化遠播到五洲四海。
</p>
<p>學校目前是中央統戰部、教育部、廣東省人民政府共建的國家“雙一流”建設高校，直屬中央統戰部管理。</p>
<p> 暨南大學是中國歷史最悠久的大學之一。學校的前身是1906年清政府創立于南京的暨南學堂，后遷至上海，1927年更名為國立暨南大學。</p>
</div>
</div>
<p class="content-title">校園風光</p>
<div class="content-list content-list2">
<ul>
<li>
<div class="cover-pic">
<img src="./images/xy6.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy7.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy8.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy9.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy10.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy11.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy12.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy13.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
</ul>
</div>
<p class="content-title">媒體暨大</p>
<div class="content-list content-list2">
<video src="https://osvc-mediaxbase.jnu.edu.cn/media/mediax/media/202312/25/51c2c04451825398f8c8b734.mp4" class="video" controls></video>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="contact-container">
<div class="contact-title">
<p>聯系</p>
<p>Contact</p>
</div>
<div class="contact-content">
<p class="c-name">木番薯科技</p>
<div class="c-addr">
<p>地 點：廣州市天河區花城大道666號</p>
<p>郵編：510000</p>
</div>
<div class="c-addr">
<p>公眾號名稱：木番薯科技</p>
<p>公眾號號碼：mengchatchat91</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>也適用于：大學生網頁作業制作 (HTML+CSS)、大學生HTML期末大作業、web前端期末大作業、web課程設計網頁規劃與設計、我的學校網頁設計作業成品、HTML+CSS+JS網頁設計期末課程大作業等。
css樣式：
多學員在學習的過程中都遇到過這樣的問題：為什么老師講的我都能聽懂，然而做起來卻總是諸多問題？千鋒重慶校區老師告訴你，其實這是正常現象，誰也不能幾天就成為大師，你的實踐還太少了！練習多了，經驗多了，靜態網頁自然也就手到擒來。
靜態的網頁其實就是由兩部分組成，一個是底層結構HTML，另外一個就是負責修飾結構的CSS。其實書寫靜態網頁就像小時候過家家，首先得把需要的家庭成員找齊了，即首先考慮要做一個什么樣的網站，例如一個綜合類網站包括：搜索框、導航、文章類別模塊、文章標題以及一部分廣告板塊；一個博客主頁包括：導航、文章縮略、文章搜索、文章導航以及沒有顯示但可能會有的評論區。
寫頁面的時候是有劇本的，這個劇本指網頁設計圖，或者某個現有網頁，建議大家在模仿網上現有網頁的時候利用瀏覽器自帶的截圖功能，把整個完整的頁面截取下來，QQ瀏覽器，360瀏覽器都可以做到。這樣的優點在于可以利用PS自己一步步測量數據、切圖都做到親力親為，并且做到了頁面數據的精準度，而不是隨意的給數據，或者是利用瀏覽器的F12功能查看原網頁的數據。
按照設計好的劇本接著就可以找對應的成員了，例如百度網頁從上往下分為導航頭部、中間logo和表單、尾部二維碼和文字，相對來說頁面的整體布局是比較簡單的，當然還有很多不同類型的頁面，布局要復雜一些。
當看到一個網頁時，需要在腦海當中對頁面進行一個簡單的掃描，如果把頁面當成一張紙，要怎么樣從大到小一點點分割。當有了初步的認識之后，就可以把這些東西轉化成HTML結構，所有不同顏色的框框在寫的時候用的都是DIV。
從上往下，從大到小一點點先把某個模塊以不同的顏色色塊利用代碼堆積出來。保證大的模塊布局沒問題之后，在往里面放一些小的東西，比如圖片img、表單form input、文字、超鏈接a、列表ul li，這時候簡單的頁面結構就出來了。
接下來要把寫好的結構進行美化，不然頁面就會一團亂麻，沒有美感，而網頁當中潤色部分是用CSS來做的。這個環節需要更加細心，例如百度首頁導航紅色框整體在綠色框的右邊，需要給紅色框添加float：right；紅色框里面文字的字號大小，字體，字體顏色，水平間距，垂直間距都需要一點點寫。如果在寫的過程中遇見了問題，可以借助Chrome瀏覽器的調試功能，哪里錯了用箭頭點哪里，結構看左邊，CSS看右邊，看看CSS屬性有沒有顯示，有沒有劃掉，有沒有黃色報錯等等。
在做頁面時，需要大量的練習，才可以熟能生巧。一個頁面寫完之后，總結一下這個頁面在書寫過程中遇到了哪些問題，是怎么解決的，為什么這樣解決，深入思考這個模塊的這個效果可不可以用其他的方法來實現，以做到舉一反三。
千鋒重慶HTML5大前端培訓，配合實戰項目講解網站頁面布局，讓你從容應對HTML、CSS的學習，基礎打好了，才能更有信心面對之后的挑戰。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
