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. linux 学习笔记 管道 pipe ls cp mv

    如ls |less -MN 含义把ls结果输出到less [ls]  ==管道== [more] ls命令 ls -a  展示隐藏的文件 <隐藏文件一般以. 开始> ls -t 以时间戳排 ...

  2. 无可奈何的开始了jquery的“奇淫技巧”

    转载请注明出处: https://home.cnblogs.com/u/zhiyong-ITNote/ 修改一个已有的项目,主要是前端方面,一般的项目后端都是处理好了的,不需要改也不能改,除非特殊需求 ...

  3. Beautifulsoup官方文档

    Beautiful Soup 中文文档 原文 by Leonard Richardson (leonardr@segfault.org) 翻译 by Richie Yan (richieyan@gma ...

  4. mac安装Elasticsearch

    去官网下载https://www.elastic.co/downloads/elasticsearch 本人使用的是2.3.2版本,我下载的是tar版本的,然后解压. 进入es的安装目录, cd el ...

  5. java之XML

    //转为XML格式 public static String ArrayToXml(Map<String, String> arr) { String xml = "<xm ...

  6. Some Conclusions.

    目录 DP 四边形不等式 数论 & 数学 数据结构 树链剖分 左偏树的性质及\(O(n)\)的构造 图论 树 二分图 竞赛图 平面图 双连通分量 字符串 后缀自动机 复杂度分析 没什么好写的. ...

  7. docker自动重启容器

    docker run --restart=always  -d --name myunbuntu ubuntu /bin/bash -c "l am a docker"   //无 ...

  8. linux VPS服务器的一些配置

    SSH密钥登录让Linux VPS/服务器更安全 2011年01月10日 上午 | 作者:VPSer 随着PHP越来越流行,Linux VPS/服务器的使用也越来越多,Linux的安全问题也需要日渐加 ...

  9. Unable to find utility "instruments", not a developer tool or in PATH

    在调试ios上的项目的时候出现报错 unable to find utility "instruments", not a developer tool or in PATH 报错 ...

  10. 单调队列以及单调队列优化DP

    单调队列定义: 其实单调队列就是一种队列内的元素有单调性的队列,因为其单调性所以经常会被用来维护区间最值或者降低DP的维数已达到降维来减少空间及时间的目的. 单调队列的一般应用: 1.维护区间最值 2 ...