CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

栏目: CSS · 发布时间: 5年前

内容简介:前言:通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。本篇的所有知识点为必掌握项,我们学习的时候可以先自己按要求写出样式,然后参照我的代码,把一行行全部弄懂。
本文推荐 PC 端阅读~

本文同步更新于:
- 「公众号:前端一万小时」
- 「知乎:Oli's 前端一万小时」

本文版权归 “前端一万小时” 所有,未经授权,请勿转载!
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
css_09
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

前言:通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。

这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。

本篇的所有知识点为必掌握项,我们学习的时候可以先自己按要求写出样式,然后参照我的代码,把一行行全部弄懂。

1 CSS 实现如下边框效果

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

参考代码:

:link:源码及效果展示

HTML

<p class="box1">
  “UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
<p class="box2">
  “UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
<p class="box3">
  “UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
<p class="box4">
  “UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
复制代码

CSS

body {
  width: 600px;
  margin: 0 auto;
}
p {
  margin-top: 30px;
  line-height: 1.5;
  padding: 18px 16px;
}
.box1 {
  border: 1px solid #ccc;
  border-radius: 3px;
                  
/*:rocket:我们用 border-radius 给边框加“圆角”*/
                  
}
.box2 {
  background-color: #ffe7e7;
  border-left: 6px solid #f44336;
  border-right: 7px solid #f44336;
}
.box3 {
  background-color: #ffffd7;
  border-top: 6px solid #ffeb3b;
  border-bottom: 7px solid #ffeb3b;
}
.box4 {
  background-color: #e7ffe7;
  border: 1px solid #4CAF50;
  border-bottom: 7px solid #4CAF50;
}
复制代码

2 CSS 实现如下边框、按钮效果

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

参考代码:

:link:源码及效果展示

HTML

<ul class="btn">
  <li><a class="btn-s" href=""> steal</a></li>
  <li><a class="btn-y" href=""> yellow</a></li>
  <li><a class="btn-o" href=""> orange</a></li>
  <li><a class="btn-r" href=""> red</a></li>
  <li><a class="btn-g" href=""> green</a></li>
</ul>
复制代码

CSS

body,h1,h2,h3,h4,h5,h6,ul,li,p {
  margin: 0;
  padding: 0;
}
/*:rocket:以上这种常用的设置是为了把浏览器默认样式——margin、padding 所产生的缝隙给去掉,
以便后边我们自己加样式*/

ul {
  list-style: none;
}
/*:rocket:这个是为了把列表前边的“小黑点”或“数字”去掉*/

a {
  text-decoration: none;
}
/*:rocket:这个可以把 a 链接下边默认的”下划线“去掉” */

body {
  text-align: center;
}
.btn>li {
  display: inline-block;
/*:rocket:使列表变成“行内盒子”,让它展示成“一行”*/  
  margin-top: 30px;
}

a {
  display: inline-block;
/*:rocket:使“块盒子”显示为“行内盒子”,让它展示成“一行”*/    
  padding: 8px 10px;
  color: #000;
  border-radius: 3px;
 }
a:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

/*:trophy:隐藏或者透明元素的方法:
1. opacity: 0;   透明度为 0 ,整体都看不见了;
2. visibility: hidden; 这个和上边类似;
3. display: none; 消失,不占用位置;
4. background-color: rgba(0,0,0,0.2); 只是背景色透明。*/


.btn-s {
  background-color: #009688;
  color: #fff;  /*:rocket:表示“白色”*/
 }
.btn-y {
  background-color: #ff9800;
}
.btn-o {
  background-color: #ffeb3b;
 }
.btn-r {
  background-color: #f44336;
  color: #fff;
 }
.btn-g {
  background-color: #4CAF50;
  color: #fff;
}
复制代码

3 CSS 实现如下两个表格效果

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

参考代码:

:link:源码及效果展示

HTML

<table class="display">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
    <tr>
      <td>Bo</td>
      <td>Nilsson</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>Ross</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

<table class="display display-1">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
    <tr>
      <td>Bo</td>
      <td>Nilsson</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>Ross</td>
      <td>35</td>
    </tr>
  </tbody>
</table>
复制代码

CSS

body {
  font-family: arial;
  width: 600px;
  margin: 0 auto;
/*:rocket:把 margin 设置为 0 auto ,是我们让“块级元素”居中最常用的方法*/
} 

table {
  margin-top: 30px;
}
.display {
  border-collapse: collapse;  
/*:rocket:
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:
-- separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;
-- collapse :如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;
-- inherit :规定应该从父元素继承 border-collapse 属性的值。
*/
  
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ccc;
}
.display th {
  color: #fff;
  background-color: #4CAF50;
  padding: 8px 8px;
  font-weight: bold;
}
.display tr {
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.display tr:nth-child(even) {
/*:rocket:这里的”结构选择器“请看下边注释详解*/
  background-color: #f1f1f1;
}

.display td {
  padding: 8px 8px;
}
.display.display-1 {
  border:none;
}
.display.display-1 th {
  background-color: #fff;
  color: #000;
}
复制代码

:warning: 注释: 结构选择器

第一类:

:one: 选择其父元素的第一个子元素。
E:first-child
:two: 选择其父元素的最后一个子元素。
E:last-child
:three: 选择父元素下第 n 个元素或奇偶元素,n 的值为:数字/odd/even。
E:nth-child(n)
复制代码

第二类:

:one: 选择父元素下使用同种标签的第一个标签元素。
E:first-of-type
:two: 选择父元素下使用同种标签的最后一个标签元素。
E:last-of-type
:three: 选择父元素下使用同种标签的第 n 个标签元素。n 的值为:数字/odd/even。
E:enth-of-type(n)
复制代码

:question:(用例子讲解):试着运行以下代码,并对结果作出解释。

:link:源码及效果展示

html

<div class="container">
    <div class="box">div.box</div>
    <p class="box">p.box</p>
    <div class="box">div.box</div>
    <div class="box">
      <div class="item">div.item</div>
      <p class="item">p.item</p>
    </div>
    <p class="box"></p>
 </div>
复制代码

css

.box:first-child {
  color: red;
}
.box:first-of-type {
  background: blue;
}
.box :first-child {
  font-size: 30px;
}
.box :first-of-type {
  font-weight: bold;
}
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

:bulb:答:

以上 html 结构为

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
.box:first-child {
   color: red;
}
复制代码

匹配类名为 box 的元素的父元素的第一个子元素,为 ①,使其字体颜色为 red 。① 生效;

.box:first-of-type {
   background: blue;
}
复制代码

匹配类名为 box 的元素的父元素下使用“同种标签”的“第一个”标签元素。①③④ 使用的是 <div> ,②⑤ 使用的是 <p> 标签。故选同种标签的第一个,① ② 生效;

.box :first-child {
   font-size: 30px;
}
复制代码

选择类名为 box 的后代元素的第一个子元素,加样式。 故 ⑥ 生效;

.box :first-of-type {
   font-weight: bold;
}
复制代码

选择类名为 box 的后代元素同标签的第一个标签元素加样式。故⑥ ⑦ 生效。

4 CSS 实现如下三角形

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

参考代码:

html

<div class="t0"></div>
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="t4"></div>
<div class="t5"></div>
<div class="t6"></div>
复制代码

css

  • t0:
/*:trophy:css 画三角形原理:
边框颜色 border-color 四个值默认的加载方向是(上、右、下、左) top right bottom left 。
*/

.t0 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 100px 100px;
  border-color: blue yellow green red;
}
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
  • t1:
.t1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 0 100px;  /*:rocket:通过将 bottom 的 width 值设置为 0 来达到把多于的位置去掉!*/
  border-color: blue transparent transparent transparent;
}
复制代码
  • t5:

:trophy:分析

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

以绿色的三角形为例,它的“高度”就是 css 中设置的 100px 。而它的底边长则为:

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

我们可以看到,在绿色三角形中,从它的顶点垂直下来一条线将绿色三角形分为两个小的三角形:

:one:左边小三角形受 left 影响;

:two:右边小三角形受 right 影响。

由此,我们可以画出 t5 这个三角形的形状:

.t5 {
  width: 0;
  height: 0;
  boder-width: 0 100px 100px 0;  /*:rocket:由上边的图可以很清晰的得出各个边应该是多少 px !*/
  border-color: transparent transparent green transparent;
}
复制代码

5 CSS 对边框做圆角、圆形

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

参考代码:

html

<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
复制代码

css

.circle-1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 15px;  /*:rocket:border-radius 用于画圆角!*/
}
.circle-2 {
  margin-top: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 10px 8px 6px 2px;
}
.circle-3 {
  margin-top: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  
  border-radius: 50px;
  /*:rocket:大于等于宽高的一半 50px; 或者为方便,直接 50%; */
}
复制代码

6 CSS 给盒子加个“背景”

6.1 需要注意的

加个“背景”就是加个图片,这个图片是背景图片,背景图片相当于:这个元素是一个窗口,而背景图片就是这个窗口后的风景。

  • 假如这个窗口没有了,那这个背景图片也可能看不到,比如没有 height ,就没有窗口:

html

<div class="box"></div>
复制代码

css

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  background-image: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 
}
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
  • 还有一个明显的例子:对于 span 它这个里边没有内容就代表着他没有宽度。当然就什么也没有。你稍微加一点文字,也会显示出来。

html

<span class="box"></span>
复制代码

css

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  background-image: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg); 
}
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

6.2 对于 background-size 需要知道的

background-size 的设置是去拉伸背景图片(给图片加一个长度的范围)以适应给定的“宽高”尺寸。

  • ① 设置绝对长度值。

html

<div class="box"></div>
复制代码

css

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat;
  background-size: 200px 200px;
}
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
  • ② 设置为 50% ,就代表窗口宽度的一半。
.box {
  width: 500px;
  height: 200px;
  border: 1px solid;
  background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat;
  background-size: 50%;
}
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
  • ③ 设置为 contain ,缩放背景图片以完全装入背景区,可能背景区部分空白。代表不管你背景图片多么的异型,我们这个窗口都可以把你给包围起来。
.box {
  width: 500px;
  height: 200px;
  border: 1px solid;
  background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat;
  background-size: contain;
}
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
  • ④ 设置 cover ,缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
.box {
  width: 600px;
  height: 200px;
  border: 1px solid;
  background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat;
  background-size: cover;
}
复制代码
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

6.3 css sprite 精灵图

css sprite 指将不同的图片、图标合并在一张图上。使用 css sprite 可以减少网络请求,提高网页加载性能——实质上,就是使用“背景图片”的方式来展示这些放在一张图上的小图标。

但由于图片的“可维护性”很差,现在一般都会选择用“字体图标”——在文章 《CSS——CSS 给文本加样式:① 字体属性》 中有详细讲解。

:bulb:制作精灵图的网站: CSS Sprites Generator

:bulb:图片压缩网站:tinypng

TinyPNG 使用智能有损压缩技术来减少 PNG 文件的文件大小,提高网站加载性能。

7 CSS 如何实现:单行文本溢出加 ...

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

7.1 前置知识:CSS 中的 overflow 属性

p {
  overflow: 值;
}
复制代码
属性
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

7.2 代码实现

:link:源码及效果展示

html

<div class="card">
  <img src="https://ws4.sinaimg.cn/large/006tNc79gy1g1xwmg3rfsj30u00uykjl.jpg">
  <h3><a href="#">Hello, Oli的前端一万小时。</a></h3>
  <p>“UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
  </p>
</div>
复制代码

css

.card{
   width: 150px;
   border: 1px solid #ccc;
   font-size: 12px;
   margin: 0 auto;
}
.card>img {
   width: 150px;
}
.card>h3 {
   padding: 0 10px;
  
   white-space: nowrap;  /*:rocket::one:首先,强制文本不换行*/
   overflow: hidden;  /*:rocket::two:其次,隐藏溢出*/
   text-overflow: ellipsis;  /*:rocket::three:最后,对溢出的文本用 ellipsis 省略号代替*/
}
/*:rocket:上边的三个属性必须连用才生效——单行文本溢出加 … */

.card>h3>a {
   text-decoration: none;
   color: red;
}
.card>p {
   padding: 0 10px;
   color: #666;
}
复制代码

8动手写出下边的页面

CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

:bulb:参考代码:

:link:源码及效果展示

html

<body>
  <h1 class="title">Oli's 前端一万小时</h1>
  <p class="description">理论不懂就实践,实践不会就学理论</p>
  <ul class="tab-ct">
    <li><a class="btn" href="#">项目1</a></li>
    <li><a class="btn" href="#">项目2</a></li>
    <li><a class="btn" href="#">项目3</a></li>
    <li><a class="btn" href="#">项目4</a></li>
    <li><a class="btn" href="#">项目5</a></li>
  </ul>
  <img class="work-img" src="https://ws2.sinaimg.cn/large/006tNc79gy1g2dz1zw5faj30j60j60zj.jpg" alt="">
  <ul class="operate-ct">
    <li><a class="btn" href="#">查看源代码</a></li>
    <li><a class="btn" href="#">使用说明</a></li>
  </ul>
  <p class="footer">
    作者: <a href="#">Oli</a>
  </p>
</body>
复制代码

css

body,h1,h2,h3,h4,h5,h6,ul,li,p {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
ul {
  list-style: none;
}
body{
  font-family: 14px/1.4 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;

/*:rocket:这里的 '\5FAE\8F6F\96C5\9ED1' 就是“微软雅黑”这四个字的 unicode 码*/
/*:rocket:我们怎么知道一个“字体”的 unicode 码?
  我们可以右键检查元素,然后点击 console ,然后输入 escape(`黑体`) ,
  就可以弹出相应的码。然后把 %u 换成 \ 。
*/
 
 
  background: #fff;
  text-align: center;
}
.work-img {
  width: 250px;
}
.btn {
  display: inline-block;
  padding: 4px 6px;
  color: #fff;
  background-color: #72b890;
  border-radius: 3px;
}
.btn:hover {
  opacity: 0.7;
  
/*:rocket:隐藏或者透明元素的方法:
:one: opacity: 0;   透明度为 0 ,整体都看不见了;
:two: visibility: hidden; 这个和上边类似;
:three: display: none; 消失,不占用位置;
:four: background-color: rgba(0,0,0,0.2); 只是背景色透明。
*/

}


.btn:active {
  opacity: 1;
}
.title {
  color: #87968e;
  font-size: 35px;
  margin-top: 30px;
}
.description {
  color: #aaa;
  margin-top: 10px;
  opacity: 0.6;
}
.tab-ct {
  margin-top: 30px;
}
.tab-ct>li {
  display: inline-block;
  margin: 0px 4px;
}
.work-img {
  margin-top: 40px;
}
.operate-ct {
  margin-top: 40px;
}
.operate-ct>li {
  display: inline-block;
  margin: 0 4px;
}
.footer {
  color: #aaa;
  margin: 30px;
}
a{
  color: #72b890;
}
复制代码

后记:CSS 能做的事情还有很多,上边介绍的都是实际工作中的高频用法,属于必掌握。至于其他用法,我们要抱有敬畏之心去细水长流地认真学习,不必一蹴而就。

加油!


以上所述就是小编给大家介绍的《CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Everything Store

The Everything Store

Brad Stone / Little, Brown and Company / 2013-10-22 / USD 28.00

The definitive story of Amazon.com, one of the most successful companies in the world, and of its driven, brilliant founder, Jeff Bezos. Amazon.com started off delivering books through the mail. Bu......一起来看看 《The Everything Store》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具