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>

时间: 2024-10-19 20:14:04

div a块状布局的相关文章

【转】一个DIV+CSS代码布局的简单导航条

原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图 一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考   -   TOP 在实际DIV+CSS布局项目中,一般不会只使用一次

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

【转载】CSS + DIV 实现局部布局

HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局    使用div + dl-dt-dd实现购物版块布局 3.一般的局部布局无非采用如下的技术:    1)div + ul(ol)-li:用于分类导航或菜单等场合    2)div + dl-dt-dd:用于图文混编场合    3)table-tr-td:用于图文布局或显示数据的场合    4)form

HTML CSS + DIV实现整体布局

HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟W3C的职能:负责制定和维护Web行业标准W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面交互方面:ECMAScript --等等 3.W3C倡导的Web结构要符合以下要求: XHTML负责内容组织 CSS负责

div+css页面布局-html代码

<html> <head> <title>div+css页面布局</title> <meta http-equiv="content-type" content="text/html" > <link rel="stylesheet" type="text/css" href="css/layout.css" /> </head&

HTML CSS + DIV实现局部布局

HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用div + ul-li实现导航菜单布局     使用div + dl-dt-dd实现购物版块布局 3.一般的局部布局无非采用如下的技术:     1)div + ul(ol)-li:用于分类导航或菜单等场合     2)div + dl-dt-dd:用于图文混编场合     3)table-tr-td

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

Div+CSS网页布局中CSS无效的十个常见原因

学习Div+CSS网页布局的知识,可是兄弟连validation有时难以操作,但用它你可以查看由版面设计引起的差错,验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能,下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决,在本文开始前介绍一些使用兄弟连PHP培训的基础div+css验证程序时需要注意的问题. 1.不要担心验证程序的警告:如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步. 2.一次更正一个错误:按顺序进展工作,从上

典型的DIV+CSS布局——固定宽度且居中的版式

典型的DIV+CSS布局——固定宽度且居中的版式中,运用的是浮动属性:这个实例,则运用了绝对定位属性. 1.在#container中设置“position:relative;”,其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准. 2.左侧列#left_side和右侧#right_side列采用绝对定位,并且固定这两个div的宽度,而中间列#content由于需要根据浏览器自动调整,因此不设置类似属性. 但由于另外两个块的position属性设置为absolute,此时必