杨老师课堂之网页设计实训

曾经终败给现在 2023-02-16 01:45 122阅读 0赞

//@TOC

# 学习目标 #

*  对实际开发中网站制作流程有一个整体认知
 *  掌握HTML+CSS网页布局与常见效果呈现方式
 *  能够独立完成电商类网站PC端首页、列表页、注册页制作
 *  掌握网站的部署上线流程

--------------------

你好！ 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。  
关于Hbuilder软件如何快速生成代码行，可[点此][Link 1]观看Hbuilder快速生成技巧

## 准备工作 ##

###### 1. 项目结构: ######

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ShopMall</td> 
   <td>项目的目录名称</td> 
  </tr> 
  <tr> 
   <td>images</td> 
   <td>样式类图片的目录</td> 
  </tr> 
  <tr> 
   <td>css</td> 
   <td>样式目录</td> 
  </tr> 
  <tr> 
   <td>upload</td> 
   <td>上传图片目录</td> 
  </tr> 
  <tr> 
   <td>fonts</td> 
   <td>字体目录</td> 
  </tr> 
  <tr> 
   <td>js</td> 
   <td>脚本目录</td> 
  </tr> 
 </tbody> 
</table>

###### 2.样式的模块化开发 ######

*  所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点
 *  有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
 *  本次应用程序就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
 *  **优点**:模块化开发具有重复使用、修改方便等优点

#### 效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlc2U3OTUy_size_16_color_FFFFFF_t_70] ####

[Link 1]: https://mryang.blog.csdn.net/article/details/106599454
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlc2U3OTUy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200607224210868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlc2U3OTUy,size_16,color_FFFFFF,t_70