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

随机推荐

ASPX在Debug模式下直接link原始CSS而非Bundle后的CSS
由于对CSS做了bundle, debug的时候修改原始css文件不会直接反映到浏览器中, 效率较低. 于是我想在debug的时候直接link原始CSS. 很简单. <% #if DEBUG % ...
【HDOJ】2955 Robberies
01背包.将最大金额作为容量v.概率做乘法. #include <stdio.h> #include <string.h> #define mymax(a, b) (a> ...
便利的html5 之 required、number 、pattern
html5对于表单验证提供了很多自识别功能,非常的便利. 看代码,  <include file="Public:head" / ...
CH Round #45 能量释放
能量释放 CH Round #45 - alan有一些陷阱 III 题目描述 alan得到一块由个能量晶体构成的矿石,对于矿石中的每一个能量晶体,如果用化学物质刺激某一个能量晶体,就能使它释放能量. ...
EF框架搭建
EF框架搭配lambda表达式使用起来非常高效便捷,有两种方法使用EF框架: 一是.添加“ADO.NET Entity Data Model”项,绑定配置数据库链接,勾选表和存储过程等,自动生成实体: ...
Delta-wave
Delta-wave Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
poj magic number
Problem H Time Limit : 4000/2000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Sub ...
C#读取json数据介绍
//using System.Web.Script.Serialization; JavaScriptSerializer serializer = new JavaScriptSerializer( ...
升级到 ExtJS 5的过程记录
升级到 ExtJS 5的过程记录最近为公司的一个项目创建了一个 ExtJS 5 的分支,顺便记录一下升级到 ExtJS 5 所遇到的问题以及填掉的坑.由于 Sencha Cmd 的 sencha ...
上海Uber优步司机奖励政策（2月1日~2月7日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

div a块状布局

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

随机推荐

热门专题