CSS导航栏

  • 熟练使用导航栏，对于任何网站都非常重要
  • 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单

垂直导航栏：

<!DOCTYPE html>

<html>

<head>

<style>

ul

{

list-style-type:none;

margin:0;

padding:0;

}

a

{

display:block;

width:60px;

background-color:#dddddd;

}

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>A background color is added to the links to show the link area.</p>

<p>Notice that the whole link area is clickable, not just the text.</p>

</body>

</html>

水平导航栏：

<!DOCTYPE html>

<html>

<head>

<style>

ul

{

list-style-type:none;

margin:0;

padding:0;

}

li

{

display:inline;

}

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

浮动列表项：

<!DOCTYPE html>

<html>

<head>

<style>

ul

{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

li

{

float:left;

}

a

{

display:block;

width:60px;

background-color:#dddddd;

}

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>

</html>

CSS 属性选择器

<!DOCTYPE html>

<html>

<head>

<style>

[title]{

    color: red;

}

</style>

</head>

<body>

<h1 title="haha">666</h1>

</body>

</html>

CSS属性和值选择器

  • 属性=值（单值）
  • 属性~=值（包含值的都算，多值）
<!DOCTYPE html>

<html>

<head>

<style>

[title~=hello]

{

color:blue;

}

</style>

</head>

<body>

<h2>Will apply to:</h2>

<h1 title="hello world">Hello world</h1>

<p title="student hello">Hello CSS students!</p>

<hr>

<h2>Will not apply to:</h2>

<p title="student">Hi CSS students!</p>

</body>

</html>

表单样式：

  • 属性选择器无需选择class或者id的形式
<!DOCTYPE html>

<html>

<head>

   <style type="text/css" media="all">

       input[type="text"]{

           width: 150px;

           display: block;

           margin-bottom: 10px;

           background-color: red;

       }

       button[type="button"]{

           width: 120px;

           height: 100px;

           margin-left: 35px;

           background-color: blue;

           display: block;

       }

   </style>

</head>

<body>

<form action="method" method="get" accept-charset="utf-8" type="text" size="20px" name="input">

       name<input value="haha" type="text">

       password<input value="hehe" type="text" size="20px">

       <button type="button" value="example button">example button</button>

</form>

</body>

</html>

4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器的更多相关文章

  1. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  2. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. CSS：导航栏下拉菜单模板

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  5. 织梦DedeCMS v5.7 实现导航条下拉菜单

    首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...

  6. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  7. Bootstrap历练实例：导航内下拉菜单的用法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

  9. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

随机推荐

  1. 动态设置 layui select 为选中状态

    // 当前的select的id $('#type').val('你的value值'); //更新全部 layui.form.render();

  2. WKWebView 使用的坑

    WKWebView 简介: WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用.内存泄漏的 UIWebView.WKWebView ...

  3. 输入与输出 Perl 第五章

    1. chmop($line=<STDIN>) ;  #读取下一行,截掉换行符. 2. while(defined($line=<STDIN>) { print " ...

  4. esp8266（wifi）模块调试记录

    1.要注意usb转TTL接口上的晶振 如果晶振是12Mhz,可能就收不到反馈,因为12Mhz波特率会有误差.

  5. es 的搜索

    kibana语言查询 q指定查询语句 df默认字段,不指定时 sort排序/from和size用于分页 profile可以查看查询是如何倍执行的 查询title的值等于2012 的数据 GET /mo ...

  6. 吴裕雄 python 神经网络——TensorFlow实现搭建基础神经网络

    import numpy as np import tensorflow as tf import matplotlib.pyplot as plt def add_layer(inputs, in_ ...

  7. debug assertion failed问题解决

    运行过程中出现上述问题,后来发现是vector越界问题....解决办法:不要越界就好了...

  8. java中对象的初始化问题

    最近又把java编程思想看了看.又有些收获.此书确实不错 java中的初始化相信很多人都知道.但是具体的初始化步骤,初始化几次确不一定.上代码 public class A{ public stati ...

  9. iOS 开发之函数式编程思想（Functional Programming）

    函数式编程(Functional Programming), 函数式编程强调的函数:1.不依赖外部状态:2.不改变外部状态. 函数式编程可解决线程安全问题,每一个函数都是线程安全的. 时间状态:变量一 ...

  10. js函数声明外面使用小括号括起来再接一个小括号的写法

    js函数声明外面使用小括号括起来再接一个小括号的写法 (function(){})(); (function(){}()); !function(){}(); 总结ps:意思将函数声明变成,直接执行的 ...