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. 从TCL欲成JDI股东看，面板行业进入“群架”时代

    当下,屏幕早已成为第一入口.PC.智能手机.平板电脑.电视.家庭智能终端.智慧交通.智能穿戴设备.汽车中控大屏--种种设备都是以屏幕为最重要的视觉呈现方式,让人们在一个个奇幻世界中畅游.也正是因为屏幕 ...

  2. python练习：编写一个程序，要求用户输入10个整数，然后输出其中最大的奇数，如果用户没有输入奇数，则输出一个消息进行说明。

    python练习:编写一个程序,要求用户输入10个整数,然后输出其中最大的奇数,如果用户没有输入奇数,则输出一个消息进行说明. 重难点:通过input函数输入的行消息为字符串格式,必须转换为整型,否则 ...

  3. java多线程信息共享

    上篇文章知识介绍了多线程的创建和启动问题,各个子线程和子线程或者说子线程和main线程没有信息的交流,这篇文章主要探讨线程之间信息共享以及交换问题.这篇文章主要以一个卖票例子来展开. 继承Thread ...

  4. 【Math】高数-一个有趣的旋转体体积与面积

    Go confidently in the direction of your dreams. Live the life you've imagined. 题目 设曲线 \(y = \tfrac{1 ...

  5. 怎么拆分一个Excel工作簿中的多个工作表？

    打开需要编辑的Excel文档.如图所示,工作簿下方有很多工作表.现在需要将这些工作表单独拆分开成一个个工作簿.   右键任意一个工作表标签,在弹出的下拉列表中选择查看代码.即弹出代码窗口.如下图所示. ...

  6. 好用的px转rem插件cssrem

    下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime Text -> Preferences - ...

  7. SpringCloud全家桶学习之服务注册与发现及Eureka高可用集群搭建（二）

    一.Eureka服务注册与发现 (1)Eureka是什么? Eureka是NetFlix的一个子模块,也是核心模块之一.Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故 ...

  8. dom4j+反射实现bean与xml的相互转换

    由于目前在工作中一直用的dom4j+反射实现bean与xml的相互转换,记录一下,如果有不正确的地方欢迎大家指正~~~ 一.反射机制 在此工具类中使用到了反射技术,所以提前也看了一些知识点,例如:ht ...

  9. 树状数组（fenwick tree）

    树状数组又称芬威克树,概念上是树状,实际上是使用数组实现的,表现为一种隐式数据结构,balabala...详情请见:https://en.wikipedia.org/wiki/Fenwick_tree ...

  10. python学习Day25--正则表达式1

    [知识点] # 所有模块要经历的两个步骤: ① 要操作的概念本身:正则表达式   时间 ② 使用模块取操作它:re                  time 1.正则表达式:一种匹配字符串的规则 # ...