美文网首页马文的地下室
学习笔记《DIV+CSS》

学习笔记《DIV+CSS》

作者: 马文Marvin | 来源:发表于2016-10-14 17:42 被阅读14次

页面命名:

<div class="cf3-nav"></div>
<div class="cf3-container"></div>
<div class="cf3-footer"></div>

整个页面的居中:

#nav {margin:0px auto; width:1200px}
#container, #footer {margin:0px auto; width:1440px}

字体:

body {font-family:PingFangSC-Regular, "Microsoft YaHei", sans-serif;}

链接样式的处理:

a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:none;color: red}
a:visited { text-decoration: none;color: blue}

奇偶间隔显示的伪类:

.cf2-like-product-item:nth-child(2n) .cf2-like-product-item-bottom {background:#fc6605;}
.cf2-like-product-item:nth-child(2n) .cf2-like-product-item-title {color:#fc6605;}

Margin Border & Padding:


字符串截取:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

扩展阅读:http://stackoverflow.com/questions/20792639/how-to-display-only-the-first-few-lines-of-a-div-clamping

相关文章

  • DIV+CSS学习笔记

    CSS 样式 外部样式:不但本页可以调用,其他页面也可以调用 内部样式:只能针对本页 行内样式 导入样式 CSS ...

  • 学习笔记《DIV+CSS》

    页面命名: 整个页面的居中: 字体: 链接样式的处理: 奇偶间隔显示的伪类: Margin Border & Pa...

  • DIV+CSS学习笔记总结篇

    转载请声明 原文链接地址 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位:web前端开发工程师w...

  • div+css学习

    1.hack: 砍,劈 2.通常单独对一个div高度为百分比没有效果 3.xml的组成 文档声明 元素 元素的...

  • DIV+CSS学习

    1.优势表现和内容相分离;代码简洁,提高页面浏览速度;易于维护和改版;提高搜索引擎对网页的索引效率 和 标签是没有...

  • 使用div+css+javascript实现仿百度糯米首页

    通过对div+css的学习 可搭建静态网页 从网页切图到使用dw制作仿百度糯米首页巩固了对div+css的理解 ...

  • 前端学习历程

    首先学习 HTML,css,学习div+css布局。 (1)首先在菜鸟教程(www.runoob.com)或(ww...

  • div+css基础笔记

    1.css设计基础 div用来对块级元素进行分组,span可以对行内元素进行分组和标识。 链接方式: 内边距pad...

  • div+css学习02

    1.对一个div: 2.div css宽度width样式属性 对于div: width:50% 百分比可以,...

  • 前端学习路线V1.0

    第一阶段: HTML+CSS 学习周期:4周 学习路线:HTML语法、CSS语法->div+css布局->html...

网友评论

    本文标题:学习笔记《DIV+CSS》

    本文链接:https://www.haomeiwen.com/subject/gzdwyttx.html