精美网站模板-HTML页面模板代码！精美企业网页模板欣赏

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

对于很多新手建站者来说，都想建立一个个人网站。 他们可能会在互联网上看到很多精美、优秀的企业网页模板，尤其是一些提供免费企业网站的自助建站平台。 在深入研究、借鉴其方法和技巧的同时，菜鸟网站建设者可以仔细观察那些网页模板的详细设计、模块布局、色彩使用方案等。

接下来小编凡客就给大家分享一系列精美的企业网页模板。 行业包括服装、旅游、文化、婚庆等，希望企业用户或者菜鸟可以借鉴。 当然，您也可以使用此网页模板，在此基础上融入您自己的创新设计。

花语商城

这套是服装店类型的网页模板，设计风格非常大气。 新手只需对产品稍加改动或者改变主题颜色就可以将其改造成自己的网页模板。

文化传媒

这是一款广告媒体企业网页模板，主题风格独特精美网站模板，科技旗帜鲜明，非常适合国外广告媒体公司使用。

互联网公司

这是一套针对科技感强、前卫的互联网公司的模板。 设计柔和而专业。

旅游网页模板

这是一套适合旅游、旅游的网页模板。 横幅直接采用旅游特色图片作为素材，能够吸引更多游客的关注。

婚庆行业网页模板

适合婚庆公司的官网网页模板不仅可以用于婚宴案例展示，还可以用于商业营销，一石二鸟。

凡客网站建设平台各行业网页模板

除了以上行业的网页模板外，根据细分行业的仔细分类，您还可以找到更多与行业相关的专业网页模板。 新手用户可以在各大自助建站平台上找到精美的网页模板精美网站模板，然后按照自己的设计理念融入到网页模板的设计中，这样可以防止网页模板“撞脸”，同时凸显网页的个性。更多的网站模板可以到达

目录

前言

以下是一些博主尝试自己建立网站的记录。

上一篇： electterm远程连接云服务器，部署环境并发布第一个静态页面

总目录：DIY网站系列总目录

上一篇文章写了连接云服务器并发布静态页面。 至此，所谓的“网站”终于有了一些看得见的东西，可惜始终破败不堪。 所以接下来的目标就是让网站看起来更好，实现一些功能。 本文只是记录如何用bootstrap构建几个简单的静态页面。

对了，补充一点内容：在阅读网站相关文章时，我们经常会听到“静态页面”和“动态页面”这两个词，那么哪些是“动态页面”，什么是“静态页面”呢？ 差别在哪里呢？

这里简单谈谈博主的个人看法。 我个人认为静态页面是“花哨但没用”的界面。 例如，我使用html构建了一个登录页面。 看起来像这样。 有两个填写账号和密码的框，还有一个提交的按钮。 但事实上，这只是为了观赏。 点击提交按钮进入页面。 完全没有变化，还是老样子，这是一个静态页面。 然后，我们更进一步，用代码完成登录逻辑，比如如何处理用户输入、如何验证用户名和密码、登录后如何跳转……这样，登录页面就“既内部和外部”，即使是动态翻页。 简单来说，静态页面是用来展示界面的，而动态页面则兼具展示功能和逻辑处理功能。 一般来说，后缀为.html的都可以归类为静态页面。

1. bootstrap简介

引导官方网站

什么是bootstrap，比较官方的介绍：“Bootstrap是最流行的HTML、CSS和JS框架，用于开发响应式布局、移动优先的WEB项目”。 说实话，什么是“响应式布局”博主也不是很清楚，但这并不影响我们使用它。 我们主要关注“框架”。

每个人都应该对html、css、js有一定的了解。 这些是构建网页所需的技术。 HTML 允许用一堆标签来描述图形界面。 CSS主要是一些固定的样式，用来控制字体，对于图形等网页元素的格式（如大小、颜色等），js的作用更大。 其功能之一就是“动态疗效”。 页面”，比如动画、轮播图片、游泳图标等等……当然，除了这些，js还有很多功能，有兴趣的可以自行了解，这里不再赘述。

而bootstrap是由前面的东西组成的一组“组件”，那么我们为什么要从原来的html开始构建网页呢。 比如我想要一个好看的输入框，我可以直接去bootstrap找到对应的样式，然后复制改一下。 我不必自己重写它； 如图所示）函数，直接找到bootstrap提供的样式，自己把图片扔进去。 如果你觉得bootstrap提供的样式不是很满意，你还可以更改它的源码，基于它做出你想要的独特样式...

二、bootstrap环境设计

bootstrap主要有两种导入形式。 本地导入需要下载文件并放到项目目录下。 操作有点麻烦，但是方便调试和查看代码； 而快速导入（通过cdn）相当于从云端导入，非常快捷方便，但是查看代码和调试不方便，两种方式各有优缺点。

(1)导出并下载bootstrap到本地

具体介绍可以参考官方英文文档

以及新手教程（推荐，博主自己主要学习的就是这个）

顺便说一句，菜鸟教程网站特别适合网络技术初学者。 他们的解释详细易懂，而且例子也很多，虽然名字有点刁钻……

博主这里讲的是下载和简单使用，我们步入

bootstrap的官方网站如下图所示。 如果您想下载最新版本，只需点击下载即可。 如果您想下载其他版本，请点击“全部发布”。 要下载版本 3，请单击“全部发布”

选择3.4

点击“下载引导程序”

下载后简单网站模板，解压。 解压后，应该如下所示。 有三个文件。 虽然最新版本没有字体文件，但是需要自己去官网下载。

下载 jQuery

有了上面的文件还不够，我们还需要下载一个叫“jQuery”的东西，jQuery官网，点击下载，进入如下界面

然后选择一个版本下载，我点击上面红色标记，出现如下界面

鼠标右键，点击另存为，保存到刚刚解压的bootstrap的js目录下

这样我们就完成了规划工作，接下来就是应用了。

（2）快速介绍（更方便）

只需在网页的head标签中直接添加以下几行即可，其中可以更改bootstrap和jquery的版本号。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

3. Bootstrap构建页面 3.1 Bootstrap导入项目

我这里使用的是eclipse，使用本地导出的方式导入bootstrap。 当然，你可以选择你喜欢的编程工具。 只需将规划的文件和网页文件放在同级目录下，然后按照以下格式导入即可（在html的head标签部分添加以下几行）

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

因为博主前面需要考虑升级网站，所以这里使用了jsp（Java Server Pages）。 至于jsp简单来说就是HTML的增强版简单网站模板，是javaweb技术体系的一部分。 可以嵌入Java代码来实现和前端交互等。不过暂时先不用担心这么多。 简而言之，在设置静态页面时，以.html结尾的文件可能与以.jsp结尾的文件相同。 jsp方便升级为动态页面。 另外，由于jsp技术是整个javaweb系统的一部分，所以我的前端自然要用Java来编写。 虽然现在jsp有点“老”了，但是对于博主来说，无论如何也只是想搭建一个网站，只要能用就行了。

至于为什么不使用更简单的php，这个很难说（反正也不是我不懂php的原因……）咳咳，好了，不说了，跑题吧。

3.2 Bootstrap构建简单页面

如何在eclipse中创建一个简单的网站项目我会在另一篇文章中记录。 Eclipse 创建一个新的简单网站 (web) 项目

在eclipse中新建一个“动态web项目”（动态网站项目），不用担心，我明明说的是构建静态页面，怎么新建一个动态网站项目，如果我不写动态部分的话，就是它是一个静态网站吗？

然后新建一个jsp文件，上面说了，不一定要是jsp，html就可以了，我这里就用jsp。 接下来的事情是编写代码来构建页面。 Bootstrap有一套网格结构。 至于哪种网格结构，简单来说，就是将一个网页通过容器（container）、行（row）和列（col-）划分成网状的形状。 具体介绍可以参考官网和新手教程，这里就不一一列举了。

简而言之，Bootstrap网格的基本结构大致如下。

<div class="container">     
    <div class="row">         >
       <div class="col-*-*"></div>   
       <div class="col-*-*"></div>      
    </div>
    <div class="row">...</div>
 </div>
 <div class="container">....

下面是我直接写的几页代码。 全部完成后，博主的项目结构如下所示

index.jsp（一般网站首页命名为index.xxx），为了装饰，我在页面中引入了很多图片，所以直接复制代码运行（引入bootstrap的情况下）会没有图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>微光落尘的个人空间</title>
	<script src="js/jquery-3.5.1.min.js"></script>
	<link href="css/bootstrap.min.css"  rel="stylesheet">
	<script src="js/bootstrap.min.js"></script>
	
    <style>
        .fakeimg {
            height: 200px;
            background: #F0FFFF;
        }
        .back-img{
            background-image:url(img/hometown1.jpg)
        }
    </style>
</head>
<body>
    <div class="jumbotron text-center back-img" style="margin-bottom:0" >
        <h1>欢迎来小尘空间</h1>
        <p>小站虽小，或有其妙</p>
    </div>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">导航栏</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.jsp">主页</a></li>
                    <li class="active"><a href="scenery.jsp">江山如画</a></li>
                    <li class="active"><a href="blog.jsp">博客专栏</a></li>
                    <li class="active"></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row">
         
           <div class="col-md-4">                     
                    <h2 class="text-primary">自我介绍...</h2>
                <div style="background: #F0FFFF">              
                    <p class="text-primary">代号：苍山沐风人<br>
                    座右铭：东方欲晓，晨光逐道<br>
                    兴趣爱好：南山牧马，北海垂杆...<br>                                                   
                    专业序列：逐道之尘<br>
                    附加信息：介于无危险和极度危险之间，建议小心接触，如果能在拜访的时候戴上龙灵鱼，他将非常高兴</p>
                    <p class="text-primary">补充说明： 以上都是瞎编的</p>         
                </div>
                                 
                    <h2 class="text-primary">网站访问参考手册</h2>
                    
                    <h5 class="text-info">说明：本手册没有什么可信度，信不信取决于读者的想法</h5>
                <ul style="background:#F0FFFF;"> 
                    <li class="text-primary">建议一、如果你在本站首页看到了让你感到奇怪的话语，不要惊讶，那是正常的。
                    （因为那都是我瞎编的，什么，你问我是谁，嗯，你或许可以试着猜猜看？猜对没有奖励哦！）</li>
                    <li  class="text-primary">建议二、如果你感觉有些无聊和烦闷，可以试着逛逛“江山如画”页面，或许这会让你感觉好点（虽然，但是，那里还只有几张...一些涂抹痕迹）</li>                                              
                    <li  class="text-primary">建议三、当你点击“博客专栏”，发现后续查看文章的操作都没有响应，不要惊慌，立即点击导航栏去到其它页面（因为博客功能我还没开发好）</li>
                    <li  class="text-primary">建议四、如果你逛完网站后想要和我说点什么，请点击主页的“给我留言”，你会很容易找到它，如果没有，请点击刷新，若还是没有，那......</li>
                    <li  class="text-primary">建议六、本网站合规合法，你不用担心本网站被封禁（因为我还没有备案）</li> 
                    <li  class="text-primary">最后，祝您参光愉快，天天开心！（对了，我在网站的某处留了一个彩蛋，你猜会在哪儿呢？）</li>       
                </ul>                           
          </div> 
                               
           <div class="col-md-8">
       		<h2 class="text-primary">美丽家乡</h2>
		    <div id="myCarousel" class="carousel slide">
			    
			    <ol class="carousel-indicators">
			        <li data-target="#myCarousel" data-slide-to="0"  class="active"></li>
			        <li data-target="#myCarousel" data-slide-to="1" ></li>
			        <li data-target="#myCarousel" data-slide-to="2" ></li>
			    </ol>   
			    
			    <div class="carousel-inner">
			        <div class="item active" >
			            <img src="img/hometown1.jpg" alt="First slide">
			            <div class="carousel-caption">标题 1</div>
			        </div>
			        <div class="item" >
			            <img src="img/hometown2.jpg" alt="Second slide">
			            <div class="carousel-caption">标题 2</div>
			        </div>
			        <div class="item" >
			            <img src="img/hometown3.jpg" alt="Third slide">
			            <div class="carousel-caption">标题 3</div>
			        </div>
			    </div>
			    
			    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			        <span class="sr-only">Previous</span>
			    </a>
			    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			        <span class="sr-only">Next</span>
			    </a>
		  </div>
                
        </div>
     
        </div>
    </div>
    <div class="jumbotron text-center" style="margin-bottom:0">
        <p style="color:#0000FF;font-size:30px"><a href="message.jsp">给我留言
                <span class="glyphicon glyphicon-pencil"></span>
            </a>
       </p>
       <br>
       <p>备案信息：暂无</p>
    </div>
</body>
</html>

blog.jsp（博客页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>微光落尘的个人空间</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .fakeimg {
            height: 200px;
            background: #F0FFFF;
        }
        .back-img{
            background-image:url(img/hometown1.jpg)
        }
    </style>
</head>
<body>
    <div class="jumbotron text-center back-img" style="margin-bottom:0" >
        <h1>欢迎来小尘空间</h1>
        <p>小站虽小，或有其妙</p>
    </div>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">导航栏</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.jsp">主页</a></li>
                    <li class="active"><a href="scenery.jsp">吟游赏景</a></li>
                    <li class="active"><a href="blog.jsp">博客专栏</a></li>
                </ul>
            </div>
        </div>
    </nav>  
    
	<ul class="list-group">
		<li class="list-group-item">
	        <span class="badge">新</span>
	        文章一：......
	    </li>
	    <li class="list-group-item">文章二：......</li>
	    <li class="list-group-item">文章三：......</li>
	    <li class="list-group-item">文章四：......</li>
	    <li class="list-group-item">文章五：......</li>
	    <li class="list-group-item">文章六：......</li>
	</ul>
</body>
</html>

scene.jsp（风景展示页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>微光落尘的个人空间</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">导航栏</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.jsp">主页</a></li>
                    <li class="active"><a href="scenery.jsp">吟游赏景</a></li>
                    <li class="active"><a href="blog.jsp">博客专栏</a></li>
                </ul>
            </div>
        </div>
    </nav>  
    
    <div id="myCarousel" class="carousel slide">
    
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0"  class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" ></li>
        <li data-target="#myCarousel" data-slide-to="2" ></li>
    </ol>   
    
    <div class="carousel-inner">
        <div class="item active" >
            <img src="img/pic1.jpg" alt="First slide">
            <div class="carousel-caption">“美丽校园”</div>
        </div>
        <div class="item" >
            <img src="img/pic2.jpg" alt="Second slide">
            <div class="carousel-caption">标题2</div>
        </div>
        <div class="item" >
            <img src="img/pic3.jpg" alt="Third slide">
            <div class="carousel-caption"">标题3</div>
        </div>
    </div>
    
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</body>
</html>

message.jsp（消息页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>微光落尘的个人空间</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .back-img{
            background-image:url(img/hometown1.jpg)
        }
    </style>
</head>
<body>
    <div class="jumbotron text-center back-img" style="margin-bottom:0" >
        <h1>欢迎来小尘空间</h1>
        <p>小站虽小，或有其妙</p>
    </div>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">导航栏</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.jsp">主页</a></li>
                    <li class="active"><a href="scenery.jsp">吟游赏景</a></li>
                    <li class="active"><a href="blog.jsp">博客专栏</a></li>
                </ul>
            </div>
        </div>
    </nav>  
    
    <form role="form" id="form1">
        <div class="form-group">
            <label for="name">tip:欢迎留言!!!</label>
            <textarea id="tarea" class="form-control" rows="6"></textarea>
             <br>  
                      
             <button type="submit" id="btn1_send class="btn btn-success">发送
             </button>
        </div>
    </form>
</body>
</html>

AdminLog.jsp（后台登录页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    
    <title>微光落尘的个人空间</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/dealEvent.js"></script>
    <style>
		.in_style{
		background-color:rgba(30,144,255,0.1);
		color:#1E90FF
		
		}
 body{
	   background:url("img/hometown2.jpg")  no-repeat center center;   /*加载背景图*/   /* 背景图不平铺 */
	   background-size:cover;  /* 让背景图基于容器大小伸缩 */
	   background-attachment:fixed;        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ 
	   background-color:#CCCCCC;   /* 设置背景颜色，背景图加载过程中会显示背景色 */
 }
    </style>
</head>
<body>
          
    <div class="text-center"  >
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">导航栏</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.jsp">主页</a></li>
                    <li class="active"><a href="scenery.jsp">吟游赏景</a></li>
                    <li class="active"><a href="blog.jsp">博客专栏</a></li>
                </ul>
            </div>
        </div>
    </nav>  
    
    <div>
        <h1>欢迎来小尘空间</h1>
        <p>网站后台传送门</p>
        </div>
    <div class="container">
        <div class="row" style="margin-top:30px">
    <div class="col-sm-4 col-md-offset-4">
        <form  id="form1" class="bs-example bs-example-form" role="form" method="post">
        <div class="input-group">
            <span class="input-group-addon control-label in_style">时空节点</span>
            <input type="text" name="username" class="form-control in_style" placeholder="">
        </div>
<br>
    <div class="input-group">
        <span class="input-group-addon control-label in_style">开启秘钥</span>
        <input type="password" name="password" class="form-control in_style" placeholder="">
    </div>
<br>
        <div class="input-group-btn">
    <button type="submit" id="b_log" class="btn btn-success" style="background-color:rgba(0,0,0,0.1);border:none;color:#1E90FF">点击传送</button>
        </div>
        </form>
        
    </div>
        </div>
    </div>
      </div>
</body>
</html>

最后补充几张跑起来的效果图

如果这篇文章对您有帮助，别忘了点赞哦！