HTML + CSS 核心笔记 （六）

网页制作

项目目录

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

  study

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

基础公共样式

清除默认样式 ，例如内边距、外边距、项目符号等等

设置 通用样式 ，例如：文字样式

/* 去除常见标签默认的 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;
}

<!-- 引入代码时，先清除，在设置 -->
     <link rel="stylesheet" href="./CSS/base.css">
     <link rel="stylesheet" href="./CSS/index.css">

版心效果

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

网页制作思路

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

2. CSS 实现思路

1. 画盒子 ，调整盒子范围 → 宽高背景色

2. 调整盒子 位置 → flex 布局、 内外边距

3. 控制 图片、文字 内容 样式

制作网页 – header 区域

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

标签结构：通栏 > 版心 > logo + 导航 + 搜索 + 用户

logo 制作技巧

logo 功能：

• 单击跳转到首页

• 搜索引擎优化 ： 提升 网站百度搜索 排名

实现方法：

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

• CSS 样式：

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

 <!-- logo -->
             <div class="logo">
                <!-- 添加 h1 和 文字 是为了提升百度搜索排名 -->
                <h1><a href="#">学成在线</a></h1>
             </div>

导航制作技巧（nav）

导航功能

• 单击跳转页面

实现方法：

• 标签结构：ul > li * 3 > a

• 优势：避免 堆砌 a 标签，网站搜索排名 降级

• 布局思路

li 设置 右侧 margin

a 设置 左右 padding

搜索区域（search）

实现方法：

• 标签结构：.search > input + a / button

.search a {
    width: 16px;
    height: 16px;
/*按理说，a 为行内元素，不能直接设宽和高，但是*/
/*父级如果是 flex布局 ，子级变成弹性盒子：加宽高就生效*/
    align-self: center;
    background-image: url(../images/search.png);
}

• 布局思路

div.search 标签 flex 布局，侧轴 居中 （垂直居中）

input 标签 flex: 1

.search input {
   flex:1;
   border: none;
   background-color: transparent;
   /*去掉表单控件的焦点框用 outline:none*/
   outline:none；
}

/*::placeholder 选中就是设置其 属性文字样式*/
.search input::placeholder{
    font-size: 14px;
    color: #999;
}

用户区域（user）

实现方法：

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

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

img {
vertical-align: middle;
}

网页制作 – banner 区域

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

 

左侧侧导航（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);
}

.banner .left a {
    /* 块级：宽度默认为父级的100% */
    display: block;
    height: 46px;
    background: url(../images/right.png) no-repeat right center;
    line-height: 46px;
    font-size: 16px;
    color: #fff;
}

右侧课程表（right）

实现方法：

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

.banner .right a {
    /* a 为行内元素 转为块以后 宽不用设置了 */
    display: block;
    height: 32px;
    background-color: #00a4ff;
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    border-radius: 10px;
}

精品推荐（recommend）

实现方法：

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

• 布局思路： flex 布局

精品课程（course）

实现方法：

• 标签结构：.hd + .bd

• 布局思路

盒子模型