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. Go作用域

    package main import "fmt" //全局变量的定义 //num3 := 1000//不支持简短定义的写法 var num3 = 1000 func main() ...

  2. Python常用数据类型转换

    常用的数据类型转换 目标 了解类型转换的作用 掌握常用的类型转换 函数 说明 int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x ...

  3. 题解 P1283 【平板涂色】

    P1283 平板涂色 数据范围也太小了qwq..适合本萌新暴搜 小小的剪枝: 1.用pre预处理出每块矩形上方的矩形,pre[i][0]记录数目(如果数据范围再开大一点,直接1~n枚举判断可能超时qw ...

  4. Python3问题TypeError: object() takes no parameters

    1. Python中关键字变量和特殊函数,都是以__xxx__来表示的 初学Python的朋友,需要注意其中变量名中前后是有两个下划线(_)的,如果不注意,调用内部关键字变量和特殊函数时,将会出现错误 ...

  5. django 项目发布（centos 6.5 + python 3.5 + django1.9.8 + paramiko 2.0.2 + gunicorn ）

    环境 os centos 6.5 64bit python 3.5 django 1.9.8 paramiko 2.0.2 gunicorn 19.6.0 安装 centos install pyth ...

  6. LAMP源码编译

    ---恢复内容开始--- 1.LAMP源码编译的基础环境 安装组建包:yum groupinstall "Development Tools" "Development ...

  7. 【Hibernate 多表查询】

    HibernateManyTable public class HibernateManyTable { //演示hql左连接查询 @Test public void testSelect12() { ...

  8. oracle 多表查询，请教个问题

    首先,是有一个合同表,对应数据库表 lg_bill_of_lading_detail  简称 bold    有一个用户表 EMT_USER 简称 e 合同审批 后,合同表里  会有一个审核人AUDI ...

  9. DAG 计数

    以下方法都是按照这个套路: 考虑一个不一定连通的 DAG ,你枚举一些零度点(拓扑序第一层)集合 \(S\),这些点之间不能连边,这些点跟剩下点(点集为 \(T\),\(|S| \cup |T| = ...

  10. 安卓之线性布局LinearLayout

    一.xml属性   (1)orientation:指定线性布局的方向   (2)gravity:指定布局内部视图与本线性布局的对齐方式   (3)layout_weight:指定当前视图的宽或高占上级 ...