跳转到主要内容
你行网

Main navigation

  • 首页
  • Drupal
  • 编程与开发
  • 数据库
  • 操作系统与应用
  • 服务器与运维
  • 社区
User account menu
  • 登录

面包屑

  1. 首页

CSS 基础学习-233 css网页布局之导航栏

由 hrs, 4 九月, 2023

实例代码



<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			.header{
				background-color:red;
				text-align:center;
				width:960px;
				padding:10px 0px;
				margin:10px auto 0px;
			}
			h1{
			margin:30px 0px;
			}
			.div-a{
				background-color:black;
				width:960px;
				margin:0px auto 0px;
			}
			.div-a a{
				text-decoration:none;
				color:white;
				display:inline-block;
				padding:15px 5px;
			}
			.div-a a:hover{
				background-color:#ddd;
				color:black;
			}

		</style>
	</head>
	<body>
		<div class="header">
			<h1>Header</h1>
		</div>
		<div class="div-a">
			<a href="#">Home</a>
			<a href="#">download</a>
			<a href="#">about</a>
		</div>
	</body>
</html>

运行效果:

nav.png
  • 登录或注册以发表评论
内容类型分类
编程与开发
文章归类
前端开发

文章标签

  • CSS

评论

文章标签

Excel
CSS
ubuntu
php
vim
五笔
VPN
Linux
command
HTML
drupal 8
drupal 7
centos
composer
Mysql
模块(module)
drush
Drupal
JavaSrcipt
apache
英语
drupal 9
nerdtree
network
果树种植
surround
drupal10
SEO
主题(theme)
二进制
更多

相关文章

  • php json_encode 函数将编码值转为json格式
  • php 用户自定义回调函数实例
  • php 回调函数实例
  • 匿名函数(Anonymous Functions)详解
  • 如何去掉input和button标签中间有缝隙
  • PHP 中的四种标量数据类型
  • php 语言的四种标记风格
  • date_default_timezone_set 设置php服务器的默认时区
  • php8.3 的扩展模块简略说明
  • <input>` 类型的定义和用途的简要说明
RSS源

友情链接 网站地图 版权信息 联系我们 网址导航 社区

Copyright © 2019 - 2021 你行网 版权所有  粤ICP备19072650号