学习http://www.blueidea.com/tech/web/2007/4545_2.asp

代码试验

html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <link rel="stylesheet" type="text/css" href="2.css">

 </head>

 <body>

 <ul id="nav">

     <li>

       <a href="#">Home</a>

     </li>

     <li>

       <a href="#">About Us</a>

     </li>

     <li>

       <a href="#">Services</a>

     </li>

     <li>

       <a href="#">Clients</a>

     </li>

     <li>

       <a href="#">Contacts</a>

     </li>

 </ul>

 </body>

 </html>

css

 * {

     margin: 0px;

     padding: 0px;

     }

 #nav {

     background:url(4.png) repeat-y;

     width: 200px;

     overflow: hidden;

 }

 #nav li {

     height: 35px;

     width: 190px;

     padding-top:15px;

 }

 #nav a {

     background:#60758C no-repeat left center;

     text-decoration: none;

     height: 30px;

     width: 155px;

     display: block;               <!--让链接以块状方式呈现-->

     float: right;

     padding: 0px 0px 0px 5px;

     font-weight: bold;

     font-size: 15pt;

     line-height: 30px;

     color:#FFF;

     border-left:10px solid #F66;  <!--组装黄色修饰块盒子(a的左边框，如果又独立用一个盒子来做就不科学了，因为此方法最简单)，直接给a加入下面一条样式即可-->

 }

 #nav a:hover {

     background: #00A8D5; <!--鼠标移到链接上时，链接风格的改变指定一个样式-->

     color: #FFFFFF;

 }

显示结果

CSS盒子模型学习记录3（侧面导航栏）的更多相关文章

  1. CSS盒子模型学习记录1

    http://www.blueidea.com/tech/web/2007/4545.asp 代码试验: html代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  2. CSS盒子模型学习记录2

    参考:http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验: html代码: <!DOCTYPE html PUBLIC "-// ...

  3. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  4. 前端学习（十三）：CSS盒子模型

    进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...

  5. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  6. 1.26学习总结——css盒子模型

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  9. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

随机推荐

  1. Ubuntu软件中心打不开，Encountered a section with no Package: header错误之解决

    sudo rm /var/lib/apt/lists/* -vf sudo apt-get update

  2. iOS内部跳转问题

    //打开地图       NSString*addressText = @" "; //@"1Infinite Loop, Cupertino, CA 95014&quo ...

  3. ACE - ACE_Task源码剖析及线程池实现

    原文出自http://www.cnblogs.com/binchen-china,禁止转载. 上篇提到用Reactor模式,利用I/O复用,获得Socket数据并且实现I/O层单线程并发,和dispa ...

  4. JavaScript作用域学习笔记

    重点知识点摘要 一 函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性 其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部 ...

  5. HDU 1254

    http://acm.hdu.edu.cn/showproblem.php?pid=1254 暴搜,状态是四维的(箱子和人的坐标),向一个方向推箱子还要判断人能否走到推的位置,1A #include ...

  6. linux，python 常用的处理log的命令

    一般的log文件都是需要过滤 ps:管道符| 管道符前面的输出值 grep 过滤查找 将是error的log过滤显示 grep '221.2.100.138'  web.access.log   gr ...

  7. super.onCreate(SavedInstanceState);

    super.onCreate(SavedInatanceState)时调用父类的构造方法,SavedInstanceState是保存当前Activity的状态信息. onCreate方法的参数是Bun ...

  8. Thrift 个人实战--初次体验Thrift

    前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...

  9. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  10. 升级vs工程到vs2010（以上）工程找不到OutputDebugStr报错

    原因是不同版本的系统宏的不同导致报错,OutputDebugStr,它在vs2005的头文件里定义在vs安装目录下的平台sdk目录下的mmsysytem.h, 而到vs2013下这个文件被放到了系统目 ...