导航栏

最新推荐文章于 2021-08-04 00:35:45 发布

gz153016

最新推荐文章于 2021-08-04 00:35:45 发布

阅读量480

点赞数 1

分类专栏：网站开发

本文链接：https://blog.youkuaiyun.com/gz153016/article/details/48324267

版权

网站开发专栏收录该内容

5 篇文章

订阅专栏

水平导航栏：

<head runat="server">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "Lantinghei SC","Microsoft Yahei",宋体,Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
}

li,ul,img,a,div{
border: 0;
list-style: none;
}

div{
display: block;
}

a{
color: #333333;
text-decoration: none;
outline: none;
}

em{
font-weight: normal;
}

.ue-bar{
background-color: #222222;
}

.ue-bar-warp{
width: 980px;
height: 70px;
margin: 0 auto;
overflow: hidden;
position: relative;
}

.ue-bar-logo{
width: 134px;
height: 50px;
float: left;
padding-right: 10px;
padding-top: 8px;
}

.ue-bar-logo a{
display: inline-block;
width: 100%;
height: 100%;
margin-top: 12px;
}

.ue-bar-nav{
height: 70px;
float: left;
}

.ue-bar-nav li{
height: 70px;
float: left;
margin-right: 20px;
}

.ue-bar-nav li *{
color:#dadada;
font-size: 14px;
display: inline-block;
line-height: 17px;
vertical-align: top;
}

.ue-bar-nav li a{
height: 22px;
line-height: 22px;
padding: 26px 17px;
}

.ue-bar-nav li.active{
background: #333;
}

.ue-bar-nav li a:hover{
background: #333;
}
</style>
<link href="Default.aspx" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="ue-bar">
<div class="ue-bar-warp">

<div class="ue-bar-logo">
<a href="#">
<img alt="极客学院" width="100" src="iamge/logo-old.png" />
</a>
</div>

<div class="ue-bar-nav">
<ul>
<li>
<a href="#"><em>首页</em></a>
</li>
<li>
<a href="#"><em>职业课程</em></a>
</li>
<li>
<a href="#"><em>技术问答</em></a>
</li>
<li>
<a href="#"><em>VIP会员</em></a>
</li>
</ul>
</div>
</div>
</div>
</form>
</body>

</html>

margin：外边距

例子 1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4
margin:10px;
所有 4 个外边距都是 10px

1、padding：内边距

padding:10px; 意思是上下左右值全是10px padding:5px 10px; 意思是上下为5px，左右为10px; padding:1px 2px 3px 4px; 这个写法意思是：上为1px，右为2px，下为3px，左为4px padding:5px 10px 7px; 这种写法意思是：上为5px，左右为10px，下为7px （注意：padding后面4个值定义的顺序分别为：上右下左）/

2、 list-style: none;去掉自带的样式

<ul>
<li>
<a href="#"><em>首页</em></a>
</li>
<li>
<a href="#"><em>职业课程</em></a>
</li>
<li>
<a href="#"><em>技术问答</em></a>
</li>
<li>
<a href="#"><em>VIP会员</em></a>
</li>
</ul>

3、display 属性规定元素应该生成的框的类型：

值描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

4、em是emphasis的缩写

5、font-weight

font-weight:normal正常
font-weight:bold粗体
font-weight:bolder特粗
font-weight:lithter细体

6、overflow

值描述
visible 默认值内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。