了百度、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)了:
以上就是我們需要的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構建一個響應式的導航欄菜單。希望你喜歡并分享這篇文章。感謝大家的閱讀。
更多干貨等著你~ 點贊、分享,關注哦
常用的圖像格式—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
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。