Skip to content

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

更改导航样式

parent af4cb551
Hide 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 @@ ...@@ -14,10 +14,16 @@
<div class="header-box"> <div class="header-box">
<ul class="nav"> <ul class="nav">
<li> <li>
<a href="/">首页</a> <a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li> </li>
<li class='active company'> <li class='active company'>
<a href="javascript:;">公司介绍</a> <a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce"> <div class="introduce">
<div class="left fl"> <div class="left fl">
<a href="/about.html">关于礼瀚</a> <a href="/about.html">关于礼瀚</a>
...@@ -34,10 +40,16 @@ ...@@ -34,10 +40,16 @@
</div> </div>
</li> </li>
<li> <li>
<a href="/news.html">动态新闻</a> <a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li> </li>
<li> <li>
<a href="/contact.html">联系我们</a> <a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -75,7 +87,7 @@ ...@@ -75,7 +87,7 @@
<br/> <br/>
<span class="phone"> <span class="phone">
<i class="iconfont icon-phone"></i> <i class="iconfont icon-phone"></i>
+86-0571-8773151 0571-8773151
</span> </span>
</div> </div>
</div> </div>
......
src/pages/contact/contact.html
View file @ 7ab51584
...@@ -14,10 +14,16 @@ ...@@ -14,10 +14,16 @@
<div class="header-box"> <div class="header-box">
<ul class="nav"> <ul class="nav">
<li> <li>
<a href="/">首页</a> <a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li> </li>
<li class="company"> <li class="company">
<a href="javascript:;">公司介绍</a> <a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce"> <div class="introduce">
<div class="left fl"> <div class="left fl">
<a href="/about.html">关于礼瀚</a> <a href="/about.html">关于礼瀚</a>
...@@ -34,10 +40,16 @@ ...@@ -34,10 +40,16 @@
</div> </div>
</li> </li>
<li> <li>
<a href="/news.html">动态新闻</a> <a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li> </li>
<li class="active"> <li class="active">
<a href="/contact.html">联系我们</a> <a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
......
src/pages/culture/culture.html
View file @ 7ab51584
...@@ -14,10 +14,16 @@ ...@@ -14,10 +14,16 @@
<div class="header-box"> <div class="header-box">
<ul class="nav"> <ul class="nav">
<li> <li>
<a href="/">首页</a> <a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li> </li>
<li class="active company"> <li class="active company">
<a href="javascript:;">公司介绍</a> <a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce"> <div class="introduce">
<div class="left fl"> <div class="left fl">
<a href="/about.html">关于礼瀚</a> <a href="/about.html">关于礼瀚</a>
...@@ -34,10 +40,16 @@ ...@@ -34,10 +40,16 @@
</div> </div>
</li> </li>
<li> <li>
<a href="/news.html">动态新闻</a> <a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li> </li>
<li> <li>
<a href="/contact.html">联系我们</a> <a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -70,7 +82,7 @@ ...@@ -70,7 +82,7 @@
<br/> <br/>
<span class="phone"> <span class="phone">
<i class="iconfont icon-phone"></i> <i class="iconfont icon-phone"></i>
+86-0571-8773151 0571-8773151
</span> </span>
</div> </div>
</div> </div>
......
src/pages/index/index.html
View file @ 7ab51584
...@@ -13,10 +13,16 @@ ...@@ -13,10 +13,16 @@
<div class="header-box"> <div class="header-box">
<ul class="nav"> <ul class="nav">
<li class='active'> <li class='active'>
<a href="/">首页</a> <a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li> </li>
<li class="company"> <li class="company">
<a href="javascript:;">公司介绍</a> <a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce"> <div class="introduce">
<div class="left fl"> <div class="left fl">
<a href="/about.html">关于礼瀚</a> <a href="/about.html">关于礼瀚</a>
...@@ -33,10 +39,16 @@ ...@@ -33,10 +39,16 @@
</div> </div>
</li> </li>
<li> <li>
<a href="/news.html">动态新闻</a> <a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li> </li>
<li> <li>
<a href="/contact.html">联系我们</a> <a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -112,7 +124,7 @@ ...@@ -112,7 +124,7 @@
<br/> <br/>
<span class="phone"> <span class="phone">
<i class="iconfont icon-phone"></i> <i class="iconfont icon-phone"></i>
+86-0571-8773151 0571-8773151
</span> </span>
</div> </div>
</div> </div>
......
src/pages/index/index.less
View file @ 7ab51584
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
position: relative; position: relative;
& > img { & > img {
width: 100%; width: 100%;
height: 450px; //height: 450px;
} }
& > h1 { & > h1 {
position: absolute; position: absolute;
......
src/pages/news/news.html
View file @ 7ab51584
...@@ -16,10 +16,16 @@ ...@@ -16,10 +16,16 @@
<div class="header-box"> <div class="header-box">
<ul class="nav"> <ul class="nav">
<li> <li>
<a href="/">首页</a> <a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li> </li>
<li class="company"> <li class="company">
<a href="javascript:;">公司介绍</a> <a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce"> <div class="introduce">
<div class="left fl"> <div class="left fl">
<a href="/about.html">关于礼瀚</a> <a href="/about.html">关于礼瀚</a>
...@@ -36,10 +42,16 @@ ...@@ -36,10 +42,16 @@
</div> </div>
</li> </li>
<li class='active'> <li class='active'>
<a href="/news.html">动态新闻</a> <a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li> </li>
<li> <li>
<a href="/contact.html">联系我们</a> <a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -77,7 +89,7 @@ ...@@ -77,7 +89,7 @@
<br/> <br/>
<span class="phone"> <span class="phone">
<i class="iconfont icon-phone"></i> <i class="iconfont icon-phone"></i>
+86-0571-8773151</span> 0571-8773151</span>
</div> </div>
</div> </div>
<div class="bottom">浙备案号： 浙ICP 13006995号 2016. All right reserved.</div> <div class="bottom">浙备案号： 浙ICP 13006995号 2016. All right reserved.</div>
......
src/pages/team/team.html
View file @ 7ab51584
...@@ -15,10 +15,16 @@ ...@@ -15,10 +15,16 @@
<div class="header-box"> <div class="header-box">
<ul class="nav"> <ul class="nav">
<li> <li>
<a href="/">首页</a> <a href="/">
<span>首页</span>
<span>HOME</span>
</a>
</li> </li>
<li class='active company'> <li class='active company'>
<a href="javascript:;">公司介绍</a> <a href="javascript:;">
<span>公司介绍</span>
<span>COMPANY</span>
</a>
<div class="introduce"> <div class="introduce">
<div class="left fl"> <div class="left fl">
<a href="/about.html">关于礼瀚</a> <a href="/about.html">关于礼瀚</a>
...@@ -35,10 +41,16 @@ ...@@ -35,10 +41,16 @@
</div> </div>
</li> </li>
<li> <li>
<a href="/news.html">动态新闻</a> <a href="/news.html">
<span>动态新闻</span>
<span>NEWS</span>
</a>
</li> </li>
<li> <li>
<a href="/contact.html">联系我们</a> <a href="/contact.html">
<span>联系我们</span>
<span>CONTACT</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -89,7 +101,7 @@ ...@@ -89,7 +101,7 @@
<br/> <br/>
<span class="phone"> <span class="phone">
<i class="iconfont icon-phone"></i> <i class="iconfont icon-phone"></i>
+86-0571-8773151 0571-8773151
</span> </span>
</div> </div>
</div> </div>
......
src/styles/common.less
View file @ 7ab51584
...@@ -53,28 +53,19 @@ ...@@ -53,28 +53,19 @@
& > li { & > li {
position: relative; position: relative;
float: left; float: left;
padding: 0 30px 8px 30px; //padding: 0 30px 8px 30px;
text-align: center; //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;
}
& > a { & > a {
color: #fca960; display: inline-block;
font-size: 18px; width: 150px;
padding-bottom: 12px;
text-align: center;
line-height: 24px; line-height: 24px;
color: #fca960;
& > span {
display: block;
font-size: 18px;
}
} }
&:hover, &:hover,
&.active { &.active {
...@@ -84,7 +75,7 @@ ...@@ -84,7 +75,7 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
margin-left: -10px; margin-left: -5px;
width: 0; width: 0;
height: 0; height: 0;
border: 5px solid transparent; border: 5px solid transparent;
...@@ -161,6 +152,9 @@ ...@@ -161,6 +152,9 @@
position: relative; position: relative;
top: -33px; top: -33px;
font-size: 27px; 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