CSS案例练习

淡然一笑wwl · 发表于 2023-2-7 19:13:15

来历：知乎

提要：尝试编写一些学员手册中供给的案例来稳固加深CSS中的常识点。
一、题目要求：

1.小我ID卡

我们已经为你供给了一些原始的 HTML 和一张图片，然后需要编写需要的 CSS 来让其成为一个标致的网上小名片，能够巨细是游戏玩家卡片或交际媒体简介的两倍。下面的段落描写了你需要做的工作。
根基设备：

首先，在你放 HTML 文件和图像文件的目录下，建立一个新的文件，把它命名为类似style.css。
经过 <link> 元素来将你的 CSS 链接到 HTML 文件中。
我们为你供给的 CSS 资本文本文件中，前两项法则集是我们设备好的，你可以间接利用，所以将他们复制粘贴到你的新 CSS 文件的顶部。同时也可以将这个作为考试，用来确认你能否正确链接了你的 CSS 文件到 HTML 中。
在以上的两条法则中增加一条 CSS 正文，正文中要包括一些文原本表白这是整体页面的一般款式。你可以在 CSS 文件底部增加 3 个或以上的正文，来明白地表白该款式是利用到卡片的容器，利用到题目和页脚的款式，和名片首要内容的款式。从现在起头，随后在款式表增加的款式都应当有构造地放置在合适的地方。

关注我们为你供给的挑选器和法则集：

接下来，我们希望你观察四个挑选器，并计较每一个的公用性。将它们写在稍后可以找到的地方，例如在 CSS 顶部的正文中。
现在是时辰把正确的挑选器放在正确的法则集上了！你的 CSS 资本中有四对挑选器和法则集需要婚配，现在就起头婚配，并将它们增加到你的 CSS 文件。你需要：
- 为整体卡片的容器供给一个牢固的宽/高，布景色彩，边框，以及边框圆角等等。
- 为 header 供给一个突变的布景色彩，从更暗到更亮，加上圆角，配合在卡片容器上设备的圆角。
- 为 footer 供给一个突变的布景色彩，从更亮到更暗，加上圆角，配合在卡片容器上设备的圆角。
- 将图像向右浮动，使其粘贴在名片首要内容的右侧，然后把它的 max-height 设备为 100% (一个聪明的技能，来确保它将放大/缩小，与父容器连结一样的高度，不管它酿成什么高度。)

留意！供给的法则集合有两个毛病。利用你晓得的任何技术找到这些毛病并修复，然后再继续。

你需要写的新法则：

编写一个同时面向 card head 和 card footer 的法则集，使它们计较的总高度为 50px（包括 30px 的内容高度和 10px 的 padding）但用 em 来暗示。
阅读器会为<h2> 和 <p>元素利用默许的 margin，这会影响我们的设想，所以编写一个法则集：margin 设备为 0。
为了阻止图像溢著名片的首要内容 ( <article> 元素)，我们需要给它设备一个明白的高度。设备 <article>的高度为 120px，可是利用 em来暗示。还要给它一个半通明黑色的布景色彩，发生一个稍暗一点的阴影，能让红色的布景稍微透过。
编写一个法则集，使 <h2> 有用的字体巨细为 20px (利用 em表达) 以及一个适当的行高将其放置在题目标内容框的中心。回忆起来，内容框高度应当是 30px，你一切需要的数字都已经给你了，所以可以计较出行高。
为页脚中的 <p> 编写一个法则集，使它的有用字体巨细为 15px (利用 em表达) 以及一个适当的行高将其放置在页面的内容框的中心。回忆起来，内容框高度应当是 30px，你一切需要的数字都已经给你了，所以可以计较出行高。
最为最初一步，为 <article> 中的段落设备一个合适的 padding 值，让它和 <h2> 以及页脚的段落左侧沿对齐，并将其色彩设备得便于阅读。

其他工作要斟酌：

假如你编写的 CSS 有比力好的可读性，并在每行上零丁声明，你将获得嘉奖。
你应当在一切法则的挑选器中都用 .card 作为开首，这样的益处是：假如将名片放在带有其他内容的页面的情况下，这些法则不会干扰其他元素的款式。

留意和提醒

你不需要以任何方式编辑 HTML，除了将 CSS 利用于你的 HTML。
当利用 em 值代表一些你需要的像素长度的时辰，想想 (<html>) 元素的根基字体巨细，以及需要乘以什么才能获得所需的值。这将给你 em 的值，最少在这样一个简单的情况下。

2.精彩的信纸

你已经有了建立一个信纸模版所需的一切文件，只需把它们放到一路就好。为了到达方针，你需要：
信纸主体

把 CSS 链接到 HTML 文档里。
给信纸增加这样一个布景：
- 把之前下载的顶部图片牢固到信纸顶部。
- 把之前下载的底部图片牢固到信纸底部。
- 为了给信纸一点纹理，在前面布景的根本上增加一个半通明的突变，使其在顶部和底部四周稍微变暗，但中心的大部分完全通明。

多增加一个background声明，仅增加顶部图片到信纸顶部，以此作为不支持之前那种声明方式的阅读器的后备计划。
给信纸增加一个红色的布景色彩。
给信纸增加一个 1mm 的高低实线边框，选一个合适信纸的色彩主题的边框色彩。

标志

把之前下载的标志图片增加为<h1> (en-US)的布景图片。
给标志增加一个过滤器，使它有一个隐约约约的阴影。
现在把增加的过滤器正文掉，尝试用其他（更跨阅读器兼容）的方式实现一个不异的阴影，阴影需要一样合适圆形图片的外形。

提醒和技能

记着，你可以这样为较旧的阅读器建立一个后备计划：先写一个较旧的阅读器支持的后备声明，然后再接着写只要较新的阅读器才支持的声明。这样比力旧的阅读器会利用第一个声明而疏忽掉第二个不支持的声明，与此同时比力新的阅读器会先利用第一个声明，然后用第二个声明把它覆盖掉。
假如想的话你可以随意地用自己的图片来做这个评价。

3.一个精彩的盒子

你的使命是建立一个酷炫的盒子，并摸索 CSS 的兴趣。
一般使命

把 CSS 链接到 HTML 里。

款式化盒子

给 <p> 增加款式：

一个对于大按钮来说公道的宽度，200 像素左右。
一个对于大按钮来说公道的高度，并使文本纵向居中。
居中文本。
用 rem 使字体稍大一点，大约 17-18 像素，在正文里说说你的值是怎样算出来的。
给你的设想定一个根本色彩，把它作为盒子的布景色彩。
把字体色彩设为同一个色彩，利用黑色的笔墨阴影增加可读性。
一个精巧的圆角边框。
一个跟根本色彩附近、1 像素宽的实线边框，色彩要稍深一点。
一个指向右下角的黑色半通明线性突变，让它在起头的时辰完全通明，在 30% 的处突变到 0.2 的不通明度，然后连结不异色彩到最初。
多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；别的两个是内嵌（inset）的盒阴影，一个是左上角四周的红色半通明阴影和另一个是右下角四周的黑色半通明阴影，让盒子有一个标致的 3D 表面。

4.一个精彩的网站

你需要实现你自己的结构。下面是你应当完成的方针：

在一行中显现导航选项，而且选项之间具有不异的空间。
导航条应随着内容一路转动而且在触碰到视口顶部以后于顶部牢固。
文章内的图片应当被文本包围。
<article> 与 <aside> 元素应当为双列结构。它们的列尺寸应当是弹性的，以便在阅读器窗口收缩得更小的时辰可以变窄。
照片应当以有 1px 间隔的两列网格显现出来。

在实现结构的进程中你不需要点窜 HTML，下面是你应当利用的技术：

Positioning
Float
Flexbox
CSS Grid Layout

你可以用好几种方式来实现这些方针，完成一件事的方式并不但要一个。尝试分歧的方式，而且看看哪个最有用。尝试以后写下笔记，你可以在本练习的帖子中大概 #mdn IRC 频道会商你实现它们的方式。
二、我实现的结果：

1.小我ID卡

CSS案例练习-1.jpg

2.精彩的信纸

3.一个精彩的盒子

4.一个精彩的网站

三、CSS实现代码：

1.小我ID卡

body {
  margin: 0;
}

html {
  font-family: &#39;Helvetica neue&#39;, Arial, &#39;sans serif&#39;;
  font-size: 10px;
  background-color: #ccc;
}

/* Selectors to be matched up with rulesets */
/* Rulesets to be matched up with selectors */

.card{
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

.card header{
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
  height: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: middle;
}

.card footer{
  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
  border-radius: 0 0 1.5em 1.5em;
  height: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.card article img{
  max-height: 100%;
  float: right;
}

article{
  height: 11em;
  color: white;
  background-color: rgb(203, 1, 42);
  padding-left: 10px;
  vertical-align: middle;
}

h2{
  font-size: 2em;
  padding-left: 10px;
}

footer p{
  font-size: 1.5em;
  padding-left: 10px;
}
复制代码2.精彩的信纸

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
  background: #ccc;
}

article {
  width: 210mm;
  height: 297mm;
  margin: 20px auto;
  position: relative;
}

address {
  position: absolute;
  bottom: 8mm;
  right: 20mm;
}

h1 {
  position: absolute;
  top: 12mm;
  left: 20mm;
  width: 128px;
  height: 128px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  padding: 44px 0;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Your CSS below here */
body{
background-color:white;
background-image: url(&#34;top-image.png&#34;),url(&#34;bottom-image.png&#34;),linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)), linear-gradient(to bottom, rgba(254, 254, 254, 0.1), rgba(255, 255, 255, 0.5));
background-repeat:no-repeat no-repeat;
background-position:top,bottom;
padding-top:3px;
padding-bottom:3px;
border-top:3px red;
border-bottom:3px red;
}

h1{
background-image: url(&#34;logo.png&#34;);
filter:drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
}

复制代码3.一个精彩的盒子

html {
  font-family: sans-serif;
}

p{
color:white;
font-size:2rem;
border: 3px solid black;
width:200px;
height:120px;
vertical-align: middle;
text-align:center;
padding-top: 40px;
background-color: red;
text-shadow:2px 2px 5px rgba(0,0,0,0.9);
border-radius: 10px;
border-color: rgb(167, 0, 0);
background-image: linear-gradient(to bottom right,rgba(254, 150, 150, 0.5),rgba(149, 0, 0, 0.1));
box-shadow: 3px 3px 3px rgba(0, 0, 0,0.9),inset 2px 1px 2px rgba(255, 255, 255,0.5);

}

/* Your CSS below here */
复制代码4.一个精彩的网站

body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
align-content: center;
  }

  img {
   max-width: 100%;
   display: block;
  }

  .logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
  }

  .grid {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
display: grid;
grid-template-columns: 20fr 1fr;
float: left;
  }

  nav {
background-color: #000;
width: 100%;
height: 20px;
padding: .9em;
position: fixed;
top: 100px;
  }

  nav ul {
margin: 0;
padding: 0;
list-style: none;
  }

  nav a {
color: #fff;
text-decoration: none;
padding: .5em 1em;
  }

  .photos {
list-style: none;
width: 150px;
height: 150px;
margin: 2px;
padding: 2px;
display:grid;
grid-template-columns: 150px 150px;
grid-template-rows: 150px 150px;
  }

  .feature {
   width: 200px;
   float: left;
   padding-right: 20px;
  }

  nav ul li{
float: left;
width: 20%;
  }

  article{
margin-left: 20%;
margin-right: 2%;
  }

原文地址：https://zhuanlan.zhihu.com/p/603680832
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。

		自动登录	找回密码
密码			立即注册