整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
讲 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小时内与您取得联系。
