CSS盒子模型学习记录3(侧面导航栏)
2024-09-20 22:13:04
学习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;
}
显示结果
最新文章
- java中 String StringBuffer StringBuilder的区别
- Unity中使用Attribute
- WPF socket通讯 UDP接收消息
- C# 之 user32函数库
- SOA资料
- poj1515--Street Directions(边的双连通)
- Linux 安装java
- MYSQL 体系结构图-space结构图
- Surface Pro 4 和 Surface Book 使用名为 Surface UEFI(统一可扩展固件接口)的新固件接口
- C语言 realloc为什么要有返回值,realloc返回值具体解释/(解决随意长度字符串输入问题)。
- python concurrent.futures
- c+(内存)
- 浅析 .Net Core中Json配置的自动更新
- MyEclipse 新手使用教程---图文详解
- 最简单的 react-router4 的安装和使用
- Python学习—基础篇之常用模块
- Python爱好者社区历史文章列表(每周append更新一次)
- MySQL数据库(查询语句)
- Python开发——数据结构【深浅拷贝】
- vue 解决页面闪烁问题