前端學習筆記day05 第一個頁面--header部分

阿新 • • 發佈：2018-12-06

1. 導航欄部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <link rel="stylesheet" 
 type="text/css" href="./css/index.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="images/logo_03.png">
        </div>    
        <div class="nav">
            <ul>
                <li><a href="#">首頁</a></ 
li>
                <li><a href="#">課程</a></li>
                <li><a href="#">職業規劃</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="search" placeholder="請輸入關鍵詞">
            <input  
type="submit" value="">
        </div>
        <div class="personal">
            <u>個人中心</u>
            <img src="images/ling_06.png" class="msg">
            <img src="images/tou_03.png" class="pic">
            <span>軒軒璇璇宣萱</span>
        </div>
    </header>
    
</body>
</html>

header{
    width: 1300px;
    height: 100px;
    /*background-color: pink;*/
    margin: 0 auto;
    padding-top: 30px;
}
.logo {
    width: 220px;
    height: 42px;
    float: left;
}
.nav {
    width: 220px;
    height: 42px;
    float: left;
    /*background-color: purple;*/
}
.nav ul li {
    padding-left: 20px;
    height: 42px;
    line-height: 42px;
    float: left;
    font-size: 18px;
}
.search {
    width: 400px;
    height: 42px;
    /*background-color: purple;*/
    float: left;
    margin-left: 50px;
}
.search input[type="search"] {
    padding-left: 8px;
    width: 350px;
    height: 42px;
    border: 1px solid skyblue;
    float: left;

}
.search input[type="submit"] {
    border: 0px;
    width: 50px;
    height: 42px;
    float: left;
    background: url("../images/search_06.png") no-repeat #00a4ff center center;
}
.personal {
    height: 42px;
    line-height: 42px;
    float: right;
    /*background-color: pink;*/
}
.personal u {
    text-decoration: none;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    float: left;
}
.personal .msg {
    margin: 10px;
    float: left;
}
.personal .pic {
    margin: 0 10px;
    float: left;
}
.personal span {
    font-size: 16px;
    display: inline-block;
    float: left;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
a {
    color: #050505;
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
body {
    background-color: #f3f5f7;
}

執行結果：

啊我的第一個頁面！

前端學習筆記day05 第一個頁面--header部分

1. 導航欄部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Welcome</title> <l

自動化測試學習筆記之第一個代碼

href 自動化筆記定義 imp 信息查找 clas 驅動實現第一個自動化代碼，控制瀏覽器打開網址，輸入信息並點擊按鈕。 ①導入selenium相關模塊 ②調用selenium的瀏覽器驅動 ③通過驅動訪問網址URL ④通過驅動操作頁面元素 ⑤通過驅動關閉瀏覽器

Django學習1：第一個頁面

Django學習1 Django是python後臺開發的一個熱門框架，對於一般web開發有較為簡潔，快速的特性。 step1:安裝 Django 鑑於anaconda的整合開發環境，我選擇在anconda中安裝Django，在環境中安裝Django需要

PyQt5學習筆記01----第一個視窗

寫在前面的話最近想學習一下桌面程式開發，可是MFC臃腫複雜介面難看，而WPF無法跨平臺，似乎只剩下了QT這一個選擇。本來想借著學習python熱情，看看python下有木有什麼好看的圖形庫，怎奈我用的python3.* 不支援wxpython（才疏學淺，

前端學習筆記之5 靜態頁面練習(登入)

引言 : 博主目前是一名iOS開發者, 所會的語言有Objective-C 和 Swift, 目前正在學習前端; 這篇文章只是作為我的筆記發在這裡, 供自己業餘時間看看; 全是很基礎的東西, 看到的小夥伴酌情略過吧^_^ 效果圖 : 1. 程式碼

學習筆記（第一個程式HelloWorld的解釋）

關鍵字，主函式的概念 class Demo { public static void main(String[] args) { System.out.println("hellow java"); } } 1、在我們這個類中，Demo稱之為類名，cl

前端學習筆記2017.6.21-html是個什麽東西

向人比較 htm 發送書寫文檔輕量文件名這就是 html有兩種意思，html語言和html格式 html語言是一種面向人類的計算機語言，這是啥意思？人類用html這種語言描述出一個網頁的樣子，瀏覽器解析這個語言並展示出來。 html格式是一種文件格式，裏面存儲的

糊糊的前端學習筆記——a標籤點選跳轉頁面後，為被點選的a標籤新增樣式【Day1】

本人前端小白一枚，初步接觸前端知識一個月。從今天開始將在部落格上分享一下我每日工作中遇到的一些問題和相應的解決，以幫助自己更好的學習和成長。今天在製作網頁頂部公共導航時，遇到這樣一個問題，我需要在a標籤點選跳轉頁面後，為被點選的a標籤新增樣式。增添樣式如下：.selec

Redis學習筆記3-Redis5個可運行程序命令的使用

運行程序檢查 mil 數據文件 img usr pre text mod 在redis安裝文章中,說到安裝好redis後,在/usr/local/bin下有5個關於redis的可運行程序。以下關於這5個可運行程序命令的具體說明。 redis-server Redi

Django的第一個頁面

sts __file__ 靜態文件存在 .py world 通過 .sql oca 1、創建目錄 django-admin startproject myblog 2、項目結構：（1）manage.py 與項目進行交互的命令行工具集的入口（項目管理器）裏

前端學習筆記2017.6.12 CSS控制DIV

banner 成像個性化 logs 一個 style 切換 back 成了前一篇文章中用div布局了豆瓣東西的頁面，如果用html代碼表示的話大概是這個樣子的 <!DOCTYPE html><html><head></head

ios 解決第一個頁面是通過loadData或者是loadHtml時返回控制的問題

else ont 訪問 col 狀態 load atom tro nvi 問題： webView在通過loadData或者loadHtml方法加載到第一個頁面後跳轉到其他的webView後，點擊導航條的返回按鈕時由於webView 的canGoback為NO導致我們返回不了

Java學習筆記（第一次課）

stdio.h println 標準 ant 方法參數 ann 控制大小寫 protect 1.簡單的Java語言模板 package inclass1_1; import java.io.*;//導入包（相當於c語言的#include<stdio.h>）

Python自動化3.0-------學習之路-------第一個程序用戶登錄！

hide lap 標記之路判斷 () exit isp 互信一、用戶登錄程序知識點：1.input（） 2.while 循環 3.fot 循環

linux學習中的第一個服務器sshd

ssh sshd服務器1之-----ssh #終於開始記錄總結服務器了，由於經常用到sshd，也是服務器中相對簡單的一個，學起來也輕松，所以整理成博客，有問題指出哦一：相關知識解釋先說一下ssh和sshd：ssh 是客戶端

Java 《Effective Java 中文版第2版》學習筆記遇到多個構造器時要考慮用構建器

fec 利用客戶端代碼 except car beans pri 很好種類　　靜態工廠和構造器有個共同的局限性：它們都不能很好地擴展到大量的可選參數。　　當一個類中有若幹個必選屬性和多個可選屬性時，采用重疊構造器模式、JavaBeans模式或者Builder模式，但

操作系統學習筆記（五）頁面置換算法

進入 es2017 問題簡單 .cn 討論相同一位四種操作系統將內存按照頁的進行管理，在需要的時候才把進程相應的部分調入內存。當產生缺頁中斷時，需要選擇一個頁面寫入。如果要換出的頁面在內存中被修改過，變成了“臟”頁面，那就需要先寫會到磁盤。頁面置換算法，就是要選出

【selenium學習筆記】webdriver進行頁面元素定位

path chrome ring .net 核心簡單 tail 查看 data- 【selenium學習筆記】webdriver進行頁面元素定位進行Web頁面自動化測試，對頁面上的元素進行定位和操作是核心。而操作又是以定位為前提的，因此，對頁面元素的定位是進行自動化

0003-img標簽-前端學習筆記

png wid 學習圖片占用 itl style 使用 type <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

0006-css引入內聯和內部和外聯樣式表-前端學習筆記

col 產業 set 2個處理 css tex 直接 ont <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css樣式&

前端學習筆記day05 第一個頁面--header部分

1. 導航欄部分

相關推薦