一個Web佈局例項

阿新 • • 發佈：2018-11-10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        $(function(){ 

            //讓所有連結加上預設樣式
            $("#nav ul li a").addClass("linkstyle");
            $("#nav ul li ul").css("display","none");
            $("#nav ul li").each(function() { //為每一個#menu中每一個li元素繫結click事件
                $(this).bind(
                    "mouseover",
                    function()
                    { 

                        $("#menu li a").addClass("curstyle");// 事件的方法為：（1）將當前li中的a加上curstyle樣式，
                        $(this).siblings("li").find("a").removeClass("curstyle");//（2）將當前li的其他所有兄弟li中的a去掉curtyle樣式。
                        $(this).hover(function(){
                            $(this).find("ul:eq(0)" 
).fadeIn(100)
                        },
                        function(){
                            $(this).find("ul:eq(0)").fadeOut(100)
                        });
                    });
              });
            })
        </script>
        <style type="text/css">
            /*以下為設定li自動橫向排列的樣式*/
            #nav
            {
                margin: 0 auto;
                width: 80%;
                background-color: black;
                color: white;
            }
            ul,li /*這是關鍵，去掉ul li預設的margin padding 值*/
            {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            #nav ul /*這是關鍵*/
            {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

            }
            #nav ul li
            {
                max-width: 100px; /*每個元素的最大寬度*/
                text-align: center;
                margin-top: 10px;
                margin-bottom: 10px;
                flex:auto;  /*這是關鍵*/            
            }

            /*以下設定子選單*/
            #nav ul li ul
            {
                position:absolute;
                background-color: #444444;
                top: 50px;
                opacity: 0.9;
            }
            #nav ul li ul,#nav ul li ul li
            {

                margin: 0px;
                padding: 0px;
                max-width: 100px;
            }
            #nav ul li ul li
            {
                height: 40px;
                line-height: 40px;
            }
            #nav ul li ul li:hover
            {
                background-color: #000000;
            }

            /*以下為設定多欄div自動橫向排列的樣式*/
            .boxes /*這是關鍵*/
            {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 80%;
                margin: 0 auto;
            } 
            .box 
            {
                border: 1px solid #999; 
                border-radius: 10px; 
                flex: auto;/*這是關鍵*/
                margin: 5px; 
                padding: 10px; 
                width: 100px;/*每個元素的初始化寬度,這是關鍵*/
            }   

            .linkstyle
            {
                color:white;
                font-size:18px;
                text-decoration:none;
            }
            .linkstyle:hover
            {
                color:#00CED1;
                text-decoration:none;

            }
            .curstyle
            {
                color:#FF0000;
                font-size:18px;
                text-decoration:underline;
            }   


        </style>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li><a href="#">AAAA</a></li>
                <li><a href="#">BBBB
                    <ul>
                        <li><a href="#">子子孫孫</a></li>
                        <li><a href="#">bbbbbb</a></li>
                        <li><a href="#">bbbbbb</a></li>
                    </ul>
                </li>
                <li><a href="#">CCCC</a></li>
                <li><a href="#">DDDD</a></li>
                <li><a href="#">EEEE</a></li>
                <li><a href="#">FFFF</a></li>
            </ul>
        </div>
        <div class="boxes">
            <div class="box box1">
                <h2>Don't excessively interpret South China Sea drill</h2>
                <p>"Holding sea drills is a common practice for navies with various countries. The annual, regular drill by the Chinese navy aims to test the troops' real combat abilities, boost their maneuverability, search and rescue power and the abilities to fulfil diversified military missions," said spokesperson Liang Yang on Saturday.  </p> 
            </div>
            <div class="box box2"> 
                <h2>Putin, Blatter voice mutual support at World Cup</h2> 
                <p>FIFA's President Sepp Blatter shakes hands with Russia's President Vladimir Putin (R) during the preliminary draw for the 2018 FIFA World Cup at Konstantin Palace in St. Petersburg, Russia July 25, 2015.</p>
            </div>
            <div class="box box3">
                <h2>Passenger detained for creating chaos on flight</h2>
                <p>A passenger attempted to damage facilities on Shenzhen Airlines flight ZH 9648, which departed from Taizhou City of east China's Zhejiang Province, when it was landing in Guangzhou Baiyun International Airport at around 1 a.m. on Sunday, according to the airport. </p> 
            </div>
        </div>
    </body>
</html>

這裡寫圖片描述

一個Web佈局例項

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script

Django建立的一個web小例項講解

在使用Django建立一個web例項前，我安裝了python 2.7（64位）、mysql5.5、django1.10、MySQL-python-1.2.3.win-amd64-py2.7.exe這些程式。關於Django與mysql的環境搭建，

web專案Log4j日誌輸出路徑配置問題問題描述：一個web專案想在一個tomcat下執行多個例項（通過修改war包名稱的實現），然後每個例項都將日誌輸出到tomcat的logs目錄下例項名命名的文

問題描述：一個web專案想在一個tomcat下執行多個例項（通過修改war包名稱的實現），然後每個例項都將日誌輸出到tomcat的logs目錄下例項名命名的資料夾下進行區分檢視每個例項日誌，要求通過儘可能少的改動配置檔案，最好修改例項名後可以不修改log4j的配置檔案。實現分析：一般實現上面需求，需要在修

idea+tomcat+struts2 搭建一個web例項

參考這個部落格搭建：需要注意幾點： 1）可能會遇到struts-default高亮變紅的情況，其實是沒有把struts-default.xml加入到Default File Set 解決辦法： 2）注意struts的版本，2.3有ng,2.5沒有

一個多執行緒web伺服器例項（C,Linux,詳細的web伺服器原理）

系統：fedora core 5編譯器：g++實現功能：通過http協議，用瀏覽器檢視伺服器上的html,htm,jpg,jpeg,gif,png,css檔案，或者說檢視帶有jpg,jpeg,gif等檔案的網頁，即是web~把程式碼複製下來到linux裡，照著後面的方法編譯

十天學會web標準（DIV+CSS）系列（十）div+css網頁標準佈局例項教程

一、建立站點前面的課程都是零碎講解一些相關知識，那麼要做一個網站，首先需要建立一個站點。那麼什麼是站點，為什麼要建立一個站點呢？因為網站不同於其它檔案，比如一個圖片，放到哪個盤哪個目錄下都可以訪問。而網站是許多檔案相互關聯的，所以要專門一個目錄把它們分門別類存放起來。

三：搭建一個Web Test Plan

相同 order ng- use 原因 ear tps group add 參考：http://jmeter.apache.org/usermanual/build-web-test-plan.html 場景 5個用戶並發測試百度搜索，有兩個請求，一個請求搜索“你好”，一個

一個web應用的誕生(7)

user 用戶名版本結構 reg tar rem 比較 ict 現在所有的Py代碼均寫在default.py文件中，很明顯這種方法下，一旦程序變的負責，那麽無論對於開發和維護來說，都會帶來很多問題。 Flask框架並不強制要求項目使用特定的組織結構，所以這裏使用的組織結

maven學習3，如何創建一個web項目

eve sources ive put ear 類型 clear packaging pid Maven學習 (三) 使用m2eclipse創建web項目 1.首先確認你的eclipse已經安裝好m2eclipse的環境，可以參照上兩篇Maven學習

如何自學成為一個WEB前端

網頁設計是個網頁版成本 webp 嘗試 hot 合並出了 WEB前端是做什麽的？　　那些什麽高大上的介紹作者就略過了，簡單來說就是做網頁的，我們上網瀏覽的網站界面就是WEB前端工程師做的。　　在互聯網迅速發展的近幾年，你上網沖浪的時候是不是感覺WEB網站越來越漂

基於servlet實現一個web框架

-i writer pattern mic mar ems hack dem 包括 servlet作為一個web規範。其本身就算做一個web開發框架，可是其web action (響應某個URI的實現)的實現都是基於類的，不是非常方便，而且3.0之前的版本號還必須通過

Jrebel簡單的熱部署一個web工程

在線 tar 結果 tro ges 3-9 spa lan 激活前言：博主最近在做Hybris開發，漫長的啟動時間大大的拖累了項目的進度，而Jrebel的出現就是為了減少項目重啟的時間或者說修改了代碼後直接不用重啟就可以看到修改的結果，但是Hybris的部署一直

python使用Django制作第一個web頁面

conf idt com 技術分享 alt pan url 完成 port 第一步：打開pycharm，點擊File>New File 選擇Django，填寫完點擊Create創建如下圖：第二步：項目名和應用名都寫的web，目錄列表如下：第三步：將web目錄下

第一個web服務器

func log content ext response logs pro resp com ---恢復內容開始--- 書： 1 var http = require("http"); //加載http模塊 2 function process_request(

.net core 新建一個web api 的步驟初級

alt cnblogs 程序初級 img 例如 authorize 修改功能 1.使用VS2017 選擇 .net core web應用程序。 2.選擇web api（空）。 3.如果需要用iis express調試，則需要修改 program.cs. 4.在Cont

ItelliJ IDEA開發工具使用—創建一個web項目

dea 任務出現 tomcat服務器決定 tom str strong 為我轉 http://blog.csdn.net/wangyang1354/article/details/50452806 最近想用IDEA編輯器開發，但是平時都用MyEclipse和ecl

linux系統上部署一個web項目

mod not 重要 path lib linux遠程項目部登錄 echo 對於apache開源項目中tomcat的認識，大多停留在Windows下，這次我通過一個簡單的實例來介紹一下在linux下如何搭建tomcat環境，並且部署一個web項目。先從基本安裝開始，可

第一個web

charset doctype web utf set wid col head red <!DOCTYPE html><html><head><meta charset="UTF-8"><title>第一個HTM

如何搭建一個web網站（一）

團隊合作是的轉換們的 web服務 ons lang 用戶域名前言：由於新生軍訓結束，作為學生會的一個技術部的老油條，這時候得幫幫他們了。大多數新生都是奔著能做一些小東西，能夠被大家，被其他人用，為目的進入了技術部，部門主要負責做院系微信運營，順帶做開發。前兩任

【重點突破】——使用Express創建一個web服務器

otto name 其余保存就會輸入能夠分享循環一、引言在自學node.js的過程中有一個非常重要的框架，那就是Express。它是一個基於NodeJs http模塊而編寫的高層模塊，彌補http模塊的繁瑣和不方便，能夠快速開發http服務器。這裏，就要用E

一個Web佈局例項

相關推薦