用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 ...
随机推荐
- 【转】 C++模板详解
C++模板 模板是C++支持参数化多态的工具,使用模板可以使用户为类或者函数声明一种一般模式,使得类中的某些数据成员或者成员函数的参数.返回值取得任意类型. 模板是一种对类型进行参数化的工具: 通常有 ...
- AX2012 multiple enum values as query filter选择多个枚举值当过滤条件
classDeclaration { QueryBuildRange qbrLocationType; } datasource.init() { super(); qbrLocationType = ...
- angularjs不同页面间参数的传递
1.在路由中定义要接收的参数 .state('userDetails', { url: '/userDetails?phone', //以?为标识接收参数 templateUrl: 'assets/v ...
- 安装linux操作系统
安装双操作系统; 1 0. 介绍: 1 1 实验环境: 2 2. 实验准备: 2 3.开始安装: 2 1 制作U盘启动工具: 2 2.安装LinuxOS. 3 2.1在windowOS中划分60G空间 ...
- the usage of map.put
这个不用要的那么详细,对于应用来说,比如举个例子: Map map = new HashMap();map.put("key","value");这样就存入了一 ...
- Swift的 convenience && designated init
http://www.th7.cn/Program/IOS/201603/789227.shtml 在 OC 中 init 方法是非常不安全的,没人能够保证 init 只被调用一次,也没有人保证在初始 ...
- html/css小练习2
效果图:
- 动态获取R.drawable.xx资源
String imageName = "index_fragmen"+getColor();final int resId = context.getResources().get ...
- appcan.slider.js探索
1:-moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome.safari私有属性 2:定义新模块:appcan.define(name,function ...
- shell脚本中的几个括号总结(小括号/大括号/花括号)--from:http://www.cnblogs.com/hanyan225/archive/2011/10/06/2199652.html
在Shell中的小括号,大括号结构和有括号的变量,命令的用法如下: 1.${var}2.$(cmd)3.()和{}4.${var:-string},${var:+string},${var:=stri ...