首页 > css教程 > 正文

CSS样式类的实例代码(导航栏、分页、层级选择器)

转载 2018-10-13 16:25:35 0 204
赞助会员专享特权
本篇文章给大家带来的内容是关于CSS样式类的实例代码(导航栏、分页、层级选择器),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

导航栏

拥有易用的导航条对于任何网站都很重要。
通过 CSS,您能够把乏味的 HTML 菜单转换为漂亮的导航栏。
导航栏需要标准的 HTML 作为基础。
在我们的例子中,将用标准的 HTML 列表来构建导航栏。
导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的

制作水平导航栏

有两种创建水平导航栏的方法。使用行内或浮动列表项。
两种方法都不错,但是如果您希望链接拥有相同的尺寸,就必须使用浮动方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
        div{
            width: 80%;
            margin: 0 auto;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        li{
            display: inline-block;
            width: 24%;
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 0 auto;
            text-align: center;
            background: #c0ffff;
        }

    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">CSS/HTML</a></li>
        <li><a href="#">JavaScript</a> </li>
        <li><a href="#"> Python</a> </li>
        <li><a href="#"> C#</a> </li>

    </ul>
</div>
</body>
</html>

2909629951-5bb9b183585f0_articlex.png

制作网页分页显示

网页内容往往不止一页,这时就需要页面跳转

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style>
        ul{
            list-style-type: none;
        }
        li{
            display: inline-block;
            width: 12%;
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 0 auto;
            text-align: center;
            background: #c0ffff;
        }
        li:hover{
            background: salmon;
        }

    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">上一页</a> </li>
        <li><a href="#">1</a> </li>
        <li><a href="#">2</a> </li>
        <li><a href="#">...</a> </li>
        <li><a href="#">12</a> </li>
        <li><a href="#">13</a> </li>
        <li><a href="#">下一页</a> </li>


    </ul>

</div>
</body>
</html>

3144834827-5bb9b151095f3_articlex.png

层级选择器

选择器用于选取带有指定属性和值的元素。

[attribute=value]
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层级选择</title>
    <style>
        ol pre {
            background: #888888;
        }
        input[type='submit']{
            background: salmon;
        }
    </style>
</head>
<body>

    <pre>
1题,伫倚危楼风细细,望极春愁,黯黯生天际....,出自( )
    </pre>
    <ol type="A">
        <li>蝶恋花</li>
        <li>高丽史</li>
    </ol>
    <form>
    ‘衣带渐宽终不悔,为伊消得人憔悴’的作者是:<input type="text">
        <br>
    请提交你的条形码:<input type="password">
        <br>
    <input type="submit" value="提交">
    </form>

</body>
</html>

2085925191-5bb9b67dee496_articlex.png

以上就是CSS样式类的实例代码(导航栏、分页、层级选择器)的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:css html5
  • 本文转载于:segmentfault思否,如有侵犯,请联系删除
  • 相关文章


  • css样式之区分input是按钮还是文本框的方法_经验交流
  • css样式大全(整理版)
  • 鼠标移入移出改变CSS样式的小例子_javascript技巧
  • JS函数实现动态添加CSS样式表文件_基础知识
  • js控制CSS样式属性语法对照表_基础知识
  • CSS样式类的实例代码(导航栏、分页、层级选择器)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • html/css快速入门 html/css快速入门
  • HTML/CSS  5小时基础入门教程 HTML/CSS 5小时基础入门教程
  • 弹指间学会HTML+CSS 弹指间学会HTML+CSS
  • CSS3最新基础教程详解 CSS3最新基础教程详解
  • CSS 0基础入门教程 CSS 0基础入门教程
  • 相关视频章节