学习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. 【技术无关】GPS转北斗卫星定位 系统调研

    前言 陆地交通运输是当前GPS卫星定位系统最大的应用领域,我省自08年实施卫星定位系统建设以来,在车辆监控和调度方面发挥了突出的作用:主要功能包括车辆跟踪.线路规划和导航.信息查询.交通指挥.紧急援助 ...

  2. iscroll动态加载数据完美解决方案

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  3. C&C++ recap

    大一时候学过C++,可惜忘得差不多了,之后也很少用过.当时使用的是windows系统,使用的还是visual C++.当时对计算机并不感冒,也没好好学.最近在R的学习中遇到瓶颈,觉得要捡起曾经的C/C ...

  4. @SuppressWarnings有什么用处?

    J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. @SuppressWarnings 批注允许您选择 ...

  5. bootstrap-5

    代码(一) 在bootstrap中主要提供了三种代码风格:详见688行-730行 1.使用<code></code>来显示单行内联代码 2.使用<pre></ ...

  6. MyEclipse定位class文件

    upolfind.bat :: 读取参数 例子 E:\workspaces\common-ws\xm_upol\WebRoot\WEB-INF\classes\${java_type_name} se ...

  7. linux C 获取当前目录的实现（转-Blossom）

    linux C 获取当前目录的实现: //获取当前目录#include <stdlib.h>#include <stdio.h>#include <string.h> ...

  8. 程序跳转到访问一个确定的地址0x100000

    用函数指针 把这个确定的地址转化成一个函数指针 这就明白了程序中调用函数的意义 测试代码如下: #include <stdio.h> void getMemory() { printf(& ...

  9. 使用springMVC实现文件上传和下载之文件下载

    接上一篇,文件下载需要获取下载文件的存储路径,这里只是手动填入,如果是在具体项目中,可以把文件名和上传后的存储路径保存在数据库中.然后增加一个文件列表的页面展示文件名和文件路径,然后点击下载的时候把相 ...

  10. DOM节点的修改

    首先,我们将最后段落赋值给变量my: var my = document.getElementById('closer'); 接下来,我们就能够轻松地通过修改对象的innerHTML值来修改段落中的文 ...