04 2019 档案

CSS 布局术语
摘要：这一节的知识非常重要，它关系到能否做出漂亮的网站。下面的概念、术语需要好好理解。 构建块：CSS采用盒子模型来处理每个HTML元素。盒子可以是一个“块级”盒子，也可以是一个“内联”盒子。 包含元素：包含元素也叫父级元素。如果一个块级元素位于另一个块级元素内部，那么这个外部的框就称为包含元素或父级元素 阅读全文
posted @ 2019-04-28 11:19 乱世以外 阅读(390) 评论(0) 推荐(0)
CSS 图像高级 径向渐变
摘要：径向渐变 径向渐变使用 radial-gradient 函数语法。 这个语法和线性渐变很类似， 可以指定渐变结束时的形状 以及它的大小。 默认来说，结束形状是一个椭圆形并且和容器的大小比例保持一致。 下面代码演示径向渐变的用法： <!DOCTYPE html> <html> <head> <titl 阅读全文
posted @ 2019-04-25 15:34 乱世以外 阅读(340) 评论(0) 推荐(0)
CSS 图像高级 CSS 渐变
摘要：CSS 渐变 CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型。 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。用渐变代替图片，可以加快页面的载入时间、减小带宽占用。 同时，因为渐变是由浏览器直接生成的，渐变在页面缩放时的效果比图片更好，可以更加灵活、 阅读全文
posted @ 2019-04-25 15:33 乱世以外 阅读(2863) 评论(0) 推荐(0)
CSS 图像高级 Css Sprites
摘要：上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如Css Sprites，CSS 背景渐变等。 Css Sprites Css Sprites，国内也叫CSS精灵。它的原理是将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-po 阅读全文
posted @ 2019-04-25 15:32 乱世以外 阅读(170) 评论(0) 推荐(0)
CSS 背景图像 background属性简写
摘要：background属性简写 background属性可以像margin padding属性一样，有简写方法，它的简写顺序是： 如果某属性不想写，可以忽略。 下面的代码演示了background属性简写的用法。 <!DOCTYPE html> <html> <head> <title>backgro 阅读全文
posted @ 2019-04-25 15:30 乱世以外 阅读(3079) 评论(0) 推荐(0)
CSS 背景图像 背景图片定位
摘要：背景图片定位 background-position属性可以给背景图片定位。 background-position属性有两个值，第一个值是水平位置，第二个值是垂直位置。这两个值可以使用百分比来表示（50% 50% 表示垂直和水平都居中）。 也可以使用下面的方式表示： left top left c 阅读全文
posted @ 2019-04-25 15:29 乱世以外 阅读(1237) 评论(0) 推荐(0)
CSS 背景图像 重复图像
摘要：重复图像 background-repeat 属性可以重复图像，这对于小图片来说是福音。 background-repeat 属性有6个值： repeat 背景图像在垂直方向和水平方向都重复 repeat-x 背景图像在水平方向重复 repeat-y 背景图像在垂直方向重复 scroll 背景图像随 阅读全文
posted @ 2019-04-25 15:28 乱世以外 阅读(1701) 评论(0) 推荐(0)
CSS 背景图像 填充部分元素示例
摘要：填充部分元素示例 为某个元素设置CSS规则background-image 属性，则可以做到部分元素有背景颜色。 下面的示例演示如何如何给段落元素加背景。 <!DOCTYPE html> <html> <head> <title>填充部分</title> <style type="text/css" 阅读全文
posted @ 2019-04-25 15:27 乱世以外 阅读(641) 评论(0) 推荐(0)
CSS 背景图像 填充整个页面示例
摘要：background-image 属性可以设置背景图像。 背景图像可以填充整个页面的，也可以填写一部分。 background-image 属性的使用很简单：background-image:url(图片地址) 填充整个页面示例 <!DOCTYPE html> <html> <head> <titl 阅读全文
posted @ 2019-04-25 15:26 乱世以外 阅读(1658) 评论(0) 推荐(0)
CSS 图像左右对齐
摘要：左右对齐图像使用的技术是浮动div元素。 float:left 左对齐 float:right右对齐 示例 <!DOCTYPE html> <html> <head> <title>图像左右对齐</title> <meta charset="UTF-8"> <style type="text/css 阅读全文
posted @ 2019-04-18 02:24 乱世以外 阅读(5559) 评论(0) 推荐(0)
CSS 图像居中对齐
摘要：CSS 图像居中对齐 我们在《CSS 内外边距》学过内容居中，它的原理是将外边左右设置为auto。图像居中也是这个原理。 示例 <!DOCTYPE html> <html> <head> <title>图像居中</title> <meta charset="UTF-8"> <style type=" 阅读全文
posted @ 2019-04-17 18:01 乱世以外 阅读(510) 评论(0) 推荐(0)
CSS 图像大小
摘要：CSS 图像大小 虽然在HTML中，img标签有属性height、width设置高和宽，在工作中却使用得非常少，通常使用CSS来控制大小。 给盒子设置属性height、width限制大小。单位通常是像素。 示例 <!DOCTYPE html> <html> <head> <title>图像大小</t 阅读全文
posted @ 2019-04-17 17:54 乱世以外 阅读(832) 评论(0) 推荐(0)
CSS表单3 光标样式 (每个位置鼠标放上去的样式不同)
摘要：<!DOCTYPE html> <html> <head> <title>单选按钮对齐</title> <style type="text/css"> a{display:block} a.aut{cursor:auto} a.crosshair{cursor:crosshair} a.defaul 阅读全文
posted @ 2019-04-17 11:45 乱世以外 阅读(481) 评论(0) 推荐(0)
CSS表单2 组件排版
摘要：<!DOCTYPE html> <html> <head> <title>单选按钮对齐</title> <style type="text/css"> div { margin: 10px; padding-bottom: 10px; max-width:360px; } .title { floa 阅读全文
posted @ 2019-04-17 11:44 乱世以外 阅读(326) 评论(0) 推荐(0)
作业注释 CSS表单1 输入框前有图片
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> </title> <style type="text/css"> input{ font-size:120%; /**字体大小**/ color:#5a5854; 阅读全文
posted @ 2019-04-16 00:11 乱世以外 阅读(413) 评论(0) 推荐(0)
CSS 图像
摘要：CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式。 图像大小 虽然在HTML中，img标签有属性height、width设置高和宽，在工作中却使用得非常少，通常使用CSS来控制大小。 给盒子设置属性height、width限制大小。单位通常是像素。 示例 1 2 3 4 5 6 阅读全文
posted @ 2019-04-14 20:55 乱世以外 阅读(212) 评论(0) 推荐(0)
CSS 表单
摘要：输入框前有图片 老板让你实现在输入框前有图片的功能。老板觉得用图片代替文字更有说服力。 要实现这样的功能很简单，它的原理是将图片放在内边距内。 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 阅读全文
posted @ 2019-04-14 20:53 乱世以外 阅读(992) 评论(0) 推荐(0)
CSS 表格
摘要：关于表格的CSS属性不多。 empty-cells 如果在一个表格中有空单元格，可以使用empty-cells属性来指定是否显示空单元格的边框。 empty-cells 属性有3个值： show 显示单元格边框 hidde 隐藏单元格边框 inherit 如果一个表格嵌套在另一个表格中，单元格边框是 阅读全文
posted @ 2019-04-14 20:51 乱世以外 阅读(378) 评论(0) 推荐(0)
CSS 列表
摘要：列表项符号 list-style-type 属性可以设置符号的样式。 符号样式有有序的和无序的。 无序列表 在无序列表中，list-style-type 属性的值是形状，它有值有： none 什么都没有 disc 实心圆点 circle 空心圆 square 实心方块 示例 1 2 3 4 5 6 阅读全文
posted @ 2019-04-14 20:49 乱世以外 阅读(311) 评论(0) 推荐(0)
CSS 盒子投影
摘要：box-shadow 属性可以设置盒子的投影效果。它的原理同文本投影一样。字体风格 一节有介绍。 它有4个值，同时使用，也可以有选择地使用： 第一个值 设置阴影左右延伸长度，负值向左，正值向右 第二个值 设置阴影上下延伸长度，负值向上，正值向下 第三个值 设置阴影的模糊程度 第四个值 设置阴影的颜色 阅读全文
posted @ 2019-04-14 20:46 乱世以外 阅读(434) 评论(0) 推荐(0)
CSS 圆角
摘要：css的border-radius属性可以实现圆角、圆形、椭圆形。 实现上述圆角的前提是盒子要有边框。 规则圆角 下面的示例演示了圆角、赛道、圆形，我们先看效果图。 下面是实现的代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 阅读全文
posted @ 2019-04-14 20:46 乱世以外 阅读(312) 评论(0) 推荐(0)
CSS 边框图像
摘要：border-image border-image 可以将图像应用到盒子的边框上。 border-image 属性需要3个值同时存在： URL 图片的地址 切割图片的位，4个边需要写4个值 如何处理边，它又3个种方式 stretch 伸展图片 repeat 重复图片 round 重复图片，同时会处理 阅读全文
posted @ 2019-04-14 20:45 乱世以外 阅读(402) 评论(0) 推荐(0)
CSS 内外边距
摘要：padding 内边距 padding 属性用来指定元素的内容与元素边框之间的空隙。 padding 属性的单位通常是像素，也可以是EM和百分比。 如果使用百分比，内边距就是浏览器窗口的一个百分比。 如果一个盒子的宽度已经指定，后面再添加内边距，原来盒子的整体大小会增大。 如下面的示例： 1 2 3 阅读全文
posted @ 2019-04-14 20:42 乱世以外 阅读(510) 评论(0) 推荐(0)