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】3436 Queue-jumpers
离散化+伸展树. /* 3436 */ #include <iostream> #include <string> #include <map> #include ...
- 利用if else咱们结婚吧
class Program { static void Main(string[] args) { while (true) ...
- Mac 把图片反色
黑色图变白色 1:用预览打开 2:打开"调整颜色" 3:把"自动色阶"两边的按钮, 拖动换位置,就可以看到效果了.
- Makefile第四讲：include 引用其它makefile文件
main.cpp #include "classes/fun.h" int main() { Test::display("Hello makefile"); ...
- 计算几何（凸包模板）：HDU 1392 Surround the Trees
There are a lot of trees in an area. A peasant wants to buy a rope to surround all these trees. So a ...
- 昂贵的聘礼--POJ1062
昂贵的聘礼 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Java/Other) Total Submiss ...
- Linux下常用I/O模型
Linux异步I/O是Linux内核中提供的一个相当新的增强.它是2.6版本内核的一个标准特性,异步非阻塞I/O背后的基本思想是允许进程发起很多I/O操作,而不用阻塞或等待任何操作完成.稍后或在接收到 ...
- MySQL数据库设计复习笔记及项目实战
最近手头上有3个项目开动,其他2个都是从底层开始的,一个已经开始了一段时间的了,在小城市小团队开发的条件下,都没有专门的DBA来做数据库的设计和维护,往往都是开发人员顶上,可是看了很多的数据库的设计, ...
- 完美转换MySQL的字符集 Mysql 数据的导入导出，Mysql 4.1导入到4.0
MySQL从4.1版本开始才提出字符集的概念,所以对于MySQL4.0及其以下的版本,他们的字符集都是Latin1的,所以有时候需要对mysql的字符集进行一下转换,MySQL版本的升级.降级,特别是 ...
- 第十一章、认识与学习 BASH Bash Shell 的操作环境
bash中的变量动不动就说环境变量,真是奇怪,bash只是一个c语言编写的程序而已,跟环境变量有什么关系?如果知道dos的历史的话就知道有个时代是只有命令行界面而没有图形用户界面,这只小小的程序就包揽 ...