CSS导航条nav简单样式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>CSSTest</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
} .nav {
list-style: none;
background-color: #6495ed;
width: 1000px;
margin: 50px auto;
/*高度塌陷,子元素浮动*/
overflow: hidden;
} .nav li {
float: left;
/*为每个li指定一个宽度,虽然效果出来了,但是每个li
不具有超链接属性,易用性不好,li是a的父元素,先给父元素一个
宽度值,再来设置a宽度
*/
width: 12.5%;
} /*当鼠标移入时改变背景颜色*/
.nav a:hover {
background-color: #c00;
} a {
/**为a标签指定一个宽度
a是一个内联元素宽度失效,转为块元素*/
display: inline-block;
width: 100%;
/*设置文字居中*/
text-align:center;
/*设置一个上下内边距*/
padding: 5px 0;
/*去除下划线*/
text-decoration: none;
/*字体颜色设置*/
color: white;
/*字体加粗*/
font-weight: bold;
}
</style>
</head>
<body>
<!-- 导航条练习 -->
<ul class="nav">
<li><a href="">首页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">联系</a></li>
<li><a href="">关于</a></li>
<li><a href="">首页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">联系</a></li>
<li><a href="">关于</a></li>
</ul>
</body> </html>
CSS导航条nav简单样式的更多相关文章
- css 导航条 布局
导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...
- css -- 导航条
1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...
- 辛星与您使用CSS导航条
第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- css导航条等元素位置不变
在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.
- css导航条的设计
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- css导航条
#nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}
- vue导航条选中项样式
html: <div id="app"> <div class="collection"> <a href="#!&qu ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- 分享一个导航条哈(⊙o⊙)…
原文:http://www.sharejs.com/js/menu/1601 CSS样式表: <!--[if lt IE 9]> <script src="http://h ...
随机推荐
- JS循环中使用bind函数的参数传递问题
JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...
- A1012. The Best Rank
To evaluate the performance of our first year CS majored students, we consider their grades of three ...
- 【洛谷P1144】最短路计数
题目大意:给定一个 N 个点,M 条边的无向无权图,求从 1 号点出发到其他每个点最短路的条数. 题解:在跑 dij 时顺便维护 cnt[ ] 数组,用来记录到每个点的最短路条数. 代码如下 #inc ...
- 盘点 php 里面那些冷门又实用的小技巧
1.实用某个字段索引二维数组 取出一个数组的一个字段的值的数组,我们可以使用 array_column, 这个方法还有另外一个用法,如 array_column($array, null, 'key' ...
- CENTOS 6.6初始化SHELL脚本
时间:2016-02-24 00:30来源:blog.51cto.com 作者:“xxlixin” 博客 举报 点击:1717次 这个脚本是在刚安装完CENTOS6.6后可能需要进行的操作.在学习CE ...
- Jenkins创建job时Check-out Strategy各个选项详细说明(含图)
Check-out Strategy 第一次build 第n次build(除第一次) Use 'svn update' as much as possible 将workspace下的所有文件清空,然 ...
- maveb安装与配置(win10)
转载:https://www.cnblogs.com/eagle6688/p/7838224.html 看了几篇博客,感觉这篇博客写的含金量最高了,因为我电脑的系统是win10的,所以配置有细微的差别 ...
- java基础基础总结----- 关键字、标识符、注释、常量和变量、运算符、语句、函数、数组(三)
Java语言基础组成:关键字.标识符.注释.常量和变量.运算符.语句.函数.数组 一.标识符 标识符是在程序中自定义的一些名称,由大小写字母[a-zA-Z],数字[0-9],下划线[ _ ],特殊字符 ...
- 浅谈Python闭包
闭包是在其词法上下文中引用了自由变量的函数. 通俗地说,就是函数嵌套(后续称之为外层函数)另外一个函数(后续称之为内层函数),在内层函数中,引用外层函数的变量,每次对内层函数的调用,外层函数变量的值都 ...
- 函数和常用模块【day06】:random模块(三)
本节内容 1.简述 2.random模块 3.string模块 4.生成随机数 一.简述 我们经常会使用一些随机数,或者需要写一些随机数的代码,今天我们就来整理随机数模块:random模块 二.ran ...