HTML+CSS自学制作的第一个网页

准备工作

基础公共样式

网页结构分析

logo

导航制作技巧

写代码过程中的一些不懂的地方

display:flex;

鼠标滑过，如果让a标签产生效果

如何去掉表单控件的焦点框

如何改变表单控件placeholder的文字效果

flex: 1;

css中align-self属性是什么

vertical-align 行内块和行内垂直方向对齐方式 

flex换行

如何让单行文本居中显示

Text-align

网页效果

准备工作

基础公共样式

在正式制作网页之前可以建立一个清除默认样式的文件base.css，这可以减轻一些重复的代码，提高我们的写代码效率。下面是一些默认样式的范例：

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

网页结构分析

正式开始写代码之前，我们应该分析整个网页的布局，然后按模块书写。不然会使我们的代码非常混乱，后期改起来非常麻烦。那么具体要如何布局呢？

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

我们以下面这张图片为例，分析精品推荐 HTML CSS这一行以上的所有版式。首先我们可以看到这些内容大致可以分为两个板块，因此我们不妨定义第一个区域为head，第二个区域为banner。

在head区域部分，我们可以画一个和浏览器宽度相同的盒子（不写宽度，只写高度就可以画出和浏览器宽度）。然后我们可以看到head部分大致有四部分内容，第一个部分是我们的学成在线logo，第二部分是导航栏（首页 课程 职业规划），第三个部分是搜索栏，第四个部分是用户。因此，我们可以用四个div标签划分四个区域的内容。

logo

logo功能：

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

实现方法

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

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

2.CSS实现思路

（1）画盒子，调整盒子范围：宽高背景色

（2）调整盒子位置——>flex布局，内外边距

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

导航制作技巧

导航功能：单击跳转页面

实现方法：标签结构ul>li*3>a

布局思路

• li设置右侧margin
• a设置左右padding

搜索和用户部分同理，这个不再赘述

banner区域-布局

display:flex;

左侧导航栏

实现方法：.left>ul>li*9>a

右侧课程表：.right>h3+.content

写代码过程中的一些不懂的地方

display:flex;

flex（弹性盒子布局）

什么是弹性盒子？

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item）。
注：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

space-between：两端对齐，项目之间的间隔都相等。

flex相关知识： display:flex(弹性盒子布局)详解_displayflex是什么意思-CSDN博客

鼠标滑过，如果让a标签产生效果

/* actvie 类选择器，表示默认选中的a */
.nav li .active,
.nav li a:hover {
  border-bottom: 2px solid #00a4ff;
}

如何去掉表单控件的焦点框

/* 去掉表单控件的焦点框 */
   outline: none;

如何改变表单控件placeholder的文字效果

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

flex: 1;

『前端大白话』之 “flex:1” - 掘金 (juejin.cn)

css中align-self属性是什么

css中align-self属性是什么-CSDN博客

vertical-align 行内块和行内垂直方向对齐方式 

  本网页使用vertical-align: middle;让头像和id中线对齐

【CSS】vertical-align 垂直对齐 ( 块级元素对齐 | 行内元素 / 行内块元素对齐 | 基线对齐 | 垂直居中 | 顶部对齐 | 底部对齐 )_css文字基线对齐-CSDN博客

如何选中li中最后一个元素

.recommend ul li:last-child a {

  border-right: 0;

}

flex换行

如果不写这个代码，flex会自动压缩内容，出现不换行的效果

flex-wrap: wrap;

如何让单行文本居中显示

设置文本行距等于盒子的height

Text-align

CSS text-align 属性 (w3school.com.cn)