学习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. Libgdx 开发指南(1.2) 应用框架——模块概览

    模块概览 引言 LibGDX由一些为一个典型游戏架构中的各个步骤提供服务的模块组成. Input:为所有平台提供一致的输入模型与处理器.支持键盘.触屏.加速度传感器与鼠标. Graphics:使用硬件 ...

  2. Mark一下，一上午就这么过去了，关于客户端连接oracle10G的问题

    Mark一下,一上午就这么过去了,关于客户端连接oracle10G的问题 正常的客户端PLSQL和Navicat都可以正常连接Oracle(局域网内),但代码生成器和VS2015死活连不上,在网上找了 ...

  3. Python 基礎 - 用戶交互程序

    現在就來寫一個簡單的 用戶輸入 的程式,這是一個互動模式,需要使用者自已輸入 #!/usr/bin/env python3 # -*- coding:utf-8 -*- username = inpu ...

  4. 552 you must authentication

    配置邮箱到outlook时 出现以下错误: 发送测试电子邮件消息: 无法发送此邮件.请在帐户属性中验证电子邮件地址.  响应服务器: 552 you must authentication 需要在”其 ...

  5. H5版定点投篮游戏(1)--物理模型抽象

    前言: 前几天目睹了大学同学开了个微店, 算是间接体验微信公众平台的使用. 觉得非常便捷和方便, 于是自己也想捣鼓一个. 公众号取名: "木目的H5游戏世界", 定位做成一个, 个 ...

  6. 网页闯关游戏(riddle webgame)--SQL注入的潘多拉魔盒

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. web开发初学者往往会忽视一些常见的漏洞 ...

  7. C++ Pirmer : 第十五章 : 面向对象程序设计之基类和派生的定义、类型转换与继承与虚函数

    基类和派生类的定义以及虚函数 基类Quote的定义: classs Quote { public: Quote() = default; Quote(cosnt std::string& bo ...

  8. 以ls命令为实例介绍命令基本格式

    登陆Linux命令行会显示一行字符,例如[root@localhost  ~ ]#, 其中root表示当前登陆用户,localhost表示主机名,~显示的是当前路径,(-表示当前用户的家目录),#表示 ...

  9. linux之ps命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...

  10. python 的内嵌time模板翻译及说明［转］

    一.简介 time模块提供各种操作时间的函数  说明:一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00:00以秒计算的偏移量),时间戳是惟一的      ...