1.+选择器div+p:选择紧接在div后的所有p元素;

2.导航的样式:(注意:不给a设置width:100%;只是需要display:block;利用流布居;)

<h4>无宽度,借助流动性</h4>
<div class="nav">
<a href="" class="nav-a">导航1</a>
<a href="" class="nav-a">导航2</a>
<a href="" class="nav-a">导航3</a>
</div>
.nav {
background-color: #cd0000;
}
.nav-a {
display: block;
margin: 0 10px;
padding: 9px 10px;
border-bottom: 1px solid #b70000;
border-top: 1px solid #de3636;
color: #fff;
}
.nav-a:first-child { border-top:; }
.nav-a + .nav-a + .nav-a { border-bottom:;}

原则:无宽度,无浮动,无图片;

css世界的学习笔记的更多相关文章

  1. 《CSS世界》学习笔记(一)

    <CSS世界>,张鑫旭著,人民邮电出版社,2017年12月第一版. 1.P9二维码链接文章的demo值得一看,可以实现有关“某些区域颜色始终保持一致”的效果. P9二维码所链接文章的一个d ...

  2. 从今天开始 每天记录HTML,CSS 部分的学习笔记

    从今天开始 每天记录HTML,CSS 部分的学习笔记

  3. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  4. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  5. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  6. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  7. 《CSS世界》读书笔记(十六)

    <!-- <CSS世界>张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中,原因在于 CSS 中“行距的上下等分机 ...

  8. 《CSS世界》读书笔记(十五)

    <!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseli ...

  9. 《CSS世界》读书笔记(十四)

    <!--  <CSS世界>张鑫旭著 --> 功勋卓越的 border 属性 border-width 不支持百分比值 border-style 类型 border-style ...

随机推荐

  1. 谷歌浏览器把网页打印成pdf

    一.认识markdown mweb for mac2.2.7 激活版 二.pdf和word pdf的可移植性比较好,在不同的操作系统中都能打开,而且安全,但是可编辑性不好,所以通常用markdown编 ...

  2. JAVA中final修饰符小结

    一.final关键字可以用来修饰类.方法.变量.各有不同. A.修饰类(class).      1.该类不能被继承.      2.类中的方法不会被覆盖,因此默认都是final的.      3.用 ...

  3. iOS中 H5的input输入框focus()无法自动拉起键盘(解决方法)

    ios的hybird APP 无法使用focus()获取焦点和键盘的问题. 解决方案 原来,在App的配置文件(config.xml),里面默认会有一句 1 <preference name=& ...

  4. Android异步消息传递机制源码分析

    1.Android异步消息传递机制有以下两个方式:(异步消息传递来解决线程通信问题) handler 和 AsyncTask 2.handler官方解释的用途: 1).定时任务:通过handler.p ...

  5. BZOJ.3938.Robot(李超线段树)

    BZOJ UOJ 以时间\(t\)为横坐标,位置\(p\)为纵坐标建坐标系,那每个机器人就是一条\(0\sim INF\)的折线. 用李超线段树维护最大最小值.对于折线分成若干条线段依次插入即可. 最 ...

  6. 数学——Euler方法求解微分方程详解(python3)

    算法的数学描述图解 实例 用Euler算法求解初值问题 \[ \frac{dy}{dx}=y+\frac{2x}{y^2}\] 初始条件\(y(0)=1\),自变量的取值范围\(x \in [0, 2 ...

  7. Java中的位运算符

    Java提供的位运算符有:左移( << ).右移( >> ) .无符号右移( >>> ) .位与( & ) .位或( | ).位非( ~ ).位异或( ...

  8. Linux下MySQL 安装配置

    MySQL 是最流行的关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言. MySQL由于其体积小.速度快 ...

  9. Spring 的 AOP 进行事务管理的一些问题

    AspectJ AOP事务属性的配置(隔离级别.传播行为等): <tx:advice id="myAdvice" transaction-manager="mtTx ...

  10. Java中的public、private、protected,函数修饰符

    1.public:public表明该数据成员.成员函数是对所有用户开放的,项目中其他脚本都可以直接进行调用 2.private:private表示私有,私有的意思就是除了脚本之外,项目中其他类都不可以 ...