黑马程序员前端基础项目自学笔记 学成在线网页首页制作

准备工作

1.创建项目目录

• css文件夹中创建base.css:基础公共样式 清除默认样式、设置网页基本样式和index.css 首页样式
• image文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
• uploads文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
• index.html ：首页HTML文件

2.基础公共样式在base.css当中编写

• 清楚默认样式 

box-sizing: border-box; 可以防止盒子在设置padding和border时盒子的大小变化

list-style：none;  将列表前面的序号或者图案去掉

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
li {
  list-style: none;
}

• 设置通用样式

text-decoration: none;定义标准的文本。

body{
    font:14px/1.5 "Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    color: #333;
 }
 a {
    color:#333;
    text-decoration: none;
 }

3.引入CSS文件

引入css文件 先引入base清除样式 在引入index设置样式 ：避免样式设置不成功

<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">

4.版心居中

首先对网页整体进行观察可以得出网页整体在浏览器的中心分布 所以在index.css文件当中进行设置版心居中的样式 使用类选择器进行编写一个公共类 可供后面重复使用避免重复

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

头部区域

首先进行分析观察 发现头部区域属于版心居中在编写css时可以调用wrapper类进行实现前提时在定义class="wrapper" 进行调用 

<div class="wrapper"></div>

header区域布局:将头部区域分成4个小的区域：logo，导航栏，搜索栏，用户。

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

HTML：

<div class="header">
    <div class="wrapper">
        <!-- logo  -->
         <div class="logo">
           
         </div>
        <!--  导航  -->
          <div class="nav">
          
        </div>
        <!-- 搜索 -->
        <div class="search">
     
         </div>
         <!-- 用户 -->
         <div class="user">
            
         </div>
    </div>
</div>

css样式：

display：flex；：是一种布局方式。

使用flex布局 可以将4个div 在同一行展示 默认样式首行左对齐

 .header .wrapper{
    display: flex;
    padding-top: 29px;
 }

1.logo

logo重要功能：1.单机跳转到首页所以加入a标签

                         2.搜索引擎优化提升网站百度搜索排名

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

HTML：

<div class="logo">
        
            <h1><a href="#">学成在线</a></h1>
         </div>

css样式：

display：block;:将元素转成块状元素，拥有块状元素特点 

块状元素可以设置背景图片  用网站logo做背景图

.logo a{
    display:block;
    width: 195px;
    height: 41px;
    background-image: url(../images/logo.png);
    /* 网站logo用背景图 网站名称设置字体为0进行隐藏 */
    font-size: 0;
 }

2.导航栏

导航功能 ： 单击跳转页面

实现方法：

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

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

• 布局思路 li 设置 右侧 margin a 设置 左右padding

HTML：

<!--  导航 特殊功能 单机跳转页面 -->
          <div class="nav">
          <!-- 实现方法：ul>li*3>a 避免堆砌a标签 网站搜索排名降级-->
        <ul>
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
        </div>

CSS:

/* 导航栏 */
 .nav{
    margin-left: 102px;
   
 }
 /* 使用flex布局