css世界的学习笔记
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世界的学习笔记的更多相关文章
- 《CSS世界》学习笔记(一)
<CSS世界>,张鑫旭著,人民邮电出版社,2017年12月第一版. 1.P9二维码链接文章的demo值得一看,可以实现有关“某些区域颜色始终保持一致”的效果. P9二维码所链接文章的一个d ...
- 从今天开始 每天记录HTML,CSS 部分的学习笔记
从今天开始 每天记录HTML,CSS 部分的学习笔记
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- 《CSS世界》读书笔记(十六)
<!-- <CSS世界>张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中,原因在于 CSS 中“行距的上下等分机 ...
- 《CSS世界》读书笔记(十五)
<!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseli ...
- 《CSS世界》读书笔记(十四)
<!-- <CSS世界>张鑫旭著 --> 功勋卓越的 border 属性 border-width 不支持百分比值 border-style 类型 border-style ...
随机推荐
- Hibernate中Restrictions查询用法(转)
Restrictions查询用法 HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <> Restrictions.ne() 不等于not equa ...
- BZOJ.3227.[SDOI2008]红黑树tree(树形DP 思路)
BZOJ orz MilkyWay天天做sxt! 首先可以树形DP:\(f[i][j][0/1]\)表示\(i\)个点的子树中,黑高度为\(j\),根节点为红/黑节点的最小红节点数(最大同理). 转移 ...
- React动画组件——React-Transitio-group动画实现
React动画组件--React-Transitio-group动画实现 安装 项目目录下使用命令行 yarn add react-transition-group 安装组件.在需要使用动画的页面加入 ...
- fetch添加超时时间
fetch添加超时时间 其实为fetch添加超时时间很简单,需要用到Promise.race()方法. Promise.race() 方法将多个Promise包装成一个新的Promise实例. var ...
- [P1441]砝码称重 (搜索+DP)
对于我这种蒟蒻,是很不错的一题了. dfs搜索当前状态 满足时DP 比较坑的地方就是起始的地方 我一开始从1开始,搜索写的是从0开始. 后来就统一用0开始的了. #include<bits/st ...
- Java基础知识总结--final、finally、finalize的区别
谈谈final.finally.finalize的区别 1.final修饰符:如果一个类被声明为final,意味着这个类不能再被派生出新的子类,不能作为父类被别的类继承.因此,一个类不能即被声明为ab ...
- Java第一课
1.引入Java虚拟机原因?过程:源文件--编译器(使用javac命令)-----二进制的字节码文件(平台无关)--解释器(使用Java命令)-----可执行文件结论:Java中的跨平台是通过[JVM ...
- win7的python3.5安装numpy包
1.你需要先确保已经安装了pip(因为我是我们需要用pip安装numpy包),我在cmd里面输入pip能显示pip的有关信息,所以我已经安装了pip了(其实是python3.x自带了pip) 如果没有 ...
- pygame-KidsCanCode系列jumpy-part13-改进跳跃
这节研究下跳跃如何做得更自然,先看看之前的跳跃有什么问题,我们把settings.py里的初始化参数调整下: # starting platform # PLATFORM_LIST = [(5, HE ...
- [CentOS7]安装tomcat并开启自启动
安装jdk 1.CentOS 6.X 和 7.X 自带有OpenJDK runtime environment (openjdk).它是一个在linux上实现开源的Java 平台. yum searc ...