当前位置：首页 > article >正文

HTml + CSS 核心笔记（八）

article 2024/10/22 4:45:32

项目目录

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;
}

生鲜（fresh）

标题结构：

右侧（right）> 菜单（ul） + 查看全部

内容（content）：

.left + .right > 商品（ul）