菜鸟教程-css学习笔记
CSS实例中有很多CSS的例子，可以学习。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{background-color:#d0e4fe;
}
h1
{color:orange;text-align:center;
}
p
{font-family:"Times New Roman";font-size:20px;
}
</style>
</head><body><h1>CSS 实例!</h1>
<p>这是一个段落。</p></body>
</html>
代码大意是:
两行字所用的标签分别使用了css中的定义(就是style里面的)，
CSS的结构是选择器和声明
########################################################################
CSS Id 和 Class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.center
{text-align:center;
}
</style>
</head><body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
########################################################################
CSS 创建
提到了样式表（.css文件），但是教程里面没有给出具体的完整案例
########################################################################
CSS背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{background:#ffffff url('img_tree.png') no-repeat right top;margin-right:200px;
}
</style></head><body>
<h1>Hello World!</h1>
<p>背景图片只显示一次,但它位置离文本比较远。</p>
<p>在这个例子中我们添加了一个右边距,所以背景图像不会打扰到文本。</p>
</body></html>效果如下:
########################################################################
css文本格式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a {text-decoration:none;}
</style>
</head><body>
<p>链接到: <a href="//www.runoob.com/">runoob.com</a></p>
</body></html>效果如下:
########################################################################
CSS Fonts(字体)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body><h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p></body>########################################################################
CSS 链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>
这个代码的意思是:
鼠标点击和覆盖文字时，会有不同的颜色。
########################################################################
列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul
{list-style-type:none;padding:0px;margin:0px;
}
ul li
{background-image:url(sqpurple.gif);background-repeat:no-repeat;background-position:0px 5px; padding-left:14px;
}
</style>
</head><body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body></html>效果如下:
代码大意是，代码下方的文字调用了上面定义好的li
########################################################################
CSS 表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
table, td, th
{border:1px solid black;
}
td
{padding:15px;
}
</style>
</head><body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>CSS 表格
代码大意是:
tr是一行
td是一列
########################################################################
CSS 盒子模型
盒子模型(Box Model)：
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head><body><img src="250x250px.gif" width="250" height="250" /><div class="ex">上面的图片是250 px宽。
这个元素的总宽度也是250 px。</div></body>
</html>效果如下
代码中的class就是C++中的例化(举个例子)。
代码大意对于上面效果图中的下方使用盒子模型，
盒子模型的样式被定义在div.ex中
###################################################################################
CSS 边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.one
{border-style:solid;border-width:5px;
}
p.two
{border-style:solid;border-width:medium;
}
p.three
{border-style:solid;border-width:1px;
}
</style>
</head><body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body></html>
###################################################################################
CSS 轮廓（outline）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body><p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>
</html>
代码用法和上面的"CSS边框类似"
###################################################################################
CSS margin(外边距)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{background-color:yellow;
}
p.margin
{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;
}
</style>
</head><body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body></html>
用法和上面的差不多。
###################################################################################
CSS padding（填充）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{background-color:yellow;
}
p.padding
{padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;
}
</style>
</head><body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body></html>
###################################################################################
CSS 分组 和 嵌套 选择器
分组代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1,h2,p
{color:green;
}
</style>
</head><body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
嵌套代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{color:blue;text-align:center;
}
.marked
{background-color:red;
}
.marked p
{color:white;
}
p.marked{text-decoration:underline;
}
</style>
</head><body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div><p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p><p class="marked">带下划线的 p 段落。</p>
</body>
</html>
所谓的嵌套的意思就是，这个<p>是在<body>内部还是<div>内部亦或是带class的。
和外层的标签组合起来就有了嵌套的味道。
###################################################################################
CSS尺寸
使用百分比来设置元素的最大宽度-代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head><body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" /><br>
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>
###################################################################################
CSS Display(显示) 与 Visibility（可见性）
这一节提到了块和内联元素
内联元素可以理解为不能直接设置宽度和高度元素，比如span，你为他设置宽度和高度没有效果，除非你把它设置成块级元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
li{display:inline;}
</style>
</head>
<body><p>链接列表水平显示：</p><ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul></body>
</html>效果如下:
然后是块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
span
{display:block;
}
</style>
</head>
<body><h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span></body>
</html>
上面的两份代码中，内联还是块取决于display后面的是block还是inline
然后下面的<span><\span>调用了上面的<body><\body>中定义的span
###################################################################################
CSS Position(定位)
所谓的定位其实就是元素在页面中的坐标。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h2
{position:absolute;left:100px;top:150px;
}
</style>
</head><body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body></html>
###################################################################################
CSS 布局 - Overflow
注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
这个东西的作用就是文本太长的情况下，怎么显示"太长"的那一部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {background-color: #eee;width: 200px;height: 200px;border: 1px dotted black;overflow:scroll;
}
</style>
</head>
<body><div id="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div></body>
</html>
其实就是修改下scroll的部分，然后就可以有“滚动条”“隐藏”之类的效果。
###################################################################################
CSS Float(浮动)
浮动的意思讲人话就是靠左还是靠右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.thumbnail
{float:left;width:150px;height:90px;margin:5px;
}
</style>
</head><body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
###################################################################################
CSS 布局 - 水平 & 垂直对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img {display: block;margin: 0 auto;
}
</style>
</head>
<body><h2>图片居中对齐</h2>
<p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p><img src="//static.runoob.com/images/mix/paris.jpg" alt="Paris" style="width:40%"></body>
</html>
###################################################################################
CSS 组合选择符
后续选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div~p
{background-color:yellow;
}
</style>
</head>
<body><p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div><p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p></body>
</html>
意思是让<div></div>作为边界，然后边界之外的染成yellow色彩。
###################################################################################
CSS 伪类(Pseudo-classes)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p:first-child i
{color:blue;
}
</style>
</head><body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
</html>
使用的时候没用涉及class
##################################################################################
CSS伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p:first-letter
{color:#ff0000;font-size:xx-large;
}
p:first-line
{color:#0000ff;font-variant:small-caps;
}
</style>
</head><body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母
设置特殊样式。</p>
</body>
</html>
##################################################################################
CSS 导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul><p>注意：这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。</p></body>
</html>
其实就是一堆链接
##################################################################################
下拉菜单
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropdown {position: relative;display: inline-block;
}
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 16px;
}
.dropdown:hover .dropdown-content {display: block;
}
</style>
</head>
<body><h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p><div class="dropdown"><span>鼠标移动到我这！</span><div class="dropdown-content"><p>菜鸟教程</p><p>www.runoob.com</p></div>
</div></body>
</html>效果是：
上面的最下方的两个<p></p>指的是下拉菜单的具体内容
下半部分代码调用了上面定义的dropdown-content
##################################################################################
CSS 提示工具(Tooltip)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
.tooltip {position: relative;display: inline-block;border-bottom: 10px dotted green;
}.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: -5px;left: 110%;
}.tooltip .tooltiptext::after {content: "";position: absolute;top: 50%;right: 100%;margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent red transparent transparent;
}.tooltip:hover .tooltiptext {visibility: visible;
}
</style>
<body style="text-align:center;"><h2>右侧提示框/左侧箭头</h2><div class="tooltip">鼠标移动到我这<span class="tooltiptext">提示文本</span>
</div></body>
</html>代码中有4处tooltip，下面来分别解释。
.tooltip开关，如果这个删除，那么提示功能消失,同时设置下划线颜色(绿色)
.tooltip .tooltiptext 设置提示文本，里面的如果改为visible,那么就会直接出现提示文本，不会隐藏
.tooltip .tooltiptext::after设置箭头的颜色和位置
.tooltip:hover .tooltiptext定义如何触发显示"提示文本"
效果如下:
###################################################################################
CSS图片廊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.img {margin: 5px;border: 1px solid #ccc;float: left;width: 180px;
}div.img:hover {border: 10px solid #777;
}div.img img {width: 100%;height: auto;
}div.desc {padding: 15px;text-align: center;
}
</style>
</head>
<body><div class="responsive"><div class="img"><a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg"><img src="//static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">1</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg"><img src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">2</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="//static.runoob.com/images/demo/demo3.jpg"><img src="//static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">3</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg"><img src="//static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">4</div></div>
</div></body>
</html>div.img:hover 鼠标移动到图片上面的时候的灰色边框厚度
div.desc文字边框的长度
div.img和div.img img到底啥区别？
这里注意，因为div是块属性，所以默认div显示图片的话一行只能显示一张图片。
为了让一行能显示多张图片，关键代码是:
float: left;
width: 180px;
然后，为了文字绑定图片，需要<div class="img">将他们打包
所以总的代码思路是:
<div class="img">把文字和图片打包，由于其中的div是块属性的，一行只能放一张图片(占据所有行宽)，所以需要float属性来修补。这里面<div class="img">对应的是div.img，div.img img对应的是
<img src="//static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">div.img和div.img img中都有width，他们是相乘的关系
div.img是把"文字和图片"打包后的整体"看作"一张图片。
div.img img是设定这个"图片"里面的图片。
搞这么复杂的目的就是为了。。。页面的一行能显示多张"图片"(=图片+文字 打包)。。。。
效果如下:
###################################################################################
CSS图像透明/不透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img
{opacity:0.4;filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */
}
img:hover
{opacity:1.0;filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */
}
</style>
</head>
<body><h1>图片透明度</h1>
<p>opacity 属性通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度：</p>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="/images/klematis2.jpg" width="150" height="113" alt="klematis"><p><b>注意:</b>在 IE 中必须声明 <!DOCTYPE> 才能保证 :hover 选择器能够有效。</p>
</body>
</html>下面是效果图，鼠标移动上去才会完全透明。
###################################################################################
CSS媒体类型
这节的例子举得不是特别好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
@media screen
{p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{p.test {font-weight:bold;}
}
</style>
</head><body>
<p class="test">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</body>
</html>效果如下:
###################################################################################
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
[title~=hello]
{color:blue;
}
</style>
</head><body>
<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>代码大意是：
包含hello的就染成蓝色。
************************
接下来是表单的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input[type="text"]
{width:150px;display:block;margin-bottom:10px;background-color:yellow;
}
input[type="button"]
{width:120px;margin-left:35px;display:block;
}
</style>
</head>
<body><form name="input" action="demo-form.php" method="get">
Firstname:<input type="text" name="fname" value="Peter" size="20">
Lastname:<input type="text" name="lname" value="Griffin" size="20">
<input type="button" value="Example Button"></form>
</body>
</html>
###################################################################################
CSS 表单（这里重点学习其中几个重要的例子）
带动画的搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input[type=text] {width: 130px;box-sizing: border-box;border: 4px solid #ccc;border-radius: 4px;font-size: 16px;background-color: white;background-image: url('https://static.runoob.com/images/mix/searchicon.png');background-position: 10px 10px; background-repeat: no-repeat;padding: 12px 20px 12px 40px;-webkit-transition: width 0.4s ease-in-out;transition: width 0.4s ease-in-out;
}input[type=text]:focus {width: 100%;
}
</style>
</head>
<body><p>搜索输入框带动画:</p><form><input type="text" name="search" placeholder="搜索..">
</form></body>
</html>
下拉菜单（select）样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
select {width: 100%;padding: 16px 20px;border: none;border-radius: 4px;background-color: #f1f1f1;
}
</style>
</head>
<body><p>下拉菜单</p><form><select id="country" name="country"><option value="au">Australia</option><option value="ca">Canada</option><option value="usa">USA</option></select>
</form></body>
</html>
响应式表单
<!DOCTYPE html>
<html>
<head><style>
* {box-sizing: border-box;
}input[type=text], select, textarea {width: 100%;padding: 20px;border: 1px solid #ccc;border-radius: 4px;resize: vertical;
}
/*设置输入框的尺寸*/label {padding: 12px 12px 12px 0;display: inline-block;
}
/*这个label就是指代First Name的右侧、下侧等等之类的距离*/input[type=submit] {background-color: #4CAF50;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;float: right;
}
/*submit按钮颜色*/input[type=submit]:hover {background-color: #45a049;
}
/*这里是鼠标移动到submit按钮上的时候，会变颜色*/.container {border-radius: 5px;background-color: #f2f2f2;padding: 20px;
}
/*整个表格的属性设置*/.col-25 {float: left;width: 25%;margin-top: 6px;
}.col-75 {float: left;width: 75%;margin-top: 6px;
}
/*col-25设定输入框左侧的文字*/
/*col-75设定输入框*/
/* 清除浮动 */
.row:after {content: "";display: table;clear: both;
}
/*让submit按钮包含在背景范围内*//*下面这个代码的意思是，如果屏幕被放大，那么First Name和输入框就会是"上下布局"，不再是"左右布局"*/
/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {.col-25, .col-75, input[type=submit] {width: 100%;margin-top: 0;}
}
</style>
</head>
<body><h2>响应式表单</h2>
<p>响应式表带可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：</p><div class="container"><form action="/action_page.php"><div class="row"><div class="col-25"><label for="fname">First Name</label></div><div class="col-75"><input type="text" id="fname" name="firstname" placeholder="Your name.."></div></div><div class="row"><div class="col-25"><label for="lname">Last Name</label></div><div class="col-75"><input type="text" id="lname" name="lastname" placeholder="Your last name.."></div></div><div class="row"><div class="col-25"><label for="country">Country</label></div><div class="col-75"><select id="country" name="country"><option value="australia">Australia</option><option value="canada">Canada</option><option value="usa">USA</option></select></div></div><div class="row"><div class="col-25"><label for="subject">Subject</label></div><div class="col-75"><textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea></div></div><div class="row"><input type="submit" value="Submit"></div></form>
</div></body>
</html>其中
@media screen and (max-width: 600px) {.col-25, .col-75, input[type=submit] {width: 100%;margin-top: 0;}
}的意思是，First Name和下面的輸入框是上下排列的，而原先是左右排列的
###################################################################################
CSS计数器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ol {counter-reset: section;list-style-type: none;
}li::before {counter-increment: section;content: counters(section,".") " ";
}
</style>
</head>
<body>
----------------------------------------------------
<ol><li>item1</li><li>item2 <ol><li>item3</li><li>item4</li><li>item5<ol><li>item6</li><li>item7</li><li>item8</li></ol></li><li>item9</li></ol></li><li>item10</li><li>item11</li>
</ol><ol><li>item12</li><li>item13</li>
</ol><p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p></body>
</html>效果如下:
所谓的计数器是针对文章标题左侧的序号的。
技巧是</li>替换为<ol>，然后就可以产生二级、三级小标题的序号。
###################################################################################
CSS网页布局-响应式网页布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
* {box-sizing: border-box;
}body {font-family: Arial;padding: 10px;background: #f1f1f1;
}/* 头部标题 */
.header {padding: 30px;text-align: center;background: white;
}.header h1 {font-size: 50px;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航条链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接颜色修改 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建两列 */
/* Left column */
.leftcolumn { float: left;width: 75%;
}/* 右侧栏 */
.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;
}/* 图像部分 */
.fakeimg {background-color: #aaa;width: 100%;padding: 20px;
}/* 文章卡片效果 */
.card {background-color: white;padding: 20px;margin-top: 20px;
}/* 列后面清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 底部 */
.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;
}/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {.leftcolumn, .rightcolumn { width: 100%;padding: 0;}
}/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;}
}
</style>
</head>
<body><div class="header"><h1>我的网页</h1><p>重置浏览器大小查看效果。</p>
</div><div class="topnav"><a href="#">链接</a><a href="#">链接</a><a href="#">链接</a><a href="#" style="float:right">链接</a>
</div><div class="row"><div class="leftcolumn"><div class="card"><h2>文章标题</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height:200px;">图片</div><p>一些文本...</p><p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p></div><div class="card"><h2>文章标题</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height:200px;">图片</div><p>一些文本...</p><p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p></div></div><div class="rightcolumn"><div class="card"><h2>关于我</h2><div class="fakeimg" style="height:100px;">图片</div><p>关于我的一些信息..</p></div><div class="card"><h3>热门文章</h3><div class="fakeimg"><p>图片</p></div><div class="fakeimg"><p>图片</p></div><div class="fakeimg"><p>图片</p></div></div><div class="card"><h3>关注我</h3><p>一些文本...</p></div></div>
</div><div class="footer"><h2>底部区域</h2>
</div></body>
</html>对于这种响应式布局，都会有@之类的语句，为的是响应用户的放大缩小操作时，对页面上显示的内容做适当的调整。
菜鸟教程-css学习笔记相关推荐
- python scrapy菜鸟教程_scrapy学习笔记（一）快速入门
安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...
- 菜鸟教程-css3学习笔记
学习链接是: https://www.runoob.com/css3/css3-tutorial.html ############################################## ...
- Java菜鸟教程系列 学习笔记总结 基础篇(1)
基础语法 本博客通过学习菜鸟教程Java专栏,并整理得出的Java基础知识. 命名规范 1.项目名全部小写 2.包名全部小写 3.类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写.如: ...
- 菜鸟教程-Javascript学习笔记-JS函数之前
教程连接是: https://www.runoob.com/js/js-tutorial.html DOM(一些操作页面元素的方法) BOM(一些操作浏览器的方法) ################# ...
- 菜鸟教程PHP学习笔记（不定期更新）
NO.1-PHP表单验证 代码详细注释版 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...
- 菜鸟教程Cpp学习笔记
一.面向对象开发的特征 面向对象开发的四大特性: 封装 抽象 继承 多态 二.C++ 中的类型限定符 限定符 含义 const const 类型的对象在程序执行期间不能被修改改变. volatile ...
- Java菜鸟教程系列 学习笔记总结 面向对象篇(1)
继承 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. 继承的特性 子类拥有父类非 private 的属性.方法. 子类 ...
- 《CSS菜鸟教程》学习
学习资料:<CSS菜鸟教程> 学习目标:熟悉CSS语法即可 CSS简介 什么是CSS? CSS(Cascading Style Sheets)层叠样式表 CSS定义了如何显示HTML元素 ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
最新文章
- java rtmp_搭建rtmp直播流服务之2：使用java实现ffmpeg命令接口化调用（用java执行ffmpeg命令）...
- super().__init__()理解（三）
- groovy定义变量获取当前时间_IDEA不愧为神器，结合Groovy脚本，简直无敌！
- for-each 循环原理
- Ajax技术简单入门
- mysql函数使用场景_mysql的函数和存储过程的比较，以及在实际场景中的使用案例...
- 进阶篇：6）样机制作与验证
- MyBatis由浅入深学习总结之二：MyBatis解决Java实体类和数据库表字段不一致方法总结
- Asp.net网站的ClickOnce自动部署（3）－虚拟目录的配置
- mac nginx 安装及PHP配置
- PyTorch学习—23.PyTorch的基本使用
- 爬虫实例5 爬取58房源信息（xpath）
- h5抽奖大转盘开发笔记小结,涉及到的知识点和包资源
- 多项式求值秦九韶算法
- 蓝屏代码及其解决方案
- 【Kepware与S71500连接 返回协议错误0X81解决方案】
- 【奈茶君】STM32F407驱动WS2812
- 关于更改Python的默认工作路径
- arm体系结构总结笔记10-arm汇编
- 大数据分析软技能有哪些
热门文章
- LeetCode:Add Two Numbers
- Flex4/Flash多文件上传(带进度条)实例分享
- Spring中的Ibatis之SqlMapClientDaoSupport
- Microsoft Enterprise Library---解读Configuration之元数据
- iview table后端分页 多选 翻页选中回显
- 为什么多对多关系需要建立中间表_中间表是什么？和报表有什么关系？会带来怎样的问题？又如何解决？...
- w3c的ajax操作函数,关于ajax的使用方法_例题、ajax的数据处理
- CSS3动画---移动端上下固定高度，中间自适应
- IE10,IE9透明元素无法点击
- linux启动Spark本地模式（Local模式）