CSS+Html設計網站導航
- 零到壹度原創
- 2018-03-20 11:35:451744瀏覽
本文主要和大家介紹了CSS+Html設計網站導航的具體步驟與相關操作技巧,需要的朋友可以參考下，希望能幫助到大家。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<title>网站案例分析</title>
</head>
<body><!--=============导航部分================-->
<ul class="nav">
<li class="logo">LOGO</li>
<li class="xuanzhong">网站首页</li>
<li>关于我们</li>
<li>新闻中心</li>
<li>产品展示</li>
<li>客户案例</li>
<li>给我留言</li>
<li>人才招聘</li>
<li>联系我们</li>
</ul>
</body>
</html>
======================================================================
@charset "utf-8";
body{margin: 0 auto;padding: 0;
}.
nav{width: 1240px;height: 133px;margin: 0 auto;font-family: "微软雅黑";/*字体型号*/
}.
nav li{
list-style: none;/*去掉前面的所有点*/
float: left;/*让导航内容由竖排变成横排*/
width: 107px;height: 100%;/*和父节点一样高*/
line-height: 133px;/*行高就是行与行之间的距离*/
text-align: center;/*文字左右居中*/
font-size: 18px;/*字体大小*/
color: #333333;/*字体颜色*/
}.
nav .logo{
width: 363px;
height: 100%;
font-size: 64px;/*字体大小*/
color: #0c53ad;/*字体颜色*/
font-family: "微软雅黑";/*字体型号*/
}.
nav .xuanzhong{background-color: #1040a8;color: #ffffff;
}以上是CSS+Html設計網站導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn