用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 ...
随机推荐
- centos7装机和初步运维
1.装机-制作U盘启动盘 CentOS7是一个比较新的版本.在服务器领域用得比较多.因为前安装软件可能没有Ubuntu那样方便,所以桌面领域好像不是很多. https://www.centos.org ...
- O2O、C2C、B2B、B2C的区别
一.O2O.C2C.B2B.B2C的区别在哪里? o2o 是 online to offline 分为四种运营模式 1.online to offline 是线上交易到线下消费体验 2.offline ...
- LoadRunner ERROR:Could not call flex.messaging.io.amf.ASObject.readObject() : Cannot parse date.
Error: Encoding of AMF message failed. Error is : Exception Occurred while invoking WriteObject meth ...
- mina-http之坑
TCP是流式协议,不保证一次通信传输完整的包,当这种情况发生在mina-http时会产生严重的bug,图中红框部分只是将前后收到的数据拼在一起,但下面处理的还是最近收到的不完整的msg:此为大坑! 轻 ...
- 使用caffe时遇到的问题
1.Error: (unix time) try if you are using GNU date 问题所在: 在训练train.txt图片列表位置和生成的lmbd数据不符. 解决方案: 修改tra ...
- nmon--非常棒的LINUX/AIX性能计数器监测和分析工具
转自51Testinghttp://bbs.51testing.com/viewthread.php?tid=116526 经常看到很多人讨论说loadrunner对linux/aix的性能监测太少, ...
- 让ie6对png透明图片支持起来
[声明:此文仅是对低版本ie使用透明图片的一个研究,当时出于工作要求,所以花费了一番心思在兼容旧版本ie上,现在对ie8都是做降级处理了.不培养用户坏习惯.引导用户跟随潮流体验新技术应是我们前端开发者 ...
- 总结js中数据类型的bool值及其比较
首先需要知道的是,js中有6个值为false,分别是: 0, '', null, undefined, NaN 和 false, 其他(包括{}, [], Infinity)为true. 可以使用Bo ...
- ASP.NET MVC 4 (三) 过滤器
先来看看一个例子演示过滤器有什么用: public class AdminController : Controller { // ... instance variables and constru ...
- Cocopods不显示三方库的解决方法
把 $(PODS_ROOT) 的字段添加到 User Header Search Paths 的文件路径下