速通web前端的sun-----web前端三剑客之css

最新推荐文章于 2024-07-19 12:58:53 发布

松果pine吃玉米

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量392

点赞数

分类专栏：速通web前端文章标签：前端 css

本文链接：https://blog.csdn.net/pinenutssg1/article/details/121791681

版权

速通web前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

每个知识点都需要勤加练习，每天进步一点点，共勉。

Chrome调试
1.1. 调试css

<!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 type="text/css">
    h1{
      font-size:50px;
      font-family: "宋体";
      text-align: center;
      color:coral;
    }

    p{
      font-size: 14px;
      color: blue;
      text-indent: 2em;
      font-family: "黑体";
      font-weight: bold;
    }


  </style>
</head>
<body>
<h1>忆江南</h1>
<p>【作者】白居易 【朝代】唐译文对照</p>
<p>江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝。能不忆江南？</p>
<h3>作者介绍</h3>
<p>白居易（772～846），字乐天，晚年号香山居士，又号醉吟先生，河南新郑（今河南郑州新郑市）人，是我国唐代伟大的现实主义诗人，唐代三大诗人之一。唐代宗大历七年（772年）正月，白居易出生于郑州新郑东郭宅（今新郑市东郭寺村）。白氏祖籍山西太原，白居易本人就出生于河南新郑。</p>
<h3>注释</h3>
<p>江南的风景多么美好，风景久已熟悉。太阳从江面升起，把江边的鲜花照得比火红，碧绿的江水绿得胜过蓝草。怎能叫人不怀念江南？</p>
<h3>赏析</h3><p>白居易曾经担任杭州刺史，在杭州呆了两年，后来又担任苏州刺史，任期也一年有余。在他的青年时期，曾漫游江南，旅居苏杭，应该说，他对江南有着相当的了解，故此江南在他的心目中留有深刻印象。当他因病卸任苏州刺史，回到洛阳后十二年，他六十七岁时，写下了这三首忆江南，可见江南胜景仍在他心中栩栩如生。要用十几个字来概括江南春景，实属不易，白居易却巧妙地做到了。他没有从描写江南惯用的“花”、“莺”着手，而是别出心裁地从“江”为中心下笔，又通过“红胜火”和“绿如蓝”，异色相衬，展现了鲜艳夺目的江南春景。</p>
</body>
</html>

在这里插入图片描述

常用文本属性
设置颜色的几种方式
3.1. 进制
盒子基本三属性
显示模式

这里最后的行内块元素的表单标签需要除掉form
选择器
6.1. 标签选择器

6.2. 类选择器
在这里插入图片描述

6.3. 多类名调用
在这里插入图片描述

6.4. 后代选择器
在这里插入图片描述

Css三种书写位置
Css层叠性
块元素的默认宽度
Css继承性
权重

这个地方，老师使用的是这个方法，也可以参照其他方法：https://web.qianguyihao.com/02-CSS%E5%9F%BA%E7%A1%80/05-CSS%E6%A0%B7%E5%BC%8F%E8%A1%A8%E7%9A%84%E7%BB%A7%E6%89%BF%E6%80%A7%E5%92%8C%E5%B1%82%E5%8F%A0%E6%80%A7.html#%E5%B1%82%E5%8F%A0%E6%80%A7%EF%BC%9A%E8%AE%A1%E7%AE%97%E6%9D%83%E9%87%8D

实例：
在这里插入图片描述

<!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 type="text/css">
    .box{
      width: 900px;
    }
    h1{
      font-size: 30px;
      text-align: center;
      font-weight: 400;
    }
    .box2{
      text-align: center;
    }
    .box3{
      font-size: 16px;
      text-indent:2em;
    }
    .blue{
      color: skyblue;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>中乙队赛前突然换帅仍胜毅腾高原黑马欲阻击舜天</h1>
    <div class="box2">
      <span style="color: gray; font-size: 14px;">2014年07月16日20:11</span>
      <span style="color: red;">新浪体育评论中大奖(11人参与)</span>
      <a href="##" class="blue">收藏本文</a>
    </div>
    <hr>
    <div class="box3">
      <p>新浪体育讯7月16日是燕京啤酒<a href="##" class="blue">[微博]</a>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
      <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈.</p>
      <p>据记者多方了解的情况，李虎<a href="##" class="blue">[微博]</a>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组筲向俱乐部提出能够多引|进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
      <p>这样的情况并没有影响到丽江嘉云昊队<a href="##" class="blue">[微博]</a>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，1顺利晋级下一 轮比赛。<b>根据中国足协杯的赛程， 丽江嘉云昊队将在本月23日迎战江苏舜天队。</b></p>
    </div>
    
  </div>


</body>
</html>

总结：多练习，记笔记

松果pine吃玉米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
速通web前端的sun-----web前端三剑客之css

每个知识点都需要勤加练习，每天进步一点点，共勉。Chrome调试1.1. 调试css<!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,.
复制链接

扫一扫