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.思路 首先把这个问题分步解决,需要攻克以 ...
随机推荐
- listview异步加载sd卡图片
package com.example.gridview; import java.io.File; import java.io.FileOutputStream; import java.io.I ...
- java学习之多生产者和多消费者
在上一节当中我们说道了,java多线程当中单个消费者对应单个生产者的关系.这个时候有几个点需要注意一下,第一个就是把if判断flag的语句改成while这样能够避免,比如如果我们这个时候用if的话判断 ...
- SQL Server数据库存在判断语句及系统表简介 转
Transact-SQL Exists Sentences--判断数据库是否存在IF EXISTS(SELECT * FROM master.sysdatabases WHERE name=N'库名' ...
- 同时连接多台Android设备进行Monkey Test
事情多了就会乱,时间久了就会忘. adb -s remount id(devices ID) adb -s shell id monkey -p package name -v count
- python 零散记录(四) 强调字典中的键值唯一性 字典的一些常用方法
dict中键只有在值和类型完全相同的时候才视为一个键: mydict = {1:1,':1} #此时mydict[1] 与 mydict['1']是两个不同的键值 dict的一些常用方法: clear ...
- is not mapped 解决方法
1.确定是否已配置相关XML 2.注意类名大小写问题 3.如果是注解 第一种方式 @Entity(name = "Tb_User") public class User { ...
- Bzoj 1657: [Usaco2006 Mar]Mooo 奶牛的歌声 单调栈
1657: [Usaco2006 Mar]Mooo 奶牛的歌声 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 631 Solved: 445[Submi ...
- C语言中的宏
写好C语言,漂亮的宏定义很重要,使用宏定义可以防止出错,提高可移植性,可读性,方便性 等等.下面列举一些成熟软件中常用得宏定义...... 1,防止一个头文件被重复包含 #ifndef COMDEF_ ...
- .net 加水印 图片变大很多 解决方法
/// 给图片加水印 中国红木网 /// </summary> /// <param name="originalImg"> ...
- sqlmap win32下命令集合
http://testphp.vulnweb.com/artists.php?artist=1 #库 注意:--前面有一个空格 C:\Python27\sqlmap>sqlmap.py - ...