Html簡單表單案例

Html5 表單

首先在html中

<title>鴨鴨鴨</title>
		<link rel="stylesheet" type="text/css" href="css/demo.css"/>/* 設置超鏈接*/
	</head>
	<body> 
		 <div class="bannana">
	     <h1>SYROS</h1>
	     <ul class="bannana_ul">
	     	<li><a href="">HOME</a>
	     		<ul class="HOME_ul">
	     			<li><a href="">Home Default</a></li>
	     			<li><a href="">Home Onepage</a></li>
	     			<li><a href="">Home Business</a></li>
	     			<li><a href="">Home Agency</a></li>
	     			<li><a href="">Home Landing</a></li>
	     			<li><a href="">Home Shop</a></li>
	     			</ul>
	     	</li>
 .bannana {
		 	width: 100%; 
		 	height: 150px;
		 	color: white;
		 	z-index: 100; 
		 	position: absolute;
		 }
		 
		 .bannana h1 {
		 	float: left;
		 	margin-left: 50px;
		 }
		 
		 .bannana_ul {
		 	list-style: none;
		 	float: left;
		 	margin-top: 25px;
		 }
		 
		 .bannana_ul li {
		 	float: left;
		 	padding: 5px 5px 5px 5px;
		 }
		 
		 .bannana_ul li a {
		 	color: white;
		 	text-decoration: none;
		 	font-size: 14px;
		 }
		 
		 .bannana_ul li a:hover {
		 	color: #FF0000;
		 }
		 
		 .bannana li:hover .PAGES_ul {
		 	display: block;
		 }
		  /*HOme 的CSS*/
	     .HOME_ul{
	     	position: absolute;
		 	list-style: none;
		 	float: none;
		 	margin-left: -40px;
		 	display: none;
	     }  
		 .HOME_ul li{
		 	float: none;
		 	background-color: white;
		 }
		 .HOME_ul li a{
		 	color: black;
		 }
		 .HOME_ul li a:hover{
		 	color: aquamarine;
		 }
		.bannana li:hover .HOME_ul{
			display: block;
		}

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章