div a块状布局

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .odiv{width:100%;padding:0;margin:0;}

        .odiv a {

            float: left;

            width: 32%;

            height:46px;

            padding: 15px 0;

            text-align: center;

            display: block;

            background: #ECECEC;

            position: relative;

            color: #000;

            border-right: 1px solid #FCF7F7;

            border-bottom: 1px solid #FCF7F7;

            text-decoration: none;

            /*  border: 1px solid rgba(0,0,0,0.3);

            border: 1px solid #2D343E;

            border-right: 1px solid #333;

            border-bottom: 1px solid #333;  */

        }

        .btn-default {

            color: #333;

            border-color: rgba(0, 0, 0, 0.0);

        }

        .btn {

            display: inline-block;

            padding: 6px 12px;

            margin-bottom: 0px;

            font-size: 14px;

            font-weight: 400;

            line-height: 1.42857;

            text-align: center;

            white-space: nowrap;

            vertical-align: middle;

            cursor: pointer;

            -moz-user-select: none;

            background-image: none;

            border: 1px solid transparent;

            /*border-radius: 4px;*/

            border-radius: 0;

        }

    </style>

</head>

<body>

<div style="clear: both;margin-top:1px;">.</div>

<div  class="odiv">

    <p ><!-- 顶部导航 --></p>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">红楼梦</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">平凡的世界</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">曾国藩家书</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">大谋小计50年</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">阳光心态</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">一花一世界</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">商经</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">创业者在知乎</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">庄子</a>

    <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">人生若只如初见</a>

</div>

</body>

</html>

div a块状布局的更多相关文章

【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Def ...
【转载】CSS + DIV 实现局部布局
HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局 ...
【转载】CSS + DIV 实现整理布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路首先把这个问题分步解决,需要攻克以 ...

随机推荐

bzoj1028
穷举水题 ..] of boolean; q:..] of longint; ans,count,jud:..] of longint; x,i,j,n,m,tot,t,k:l ...
zabbix监控redis多实例（low level discovery）
对于多实例部署的tomcat.redis等应用,可以利用zabbix的low level discovery功能来实现监控,减少重复操作. 注:Zabbix版本: Zabbix 3.0.2 一.服务 ...
Custom ASP.NET Application into SharePoint --整合ASP.NET应用程序到SharePoint
转:http://www.devexpertise.com/2009/02/18/integrating-a-custom-aspnet-application-into-sharepoint-par ...
用vmware安装gho文件
方法1:diskgenius+ghostexp 用vm新建一个空白硬盘虚拟机, 记住虚拟机文件的存储位置, 最好将默认的scsi硬盘移除另外新建ide的硬盘(否则可能开机蓝屏),然后用host机DIS ...
破解安装 SecureCRT 7.0.2 for mac完美破解版，mac secureCRT ， apple secureCRT
mac secureCRT , apple secureCRT 下载地址:http://download.csdn.net/detail/guolichun/7733069 破解安装 SecureC ...
jQuery 参考手册 - 文档操作
上传图片时页面崩溃..全部付之东流 addClass() after() append() appendTo() attr() before() clone() detach() empty() ha ...
18. 4Sum
#include <string>#include <stack>#include <vector>#include <map>#include < ...
atomic_t原子操作
所谓原子操作,就是该操作绝不会在执行完毕前被任何其他任务或事件打断,也就说,它的最小的执行单位,不可能有比它更小的执行单位,因此这里的原子实际是使用了物理学里的物质微粒的概念. 原子操作需要硬件的支持 ...
phpDesigner 工具快捷键巧用
Zend Studio工具默认的快捷方式, 如果你从事php工作, 自然能够体会到一些便利性, 比如CTRL+D, 可以直接复制当前一行, 这对于重复代码及调试都有很大帮助. Ctrl+U转换大小写之 ...
Linux如何查找文件安装路径？
Linux中查看某个软件的安装路径(地址)有时显得非常重要.比如某个文件的快速启动项被删除,或者你要建立快速启动项,或者想删除. 添加安装文件等等,很多地方都要用到查案文件安装路径的命令. 这里给大 ...

div a块状布局

div a块状布局的更多相关文章

随机推荐

热门专题