用ul 来制作导航栏的几个要点
1 ul
1)list-style:none;
3)设置宽度
2)清除浮动的影响,使高度自适应
2 li
1)向左浮动
2)设置margin和padding都为0
3 a
1) dsiplay :block
2)设置width和height
完整的代码如下:
ul
{
list-style:none;
width:1040px;
margin:0px auto;
zoom:1 }
ul:after
{
content:".";
font-szie:0px;
line-height:0px;
display:block;
clear:both;
}
ul li
{
float:left }
ul li a
{
text-decoration:none;
display:block;
width:130px;
height:50px; }
用ul 来制作导航栏的几个要点的更多相关文章
- 第8天:CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- css3制作导航栏
<!doctype html><html lang="en"><head> <meta charset="UTF-8&qu ...
- C3制作导航栏分割线及立体风格
//首先写一个导航栏样式 .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; ...
- vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏
初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...
- 运用<ul><li>做导航栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css制作导航栏的上下三角
1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...
- css ul li 制作导航条
<html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...
- CSS制作导航栏
最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...
- 巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
随机推荐
- RHEL 6.0服务器安装Oracle 11G R2 最终版
RHEL6安装Oracle 11g R2最终版 结合网上教程 服务器实战所得 1.使用DVD做yum源新建dvd挂载目录[root@fxq-dp ~]# mkdir /media/iso进入到DVD挂 ...
- 《精通C#》委托与事件(10章)
委托可用来解耦以及状态变化的实时通知,以及其他的一些作用,但是经验所限,目前还未遇见.网上的大多数例子都是类似于,使用委托,然后用console返回方法的返回值,有时候会在想,委托的通知如果是这样的话 ...
- Python笔记总结week4
1. Built-in functions 函数可能遇到的问题:下面例子函数改变了函数需要传入的参数 li = [11,22,33,44] def f1(arg): arg.append(55) ...
- img的onerror事件(瑕疵+解决办法)【转】
显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到IMG的onerror事件了,注意MyEclipse的快捷键alt+/是没有的. < img ...
- JQuery的ajaxFileUpload图片上传初试
本案例主要说讲使用ajaxFileUpload实现图片的异步上传. 1.html代码部分 这里的代码,主要设置一下name,后台获取时候要用到,还有设置一个onchange的事件对应的方法:ajaxF ...
- [并查集] POJ 1703 Find them, Catch them
Find them, Catch them Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 43132 Accepted: ...
- 算法练习之leetcode系列1-3
1.Reverse Words in a String public class Solution { public String reverseWords(String s) { String re ...
- 工作中用到的oracle字符串分割整理
oracle部分: 定义类型(用于字符串分割): create or replace TYPE "STR_SPLIT" IS TABLE OF VARCHAR2 (4000); 字 ...
- win环境 yii2 框架 overtrue/wechat 包 由 sys_get_temp_dir 引发的 the directory "c:\Windows" is not writable
vendor\overtrue\wechat\src\Foundation\Application.php registerBase 方法 在初始化属性时 $this['cache'] = funct ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...