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.思路 首先把这个问题分步解决,需要攻克以 ...
随机推荐
- UNDO表空间损坏，爆满，ORA-600[4194]/[4193]错误解决
模拟手工删除UNDO表空间 在ORADATA 中把UNDOTBS01.DBF 删除 模拟启库 SQL> STARUP; * 第 1 行出现错误: ORA-01157: 无法标识/锁定数据文件 2 ...
- SQL Server 2008 R2 制作数据库结构和数据脚本
数据库中包含众多表和数据,有时候需要创建脚本将表结构和数据一起导出 具体方法如下: 1.右键选择数据库,选择“任务”--->“生成脚本” 2.根据需求,选择制作脚本的对象,一般情况选择“表” 3 ...
- Can't initialize OCI. Error -1
今天使用Toad连接Oracle时出现"Can't initialize OCI. Error -1" 解决方法 因为是刚做的windows 7系统,所以没有设置更改通知的时间 把 ...
- TCP三次握手和连接关闭过程详解
1.建立连接协议(三次握手) (1)客户端发送一个带SYN标志的TCP报文到服务器.这是三次握手过程中的报文1. (2) 服务器端回应客户端的,这是三次握手中的第2个报文,这个报文同时带ACK标志和S ...
- HDOJ/HDU 1180 诡异的楼梯(经典BFS-详解)
Problem Description Hogwarts正式开学以后,Harry发现在Hogwarts里,某些楼梯并不是静止不动的,相反,他们每隔一分钟就变动一次方向. 比如下面的例子里,一开始楼梯在 ...
- HTML页面规范
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...
- Test2014-3-1 魅力值比较
魅力值比较 [问题描述] 大学生恋爱的问题造成了数量众多的异地恋,有许多J大的女生早早被Q大男生追走,这导致了J大男生的强烈不满.就在吐血高调地向一位J大美女展开攻势的之后,J大男生终于爆发了. 为了 ...
- 一段SQL代码的压缩：从974行到96行，十倍压缩
涉及到数据库拆分,需要将相关表的JOIN SQL剥离. 剥离过程中,发现了这么个SQL XML.整个SQL 974 行,分为6个函数.读起来费劲无比. <?xml version="1 ...
- 广州Uber优步司机奖励政策（2月1日~2月7日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- web前端开源小案例:立方体旋转
HTML部分: <body class="body"> <div class="rect-wrap"> <!-- //舞台元素 ...