整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          一個簡潔大氣的導航網站LOGO設計是如何煉成的?

          一個簡潔大氣的導航網站LOGO設計是如何煉成的?

          了百度、360、搜狗等搜索引擎,我們比較熟悉的就是導航網站了,最熟悉不過的就是hao123了,那么問題來了,如何設計一個導航網站LOGO呢?Logofree君以重設計hao123導航網站logo為例,跟大家分享如何設計導航網站LOGO

          概念提取

          Hao123這個名稱代表了什么意義?

          所提供我們的服務可以傳達給我們什么感受?

          看到logo直觀的感受是什么?

          “hao123...”

          從聲音到使用多維度體驗感覺...

          設計關鍵詞

          “hao123...”,耳熟能詳(拼音)

          “123”,速度感覺(更快、更簡單)

          開始使用情景(找到所求)

          概念發(fā)散:LOGO設計手稿草圖

          圖形提取

          開口音成o,抽象的感知具象化

          拼音直觀簡單,第一時間感知

          人匯取的內容里獲得個性化所需

          字體趨勢分析

          趨勢潮流:缺少字體變形,直觀明了。

          字體設計

          將圓的感覺延續(xù)

          用簡潔大氣的字體注重辨識度

          也符合流行趨勢

          標志標準備制圖

          LOGO色彩定義

          主色:生命令力朝氣、安全可信

          輔助色:年輕的、活力、個性

          LOGO標準稿

          不同底色LOGO設計稿

          好123導航網站logo設計大功告成,這個logo設計你覺得OK嗎?你也可以自助設計一個導航網站LOGO,對比一下,誰的更有特色。

          文章來自logo在線制作平臺logofree。原文:http://www.logofree.cn/news/shejizhishixuexi/hao123logo.html

          LogoFree是一個簡單易用的免費LOGO在線制作平臺,只需兩分鐘,就可以設計精美的LOGO,一站式的LOGO設計在線生成就這么簡單,而且免費下載。

          5自適應是現(xiàn)在主流的技術,導航欄菜單是最常見的一種,今天我們一起來學習一下它是如何使用HTML,CSS和JavaScript來構建響應式導航欄和漢堡菜單的。

          這就是它的樣子,是不是很熟悉呢?

          H5導航菜單

          好的,那就先從HTML開始:

          <header class=”header”>
          <nav class=”navbar”>
          <a href=”#” class=”nav-logo”>WebDev.</a>
          <ul class=”nav-menu”>
          <li class=”nav-item”>
          <a href=”#” class=”nav-link”>Services</a>
          </li>
          <li class=”nav-item”>
          <a href=”#” class=”nav-link”>Blog</a>
          </li>
          <li class=”nav-item”>
          <a href=”#” class=”nav-link”>About</a>
          </li>
          <li class=”nav-item”>
          <a href=”#” class=”nav-link”>Contact</a>
          </li>
          </ul>
          <div class=”hamburger”>
          <span class=”bar”></span>
          <span class=”bar”></span>
          <span class=”bar”></span>
          </div>
          </nav>
          </header>

          通過這些代碼,我們實現(xiàn)了:

          • 給header標簽指定名為header的CSS類的,可以作為導航菜單的容器。
          • 給nav標簽指定名為navbar的CSS類。
          • 具有nav-logo類的鏈接
          • 具有nav-menu類的ul
          • 在ul內部,我們有4個具有nav-item類的li
          • 在每個nav-item中,都有一個包含nav-link類的鏈接
          • 至于漢堡菜單,我已在代碼中添加了一個具有hamburger類的div,且此div中有3個帶bar類的span

          以上就是我們需要的HTML代碼。

          現(xiàn)在讓我們添加CSS樣式重置代碼

          (此外,我們將導入所需的字體,并添加一些基本的CSS來重置所有的默認樣式。)

          @import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);
          
          * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          }
          
          html {
          font-size: 62.5%;
          font-family: ‘Roboto’, sans-serif;
          }
          
          li {
          list-style: none;
          }
          
          a {
          text-decoration: none;
          }

          現(xiàn)在讓我們給每個元素逐個添加樣式:

          header和navbar:

          .header{
          border-bottom: 1px solid #E2E8F0;
          }
          
          .navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem 1.5rem;
          }


          hamburger樣式:

          .hamburger {
          display: none;
          }
          
          .bar {
          display: block;
          width: 25px;
          height: 3px;
          margin: 5px auto;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          background-color: #101010;
          }


          其他元素的基本樣式:

          .nav-menu {
          display: flex;
          justify-content: space-between;
          align-items: center;
          }
          
          .nav-item {
          margin-left: 5rem;
          }
          
          .nav-link{
          font-size: 1.6rem;
          font-weight: 400;
          color: #475569;
          }
          
          .nav-link:hover{
          color: #482ff7;
          }
          
          .nav-logo {
          font-size: 2.1rem;
          font-weight: 500;
          color: #482ff7;
          }

          完成這些之后,看起來應該是這樣的:

          但是它不是響應式的,所以我們還需要添加媒體查詢css代碼。

          @media only screen and (max-width: 768px) {
          .nav-menu {
          position: fixed;
          left: -100%;
          top: 5rem;
          flex-direction: column;
          background-color: #fff;
          width: 100%;
          border-radius: 10px;
          text-align: center;
          transition: 0.3s;
          box-shadow:
          0 10px 27px rgba(0, 0, 0, 0.05);
          }
          
          .nav-menu.active {
          left: 0;
          }
          
          .nav-item {
          margin: 2.5rem 0;
          }
          
          .hamburger {
          display: block;
          cursor: pointer;
          }
          
          }


          這里媒體查詢就是通過設置position: fixed; left: -100%;來隱藏nav-menu。

          此外,我們將hamburger設置為display: block;,所以現(xiàn)在可見。

          我們還添加了一個額外的類.nav-menu.active,它在nav-menu上設置left: 0;。現(xiàn)在,到了添加javascript的時候了,以便在我們單擊漢堡菜單時,會在nav-menu上添加此active類。

          添加JavaScript

          const hamburger=document.querySelector(“.hamburger”);
          const navMenu=document.querySelector(“.nav-menu”);
          
          hamburger.addEventListener(“click”, mobileMenu);
          
          function mobileMenu() {
          hamburger.classList.toggle(“active”);
          navMenu.classList.toggle(“active”);
          }


          此處的函數mobileMenu()在hamburger和nav-menu上也添加了一個active類,從而打開mobile menu。單擊hamburger時,我們可以使用hamburger上的active類來創(chuàng)建X動畫。現(xiàn)在就開始做吧。

          // Inside the Media Query.
          
          .hamburger.active .bar:nth-child(2) {
          opacity: 0;
          }
          
          .hamburger.active .bar:nth-child(1) {
          transform: translateY(8px) rotate(45deg);
          }
          
          .hamburger.active .bar:nth-child(3) {
          transform: translateY(-8px) rotate(-45deg);
          }

          現(xiàn)在看起來應該是這樣的:

          但是有一個問題,當我們單擊鏈接時,漢堡菜單不會關閉。現(xiàn)在讓我們解決一下這個問題。

          const navLink=document.querySelectorAll(“.nav-link”);
          
          navLink.forEach(n=> n.addEventListener(“click”, closeMenu));
          
          function closeMenu() {
          hamburger.classList.remove(“active”);
          navMenu.classList.remove(“active”);
          }

          closeMenu()函數從nav-menu和hamburger中刪除active類,從而關閉mobile menu。

          H5導航菜單就是這樣,實現(xiàn)了用HTML,CSS和javascript構建一個響應式的導航欄菜單。希望你喜歡并分享這篇文章。感謝大家的閱讀。

          更多干貨等著你~ 點贊、分享,關注哦

          TML圖像標記

          常用的圖像格式—GIF,PNG,JPG
          圖像標記<img />
          HTML網頁中任何元素的實現(xiàn)都要依靠HTML標記,要想在網頁中顯示圖像就需要使用圖像標記,接下來將詳細介紹圖像標記以及和他相關的屬性。其基本語法格式如下:

          <img src="圖像URL" />

          該語法中src屬性用于指定圖像文件的路徑和文件名,他是img標記的必需屬性。

          相對路徑和絕對路徑

          相對路徑
          相對路徑不帶有盤符,通常是以HTML網頁文件為起點,通過層級關系描述目標圖像的位置。
          例如:

          <img src="img/logo.gif" alt="傳智播客-專業(yè)的java培訓,.net培訓,php培訓,網頁培訓,平面培訓,iOS培訓機構" />
          

          相對路徑設置分為以下三種:

          圖像文件和html文件位于同一文件夾:只需輸入圖像文件的名稱即可,如<img src="logo.gif" />。

          圖像文件位于html文件的下一級文件夾:輸入文件夾名和文件名,之間用“/”隔開,如<img src="img/img01/logo.gif" />。

          圖像文件位于html文件的上一級文件夾:在文件名之前加入“…/” ,如果是上兩級,則需要使用 “…/ …/”,以此類推,如<img src="../logo.gif" />。

          絕對路徑

          絕對路徑一般是指帶有盤符的路徑。

          例如:

          “D:\HTML+CSS網頁制作\chapter02\img\logo.gif”,或完整的網絡地址,例如“http://www.itcast.cn/images/logo.gif”。

          我自己是一名從事了多年開發(fā)的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取。


          原文鏈接:https://blog.csdn.net/dubaiqaq/article/details/103500345


          主站蜘蛛池模板: 美女免费视频一区二区| aⅴ一区二区三区无卡无码| 中文乱码字幕高清一区二区| 久久se精品一区精品二区| 影音先锋中文无码一区| 精品国产福利在线观看一区| 国产一区内射最近更新| 久久综合一区二区无码| 亚洲av无码一区二区三区不卡| 亚洲国产一区二区a毛片| 在线|一区二区三区四区| 国产亚洲日韩一区二区三区| 欧洲精品无码一区二区三区在线播放 | 无码av中文一区二区三区桃花岛| 大帝AV在线一区二区三区| 久久久精品日本一区二区三区| 国产无线乱码一区二三区| 日韩精品在线一区二区| 在线|一区二区三区四区| 无码精品人妻一区二区三区中| 亚洲AV无码一区二区三区在线| 无码一区二区三区AV免费| 国产精品一区二区三区免费| 麻豆一区二区三区精品视频| 亚洲毛片不卡av在线播放一区| 人妻AV中文字幕一区二区三区| 日韩精品一区二区三区毛片| 色国产精品一区在线观看| 免费一区二区无码东京热| 日本一区二区三区精品国产 | 2014AV天堂无码一区| 在线一区二区观看| 国产吧一区在线视频| 国产精品丝袜一区二区三区| 日韩免费无码一区二区视频| 中文字幕精品一区二区日本| 国产成人无码一区二区三区| 成人在线视频一区| 色一情一乱一伦一区二区三区| 内射少妇一区27P| 污污内射在线观看一区二区少妇 |