本文主要包含html5,css3导航栏,,css3导航栏,, html5,css3等相关知识,佚名 希望在学习及工作中可以帮助到您
主要亮点:
1 ul 水平显示
2 li 去掉圆点
3 li中字体水平、竖直居中
4 li控制边框样式
5 使用html + css3 渐变画图 制作背景图片
6 更改颜色透明度
7 DIV制作边框阴影
先看效果图:
- <!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;/* 行高跟 高度一致时，竖直居中*/
- &n