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

随机推荐

Oracle 单实例 2个service的问题
[oracle@PD admin]$ ps -ef | grep smon oracle 1917 1 0 Aug21 ? 00:33:51 ora_smon_podinndb oracle 2265 ...
bzoj3876
不高兴的回忆啊啊啊当初这种简单题因为自己作死就暴零0了这题在OJ上是简单的最小有下界费用流,增广到正费用为止因为算的是总时限但实际的话似乎要用pacman吃豆豆那题的方法先用dp跑出第一次的增广路再用 ...
[ZOJ 3631] Watashi's BG
Watashi's BG Time Limit: 3 Seconds Memory Limit: 65536 KB Watashi is the couch of ZJU-ICPC Team ...
C++运行字符编码于MSVC和GCC之间的区别
详细请参考这篇博文 http://blog.csdn.net/dbzhang800/article/details/7540905 运行字符编码就是指,当你源代码写下const char* p = & ...
Android Volley - volley StringRequest編碼問題
有些時候這個類並不能很好的解決中文編碼問題如果出現亂碼,就要重寫該類的parseNetworkResponse 方法了. 繼承StringRequest,然後重寫parseNetworkRespo ...
devi into python 笔记（六）正则表达式原始字符串
字符串函数replace: #string.replace: #字符串的replace方法:替换子串,不改变原来的字符串 s = "broad road" #打印出来会发现不单单是 ...
Linux学习笔记32——select()函数分析【转】
Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如 connect.accept.recv或recvfrom这样的阻塞程序 ...
MVC Model 数据注解与验证
常用验证特性: using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Sch ...
iw命令
iwconfig这个老工具已不推荐使用,iw支持大多新的设备并已被加入内核 iw help 查看帮助 iw dev wlan0 scan ...
Java开源建站工具
http://www.ruanyifeng.com/blog/2011/08/opensource_java_web_development_tools.html 作者: 阮一峰日期: 2011年8 ...

div a块状布局

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

随机推荐

热门专题