CSS学习笔记-04 a标签-导航练习

个人练习，各位大神勿笑。。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}ul{width: 810px;height: 50px;background-color:green;margin: 100px auto;list-style: none;}ul li{float: left;width: 90px;height: 50px;text-align: center;line-height: 50px;margin-left: 10px;}ul li a{text-decoration: none;display: inline-block;width: 90px;height: 50px;}ul li a:visited{color:blue;}ul li a:hover{color: white;background-color:pink;}</style>
</head>
<body><ul><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>

<!DOCTYPE html >

< html lang= "en" >

< head >

< meta charset= "UTF-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

< title >Document </ title >

< style >

margin: 0;

padding: 0;

}

ul{

width: 810px;

height: 50px;

background-color: green;

margin: 100px auto;

list-style: none;

}

ul li{

float: left;

width: 90px;

height: 50px;

text-align: center;

line-height: 50px;

margin-left: 10px;

}

ul li a{

text-decoration: none;

display: inline-block;

width: 90px;

height: 50px;

}

ul li a:visited{

color: blue;

}

ul li a:hover{

color: white;

background-color: pink;

}

< / style >

</ head >

< body >

< ul >

< li >< a href= "#" >我是导航 </ a ></ li >

</ ul >

</ body >

</ html >

本文转载于:猿2048➸https://www.mk2048.com/blog/blog.php?id=jj0122j&title=CSS学习笔记-04 a标签-导航练习

CSS学习笔记-04 a标签-导航练习相关推荐

HTML+CSS学习笔记(2) - 认识标签（1）转载
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 http://www.cnblogs.com/wanglongshuai/p/5204070.html@ ...
CSS学习笔记 04、浮动与定位
文章目录前言一.浮动 1.1.1.浮动的基本概念 1.1.2.浮动的顺序贴靠特性 1.1.3.右浮动效果 1.1.4.案例:使用浮动设计网页布局(分析及源码) 1.1.5.BFC规范与浏览器差异 ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
Windows phone 8 学习笔记(8) 定位地图导航
Windows phone 8 学习笔记(8) 定位地图导航原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控 ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

CSS学习笔记-04 a标签-导航练习

CSS学习笔记-04 a标签-导航练习相关推荐

最新文章

热门文章