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. Educational Codeforces Round 81 (Rated for Div. 2)E（线段树）

    预处理把左集划分为大小为1~i-1时,把全部元素都移动到右集的代价,记作sum[i]. 然后枚举终态时左集的大小,更新把元素i 留在/移动到 左集的代价. 树状数组/线段树处理区间修改/区间查询 #d ...

  2. Go_random

    package main import ( "math/rand" "fmt" "time" ) func main() { /* 生成随机 ...

  3. 定义列属性：null，default，PK，auto_increment

    *定义列属性* 1.列属性NULL: 是否为空,规定一个字段的值是否可以是null: null|not null 2.默认值属性:default value  默认值,在没有为该字段设置值时启用:而且 ...

  4. Linux挂载（mount,umount及开机自动挂载

    挂载概念简述: 根文件系统之外的其他文件要想能够被访问,都必须通过“关联”至根文件系统上的某个目录来实现,此关联操作即为“挂载”,此目录即为“挂载点”,解除此关联关系的过程称之为“卸载” 1.挂载:根 ...

  5. JS高级---实例对象使用属性和方法层层的搜索 （实例对象-->原型对象-->报错）

    实例对象使用属性和方法层层的搜索:   实例对象使用的属性或者方法, 先在实例中查找, 找到了则直接使用: 找不到则, 再去实例对象的__proto__指向的原型对象prototype中找, 找到了则 ...

  6. ES6-对象的简写方式

        var name = 'tom';     var age = 11;     //es5定义对象     var obj = {         name:name,         age ...

  7. leetcode929 Unique Email Addresses

    Every email consists of a local name and a domain name, separated by the @ sign. For example, in ali ...

  8. 炸鱼w咕咕咕

    退役选手又回来了w + 将近一个月莫有学OI变得十分笨拙 + 洛谷打卡从300+ 变为 10 + 冬令营加油(虽然我会崩 + 省选加油 (虽然我进不去

  9. 使用ssh 初始化git一个空java工程

    1:进入git 目录 cd /home/git/repo/ 2:创建一个java工程名 mkdir qft-payment 3:进入工程 cd  qft-payment/ 4:初始化空工程 git - ...

  10. HTML中的meta元素

    <meta>元素必须放在<head>标记内,而且必须写在HTML文件前1024B之内 <meta>元素的主要目的是提供有关这份HTML文件的相关信息.例如编码方式, ...