이 기사에서는 HTML 및 CSS3를 기반으로 멋진 탐색 표시줄을 만드는 방법을 공유합니다. 효과가 매우 아름답습니다. 필요한 친구가 참고할 수 있습니다.
주요 하이라이트:
1 ul 가로 디스플레이
2 li 점 제거
3 li에서 글꼴을 가로 및 세로 중앙에 배치
4 li 테두리 스타일 제어
5 html + css3 그라데이션 페인팅을 사용하여 배경 이미지 만들기
6 색상 투명도 변경
7 p 테두리 만들기 Shadow
먼저 렌더링을 살펴보세요.
<!doctype html> html lang="en"> <head> <meta charset="UTF-8"> <!----编码-----> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="黄涛"> <meta name="Keywords" content="关键字,搜索引擎"> <meta name="Description" content="描述语言"> <title>案例</title> <style type="text/css"> *{ margin:0;padding:0; } body{background:url("images/bg_title.jpg") repeat-x,url("images/bg.jpg");} #Logo{ width:895px;height:45px; /*margin:上下 左右*/ margin:50px auto; border-radius:10px; /*html + css3 渐变画图 */ background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(54,54,54,0.72) 50%,rgba(24,23,23,0.94) 51%); box-shadow:1px 1px 33px #fff;/*设计阴影的*/ } #Logo ul li { width:127px; height:45px; list-style:none;/*去掉圆点*/ float:left;/*水平显示*/ color:white;/* #fff */ font-size:18px; font-family:"微软雅黑"; text-align:center; line-height:45px;/* 行高跟 高度一致时,竖直居中*/ border-right:1px solid #000;/*右边框*/ } #Logo ul li a { color:white;/* #fff */ font-size:18px; font-family:"微软雅黑"; text-decoration:none; } #Logo ul li:hover { background:rgba(10,5,5,0.45); } #Logo ul li.first:hover { border-radius:10px 0px 0px 10px;/*左上 左下 圆弧显示 */ } #Logo ul li.last:hover { border-radius:0px 10px 10px 0px;/*右上 右下 圆弧显示 */ } #Logo ul li ul li { border:none; border-top:1px solid #989898; background:rgba(10,5,5,0.45);/*颜色透明度 */ border-radius:10px; } #Logo ul li ul { display:none;/*不显示*/ } #Logo ul li ul li:hover { background:rgba(10,5,5,0.8);/*颜色透明度 */ border-radius:10px; } #Logo ul li:hover ul { display:block; -webkit-animation:roll 1s ease;/*roll 旋转名称,1s旋转效果 */ } @-webkit-keyframes roll /*roll旋转名称与上面一致*/ { 0% {-webkit-transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg);} } </style> </head> <body> <p id="Logo"> <ul> <li class="first"> <a href="#">网址<a> <ul> <li> <a href="http://www.baidu.com">百度</a> </li> <li> <a href="http://www.sina.com">新浪</a> </li> </ul> </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 class="last" style="border:none;"> <a href="#">关于<a> </li> </ul> </p> </body> /html>
코드가 매우 간단합니다. 멋진 탐색을 위해 html과 css3을 만드는 방법을 배우는 것이 모든 사람에게 도움이 되기를 바랍니다. 술집.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
CSS3을 사용하여 폭포 흐름 레이아웃을 구현하는 방법
IE 필터와 함께 CSS3를 사용하여 그라데이션 및 그림자 효과를 얻는 방법
위 내용은 HTML 및 CSS3를 사용하여 탐색 모음 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!