HTml + CSS 核心笔记 （八）

项目目录

xtx-pc

• images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
• uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
• iconfont 文件夹：字体图标素材
• css 文件夹：存放 CSS 文件（link 标签引入）

base.css ：基础公共样式
common.css ：各个网页相同模块的 重复 样式，例如：头部、底部
index.css ：首页 CSS 样式
index.html ：首页 HTML 文件

准备工作

SEO 三大标签

SEO ： 搜索引擎优化 ，提升网站百度搜索排名
提升 SEO 的常见方法：

1. 竞价排名
2. 将网页制作成 html 后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. ......
   网页头部 SEO 标签：
   • title ：网页标题标签
   • description ：网页描述
   • keywords ：网页关键词

Favicon 图标

Favicon 图标：网页图标，出现在 浏览器标题栏 ，增加网站辨识度。
图标： favicon.ico ，一般存放到网站的 根目录 里面

<!-- 将其引入 用快捷键 link:favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

布局网页

版心

wrapper 版心宽度：1240px

快捷导航（shortcut）

结构：通栏 > 版心 > 导航 ul
布局： flex-end

头部（header）

结构：.header > logo + 导航 （nav）+ 搜索 （search） + 购物车 （cart）

<!-- logo -->
         <div class="logo">
            <!-- h1 a 标签里面加文字 为了提升搜索排名 -->
            <h1><a href="#">小兔鲜儿</a></h1>
         </div>

.header .search input {
    /* 浏览器优先生效 input 标签的默认宽度，所以 flex:1 不生效 */
    /* 解决方法：重置input 默认宽度 width:0 */
    flex: 1px;
    width: 0;
}

.header .cart i {
    /* 子绝父相 弄清除谁是父级 */
    position: absolute;
    top: 1px;
    /* 不用 right:0 原因：如果文字多了，会向左撑开 */
    /* left 如果文字多向右撑开就符合 */
    left: 15px;
    padding: 0 6px;
    height: 15px;
    background-color: #E26237;
    border-radius: 8px;
    font-size: 14px;
    color: #FFFEFE;
    line-height: 15px;
}

底部（footer）

结构：通栏 > 版心 > 服务（service）+ 帮助中心（help）+ 版权（copyright）

注意：以上代码样式均写到 comment.css 中

banner

结构：通栏 > 版心 > 轮播图 （ ul.pic ）+ 侧导航 （subnav > ul）+ 圆点指示器 （ol）
布局： 定位 （ 子绝父相 ）

​​​​​​/* 图片 */
.banner .pic {
    display: flex;
    /* flex 布局，父级宽度不够，子级被挤小了，就加大父级宽度为子级的n倍 */
    width: 3720px;
}

banner -- 圆点

结构：ol > li > i（li 是大圆，i 是小圆）

/* 选中时效果：li半透明 i 白色 */
.banner ol li:hover {
    background-color: rgba(255,255,255,.5);
}
.banner ol i:hover {
    background-color: #fff;
}

新鲜好物（goods）

结构： 标题 （title） + 内容 （bd）
提示：多区域样式共用

/* 新鲜好物 */
/* 标题-公共样式  减少代码量*/
.title {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 30px;
    height: 42px;
    /* background-color: pink; */
}
.title .left {
    display: flex;
    /* line-height: 42px; */
} 
.title .left h3 {
    margin-right: 35px;
    font-size: 30px;

}
.title .left p {
    align-self: flex-end;
    color: #A1A1A1;
}
.title .right .more {
    
    line-height: 42px;
    color: #A1A1A1;
}
.title .right .iconfont {
    margin-left: 10px;
}

热门品牌（brand）

标题结构：左侧（left）+ 右侧箭头（显示在标题外部： 定位 ）

生鲜（fresh）

标题结构：
右侧（right）> 菜单（ul） + 查看全部
内容（content）：
.left + .right > 商品（ul）

最新专题（topic）