Web-Css
关注
分享
扫一扫
文章平均质量分 95
Sherry Lupus
21岁就认定的事情，就算到了81岁也还能坚持。
展开
-
【Web】CSS（No.11）初识Css
CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS 网页的美容师CSS的出现，拯救了混乱的HTML，当然更加...原创 2019-06-03 23:20:59 · 371 阅读 · 0 评论 -
【Web】CSS（No.25）定位（position：static、relative、absolute、fixed）、叠放次序/层级（z-index）
定位(position)需要素材点击图片联系我或私信、评论元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移边偏移属性描述top顶端偏移量，定义元素相对于其父元素上边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离right右侧偏移量，定义元素相对于其...原创 2019-06-12 10:30:34 · 811 阅读 · 0 评论 -
【Web】CSS（No.26）定位经典案例（一）《静态轮播图》
需要素材点击图片联系我或私信、评论效果图：源码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>静态轮播图</title> <style> * { margin:0; padding:...原创 2019-06-12 10:38:46 · 510 阅读 · 0 评论 -
【Web】CSS（No.27）定位经典案例（二）《顺丰导航栏》
需要素材点击图片联系我或私信、评论效果图：源码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>顺丰导航栏</title> <style> * { margin:0; padding:...原创 2019-06-12 10:43:04 · 3504 阅读 · 0 评论 -
【Web】CSS（No.28）元素的显示和隐藏（display、visibility、overflow）
元素的显示与隐藏需要素材点击图片联系我或私信、评论在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！显示（display）display 设置或检索对...原创 2019-06-12 11:00:34 · 401 阅读 · 0 评论 -
【Web】CSS（No.29）CSS高级技巧（鼠标样式、轮廓、防止拖拽文本域、垂直对齐、图片/表单和文字对齐、去除图片底侧空白缝隙、溢出的文字隐藏）精灵图/雪碧图（sprite）
CSS高级技巧需要素材点击图片联系我或私信、评论CSS用户界面样式所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓，防止表单域拖拽等。鼠标样式（cursor）设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。cursor : default 小白 | pointer 小手 | move 移动 | text 文本鼠标放我身...原创 2019-06-13 01:28:41 · 348 阅读 · 0 评论 -
【Web】CSS（No.30）精灵图经典案例（一）《微信滑动门》
需要素材点击图片联系我或私信、评论效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微信滑动门</title> <style> *{ padding: 0; margin: 0; ...原创 2019-06-13 01:28:52 · 400 阅读 · 1 评论 -
【Web】CSS（No.31）字体图标
字体图标图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。尤其是在移动端响应式，很多情况下希望我们的图标是可以缩放的。此时就需要字体图标（iconfont)。字体图标优点可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…但是本质其实是文字，...原创 2019-06-13 01:29:01 · 347 阅读 · 0 评论 -
【Web】CSS（No.32）Css页面布局经典案例（二）《云道商城首页》
需要素材点击图片联系我或私信、评论效果图html源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>云道</title> <link rel="stylesheet" href="css/index.css">...原创 2019-06-13 01:29:09 · 3196 阅读 · 17 评论 -
【Web】CSS（No.33）Css页面布局经典案例（三）《京东首页》
需要素材点击图片联系我或私信、评论效果图：html源码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <!-- 项目...原创 2019-06-13 01:29:21 · 1119 阅读 · 6 评论 -
【Web】CSS（No.34）Css页面布局经典案例（四）《米柚官网》
需要素材点击图片联系我或私信、评论效果图：html源码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>米柚</title> <link rel="stylesheet" href="css/index.css"...原创 2019-06-13 01:29:30 · 1391 阅读 · 1 评论 -
【Web】CSS（No.24）Css页面布局经典案例（一）《模仿百度首页》
需要素材点击图片联系我或私信、评论效果图：html源码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <link rel="stylesheet" href="css/index.css"...原创 2019-06-12 10:09:55 · 521 阅读 · 0 评论 -
【Web】CSS（No.23）版心和布局流程
版心和布局流程需要素材点击图片联系我或私信、评论阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。布局流程为了提高网页制作的效率，布局...原创 2019-06-12 10:02:33 · 962 阅读 · 0 评论 -
【Web】CSS（No.22）浮动（float）
浮动(float)需要素材点击图片联系我或私信、评论普通流(normal flow)这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？CSS的定位机制有3种：普通流（标准流）、浮动和定位。html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就...原创 2019-06-12 09:49:32 · 181 阅读 · 0 评论 -
【Web】CSS（No.12）Css基本选择器（标签选择器、类选择器、多类名选择器、id选择器、通配符选择器）
CSS基础选择器标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者：元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺...原创 2019-06-10 18:53:02 · 408 阅读 · 0 评论 -
【Web】CSS（No.13）Css的基本样式（字体样式属性：字号、字体、粗细、风格；外观属性：文本颜色、行间距、水平对齐方式、首行缩进、文本的装饰）
Css的基本样式CSS字体样式属性font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：1em = 16pxfont-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所...原创 2019-06-11 18:59:57 · 2942 阅读 · 0 评论 -
【Web】CSS（No.14）Css复合型选择器（交集选择器、并集选择器、后代选择器、子代（子元素）选择器、伪类选择器）
CSS复合选择器复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。记忆技巧：交集选择器 是 并且的意思。 即…又…的意思比如： p.one 选择的是： 类名为 .one 的 段落标签。用的相对来说...原创 2019-06-11 19:27:49 · 614 阅读 · 0 评论 -
【Web】CSS（No.15）Css注释、标签显示模式（display）、Css书写规范
CSS注释CSS规则是使用 /* 需要注释的内容 / 进行注释的，即在需要注释的内容前使用 “/” 标记开始注释，在内容的结尾使用 “*/”结束。例如：p { font-size: 14px; /* 所有的字体是14像素大小*/}标签显示模式（display）标签的类型(显示模式)HTML标签一般分为块标签和行内标签两种类型，它们...原创 2019-06-11 19:33:24 · 699 阅读 · 0 评论 -
【Web】CSS（No.16）Css的三大特性（层叠性、继承性、优先级）
CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下...原创 2019-06-11 20:13:18 · 3326 阅读 · 5 评论 -
【Web】CSS（No.17）Css经典案例（一）《Css实现百度首页》
需要素材联系我或私信、评论效果图HTML源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>百度首页</title> <link rel="stylesheet" href="css/index.css">...原创 2019-06-11 20:23:03 · 2273 阅读 · 3 评论 -
【Web】CSS（No.18）Css经典案例（二）《畅销书排行榜》
需要素材联系我或私信、评论效果图HTML源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>畅销书排行榜</title> <link rel="stylesheet" href="css/index.css"&g...原创 2019-06-11 22:35:35 · 3718 阅读 · 4 评论 -
【Web】CSS（No.19）Css背景样式（background）
Css背景样式（background）需要素材点击图片联系我或私信、评论CSS 可以添加背景颜色和背景图片，以及来进行图片设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固...原创 2019-06-12 09:09:53 · 271 阅读 · 0 评论 -
【Web】CSS（No.20）Css盒子模型（Box Model、border、padding、margin、盒子阴影）
盒子模型需要素材点击图片联系我或私信、评论其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。盒子模型（Box Model）所有的文档元素（...原创 2019-06-12 09:30:55 · 261 阅读 · 0 评论 -
【Web】CSS（No.21）Css经典案例（三）《爱宠知识》
需要素材点击图片联系我或私信、评论效果图：源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>爱宠知识</title> <style> * { margin:0; padding:0;...原创 2019-06-12 09:40:56 · 3091 阅读 · 2 评论 -
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信、评论效果图HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米官网</title> <link rel="stylesheet...原创 2019-08-12 19:43:33 · 1909 阅读 · 5 评论