CSS 第七天第八天小兔鲜儿以及经验总结_小兔鲜儿总结-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63889623/article/details/138733628

项目目录

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 ，一般存放到网站的根目录里面

favicon全称是（favorite icon）喜爱的图标

<!-- 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）

底部（footer）

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

结构：通栏 > 版心 > 轮播图（ ul.pic ）+ 侧导航（subnav > ul）+ 圆点指示器（ol）

布局：定位（子绝父相）

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

新鲜好物（goods）

结构：标题（title） + 内容（bd）

提示：多区域样式共用

生鲜（fresh）

标题结构：

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

内容（content）：

.left + .right > 商品（ul）

做项目时的经验


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

  /* right 定位右对齐：如果文字多了，向左撑开，可能盖住其他的内容 */
  /* right: 1px; */
  /* left 定位左对齐：文字多了，向右撑开 */

/* 图片 */
.banner .pic {
  display: flex;
  /* flex 布局，父级宽度不够，子级被挤小，不想挤小，增大父级尺寸 */
  width: 3720px;
}

  <!-- 顺序要求：先清除再设置 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">


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


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

属性选择器


/* 父级是flex布局，子级变弹性盒子：加宽高生效 */


/* vertical-align 行内块和行内垂直方向对齐方式 */
图片和文字垂直方向对齐
  vertical-align: middle;

rel="stylesheet" 说明关系是样式表
rel(relation)(关系的意思)

// 缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形
        object-fit: cover;

CSS 第七天第八天小兔鲜儿以及经验总结

项目目录

准备工作

SEO 三大标签

Favicon 图标

布局网页

版心

快捷导航（shortcut）

头部（header）

底部（footer）

banner

banner – 圆点

新鲜好物（goods）

热门品牌（brand）

生鲜（fresh）

最新专题（topic）

做项目时的经验