CSS盒子模型学习记录3(侧面导航栏)
学习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(侧面导航栏)的更多相关文章
- CSS盒子模型学习记录1
http://www.blueidea.com/tech/web/2007/4545.asp 代码试验: html代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- CSS盒子模型学习记录2
参考:http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验: html代码: <!DOCTYPE html PUBLIC "-// ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- 前端学习(十三):CSS盒子模型
进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...
- [CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...
- 1.26学习总结——css盒子模型
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
随机推荐
- Turing Tree_线段树&树状数组
Problem Description After inventing Turing Tree, 3xian always felt boring when solving problems abou ...
- Unity3D 发布无边框exe
关于:Unity3D 发布无边框exe,Unity3D Build exe无边框 Unity发布windows版本 总是带着边框,很想给它去掉,笔者在网上查了一番,常见的有3中. 1:通过unity3 ...
- Xcode 设置 ARC&MRC混用
如果你的项目使用的非 ARC 模式,则为 ARC 模式的代码文件加入 -fobjc-arc 标签.如果你的项目使用的是 ARC 模式,则为非 ARC 模式的代码文件加入 -fno-objc-arc 标 ...
- Linux 2>&1理解(转)
2>&1使用一 相关知识1)默认地,标准的输入为键盘,但是也可以来自文件或管道(pipe |).2)默认地,标准的输出为终端(terminal),但是也可以重定向到文件,管道或后引号(b ...
- 给JavaScript初学者的24条最佳实践(share)
不错的文章,留个备份 原文链接: net.tutsplus 翻译: 伯乐在线- yanhaijing译文链接: http://blog.jobbole.com/53199/ 作为“30 HTML和 ...
- cocos2d项目 打包apk 项目名称相关设置
修改android项目名称(打包生成的默认apk名称),直接找到proj.android目录下.project文件夹里面比较靠前的xml配置,修改<name>项目名称</name&g ...
- spring-websocket的搭建
Apach Tomcat 8.0.3+MyEclipse+maven+JDK1.7 spring4.0以后加入了对websocket技术的支持,撸主目前的项目用的是SSM(springMVC+spri ...
- c++类的声明和对象的定义---10
原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 类是创建对象的模板,一个类可以创建多个对象,每个对象都是类类型的一个变量:创建对象的过程也叫类的实例化. ...
- 《C与指针》第七章练习
本章问题 1.具有空函数体的函数可以作为存根使用,你如何对这类函数进行修改,使其更有用? answer:Have the stub(存根) print out a message when it is ...
- GridView与CheckBox完美结合
版本一:单纯地实现全选和全取消,http://www.cnblogs.com/insus/archive/2009/03/14/1411613.html 版本二:修改选中行的背景颜色,http://w ...