CSS
关注
分享
扫一扫
文章平均质量分 64
DurianPudding
这个作者很懒，什么都没留下…
展开
-
精通CSS-高级web标准解决方案（第2版）--读书笔记02
2.3.3层叠和特殊性1.层叠层叠给每个规则分配一个重要度，重要次序如下： - 标有！improtant 的用户样式原创 2018-07-16 10:41:46 · 637 阅读 · 0 评论 -
CSS中四种定位的区别
1、默认static（1）static表示没有定位，或者说不算具有定位属性。（2）如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。2、相对定位relative占据空间，相对于自身原有位置进行偏移，可能会覆盖其他元素。例如：top: 20px...原创 2019-02-26 21:51:49 · 1414 阅读 · 0 评论 -
水平垂直居中的四种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中</title>原创 2019-02-26 20:27:03 · 384 阅读 · 0 评论 -
flex布局实例：输入框的布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>输入框的布局</title>原创 2019-02-25 14:57:08 · 820 阅读 · 0 评论 -
Flex布局实例：流式布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>流式布局</title> <style> .main { width: 200px; hei原创 2019-02-26 15:37:53 · 1917 阅读 · 0 评论 -
右边宽度固定，左边自适应的三种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>右边宽度固定，左边自适应</title> <style> html, body { margin: 0;原创 2019-02-22 15:50:26 · 967 阅读 · 0 评论 -
flex布局实例：圣杯布局
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;圣杯布局&lt;/title&gt;原创 2019-02-22 15:42:57 · 768 阅读 · 0 评论 -
flex布局实例：网格布局
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;flex实例之网格布局&lt;/title&am原创 2019-02-22 15:14:28 · 788 阅读 · 0 评论 -
flex布局实例：骰子的布局
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;骰子实例&lt;/title&gt;原创 2019-02-22 14:45:40 · 599 阅读 · 0 评论 -
css3动画之transition和animation
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;t原创 2019-02-21 15:45:38 · 224 阅读 · 0 评论 -
精通CSS-高级web标准解决方案（第2版）--读书笔记04-对链接应用样式
第5章 对链接应用样式1、简单的样式//点击第一个锚时，跳转到第二个锚<p><a href="#mainContent">Skip to main content</a></p><h1><a name="mainContent">Welcome</a>&am原创 2018-08-03 15:56:12 · 297 阅读 · 0 评论 -
详解display:block,inline,inline-block
display是显示的意思，display:block就是将元素显示为块级元素，display:inline是将元素显示为行内元素，display:inline-block是将元素显示为行内元素但是又有块级元素的一些性质。1、块级元素 display:block; 1、常见的块级元素有：p,div,table,pre,h1~h6,ul,ol,dl等 2、自动占领一行，多个块级元素则自动换行...原创 2018-08-07 17:25:14 · 1412 阅读 · 0 评论 -
详解overflow:hidden
overflow:hidden 常有两个作用： 1、清除浮动 2、隐藏溢出一、清除浮动当父元素的内容原本由子元素撑开时（也就是父元素没有定义高度值），如果定义子元素浮动，子元素就脱离了文档流，不再占据空间，这时父元素就会收缩。如何让父元素像原来那样被子元素撑开呢？为父元素添加overflow:hidden相当于清除了子元素的浮动，就像子元素没有浮动，仍占据文档流一样！二...原创 2018-08-06 15:57:12 · 1202 阅读 · 0 评论 -
精通CSS-高级web标准解决方案（第2版）--读书笔记06-CSS布局
第八章 布局CSS布局概念是重中之重，要做好一个网页，首先应该考虑它的布局。要想创建可伸缩容易维护的CSS系统，要检查设计，寻找重复的模式，在这个阶段，不要关注表现方式，要注意结构和意义。一、计划布局总结思想：先整体后深入，先结构后内容，先一般后特殊，先定义后添加。首先要设计结构！先把页面划分为大的结构性区域，比如容器、页眉、内容区域和页脚。然后关注内容区域，建立网格等结构...原创 2018-08-06 15:44:07 · 213 阅读 · 0 评论 -
精通CSS-高级web标准解决方案（第2版）--读书笔记05-对列表应用样式和创建导航条
第 6 章 对列表应用样式和创建导航条1、基本列表样式<ul> <li>Write chapter</li> <li>Go shopping</li> <li>Cook diner</li> <li>Watch Lost<原创 2018-08-06 09:48:05 · 262 阅读 · 0 评论 -
精通CSS-高级web标准解决方案（第2版）--读书笔记01
第一章 基础知识1、ID还是类 ·只有在目标元素非常独特，绝不会对网站上其他地方别的东西使用这个名称时，才会使用ID。 ·告别“多类症”：不需要用许多类来区分各个元素，可以用“组件化”放在一个部分中，加一个类名。用“层叠”来识别里层部分。2、div和span ·告别“多div症”：为了将不必要的标记减少到最少，应该只在“没有元素能够实现区域分割”的情况下...原创 2018-07-13 16:38:19 · 292 阅读 · 0 评论 -
精通CSS-高级web标准解决方案（第2版）--读书笔记03--背景图像效果
第四章 背景图像效果4.1 背景图像基础原创 2018-07-16 22:20:31 · 204 阅读 · 0 评论 -
移动端如何适配
使用媒体查询做响应式布局，根据不同屏幕宽度加载不同css@media参考：圣杯布局完整代码@media (max-width: 768px) { .holyGrail-body { flex-direction: column; flex: 1; } .holyGrail-nav, .holyGail-content, ....原创 2019-02-26 21:59:02 · 378 阅读 · 0 评论