WEBSTORM前端 —— 第2章：CSS —— 第7节：网页制作1（学成在线）

航Hang*

已于 2025-05-11 16:39:02 修改

阅读量1k

点赞数 28

分类专栏： webstorm 文章标签：前端 webstorm css html5 css3 c4前端

于 2025-05-11 16:30:54 首次发布

本文链接：https://blog.csdn.net/2401_82750246/article/details/147874473

版权

webstorm 专栏收录该内容

12 篇文章

订阅专栏

1.项目目录

网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。

images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
css 文件夹：存放 CSS 文件（link 标签引入）
base.css：基础公共样式，例如：清除默认样式、设置网页基本样式
index.css：首页 CSS 样式
index.html：首页 HTML 文件

2.基础公共样式

清除默认样式，例如内边距、外边距、项目符号等等
设置通用样式，例如：文字样式

/* 去除常见标签默认的 margin 和 padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 去除列表默认样式 */
li {
list-style: none;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 14px/1.5 "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
sans-serif;
color: #333;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}

3.版心效果

.wrapper {
margin: 0 auto;
width: 1200px;
}

4.网页制作思路

1. 布局思路：先整体再局部，从外到内，从上到下，从左到右

2. CSS 实现思路

画盒子，调整盒子范围 → 宽高背景色
调整盒子位置 → flex 布局、内外边距
控制图片、文字内容样式

5.制作网页 – header 区域

5.1header 区域-布局

通栏：宽度与浏览器窗口相同的盒子

标签结构：通栏 > 版心【display: flex;】 > logo + 导航 + 搜索 + 用户

5.2logo 制作技巧

①logo 功能：

单击跳转到首页
搜索引擎优化：提升网站百度搜索排名

②实现方法：

标签结构：h1 > a > 网站名称（搜索关键字）
CSS 样式：

.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png);
/* 隐藏文字 */
font-size: 0;
}

5.3导航制作技巧（nav）

①导航功能：单击跳转页面

②实现方法：

标签结构：ul > li * 3 > a
优势：避免堆砌 a 标签，网站搜索排名降级
布局思路：li 设置右侧 margin a 设置左右 padding

5.4搜索区域（search）

实现方法：

• 标签结构：.search【display: flex;】 > input + a / button

• 布局思路：div.search 标签 flex 布局，侧轴居中（垂直居中） input 标签 flex: 1

5.5用户区域（user）

实现方法：

• 标签结构：.user > a > img + span

• 布局技巧：图片、文字垂直方向居中

6.网页制作 – banner 区域

6.1banner 区域 – 布局

结构：通栏banner > 版心 > .left + .right

6.2左侧侧导航（left）

实现方法：

• 标签结构：.left > ul > li *9 > a

• 布局思路

a 默认状态：背景图为白色右箭头

a {
background: url(../images/right.png) no-repeat right center;
}

a 鼠标悬停状态：背景图蓝色右箭头

a:hover {
background-image: url(../images/right-hover.png);
}

6.3右侧课程表（right）

实现方法：

• 标签结构：.right > h3 + .content

6.4精品推荐（recommend）

实现方法：

• 标签结构：.recommend > h3 + ul + a.modify

• 布局思路：flex 布局

6.5精品课程（course）

实现方法：

• 标签结构：.hd + .bd

• 布局思路：盒子模型

6.6精品课程-标题区域（hd）

思路：“标题”与“查看全部” 各个区域样式复用

• 标签结构：.hd > h3 + a.more

• CSS 样式：a.more 设置箭头背景图

.hd .more {
padding-right: 20px;
background: url(../images/more.png) no-repeat right center;
}

6.7精品课程-内容区域

思路：“课程卡片”各个区域样式复用

标签结构：.bd > ul > li > a

CSS 样式：flex 布局

.bd ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

6.8学科课程

标签结构：.hd（复用样式） + .bd

6.9学科课程 – 标题

标签结构：h3 + ul + a.more

tab 栏 / 选项卡：菜单个数与内容个数相同

6.10学科课程-内容

标签结构：.left + .right > .top + .bottom

6.11版权区域（footer）

标签结构：通栏 > 版心 > .left + .right > dl