如何编写一个简单的企业门户网站（静态）

偏执的太偏执、 2022-11-01 05:29 188阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]

**1.环境要求：**

*  开发工具及版本：Sublime3
 *  开发使用的技术：CSS+HTML+JS

**2.准备工作：**

*  创建必须的文件和文件夹
 *  打开Sublime
 *  在index页面引用js和css

**3.详细设计（代码后面给出）**

**3.1页眉设计**  
![在这里插入图片描述][20210224125116254.png]  
**实现思路：**  
①制作左上方logo，注意上边距和左边距的距离。  
②制作菜单：注意菜单的位置、间距、打开效果。  
③右侧的用户交互区：注意右边距的位置、水平位置。  
④页眉区的尺寸和距离，可以参照下方的banner区域的大小来设定。

**实现细节：**

*  如何去掉列表前的小圆点？如何设置 li 的位置。  
    答：list-style：none；  
    对 li 设置外边距(margin)和内边距(padding)都可以调整它的位置。  
    如图盒子模型所示，中间的即为内容，内容和边框之间有一个内边距，就是padding，边框外面可以设置外边距，就是margin。  
    ![在这里插入图片描述][20210224130155633.png]
 *  把注册和登录写成 li ，它们是垂直显示的，如何让他们边水平？  
    同样对 li 设置浮动即可。

**3.2 banner区域制作。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]  
**实现细节：**

*  页面的整体宽度可以参照banner区的大小进行设定，如图图片宽度为1200px，即可将页眉区宽度也设置为1200px。
 *  图片移动后左右距离不一致怎么办？  
    答：可以设置margin:25px auto;  
    margin有两种设定方法，margin：上 右 下 左；或者margin：上下 左右；  
    margin：25px auto；就是上下为25px, 左右自动。也称为**响应式布局**，随页面宽度的变化而变化。
 *  当点击菜单时，把图片挤下去了怎么办？  
    ![在这里插入图片描述][20210224131513420.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]  
答：可以将子菜单的定位设置为绝对定位，position：absolute；

*  子菜单的字显示在图片上不清晰怎么办？  
    答：可以给li文字设置透明效果，opacity：0.5；再对ul设置个背景色即可。  
    ![在这里插入图片描述][20210224131818417.png]

**3.3 商品展示区**  
分析每个商品的构成要素：如图有商品图片、名称、简介、价格、购物车、独立边框、底纹等。

实现细节：

*  如何实现商品的整体排布？  
    答：可以使用 ul 实现。
 *  对于商品名称和简介相对于图片的位置的处理，可能在图片下面或右边？  
    答：该网站是在图片的下边，为了方便改动，我们把这部分单独放在一个div里，**有改变则用div。**
 *  购物车图片在该背景中，居中的实现也可使用 text-align: center;  
    ![在这里插入图片描述][20210224132605270.png]  
    设置为圆角矩形 border-radius: 5px;  
    ![在这里插入图片描述][20210224132813986.png]
 *  商品展示的边框阴影效果实现：  
    box-shadow:0 0 3px 3px \#ccc  
    参数依次为：水平、垂直、模糊距离（渐变效果）、阴影尺寸、颜色。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]
 *  如上图，通过给整体设置一个背景色，使得商品的白色背景色更为突出。

**3.4 翻页和页脚区设计较为简单参考详细代码**  
在最后页脚使用了span标签，该标签为行级元素。而div是块级元素。

**图片资源：**  
链接：https://pan.baidu.com/s/1SZEeJ4LzZVeumb0Ym4h6LQ  
提取码：rhsi

index.html

<!DOCTYPE html>
    <html>
    <head>
    	<title>商城</title>
    	<script type="text/javascript" src="js/index.js"></script>
    	<link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
    
    	<div class="header">
    		<div class="logo">
    			<img src="image/logo.png">
    		</div>
    		<div class="menu" onclick="showMenu()" onmouseleave="showMenu1()">
    			<div class="menu_title"><a href="###">内容分类</a></div>
    			<ul id="title">
    				<li>现实主义</li>
    				<li>抽象主义</li>
    			</ul>
    		</div>
    		<div class=auth>
    			<ul>
    				<li> <a href="#">注册</a></li>
    				<li> <a href="#">登录</a></li>
    			</ul>
    		</div>
    	</div>
    
    	<div class="content">
    		<div class="banner">
    			<img src="image/welcome.png">
    		</div>
    		<div class="img-content">
    			<ul>
    				<li>
    					<img src="image/wumingnvlang.jpg" class="img-li">
    					<div class="info">
    						<h3>无名女郎</h3>
    						<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.</p>
    						<div class="img-btn">
    							<div class="price">￥5000</div>
    							<a href="#">
    								<div class="btn">
    									<img src="image/cart.svg">
    								</div>
    							</a>
    						</div>
    					</div>
    				</li>
    				<li>
    					<img src="image/wudaojiaoshi.jpg" class="img-li">
    					<div class="info">
    						<h3>舞蹈教室</h3>
    						<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.</p>
    						<div class="img-btn">
    							<div class="price">￥5000</div>
    							<a href="#">
    								<div class="btn">
    									<img src="image/cart.svg">
    								</div>
    							</a>
    						</div>
    					</div>
    				</li>
    				<li>
    					<img src="image/songshulinzhicheng.jpg" class="img-li">
    					<div class="info">
    						<h3>松树林</h3>
    						<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.</p>
    						<div class="img-btn">
    							<div class="price">￥5000</div>
    							<a href="#">
    								<div class="btn">
    									<img src="image/cart.svg">
    								</div>
    							</a>
    						</div>
    					</div>
    				</li>
    				<li>
    					<img src="image/richuyinxing.jpg" class="img-li">
    					<div class="info">
    						<h3>日出印象</h3>
    						<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.</p>
    						<div class="img-btn">
    							<div class="price">￥5000</div>
    							<a href="#">
    								<div class="btn">
    									<img src="image/cart.svg">
    								</div>
    							</a>
    						</div>
    					</div>
    				</li>
    				<li>
    					<img src="image/wen.jpg" class="img-li">
    					<div class="info">
    						<h3>温</h3>
    						<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.</p>
    						<div class="img-btn">
    							<div class="price">￥5000</div>
    							<a href="#">
    								<div class="btn">
    									<img src="image/cart.svg">
    								</div>
    							</a>
    						</div>
    					</div>
    				</li>
    				<li>
    					<img src="image/hongmofangde wuhui.jpg" class="img-li">
    					<div class="info">
    						<h3>红磨坊的舞会</h3>
    						<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.</p>
    						<div class="img-btn">
    							<div class="price">￥5000</div>
    							<a href="#">
    								<div class="btn">
    									<img src="image/cart.svg">
    								</div>
    							</a>
    						</div>
    					</div>
    				</li>
    			</ul>
    		</div>
    
    		<div class="page-nav">
    			<ul>
    				<li><a href="#">首页</a></li>
    				<li><a href="#">上一页</a></li>
    				<li><span class="first-page">1</a></li>
    				<li><a href="#">2</a></li>
    				<li><a href="#">3</a></li>
    				<li><a href="#">4</a></li>
    				<li><a href="#">5</a></li>
    				<li><a href="#">…</a></li>
    				<li><a href="#">98</a></li>
    				<li><a href="#">99</a></li>
    				<li><a href="#">下一页</a></li>
    				<li><a href="#">尾页</a></li>
    			</ul>
    		</div>
    	</div>
    
    	<div class="footer">
    		<p><span>M-GALLARY</span>©2017 POWERED BY IMOOC.INC</p>
    	</div>
    </body>
    </html>

index.css

*{
        
    	margin:0px;
    	padding:0px;
    }
    
    body{
        
    	background-color:#F5F5F5;
    }
    
    .header{
        
    	margin:20px auto;
    	width:1200px;
    }
    
    .header .logo{
        
    	float:left;
    	position:relative;	
    }
    
    .header .menu{
        
    	float:left;
    	position:relative;
    	margin-top: 13px;
    	margin-left:20px;
    	text-align:center;
    }
    
    .header .menu .menu_title{
        
    	border-bottom:1px solid black;
    	padding-bottom:15px;
    	width:80px;
    }
    
    .header .menu .menu_title a{
        
    	text-decoration: none; /*去掉下划线*/
    	color:black;           /*换成黑色*/
    }
    
    .header .menu ul{
        
    	display:none;
    	position:absolute;
    	width:80px;
    	opacity:0.5;
    	background-color:white;
    }
    
    .header .menu ul li{
        
    	list-style:none;
    	margin-top:20px;
    }
    
    .header .auth{
        
    	margin-top:12px;
    	float:right;	
    }
    
    .header .auth ul li{
        
    	float:left;
    	list-style:none;
    	margin-right: 60px;
    }
    
    .header .auth ul li a{
        
    	text-decoration: none;
    	color:black;
    }
    
    .content{
        
    	width:1200px;
    	margin:25px auto;
    }
    
    .content .banner img{
        
    	margin-top:20px;
    }
    
    .img-content{
        
    	width:1260px;
    }
    
    .img-content ul li{
        
    	float:left;
    	list-style:none;
    	width:360px;
    	margin-right:60px;
    	margin-top:30px;
    	height:500px;
    	box-shadow:0 0 3px 3px #ccc;
    	background-color:#FFFFFF;
    }
    
    .img-content .info h3{
        
    	font-size:25px;
    	color:red;
    	margin:25px auto;	
    }
    
    .info{
        
    	margin-left:30px;
    	margin-right: 30px;
    
    }
    
    .img-content .info p{
        
    	font-size:14px;
    	line-height: 25px;
    	margin-bottom:20px;
    }
    
    .img-content .info .img-btn .price{
        
    	font-size:20px;
    	color:red;
    	float:left;
    }
    
    .img-content .info .img-btn .btn{
        
    	width:60px;
    	height:30px;
    	background-color:red;
    	text-align: center;
    	float:right;
    	margin-right:20px;
    	border-radius:5px;
    }
    
    .img-content .info .img-btn .btn img{
        
    	width:25px;
    	margin-top: 5px;
    }
    
    .content .page-nav{
        
    	width:1200px;
    	height:120px;
    	line-height:120px;
    	overflow: hidden;
    }
    
    .content .page-nav ul{
        
    	margin:auto;
    	overflow: hidden;
    	width: 500px;
    }
    .content .page-nav ul li{
        
    	float:left;
    	margin-right:20px;
    	list-style:none;
    }
    
    .content .page-nav ul li a{
        
    	text-decoration:none;
    	color:black;
    }
    
    .content .page-nav .first-page{
        
    	border-radius:50%;
    	background-color:#c5c5c5;
    	padding:3px 9px;
    }
    
    .footer{
        
    	width:1200px;
    	height:100px;
    	margin:60px auto;
    	border-top:1px solid #ccc;
    	overflow: hidden;
    }
    
    .footer p{
        
    	text-align:center;
    	line-height:80px;
    }
    
    .footer span{
        
    	color:#ff1493;
    }

index.js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]: /images/20221024/91e9e277ea454b618848f56a6f8962a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]: /images/20221024/da903f518ce84a049f059843b82a6a8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]: /images/20221024/9071e3c128754632963b4b047f481305.png
[20210224125116254.png]: /images/20221024/51bba6182cf7446ca42f0540cb0587ad.png
[20210224130155633.png]: /images/20221024/21f1e757adb4407aae6e0b8c6bc016da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]: /images/20221024/0706f0599fa34005943ef4ab98d96a05.png
[20210224131513420.png]: /images/20221024/81f96cdc92ef4329a2d39f93c5a23f93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]: /images/20221024/17623902301a4fb4a9778f0ab4b5bf70.png
[20210224131818417.png]: /images/20221024/99d7b5297e264443b47b3c63f0dccfb4.png
[20210224132605270.png]: /images/20221024/38e1538275b44d0aabeadb286d6900eb.png
[20210224132813986.png]: /images/20221024/65084e64029d47149643ca94f968d4e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]: /images/20221024/82b59b2433384819a629bc0c34246f9f.png