09 CSS06

目标:

1、CSS样式补充
2、项目前置认知
3、项目结构搭建

一、项目样式补充

1、精灵图
2、背景图片大小
3、文字阴影
4、盒子阴影
5、过渡

1、精灵图

(1)精灵图的介绍

· 场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图
· 优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度

(2)精灵图使用步骤

1.创建一个盒子
2. 通过PxCook量取小图片大小,将小图片的宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position:xy

2、背景图片大小

(1)作用

设置背景图片的大小

(2)语法

background-size:宽度 高度;

(3)取值

09 CSS06_第1张图片

(4)background连写拓展

· 完整连写
在这里插入图片描述
· 注意点
background-size和background连写同时设置时,需要注意覆盖问题
· 解决
a.要么单独的样式写在连写的下面
b.要么单独的样式写在连写的里面,如:
在这里插入图片描述

3、文字阴影

(1)作用

给文字添加阴影效果

(2)属性名

text-shadow

(3)取值

09 CSS06_第2张图片
在这里插入图片描述
09 CSS06_第3张图片

(4)拓展

阴影可以叠加设置,每组阴影取值之间都以逗号隔开
在这里插入图片描述
09 CSS06_第4张图片

4、盒子阴影

(1)作用

给盒子添加阴影效果,吸引用户注意,体现页面的制作细节

(2)属性名

box-shadow

(3)取值

09 CSS06_第5张图片
09 CSS06_第6张图片
09 CSS06_第7张图片

5、过渡

(1)作用:

让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验

(2)属性名:

transition

(3)常见取值:

09 CSS06_第8张图片
在这里插入图片描述
在这里插入图片描述

(4)注意点:

1.过渡需要:默认状态 和 hover状态样式不同,才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中,效果不同的:
① 给默认状态设置,鼠标移入移出都有过渡效果
②给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果

二、项目前置认知

1、网页与网站的关系
2、骨架结构标签
3、SEO三大标签
4、ico图标设置
5、版心

1、网页与网站的关系

· 网页:网站中的每一“页”。例如:淘宝的主页、淘宝的登录页、淘宝的商品页等。
· 网站:提供特定服务的一组网页集合。例如:百度、淘宝、京东、黑马程序员等;

2、骨架结构标签

(1)DOCTYPE文档说明

· 文档类型声明,告诉浏览器该网页的HTML版本
在这里插入图片描述
· 注意点:
DOCTYPE需要写在页面的第一行,不属于HTML标签

(2)网页语言

· 在这里插入图片描述标识网页使用的语言
· 作用:搜索引擎归类+浏览器翻译
· 常见语言:zh-CN简体中文/en英文

(3)字符编码(了解)

· 在这里插入图片描述标识网页使用的字符编码
· 作用:保存和打开的字符编码需要统一设置,否则可能会出现 乱码
· 常见字符编码:
1.UTF-8:万国码,国际化的字符编码,收录了全球语言的文字
2. GB2312:6000+汉字
3. GBK:20000+ 汉字
注意点:开发中 统一使用 UTF-8 字符编码 即可

3、SEO三大标签

(1)SEO简介

· SEO (Search Engine Optimization):搜索引擎优化作用:让网站在搜索引擎上的排名靠前
· 提升SEO的常见方法:
1.竞价排名
2. 将网页制作成html后缀
3. 标签语义化(在合适的地方使用合适的标签)

(2) SEO三大标签

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

(3)(拓展补充)有语义的布局标签

· 场景:在HTML5新版本中,推出了一些有语义的布局标签,可以增强网页的语义化
· 标签
09 CSS06_第9张图片
09 CSS06_第10张图片
· 注意点
以上标签显示特点和div一致,但是比div多了不同的语义

4、ico图标设置

· 场景
显示在标签页标题左侧的小图标,习惯使用.ico格式的图标
在这里插入图片描述

· 代码 在这里插入图片描述

5、版心

· 场景
把页面的主题内容约束在网页中间
09 CSS06_第11张图片

· 作用
让不同大小的屏幕都能看到页面的主体内容
· 代码
09 CSS06_第12张图片
· 注意点
版心类名常用:container、wrapper、w等

(6)(补充拓展)CSS书写顺序

· 衡量程序员的能力,除了要看实现业务需求的能力,还要看平时书写代码的规范(专业性)
· 不同的CSS书写顺序会影响浏览器的渲染性能,推荐前端工程师使用专业的书写顺序习惯
09 CSS06_第13张图片
· 注意点:
开发中推荐多用类 + 后代,但不是层级越多越好,一个选择器中的类选择器的个数推荐 不要超过3个

三、项目结构搭建

1、文件和目录准备
2、基础公共样式
3、index页面骨架

1、文件和目录准备

(1)新建项目文件夹 xtx-pc-client,在Vscode中打开

在实际开发中,项目文件夹不建议使用中文
所有项目相关文件都保存在 xtx-pc-client 目录中

(2)复制 favicon.ico 到 xtx-pc-client 目录

。 一般习惯将ico图标放在项目根目录

(3)复制 images 和 uploads 目录到 xtx-pc-client 目录中

· images : 存放网站 固定使用 的图片素材,如:logo、样式修饰图片… 等
· uploads:存放网站 非固定使用 的图片素材,如:商品图片、宣传图片…等

(4)新建 index.html 在根目录

(5)新建 css 文件夹保存网站的样式,并新建以下CSS文件:

· base.css:基础公共样式
· common.css:该网站中多个网页相同模块的重复样式,如:头部、底部
· index.css:首页样式
09 CSS06_第14张图片

2、基础公共样式

· 场景:一般项目开始前,首先会 去除掉浏览器默认样式,设置为 当前项目需要的初始化样式
· 作用:防止不同浏览器中标签默认样式不同的影响,统一不同浏览器的默认显示效果,方便后续项目开发
· 要求:
已经准备好base.css代码,同学们需要认识,项目中可以直接引入使用

/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,P
dt,
dd,
input {
    margin: 0;
    padding: 0;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
    font: 16px/1.5 "Helvetica Neue", Helvetica Arial, "Microsoft Yahei",
        "Hiragino Sans GB" , "Heiti SC" , "WenQuanYi Micro Hei" , sans-serif;
    color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
    list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
    font-style: normal;
}

/* 去除a标签默认下划线,并设置默认文字颜色 */
a {
    text-decoration: none;
    color: #333;
}

/* 设置img的垂直对齐方式为居中对齐,去除img默认下间隙 */
img {
    vertical-align: middle;
}

/* 去除input默认样式 */
input {
    border: none;
    outline: none;
    color: #333;
}

/* 左浮动 */
.fl {
    float: left;
}

/* 右浮动 */
.fr {
    float: right;
}

/* 双伪元素清除法 */
.clearfix::before ,
.clearfix::after {
    content:"";
    display: table;
}
.clearfix::after {
    clear: both;
}

3、index页面骨架


"en">

    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    小兔鲜儿-新鲜、惠民、快捷!
    "description" content="小兔鲜儿官网,致力于打造全球最大的食品、生鲜电商购物平台。">
    "keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    "stylesheet" href="./css/base.css">
    "stylesheet" href="./css/common.css">
    "stylesheet" href="./css/index.css">


    


09 CSS06_第15张图片

四、综合案例——小兔鲜儿购物商城

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿-新鲜、惠民、快捷!title>
    <meta name="description" content="小兔鲜儿官网,致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
head>
<body>
    
    <header>
        
        <div class="xtx-shortcut">
            
            <nav class="container">
                <ul class="fr">
                    <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>
            nav>
        div>
            
        
        <div class="xtx-main-nav container">
            
            <h1 class="logo fl">
                <a href="#">小兔鲜a>
            h1>

            
            <nav class="fl">
                <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>
            nav>

            
            <div class="search fl">
                <input type="search" placeholder="搜一搜">
            div>

            
            <div class="cart fl">
                <span>2span>
            div>
        div>
    header>

    
    <footer>
        
        <div class="xtx-service">
            <div class="container">
                <a href="#">价格亲民a>
                <a href="#">物流快捷a>
                <a href="#">品质新鲜a>
            div>
        div>

        
        <div class="xtx-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>
    footer>
body>
html>

common.css

/* 版心的公共类 */
.container {
    width: 1240px;
    margin: 0 auto;
}

/* --------------------快捷菜单板块:xtx-shortcut */
.xtx-shortcut {
    height: 52px;
    background-color: #333;
}

.xtx-shortcut .container {
    height: 52px;
    /* ps */
    /* background-color: skyblue; */
}

.xtx-shortcut ul li {
    float: left;
    line-height: 52px;
    color: #666;
}

.xtx-shortcut ul a {
    margin: 0 16px;
    color: #dcdcdc;
    font-size: 14px;
}

.xtx-shortcut li:last-child a {
    margin-right: 0;
}

.xtx-shortcut li:last-child a::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 30px;
    margin-top: -3px;
    margin-right: 8px;
    /* ps */
    /* background-color: red; */
    background: url('./images/sprites.png') -289px -133px;
    /* 垂直对齐方式 */
    vertical-align: middle;
}

/* --------------------主导航模块:xtx-main-nav */
.xtx-main-nav {
    height: 130px;
    padding-top: 30px;
    /* 自动内减 */
    box-sizing: border-box;
    /* ps */
    /* background-color: pink; */
}

.xtx-main-nav .logo {
    width: 207px;
    height: 70px;
    margin-left: 25px;
    /* ps */
    /* background-color: red; */
}

.xtx-main-nav .logo a {
    display: block;
    height: 70px;
    background: url('./images/logo.png');
    background-size: 100% 100%;
    font-size: 0;
     
}

.xtx-main-nav nav {
    margin-left: 40px;
}

.xtx-main-nav nav li {
    float: left;
    height: 70px;
    margin-right: 48px;
    line-height: 70px;
}

.xtx-main-nav nav a:hover {
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;
    padding-bottom: 7px;
}

.xtx-main-nav .search {
    /* 子绝父相 */
    position: relative;
    width: 172px;
    height: 30px;
    margin-top: 24px;
    margin-left: 34px;
    /* ps */
    /* background-color: orange; */
}

.xtx-main-nav .search::before{
    /* 伪元素要在元素内部设置,而input是单标签
    无法包裹伪元素,所以在search内部设置 */
    /* 伪元素默认行内元素,无法设置宽高,
    此处解决方案:子绝父相 */
    position: absolute;
    top: 5px;
    left: 2px;
    content: '';
    width: 18px;
    height: 18px;
    /* ps */
    /* background-color: red; */
    background: url('./images/fdj.png');
}

.xtx-main-nav .search input {
    width: 172px;
    height: 30px;
    border-bottom: 2px solid #e7e7e7;
    padding-left: 31px;
    line-height: 0px;
}

.xtx-main-nav .cart {
    /* 子绝父相 */
    position: relative;
    width: 25px;
    height: 25px;
    margin-top: 26px;
    margin-left: 7px;
    background-color: skyblue;
}

.xtx-main-nav .cart span {
    /* 子绝父相 */
    position: absolute;
    right: -5px;
    top: -3px;
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 6px  ;
    color: white;
    font-size: 10px;
    text-align: center;
    line-height: 13px;
}

/* -------------------宣传服务模块:xtx-service */
.xtx-service {
    height: 174px;
    background-color: #333;
}

.xtx-service .container {
    width: 1393px;
    height: 173px;
    border-bottom: 1px solid #434343;
    /* ps */
    background-color: pink;
}

.xtx-service .container a {
    float: left;
    width: 33.33%;
    height: 173px;
    /* ps */
    /* background-color: skyblue; */
    text-align: center;
    line-height: 173px;
    font-size: 28px;
    color: #fff;
}

.xtx-service .container a::before {
    content: '';
    display: inline-block;
    width: 58px;
    height: 58px;
    margin-right: 19px;
    /* ps */
    /* background-color: red;    */
    background: url('./images/sprites.png') 0 0;
    /* 垂直对齐方式 */
    vertical-align: middle;
}

.xtx-service a:nth-child(2)::before {
    background-position: 0 0;
}

.xtx-service a:nth-child(3)::before {
    background-position: -65px 0;
}

/* ----------------版权信息:xtx-copyright */
.xtx-copyright {
    height: 168px;
    background-color: #333;
}

.xtx-copyright .container {
    height: 168px;
    padding-top: 41px;
    box-sizing: border-box;
    /* ps */
    /* background-color: pink; */
    text-align: center;
    font-size: 14px;
    color: #999;
}

.xtx-copyright .container a {
    color: white;
}

.xtx-copyright .container p:first-child {
    height: 35px;
}

展示效果:
请添加图片描述
09 CSS06_第16张图片

你可能感兴趣的:(零基础前端,CSS,css,html,前端)