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.思路首先把这个问题分步解决,需要攻克以 ...

随机推荐

【HDOJ】3277 Marriage Match III
Dinic不同实现的效率果然不同啊. /* 3277 */ #include <iostream> #include <string> #include <map> ...
【HDOJ】2707 Steganography
简单字符串,读懂题,很容易AC. #include <stdio.h> #include <string.h> ], line[], des[]; int main() { i ...
WCF的配置文件中的要素
Windows Communication Foundation Configuration Schema
arcGis引入Dll报无法嵌入互操作类型错误解决方法
arcGis引入Dll报“无法嵌入互操作类型"ESRI.ARCGIS.Geometry.PointClass".请改用通用接口." 解决方法:设置引用DLL的“嵌入互 ...
JavaScript---网络编程(2)-函数与数组
上节,学完循环了~ 现在学Javascript的函数和数组. JavaScript语法每一种语言都有自己的语法规则,JS语法与Java很像,所以学习起来比较容易.JS中也一样有变量,语句,函数,数组 ...
Hadoop之hive安装过程以及运行常见问题
Hive简介 1.数据仓库工具 2.支持一种与Sql类似的语言HiveQL 3.可以看成是从Sql到MapReduce的映射器 4.提供shall.Jdbc/odbc.Thrift.Web等接口 Hi ...
Yii 的AR单行数据自动缓存机制
相关的YII类: CActiveRecord CActiveRecordBehavior cache Active Record Active Record (AR) 是一个流行的对象-关系映射 ( ...
反射——类（Class）
本文原创,转载请注明原处! 红色代表的是基本组件:包(Package),修饰符(modifier),类(Class),字段(Field),构造器(Constructor)和方法(Method). 黄色 ...
Windows操作系统的历史
30 years ago Windows was first released, see how much it has changed回顾了Windows操作系统的历史. 1985, Windows ...
Session案例
用户登入案例: 按一般的网站登入实例,用户在页面登入页输入账号.密码,验证通过后,在首页显示其"欢迎回来,xxx". 首先完成登入页login.html <!DOCTYPE ...

div a块状布局

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

随机推荐

热门专题