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. c++中sort函数调用报错Expression : invalid operator <的内部原理

    当我们调用sort函数进行排序时,中的比较函数如果写成如下 bool cmp(const int &a, const int &b) { if(a!=b) return a<b; ...

  2. Android学习14

    Fragment Fragment是依赖于Activity的,不能独立存在的. 一个Activity里可以有多个Fragment. 一个Fragment可以被多个Activity重用. Fragmen ...

  3. NABCD model作业

    1)N(Need需求) 随着人类生活的快速发展,给人们带来了许多的便利,同时也给我们带来了一些麻烦,而我的拼图这个小游戏可以在人们在无聊时玩一玩,也可以给小孩子开发智力. 2)A(Approach做法 ...

  4. radar图生成用户guideline

    1.最后生成的效果是这样的: 2.第一个对话框如下(包含了样图),用于输入维度个数[最小为4,最大不限]: 3.第二个对话框如下,根据维度个数生成了信息录入表[每个维度3个信息,每3个一次重复,不清楚 ...

  5. PHP基础学习笔记1

    一.基本语法 1.1 形式 PHP 脚本以 <?php 开始,以 ?> 结束: <?php //php代码 ?> 1.2 注释 单行注释 //这是单行注释 多行注释 /* 这是 ...

  6. 2016 Google code jam 大赛

    二,RoundC import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNotFoundE ...

  7. HashMap遍历，取出key和value

    HashMap的遍历有两种常用的方法,那就是使用keyset及entryset来进行遍历,在用keySet(key)取value时候,需要key 第一种: Map map = new HashMap( ...

  8. php源码加密--screw plus

    screw plus是一个开源的php扩展,作用是对php文件进行加密,网络上提供php加密的服务很多,但大多都只是混淆级别的加密,被人拿到加密文件问只要有足够耐心就能破解,与之不同的是,screw ...

  9. CSS制作二级菜单时，二级菜单与一级菜单不对齐

    效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...

  10. python两个_多个字典合并相加

    这只是符合比较正常的需求和场景. #一.适用合并两个字典(key不能相同否则会被覆盖),简单,好用. A = {'a': 11, 'b': 22} B = {'c': 48, 'd': 13} #up ...