菜单 搜索
首页 前端知识 2023 【黑马程序员】CSS 第七天

2023 【黑马程序员】CSS 第七天

2024-02-20 09:02:24 前端知识 前端哥 230 97 我要收藏

目录

一、项目目录

二、准备工作

1. SEO 三大标签

2. Favicon 图标

 三、布局网页

1. 版心

2. 快捷导航（shortcut）

（1）整体布局

（2）填充美化

3. 头部（header）

（1）头部布局

（3）导航区域

（4）搜索区域

（5）购物车区域

4. 底部（footer）

（1）底部布局

（2）服务区域

（3）帮助中心区域

（4）版权区域

综合实践部分，小兔鲜儿首页制作（上）

一、项目目录

xtx-pc：（pc端就是电脑端）

  • images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
  • uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
  • iconfont 文件夹：字体图标素材
  • css 文件夹：存放 CSS 文件（link 标签引入）
  1. base.css：基础公共样式
  2. common.css：各个网页相同模块的重复样式，例如：头部、底部
  3. index.css：首页 CSS 样式
  • index.html：首页 HTML 文件

 

在 index.html 中链接到 css

其中 base.css 必须第一个被 link

common.css 和 index.css 可以随意调换位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

</body>

</html>

二、准备工作

1. SEO 三大标签

SEO：搜索引擎优化，提升网站百度搜索排名

提升SEO的常见方法：

  1. 竞价排名
  2. 将网页制作成html后缀
  3. 标签语义化（在合适的地方使用合适的标签）
  4.  ……

网页头部 SEO 标签：

  • title：网页标题标签
  • description：网页描述
  • keywords：网页关键词 

京东网页中就有类似的：

这和网页搜索出来的内容一致

 我们也有准备好的 SEO 内容

将其复制到我们的 index.css 中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

</body>

</html>

2. Favicon 图标

Favicon 图标：网页图标，出现在浏览器标题栏，增加网站辨识度

图标：favicon.ico，一般存放到网站的根目录里面

 在 index.html 中加入 图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

网页运行结果：

三、布局网页

1. 版心

wrapper 版心宽度：1240px

在 common.css 中添加版心代码

/* 头尾各个页面相同的样式 */
/* 版心 */
.wrapper {
    /* 版心居中样式 */
    margin: 0 auto;
    width: 1240px;
}

在 index.html 中进行测试

<body>
    <div class="wapper">1</div>
</body>

检查网页运行结果：

2. 快捷导航（shortcut）

结构：通栏 > 版心 > 导航 ul

布局：flex-end

（1）整体布局

 在 common.css 中添加快捷导航整体布局代码

/* 快捷导航 */
.shortcut {
    height: 52px;
    background-color: #333;
}

.shortcut .wrapper {
    display: flex;
    justify-content: flex-end;
    height: 52px;
    /* 测试颜色 */
    background-color: pink;
}

在 index.html 中进行测试

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">1</div>
    </div>
</body>

检查网页运行结果：

（2）填充美化

 在 common.css 中添加修改快捷导航整体布局代码

/* 快捷导航 */
.shortcut {
    height: 52px;
    background-color: #333;
}

.shortcut .wrapper {
    display: flex;
    justify-content: flex-end;
    height: 52px;
    /* 测试颜色 */
    /* background-color: pink; */
}

.shortcut ul {
    display: flex;
    /* 在高度为52像素中居中 */
    line-height: 52px;
}

.shortcut li a {
    padding: 0 15px;
    /* 右侧边框线 */
    border-right: 1px solid #999;
    /* 字体大小 */
    font-size: 14px;
    /* 字体颜色 */
    color: #fff;
}

/* 去除最后一个右侧边框线 */
.shortcut li:last-child a {
    border-right: 0;
}

.shortcut li .iconfont {
    /* 手机图标右边距 */
    margin-right: 4px;
    /* 图标和文字对齐 */
    vertical-align: middle;
}

/* 请先登录标签是绿色的 */
.shortcut li .login {
    color: #5E869C;
}

在 index.html 中进行 link 

<link rel="stylesheet" href="./iconfont/iconfont.css">

在 index.html 中完善快捷导航内容

    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#" class="login">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
            </ul>
        </div>
    </div>

 检查网页运行结果：

3. 头部（header）

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

（1）头部布局

 在 common.css 中添加头部布局代码

/* 头部区域 */
.header {
    /* 上间距 */
    margin-top: 22px;
    /* 下间距 */
    margin-bottom: 22px;
    height: 88px;
    /* 测试颜色 */
    background-color: pink;
}

.header {
    display: flex;
}

在 index.html 中添加头部布局内容

    <!-- 头部区域 -->
    <div class="header wrapper">
        <!-- logo -->
        <div class="logo">logo</div>
        <!-- 导航 -->
        <div class="nav">导航</div>
        <!-- 搜索 -->
        <div class="search">搜索</div>
        <!-- 购物车 -->
        <div class="scar">购物车</div>
    </div>

检查网页运行结果：

 在 common.css 中添加 logo 区域代码

/* logo区域 */
.logo {
    /* 右间距 */
    margin-right: 40px;
    width: 200px;
    height: 88px;
    /* 测试颜色 */
    /* background-color: skyblue; */
}

.logo a {
    display: block;
    width: 200px;
    height: 88px;
    background-image: url(../images/logo.png);
    font-size: 0;
}

在 index.html 中修改 logo 区域内容

        <!-- logo -->
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>

检查网页运行结果：

（3）导航区域

 在 common.css 中添加 导航区域 代码

/* 导航区域 */
.nav {
    /* 上间距 */
    margin-top: 33px;
    /* 右间距 */
    margin-right: 28px;
}

.nav ul {
    display: flex;
}

.nav li {
    /* 右间距 */
    margin-right: 47px;
}

.nav li a {
    /* 下内边距 */
    padding-bottom: 10px;
    /* 测试颜色 */
    /* background-color: skyblue; */
}

.nav li a:hover {
    /* 下边框 */
    border-bottom: 2px solid #5EB69C;
    /* 字体颜色 */
    color: #5E869C;
}

在 index.html 中修改 导航区域 内容

        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div>

检查网页运行结果：

（4）搜索区域

在中 common.css 中添加 搜索区域 代码

/* 搜索区域 */
.search {
    display: flex;
    /* 上间距 */
    margin-top: 33px;
    /* 右间距 */
    margin-right: 45px;
    width: 170px;
    height: 24px;
    /* 下边框 */
    border-bottom: 2px solid #f4f4f4;
}

.search .iconfont {
    /* 右边距 */
    margin-right: 8px;
    /* 字体大小 */
    font-size: 18px;
    /* 图标颜色 */
    color: #ccc;
}

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

.search input::placeholder {
    /* 字体大小 */
    font-size: 16px;
    /* 文字颜色 */
    color: #ccc;
}

注释掉 common.css 中头部区域的测试颜色

/* 头部区域 */
.header {
    /* 上间距 */
    margin-top: 22px;
    /* 下间距 */
    margin-bottom: 22px;
    height: 88px;
    /* 测试颜色 */
    /* background-color: pink; */
}

在 index.html 中修改 搜索区域 内容

        <!-- 搜索 -->
        <div class="search">
            <div class="iconfont icon-search"></div>
            <input type="text" placeholder="搜一搜">
        </div>

检查网页运行结果：

（5）购物车区域

 在中 common.css 中添加 购物车区域 代码

/* 购物车区域 */
.cart {
    /* 父级相对位置 */
    position: relative;
    /* 顶部间距 */
    margin-top: 32px;
}

.cart .iconfont {
    /* 图标大小 */
    font-size: 24px;
}

.cart i {
    /* 子级绝对 */
    position: absolute;
    /* 距离顶部 */
    top: 1px;
    /* 距离左侧 */
    left: 15px;
    /* 左右内边距 */
    padding: 0 6px;
    height: 15px;
    /* 背景色 */
    background-color: #E26237;
    /* 角 */
    border-radius: 8px;
    /* 字体大小 */
    font-size: 14px;
    /* 字体颜色 */
    color: #FFFEFE;
    /* 行高 */
    line-height: 15px;
}

在 index.html 中修改 购物车区域 内容

        <!-- 购物车 -->
        <div class="cart">
            <div class="iconfont icon-cart-full"></div>
            <i>2</i>
        </div>

检查网页运行结果：

4. 底部（footer）

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

（1）底部布局

 在中 common.css 中添加 底部布局 代码

/* 底部区域 */
.footer {
    height: 580px;
    /* 背景色 */
    background-color: #F5F5F5;
    /* background-color: red; */
}

/* 服务区域 */
.service {
    height: 178px;
    /* 下边框 */
    border-bottom: 1px solid #E8E8E8;
}

/* 帮助中心区域 */
.help {
    height: 300px;
    /* 测试颜色 */
    background-color: pink;
}

在 index.html 中添加 底部布局 内容

    <!-- 底部区域 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 服务区域 -->
            <div class="service">服务</div>
            <!-- 帮助中心区域 -->
            <div class="help">帮助中心</div>
            <!-- 版权区域 -->
            <div class="copyright">版权</div>
        </div>
    </div>

检查网页运行结果：

（2）服务区域

  在中 common.css 中添加修改 服务区域 代码

/* 服务区域 */
.service {
    /* 上下内间距 */
    padding: 60px 0;
    height: 178px;
    /* 下边框 */
    border-bottom: 1px solid #E8E8E8;
}

.service ul {
    display: flex;
    justify-content: space-evenly;
}

.service li {
    display: flex;
    width: 190px;
    height: 58px;
    /* 测试颜色 */
    /* background-color: pink; */
}

.service li h5 {
    width: 58px;
    height: 58px;
    /* 右间距 */
    margin-right: 20px;
    /* 背景图片 */
    background-image: url(../images/sprite.png);
}

.service li:nth-child(2) h5 {
    background-position: 0 -58px;
}

.service li:nth-child(3) h5 {
    background-position: 0 -116px;
}

.service li:nth-child(4) h5 {
    background-position: 0 -174px;
}

.service li p {
    /* 字号大小 */
    font-size: 28px;
    /* 行高 */
    line-height: 58px;
}

在 index.html 中添加修改 服务区域 内容

            <!-- 服务区域 -->
            <div class="service">
                <ul>
                    <li>
                        <h5></h5>
                        <p>价格亲民</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>物流快捷</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>品质新鲜</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>售后无忧</p>
                    </li>
                </ul>
            </div>

检查网页运行结果：

 

（3）帮助中心区域

 在中 common.css 中添加修改 帮助中心区域 代码

/* 帮助中心区域 */
.help {
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    height: 300px;
    /* 测试颜色 */
    /* background-color: pink; */
}

.help .left {
    display: flex;
}

.help .left dl {
    /* 右间距 */
    margin-right: 84px;
}

.help .left dl:last-child {
    /* 去除最右边的右间距 */
    margin-right: 0;
}

.help .left dt {
    /* 下间距 */
    margin-bottom: 30px;
    /* 字体大小 */
    font-size: 18px;
}

.help .left dd {
    /* 下间距 */
    margin-bottom: 10px;
}

.help .left a {
    /* 字体颜色 */
    color: #969696
}

.help .left .iconfont {
    /* 图标颜色 */
    color: #5E869C;
}

.help .right ul {
    display: flex;
}

.help .right li:first-child {
    /* 右间距 */
    margin-right: 55px;
}

.help .right .pic {
    /* 下间距 */
    margin-bottom: 10px;
    width: 120px;
    height: 120px;
}

.help .right p {
    /* 字体颜色 */
    color: #969696;
    /* 文字居中 */
    text-align: center;
}

在 index.html 中添加修改 帮助中心区域 内容

            <!-- 帮助中心区域 -->
            <div class="help">
                <div class="left">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">支付方式</a></dd>
                        <dd><a href="#">售后规则</a></dd>
                    </dl>
                    <dl>
                        <dt>配送方式</dt>
                        <dd><a href="#">配送运费</a></dd>
                        <dd><a href="#">配送范围</a></dd>
                        <dd><a href="#">配送时间</a></dd>
                    </dl>
                    <dl>
                        <dt>关于我们</dt>
                        <dd><a href="#">平台规划</a></dd>
                        <dd><a href="#">联系我们</a></dd>
                        <dd><a href="#">问题反馈</a></dd>
                    </dl>
                    <dl>
                        <dt>售后服务</dt>
                        <dd><a href="#">售后政策</a></dd>
                        <dd><a href="#">退款说明</a></dd>
                        <dd><a href="#">取消订单</a></dd>
                    </dl>
                    <dl>
                        <dt>服务热线</dt>
                        <dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
                        <dd><a href="#">客服电话400-0000-000</a></dd>
                        <dd><a href="#">工作时间：周一至周日8:00-18:00</a></dd>
                    </dl>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <div class="pic"><img src="./images/wechat.png" alt=""></div>
                            <p>微信公众号</p>
                        </li>
                        <li>
                            <div class="pic"><img src="./images/app.png" alt=""></div>
                            <p>APP下载二维码</p>
                        </li>
                    </ul>
                </div>
            </div>

检查网页运行结果：

（4）版权区域

  在中 common.css 中添加修改 版权区域 代码

/* 版权区域 */
.copyright {
    /* 文字居中 */
    text-align: center;
}

.copyright p {
    /* 下间距 */
    margin-bottom: 10px;
    /* 字体颜色 */
    color: #A1A1A1;
}

.copyright p a {
    /* 左右间距 */
    margin: 0 10px;
    /* 字体颜色 */
    color: #A1A1A1;
}

在 index.html 中添加修改 版权区域 内容

            <!-- 版权区域 -->
            <div class="copyright">
                <p>
                    <a href="#">关于我们</a>|
                    <a href="#">帮助中心</a>|
                    <a href="#">售后服务</a>|
                    <a href="#">配送与验收</a>|
                    <a href="#">商务合作</a>|
                    <a href="#">搜索推荐</a>|
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight@ 小兔鲜</p>
            </div>

检查网页运行结果：

转载请注明出处或者链接地址：https://www.qianduange.cn//article/2318.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【Jquery大事件时间线】jquery实现大事件时间线（时间轴）的滚动切换效果『附完整源码』

2024-03-05 09:03:16

基于javaweb mysql的jsp servlet在线考试管理系统(java jsp jquery servlet mysql)

2024-03-05 09:03:09

AJAX(二）jQuery

2024-03-05 09:03:04

jQuery操作DOM(3)

2024-03-05 09:03:36

Java如何获取客户端主机真实IP地址

2024-03-05 09:03:34

jQuery - 获取内容和属性

2024-03-05 09:03:34

深拷贝浅拷贝方法总结

2024-03-05 09:03:27

JQuery简介与解析

2024-03-01 12:03:31

Java Web(十）--jQuery

2024-03-05 09:03:24

基于html css javascript jquery bootstarp响应式网页设计——大理我的家乡旅游景点

2024-03-05 09:03:18

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999
8

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
9

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
10

尚硅谷css3笔记

2024-02-13 10:02:44998

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！