01-HTML+CSS/18-CSS整体内容回顾-王者荣耀项目实战

CSS整体内容回顾-王者荣耀项目实战

vertical-align

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      .box img {
        width: 200px;
        vertical-align: top;
      }

      .box .small {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      普通的文本
      <img src="./images/kobe02.png" alt="" />
      <span class="small">xxxx</span>xxxx
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
        height: 300px;
        line-height: 300px;
      }

      .box img {
        width: 200px;
        vertical-align: middle;
      }

      .box .small {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是普通文本xxxxx
      <img src="./images/kobe01.jpg" alt="" />
      <div class="small"></div>
    </div>
  </body>
</html>

行内块元素的现象

<!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>Document</title>
    <style>
      .box {
        height: 300px;
        background-color: orange;
        line-height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="box">我是文本，哈哈哈，xxxx</div>
  </body>
</html>

<!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>Document</title>
    <style>
      .small {
        display: inline-block;
        height: 80px;
        line-height: 80px;
        background-color: #f00;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <span class="small">xxxx哈哈哈哈</span>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        height: 300px;
        background-color: orange;
        line-height: 300px;
      }

      .box .small {
        display: inline-block;
        height: 80px;
        line-height: 80px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是文本，哈哈哈，xxxx<span class="small">xxxx哈哈哈哈</span>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        height: 300px;
        background-color: orange;
        line-height: 300px;
      }

      .box .small {
        display: inline-block;
        height: 80px;
        line-height: 80px;
        background-color: #f00;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是文本，哈哈哈，xxxx<span class="small">xxxx哈哈哈哈</span>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        height: 300px;
        background-color: orange;
        line-height: 300px;
      }

      .box .small {
        display: inline-block;
        height: 80px;
        line-height: 200px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是文本，哈哈哈，xxxx<span class="small">xxxx哈哈哈哈</span>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        height: 300px;
        background-color: orange;
        line-height: 300px;
      }

      .box .small {
        display: inline-block;
        height: 80px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是文本，哈哈哈，xxxx<span class="small">xxxx哈哈哈哈</span>
    </div>
  </body>
</html>

CSS回顾

一、邂逅css和常见的css

1.1.css的编写方式

1.2.常见的css

font-size
color
width
height
background-color

二、文本属性

2.1.text-align

2.2.text-decoration

2.3.text-indent

三、字体属性

3.1.font-family

3.2.font-style

3.3.font-weight

3.4.font-size

3.5.line-height

3.6.font

四、css常见的选择器

4.1.基础选择器

通配选择器
元素选择器
id选择器
class选择器

4.2.属性选择器

4.4.子代/后代选择器

4.4.兄弟选择器

4.5.伪类选择器

4.6.交集/并集选择器

4.7.伪元素选择器

4.8.结构性伪类选择器

五、css的特性

5.1.层叠特性

权重

5.2.继承性

常见的记住(总结)
查文档

5.3.元素的类型

块级元素
行内级元素
- 行内级非替换元素
- 行内级替换元素
- 行内块级

5.4.元素的隐藏方式

5.5.overflow

六、盒子模型

6.1.内容

width/height

6.2.内边距

padding

6.3.border

border-color
border-width
border-style

6.4.margin

外边距
折叠和传递

6.5.box-shadow/text-shadow

6.6.box-sizing

七、背景

7.1.background-image

7.2.background-size

7.3.background-position

7.4.background-repeat

7.5.background-attachment

八、结构伪类

九、布局

static
relative
absolute
- 相对最近的定位元素
fixed
sticky

十、浮动

浮动很多特性
浮动的案例

额外

脱离标准的元素
- 默认包裹内容
- 不再严格严格区分行内/块级元素
可以设置宽度和高度

高度塌陷

清楚浮动

十一、flex布局

11.1.flex布局中概念

container
flex item
主轴和交叉轴

11.2.flex container属性

display: flex;
flex-flow
- flex-direction
- flex-wrap
justify-content
align-items
align-content

11.3.flex item属性

order
align-self
flex
- flex-grow
- flex-shrink
- flex-basis

十二、形变-动画-vertical-align

tranform
- translate
- rotate
- skew
- scale
transition
animation
vertical-align

代码规范

可以参考京东的凹凸实验室的规范

css编写顺序推荐

css样式编写顺序

定位和布局
展示和可见
盒子模型
字体和文本
背景
其他

组件化开发思想

事实上目前vue，react，小程序都采用的是组件化开发思路

王者荣耀

王者荣耀top.png

<!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>Document</title>
    <style>
      /* reset */
      body,
      h2,
      ul,
      ol,
      li {
        padding: 0;
        margin: 0;
      }

      a {
        text-decoration: none;
        color: #333;
      }

      img {
        vertical-align: top;
      }

      ul,
      ol,
      li {
        list-style-type: none;
      }
      /* reset */
      /* common */
      .top_wrapper {
        margin: 0 auto;
        width: 980px;
      }
      /* common */

      .top {
        height: 41px;
        border: 1px solid #f5f5f5;
      }

      .top .area {
        display: flex;
        justify-content: space-around;
        height: 41px;
        line-height: 41px;
      }

      .top .left-area {
        display: flex;
      }

      .top .left-area .logo a {
        display: block;
        width: 150px;
        height: 100%;
        text-indent: -9999px;
        background: url("./images/logo.png") no-repeat center center;
      }

      .top .right-area {
        display: flex;
      }

      .top .right-area .item a {
        position: relative;
        display: block;
        font-size: 14px;
        color: #464646;
      }

      .top .right-area .item a.growth {
        padding-left: 30px;
      }

      .top .right-area .item a .icon-grow {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto 0;
        width: 30px;
        height: 30px;
        background: url("./images/title_sprite.png") no-repeat -30px 0;
      }

      .top .right-area .item a.ranking {
        margin-left: 20px;
        padding-right: 30px;
      }

      .top .right-area .item a.ranking::after {
        content: "";
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        background: url("./images/title_sprite.png") no-repeat 0 0;
        opacity: 0.2;
        transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div class="top">
      <div class="top_wrapper area">
        <div class="left-area">
          <h2 class="logo">
            <a href="#">腾讯游戏</a>
          </h2>
          <div class="recommend">
            <img src="./images/0578d85cd57397d1108ac081cfaa132c.jpg" alt="" />
          </div>
        </div>
        <ul class="right-area">
          <li class="item">
            <a class="growth" href="#">
              <i class="icon-grow"></i>
              成长守护平台</a
            >
          </li>
          <li class="item">
            <a class="ranking" href="#"> 腾讯游戏排行榜</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

王者荣耀top-header.png

<!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>Document</title>
    <style>
      /* reset */
      body,
      h1,
      h2,
      ul,
      ol,
      li,
      p {
        padding: 0;
        margin: 0;
      }

      a {
        text-decoration: none;
        color: #333;
      }

      img {
        vertical-align: top;
      }

      ul,
      ol,
      li {
        list-style-type: none;
      }
      /* reset */
      /* common */
      .top_wrapper {
        margin: 0 auto;
        width: 980px;
      }

      .header_wrapper {
        width: 1300px;
        margin: 0 auto;
      }
      /* common */
      .header {
        background-color: rgba(0, 0, 0, 0.8);
      }

      .header .area {
        display: flex;
        justify-content: space-between;
        height: 84px;
      }

      .header .left-area {
        display: flex;
      }

      .header .left-area .logo a {
        position: relative;
        top: 50%;
        transform: translate(0, -50%);
        display: block;
        width: 200px;
        height: 54px;
        text-indent: -9999px;
        background: url("./images/big-logo.png") no-repeat center center;
      }

      .header .left-area .nav-list {
        display: flex;
        margin-left: 30px;
      }

      .header .left-area .nav-list .item {
        width: 110px;
        padding-right: 5px;
      }

      .header .left-area .nav-list .item:hover,
      .header .left-area .nav-list .item.active {
        background: url("./images/index.png") no-repeat 0 0;
      }

      .header .left-area .nav-list .item:hover .desc,
      .header .left-area .nav-list .item.active .desc {
        color: #91763f;
      }

      .header .left-area .nav-list .item:hover a,
      .header .left-area .nav-list .item.active a {
        color: #e4b563;
      }

      .header .left-area .nav-list .item a {
        display: block;
        height: 100%;
        padding-top: 20px;
        box-sizing: border-box;
        font-size: 18px;
        color: #c9c9dd;
        text-align: center;
      }

      .header .left-area .nav-list .item a .desc {
        display: block;
        margin-top: 8px;
        font-size: 12px;
        color: #858782;
      }

      .header .left-area .search {
        margin-left: 10px;
      }

      .header .left-area .search a {
        position: relative;
        top: 50%;
        transform: translate(0, -50%);
        display: block;
        width: 27px;
        height: 26px;
        background: url("./images/nav_search.png") no-repeat;
      }

      .header .right-area {
        display: flex;
        align-items: center;
      }

      .header .right-area .image img {
        border: 1px solid #d9ad50;
        border-radius: 50%;
      }

      .header .right-area .info {
        margin-left: 12px;
      }

      .header .right-area .info a {
        color: #fff;
      }

      .header .right-area .info p {
        font-size: 14px;
        color: #858792;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="header_wrapper area">
        <div class="left-area">
          <h1 class="logo">
            <a href="#">王者荣耀</a>
          </h1>
          <ul class="nav-list">
            <li class="item active">
              <a href="#">
                游戏资料
                <span class="desc">DATA</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                内容中心
                <span class="desc">CONTENTS</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                赛事中心
                <span class="desc">MATCH</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                百态王者
                <span class="desc">CULUTURE</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                社区互动
                <span class="desc">COMMUNITY</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                玩家支持
                <span class="desc">PLAYER</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                IP新游
                <span class="desc">NEW GAMES</span>
              </a>
            </li>
          </ul>
          <div class="search"><a href="#"></a></div>
        </div>
        <div class="right-area">
          <a href="#" class="image">
            <img src="./images/下载.png" alt="" />
          </a>
          <div class="info">
            <a href="#">欢迎登录</a>
            <p>登录后查看游戏战绩</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

王者荣耀-news.png

<!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>Document</title>
    <style>
      /* reset */
      body,
      h1,
      h2,
      ul,
      ol,
      li,
      p {
        padding: 0;
        margin: 0;
      }

      a {
        text-decoration: none;
        color: #333;
      }

      img {
        vertical-align: top;
      }

      ul,
      ol,
      li {
        list-style-type: none;
      }
      /* reset */
      /* common */
      .top_wrapper {
        margin: 0 auto;
        width: 980px;
      }

      .header_wrapper {
        width: 1300px;
        margin: 0 auto;
      }

      .main_wrapper {
        width: 1200px;
        margin: 0 auto;
      }
      /* common */
      .main {
        height: 100px;
      }

      .news-section {
        display: flex;
        height: 342px;
      }

      .news-section .banner {
        width: 605px;
        background-color: orange;
      }

      .news-section .news {
        flex: 1;
        background-color: purple;
      }

      .news-section .download {
        width: 236px;
        background-color: skyblue;
      }

      .news-section .download a {
        display: block;
        background: url("./images/index-download.png") no-repeat;
      }

      .news-section .download a.download-btn {
        height: 128px;
        background-position: 0 -219px;
      }

      .news-section .download a.guard-btn {
        height: 106px;
        background-position: 0 -350px;
      }

      .news-section .download a.experience-btn {
        height: 108px;
        background-position: 0 -461px;
      }
    </style>
  </head>
  <body>
    <div class="main main_wrapper">
      <div class="news-section">
        <div class="banner"></div>
        <div class="news"></div>
        <div class="download">
          <a href="#" class="download-btn"></a>
          <a href="#" class="guard-btn"></a>
          <a href="#" class="experience-btn"></a>
        </div>
      </div>
      <div class="content-section"></div>
      <div class="match-section"></div>
    </div>
  </body>
</html>

内容回顾

一、vertical-align

1.1.vetical-align其他值

给行内级元素设置
middle
- 基线 + x高度的一半

1.2.行内块级元素其他现象

二、css整体内容的回顾

三、项目实战

3.1.代码规范(重要)

3.2.css编写顺序

定位/浮动/flex
display/visibilty
box model
文字/文本
background
其他

四.王者荣耀

4.1.top区域

4.2.header区域

4.3.main-news区域(正在进行ing)

最后编辑于：2022.05.01 13:41:42

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,013评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,205评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,370评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,168评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,153评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,954评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,271评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,916评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,382评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,877评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,989评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,624评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,209评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,199评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,418评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,401评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,700评论 2赞 345

01-HTML+CSS/18-CSS整体内容回顾-王者荣耀项目实战

CSS整体内容回顾-王者荣耀项目实战

vertical-align

行内块元素的现象

CSS回顾

一、邂逅css和常见的css

1.1.css的编写方式

1.2.常见的css

二、文本属性

2.1.text-align

2.2.text-decoration

2.3.text-indent

三、字体属性

3.1.font-family

3.2.font-style

3.3.font-weight

3.4.font-size

3.5.line-height

3.6.font

四、css常见的选择器

4.1.基础选择器

4.2.属性选择器

4.4.子代/后代选择器

4.4.兄弟选择器

4.5.伪类选择器

4.6.交集/并集选择器

4.7.伪元素选择器

4.8.结构性伪类选择器

五 、css的特性

5.1.层叠特性

5.2.继承性

5.3.元素的类型

5.4.元素的隐藏方式

5.5.overflow

六、盒子模型

6.1.内容

6.2.内边距

6.3.border

6.4.margin

6.5.box-shadow/text-shadow

6.6.box-sizing

七、背景

7.1.background-image

7.2.background-size

7.3.background-position

7.4.background-repeat

7.5.background-attachment

八、结构伪类

九、布局

十、浮动

十一、flex布局

11.1.flex布局中概念

11.2.flex container属性

11.3.flex item属性

十二、形变-动画-vertical-align

代码规范

css编写顺序推荐

组件化开发思想

王者荣耀

内容回顾

一、vertical-align

1.1.vetical-align其他值

1.2.行内块级元素其他现象

二、css整体内容的回顾

三、项目实战

3.1.代码规范(重要)

3.2.css编写顺序

四.王者荣耀

4.1.top区域

4.2.header区域

4.3.main-news区域(正在进行ing)

推荐阅读更多精彩内容

五、css的特性