Skip to content

G
ginfinite
Commit 7ab51584 authored by liaili's avatar liaili
Browse files
Options

更改导航样式

parent af4cb551
Show whitespace changes
Inline Side-by-side
Showing with 117 additions and 51 deletions
src/pages/about/about.html
View file @ 7ab51584
......@@ -14,10 +14,16 @@
<div class="header-box">
<ul class="nav">
<li>
<a href="/">首页</a>
<a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li>
<li class='active company'>
<a href="javascript:;">公司介绍</a>
<a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce">
<div class="left fl">
<a href="/about.html">关于礼瀚</a>
......@@ -34,10 +40,16 @@
</div>
</li>
<li>
<a href="/news.html">动态新闻</a>
<a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li>
<li>
<a href="/contact.html">联系我们</a>
<a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li>
</ul>
</div>
......@@ -75,7 +87,7 @@
<br/>
<span class="phone">
<i class="iconfont icon-phone"></i>
+86-0571-8773151
0571-8773151
</span>
</div>
</div>
......
src/pages/contact/contact.html
View file @ 7ab51584
......@@ -14,10 +14,16 @@
<div class="header-box">
<ul class="nav">
<li>
<a href="/">首页</a>
<a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li>
<li class="company">
<a href="javascript:;">公司介绍</a>
<a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce">
<div class="left fl">
<a href="/about.html">关于礼瀚</a>
......@@ -34,10 +40,16 @@
</div>
</li>
<li>
<a href="/news.html">动态新闻</a>
<a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li>
<li class="active">
<a href="/contact.html">联系我们</a>
<a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li>
</ul>
</div>
......
src/pages/culture/culture.html
View file @ 7ab51584
......@@ -14,10 +14,16 @@
<div class="header-box">
<ul class="nav">
<li>
<a href="/">首页</a>
<a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li>
<li class="active company">
<a href="javascript:;">公司介绍</a>
<a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce">
<div class="left fl">
<a href="/about.html">关于礼瀚</a>
......@@ -34,10 +40,16 @@
</div>
</li>
<li>
<a href="/news.html">动态新闻</a>
<a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li>
<li>
<a href="/contact.html">联系我们</a>
<a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li>
</ul>
</div>
......@@ -70,7 +82,7 @@
<br/>
<span class="phone">
<i class="iconfont icon-phone"></i>
+86-0571-8773151
0571-8773151
</span>
</div>
</div>
......
src/pages/index/index.html
View file @ 7ab51584
......@@ -13,10 +13,16 @@
<div class="header-box">
<ul class="nav">
<li class='active'>
<a href="/">首页</a>
<a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li>
<li class="company">
<a href="javascript:;">公司介绍</a>
<a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce">
<div class="left fl">
<a href="/about.html">关于礼瀚</a>
......@@ -33,10 +39,16 @@
</div>
</li>
<li>
<a href="/news.html">动态新闻</a>
<a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li>
<li>
<a href="/contact.html">联系我们</a>
<a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li>
</ul>
</div>
......@@ -112,7 +124,7 @@
<br/>
<span class="phone">
<i class="iconfont icon-phone"></i>
+86-0571-8773151
0571-8773151
</span>
</div>
</div>
......
src/pages/index/index.less
View file @ 7ab51584
......@@ -14,7 +14,7 @@
position: relative;
& > img {
width: 100%;
height: 450px;
//height: 450px;
}
& > h1 {
position: absolute;
......
src/pages/news/news.html
View file @ 7ab51584
......@@ -16,10 +16,16 @@
<div class="header-box">
<ul class="nav">
<li>
<a href="/">首页</a>
<a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li>
<li class="company">
<a href="javascript:;">公司介绍</a>
<a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce">
<div class="left fl">
<a href="/about.html">关于礼瀚</a>
......@@ -36,10 +42,16 @@
</div>
</li>
<li class='active'>
<a href="/news.html">动态新闻</a>
<a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li>
<li>
<a href="/contact.html">联系我们</a>
<a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li>
</ul>
</div>
......@@ -77,7 +89,7 @@
<br/>
<span class="phone">
<i class="iconfont icon-phone"></i>
+86-0571-8773151</span>
0571-8773151</span>
</div>
</div>
<div class="bottom">浙备案号： 浙ICP 13006995号 2016. All right reserved.</div>
......
src/pages/team/team.html
View file @ 7ab51584
......@@ -15,10 +15,16 @@
<div class="header-box">
<ul class="nav">
<li>
<a href="/">首页</a>
<a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li>
<li class='active company'>
<a href="javascript:;">公司介绍</a>
<a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce">
<div class="left fl">
<a href="/about.html">关于礼瀚</a>
......@@ -35,10 +41,16 @@
</div>
</li>
<li>
<a href="/news.html">动态新闻</a>
<a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li>
<li>
<a href="/contact.html">联系我们</a>
<a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li>
</ul>
</div>
......@@ -89,7 +101,7 @@
<br/>
<span class="phone">
<i class="iconfont icon-phone"></i>
+86-0571-8773151
0571-8773151
</span>
</div>
</div>
......
src/styles/common.less
View file @ 7ab51584
......@@ -53,28 +53,19 @@
& > li {
position: relative;
float: left;
padding: 0 30px 8px 30px;
text-align: center;
&:nth-child(1) > a:after{
content: 'HOME';
display: block;
}
&:nth-child(2) > a:after{
content: 'COMPANY';
display: block;
}
&:nth-child(3) > a:after{
content: 'NEWS';
display: block;
}
&:nth-child(4) > a:after{
content: 'CONTACT';
display: block;
}
//padding: 0 30px 8px 30px;
//text-align: center;
& > a {
display: inline-block;
width: 150px;
padding-bottom: 12px;
text-align: center;
line-height: 24px;
color: #fca960;
& > span {
display: block;
font-size: 18px;
line-height: 24px;
}
}
&:hover,
&.active {
......@@ -84,7 +75,7 @@
position: absolute;
left: 50%;
bottom: 0;
margin-left: -10px;
margin-left: -5px;
width: 0;
height: 0;
border: 5px solid transparent;
......@@ -161,6 +152,9 @@
position: relative;
top: -33px;
font-size: 27px;
&:before {
color: #777;
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment