2024/10/10Wiki--浏览次数--访问次数--跳出率--平均停留

Html和CSS学习

自己正经开始学编程的第一门语言！

16. 品优购项目下篇-主体与页面开发

16.1 项目主体模块制作

16.1.1 首页制作

main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css， 就不要写在common.css中了

画红色线处才是main主体部分，左边那部分是与公共部分带有联系的，所以归于公共部分

main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，这样就会被公共部分给挡住了，给高度就不用清除浮动
main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块
main 里面包含右侧盒子，宽度为 250像素，右浮动，newsflash 新闻快报模块

结构实例代码：

CODE

.box {
  float: left;
}

样式实例代码：

CODE

.box {
  float: left;
}

左侧focus模块制作

结构实例代码：

CODE

input:focus {
  border-color: skyblue;
  outline: none;
}

样式实例代码：

CODE

input:focus {
  border-color: skyblue;
  outline: none;
}

对于经常换的图片要放在ul中li内，用img来表示，就不要拿它来当背景整了

右侧newsflash模块制作

右侧的模块分为上中下三个盒子

结构代码：

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

1 号盒子为 news 新闻模块高度为 165px

分为上下两个结构，但是两个模块都用 div，上面是 news-hd，下面是 news-bd

结构代码：

CODE

<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>

样式代码：

CODE

<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>

上面是news-hd，设置高度是 33px，设置下边框

里面放一个h5 标题
放一个a标签，内容是更多，然后让 a 进行右浮动，三角用伪元素设置字体图标就好

结构代码：

CODE

div::before {
  content: "";
  display: block;
}

样式代码：

CODE

div::before {
  content: "";
  display: block;
}

下面是news-bd

里面包含 ul 和 li 还有链接
给li设置高度，24px，设置单行文字溢出省略： 1. 设置 overflow: hidden; 2.设置 white-space: nowrap; 3. 设置 text-overflow: ellipsis;

结构代码：

CODE

div {
  overflow: hidden;
}

样式代码：

CODE

div {
  overflow: hidden;
}

2 号盒子为 lifeservice 生活服务模块高度为 209px

设置边框（左右下边框）
里面的内容是 ul > 12*li，给li设置宽 63px，高71px，设置右边和下边的边框，设置浮动
这样设置后，第四个li会装不开，掉下来，解决办法如下
- lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li
- 可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个小 li
- lifeservice 盒子 overflow 隐藏多余的部分就可以了
在 li 里面放一个 i（里面放图标），下面的文本用 p 标签包裹
给 i 设置 24px宽和28px的高（注意 i 是行内元素，转成行内块），给 li 设置 text-align:center 让里面内容居中显示

结构代码：

CODE

span, a, em, strong {
  /* 行内元素：不独占一行，不可设宽高 */
  display: inline;
}

样式代码：

CODE

span, a, em, strong {
  /* 行内元素：不独占一行，不可设宽高 */
  display: inline;
}

3 号盒子为 bargain 特价商品

这个比较简单，直接插入一张图片即可

结构代码：

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

样式代码：

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

16.1.2 推荐模块制作

大盒子 recom 推荐模块 recommend

给这个 recom 大盒子设置版心，设置 163px的高，背景颜色（#ebebeb），设置距离上边 12px

结构代码：

CODE

div {
  background-color: #f0f0f0;
}

样式代码：

CODE

div {
  background-color: #f0f0f0;
}

里面包含 2 个盒子，浮动即可

结构代码：

CODE

.box {
  float: left;
}

1 号盒子 recom_hd

设置宽度205px，高度163px
里面放一个img标签，插入图片即可

结构代码：

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

样式代码：

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

2 号盒子 recom_bd ，注意里面的小竖线

右侧结构里面放 ul 包含 4个 li，每个li里面包含一个img
直接利用切片工具把里面的内容当成一张图片
给 li 设置浮动
给 img 设置宽高，宽度 248px，高度 163px
小竖线利用伪元素来实现，给每一个li设置一个 after 伪元素，然后给这个伪元素设置绝对定位，设置top 10px，给li设置相对定位（注意，最后一个li不用设置伪元素），可以利用 nth-child(-n+3){...}

结构代码：

CODE

div::before {
  content: "";
  display: block;
}

样式代码：

CODE

div::before {
  content: "";
  display: block;
}

16.1.3 家用电器模块制作

注意这个 floor ，不要给高度，内容有多少，算多少

第一楼是家用电器模块：里面包含两个盒子

box_hd 制作

1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子

box_hd 给 30px 的高度，2个像素的下边框
里面放一个左侧 h3 的盒子，右侧一个div盒子，div盒子里面放 ul > li > a
左侧盒左浮动，右侧盒子右浮动
a标签之间的距离用左右的padding撑开即可

结构代码

CODE

.box {
  float: left;
}

样式代码

CODE

.box {
  float: left;
}

box_bd 制作

2 号盒子 box_bd，不要给高度

这里边塞的都是现有的图片，给图片加上a超链接就可以实现跳转了，所以这个模块看似复杂，实际一点也不复杂，塞现有图片即可

还有这边为了简化css，对内部的五个盒子使用得1类名不用子代选择器，就仅仅类选择器就可以，这样只需要复制做好的家电模块，改一下名改一下图就又增加了新的模块

比如ul下li中有a，对a使用了类选择器.aa,在css中写的时候就不需要写成ul li .aa，直接写.aa就ok了

box_bd 属于是tab栏的内容区域，所以在这个里面先嵌套一个盒子 tab_content，在tab_content 里面包裹tab选项卡对应的内容
内容被一个大盒子包裹（tab_list_item），里面是 ul 包裹 5个 li，每个li设置对应的宽度，然后设置浮动
而这5个li的宽度是不一致的，在这里我们的做法是先把宽度的样式列出来，然后给对应的li设置
- 第一个小 li 分为上下结构，上面是 ul 包裹 li ，li里面包裹 a，下面插入一张图片
- 上面的li设置宽高，设置浮动，这样就排列下来了
- 后面的小 li 里面先放一个a标签，然后在a标签里面插入图片即可

结构代码

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

样式代码

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

tab栏切换需求！！！！！！介绍：

tab栏的布局是 ul > li > a
有多少个tab选项卡，那么对应就有多少个内容
但是每一次只会显示一个内容块，其他内容进行的隐藏
等后面我们学习了js之后，我们就会配合js来实现，tab栏的切换

16.2 列表制作

16.2.1 准备工作

列表页面是新的页面，我们需要新建页面文件 list.html
因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
头部和底部的样式也需要，因此 list.html 中还需要引入 common.css
需要新的 list.css 样式文件，这是列表页专门的样式文件

秒杀盒子 sk（ second kill ）定位即可

结构代码：

CODE

/* 静态定位（默认） */
.static { position: static; }
/* 相对定位 */
.relative { position: relative; }
/* 绝对定位 */
.absolute { position: absolute; }
/* 固定定位 */
.fixed { position: fixed; }
/* 粘性定位 */
.sticky { position: sticky; }

样式代码：

CODE

/* 静态定位（默认） */
.static { position: static; }
/* 相对定位 */
.relative { position: relative; }
/* 绝对定位 */
.absolute { position: absolute; }
/* 固定定位 */
.fixed { position: fixed; }
/* 粘性定位 */
.sticky { position: sticky; }

1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
2 号盒子左侧浮动 sk_con 里面包含 ul 和 li

结构代码：

CODE

.box {
  float: left;
}

样式代码：

CODE

.box {
  float: left;
}

16.2.3 列表页主体 `sk_container`

1 号盒子 sk_container 给宽度 1200，不要给高度
一定不要忘记清除浮动

结构代码：

CODE

.box {
  float: left;
}

sk_hd制作

2 号盒子 sk_hd ，插入图片即可

结构代码：

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

sk_bd制作

3 号盒子 sk_bd ，里面包含很多的 ul 和 li
- 当鼠标移入到 li 上面的时候显示红色的边框，在这里先给 li 设置透明的边框，当鼠标移入的时候设置为红色即可
- 由于给每个 li 都设置了外边距，导致一行的最后一个 li 掉了下来，在这里我们利用 nth-child(4n) 来选择出来每一行最后一个 li，去掉外边距就好了

结构代码：

CODE

div {
  margin: 0 auto;
}

样式代码：

CODE

div {
  margin: 0 auto;
}

16.3 注册页面制作

注意： 注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化

16.3.1 准备工作

创建register.html，引入 base.css，引入favicon图标
创建register.css ，在html页面进行引入

16.3.2 `header` 头部实现

整个内容用版心进行包裹
第一个头部区域怎么简单怎么来，用一个header盒子包裹链接，链接里面放图片即可

结构代码：

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

样式代码：

CODE

<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

16.3.3 `registerarea` 主体模块实现

整个大盒子高度为 522px，设置4个边框

结构代码：

CODE

div {
  border: 1px solid #ccc;
}

样式代码：

CODE

div {
  border: 1px solid #ccc;
}

1号盒子是一个 h3 标签，放标题

里面放注册新用户的文字，然后包一个 div的标签，让div标签右浮动

结构代码：

CODE

.box {
  float: left;
}

样式代码：

CODE

.box {
  float: left;
}

2号盒子里面放注册的内容

先用一个盒子，把整个内容包裹起来，设置盒子宽度（600px），让这个盒子距上边50px，水平居中显示
里面的内容利用 ul 包含 li 来实现的（不需要用表格）
每个 li 里面，左侧放 label 标签，中间放input 标签，右侧放 span 提示信息
左侧 label里面的文字都是右对齐，我们可以给label设置一个宽度（88px），然后利用text-align 来设置右对齐
input 表单设置宽度 242px，高度 37px，设置边框
右侧 span修饰一下文字颜色
提示信息的样式优化
- 定义一个错误的样式，定义一个正确的样式，然后给对应的盒子设置类名
- 在span里面放一个小盒子，这个小盒子用来显示图标的，设置一下宽高（20x20）
- 插入图片了之后，默认与文字是基线对齐，通过 vertical-algin 来设置图片与文字对齐方式
安装程度的布局，在第4个小 li 里面放三个盒子，分别放弱、中、强
- 设置 em 的左右 12px 的内边距，设置一下文字颜色
- 分别设置背景颜色
同意协议和完成注册都是用 li 进行包裹

结构代码：

CODE

div {
  background-color: #f0f0f0;
}

样式代码：

CODE

div {
  background-color: #f0f0f0;
}

16.3.4 底部实现

结构代码：

CODE

div {
  background-color: #f0f0f0;
}

样式代码：

CODE

<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>

16.4 项目总结

大盒子添加水平居中后，它的子盒子也会水平居中
一般情况下，a包含有宽度的盒子，a需要转换为块级元素
一个盒子里边的子盒子进行浮动的时候，如果在父盒子中放不开，则会导致子盒子放不下的跑到下边去
出现下图注意点，多半是因为文字环绕浮动的盒子了，解决方式就是在这个浮动盒子的父盒子设置为多余父盒子的部分进行隐藏：overflow:hidden;隐藏掉多余的部分，外边的文字就没有浮动盒子了，就可以实现位置的空置，文字就不在环绕了

对于行内块元素，如果要类似于下边图片的效果，可以使用padding来撑开盒子，不要用margin，这个是处理盒子之间的问题

对于提交按钮不要使用button，要使用input，参数选择submit，在里边的value中写的字，在给input设置宽度和高度后，这个文字会居中

CODE

<input type="text" name="username" placeholder="请输入用户名">

如果图片过大，想要缩放它的话，只需要设置宽度或者高度其中一个就可以，另一个参数就会等比缩放
使用a链接，鼠标放上去提示信息，在a中使用title属性