CSS简单导航栏

<!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>
<style>
div {
    width:600px;
    margin-top:30px; margin-left:auto; margin-right:auto;

    border-style: dashed;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    height:30px;
  }
 ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
float:right; margin:0 20px;
}
a
{
display:block;

color:#003366; font-family:Verdana, Geneva, sans-serif;
font-size:10pt; text-decoration:underline;
}
a:visited{color:#d53d45;}
a:active{color:#d53d00; font-weight:bold;}
a:hover{color:#d53d45; text-decoration:none;}

  </style>
</head>

<body>
<div>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
<iframe src="http://qq.com" width="100%" height="800px"  frameborder="0"/>
</body>
</html>

时间： 2024-10-07 03:21:08

CSS简单导航栏的相关文章

用CSS制作简单导航栏

纯css实现的简单导航栏. 前端开发基础中的基础.. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏练习-01</title> <style type="text/css"> /* ul与div样式 */ #nav ul{ list-style-type: none; display: inl

css制作最简单导航栏

css制作最简单导航栏 (1)先建一个列表: <ol> <li><a href="#">网易</a></li> <li><a href="#">搜狐</a></li> <li><a href="#">新浪</a></li> <li><a href="#"&

简单导航栏的效果

<!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-Typ

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣

CSS实现导航栏底部动态滚动条效果

预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: <style> ul.nav{background-color: whitesmoke;} ul.nav li{padding: 10px 0;margin: 0 30px;overflow: hidden;} ul.nav li a{text

巧妙使用checkbox制作纯css动态导航栏

前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked 属性.巧妙地制作导航栏结果: 我们主要制作成这样这样的的导航栏: 首先.我们写出相对的html 由于时间问题.svg没有处理到类中.所以这里给出svg的空标签.大家如果想看效果.可以到我的git里面fork一份 <div class="nav-child"> <in

第8天：CSS制作导航栏

今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: 1.网页整体分为头部.内容.尾部.网页中心内容部分为版心.版心是定宽的. 2.设定版心宽度.其余每部分内容只需要设置高度即可. 3.header部分分为左.中.右三部分.分别用div包起来,可以设置padding. 4.nav部分用ul实现,li中的a标签为行内元素,要用display转为块标签,给

Android 自定义组合控件简单导航栏

最近在做项目的过程中,发现项目中好多界面的导航栏都很类似或者一样,但是每次都要重复写同样的代码,觉得很不爽,所以就简单地自定义了一下导航栏控件. 先上图: 导航栏包括: 返回按钮标题右侧按钮(功能不确定) 首先是布局文件,如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res

Css之导航栏学习

Css: ul { list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:blue; /*固定在顶部*/ position:fixed; top:0; width:100%; } li { float:left; } /* 出来最后一个选项(last-child) 其他的都添加分割线 */ li { border-right: 1px solid #bbb; } li:last-child { b