H5網頁佈局+css代碼美化_ZenDei技術網路在線

H5網頁佈局+css代碼美化

-Advertisement-

HTML5的結構化標簽，對搜索引擎更友好 li 標簽對不利於搜索引擎的收錄，儘量少用 banner圖片一般擁有版權，不需要搜索引擎收錄，因此可以使用ul + li <samp></samp>可用於淺色副標題 display:inline-block; 每個導航塊存在水平間隙，解決方法是在父元素上添加 ...

HTML5的結構化標簽，對搜索引擎更友好

li 標簽對不利於搜索引擎的收錄，儘量少用

banner圖片一般擁有版權，不需要搜索引擎收錄，因此可以使用ul + li

<samp></samp>可用於淺色副標題

display:inline-block; 每個導航塊存在水平間隙，解決方法是在父元素上添加font-size:0;

sublime安裝csscomb插件

選中css代碼，ctrl+shift+c 自動整理好代碼

排序前：

排序後：

此時存在多餘的空行

解決方法：

安裝cssformat插件，對代碼執行edit->cssformat->expanded 即可刪除空行

選中單句樣式前面的空白部分（即tab空位）

然後alt+f3 會統一選中所有tab留白

按一次刪除，再按一次刪除，再空一格

此時這個效果：

然後按向下箭頭，按向左箭頭，按刪除一次，再加個空格

此時效果

再向下箭頭，再刪除

此時效果

css樣式代碼美化完畢。

新標簽元素的瀏覽器相容解決：

header,nav,section,aside,article,footer{display: block;}

最後曬出所有代碼

index.html

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <a href="#"><img src="cat-little.jpg"></a>
            <nav>
                <a href="#" class="active">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
            </nav>
        </div>
    </header>

    <section class="banner">
        <ul>
            <li class="left"><img src="banner1.jpg"></li>
            <li class="active"><img src="banner3.jpg"></li>
            <li class="right"><img src="banner2.jpg"></li>
        </ul>
    </section>

    <section class="main">
        <aside>
            <h1>左邊<samp>標題</samp></h1>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p1.jpg"></dd>
            </dl>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p2.jpg"></dd>
            </dl>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p3.jpg"></dd>
            </dl>
        </aside>
        <article>
            <h1>右邊<samp>標題</samp></h1>
            <p>這是右邊文章內容哦~</p>
            <img src="qrt.jpg">
            <p>這是右邊文章內容哦~</p>
        </article>
    </section>

    <footer>
        <div class="container">
            <p>版權信息</p>
            <span>
                <img src="b1.jpg">
                <img src="b2.jpg">
                <img src="b3.jpg">
            </span>
        </div>        
    </footer>
</body>
</html>

style.css

* { font-size: 14px; margin: 0; padding: 0; border: none;}
a { text-decoration: none;}
ul { list-style: none;}

/*瀏覽器相容解決*/
header,nav,section,aside,article,footer{display: block;}

/*頭部*/
header { width: 100%; height: 60px; background-color: #000;}
.container { width: 1200px; margin: 0 auto;}
.container > a { display: block; float: left; width: 150px; height: 60px; padding-left: 10px;}
.container > a img { height: 40px; padding-top: 10px;}
nav { font-size: 0; float: right; padding-right: 10px;}
nav > a { font-size: 16px; line-height: 60px; display: inline-block; width: 100px; height: 60px; cursor: pointer; text-align: center; color: #fff;}
nav > a:first-child { background: rgb(212, 1, 18);}
nav > a:nth-child(2) { background: rgb(254, 184, 0);}
nav > a:nth-child(3) { background: rgb(120, 185, 23);}
nav > a:nth-child(4) { background: rgb(242, 124, 1);}
nav > a:last-child { background: rgb(1, 127, 203);}
nav > a:hover, nav > a.active { padding-bottom: 5px;}

/*banner*/
.banner { background: #ccc;}
.banner ul { position: relative; width: 1200px; height: 400px; margin: 0 auto; padding-top: 100px;}
.banner ul li { position: absolute; z-index: 1; top: 0; bottom: 0; overflow: hidden; width: 500px; height: 250px; margin: auto;}
.banner ul li img { overflow: hidden; width: 100%;}
.banner ul li.active { z-index: 2; right: 0;    /*設置水平居中*/ left: 0; width: 600px; height: 300px;}
.banner ul li.left { /*設置在左邊*/ left: 0;}
.banner ul li.right { /*設置在右邊*/ right: 0;}

/*主體部分*/
.main { width: 1200px; height: 350px; margin: 0 auto;}
aside { float: left; width: 600px;}
article { float: right; width: 600px;}
.main h1 { font-size: 24px; font-weight: lighter; margin: 20px 0;}
.main h1 samp { color: #7d7d7d;}
aside img { height: 70px;}
aside dl { position: relative; margin-bottom: 10px;}
aside dl dt { position: absolute; top: 0; left: 90px;}
aside dd.pic { overflow: hidden; width: 70px; height: 70px;}
aside dd.text { position: absolute; top: 20px; left: 90px;}
article > img { overflow: hidden; height: 130px;}
article > p { margin-bottom: 10px;}

/*底部*/
footer { background-color: #000;}
footer > .container { width: 1200px; height: 60px; margin: 0 auto;}
footer > .container > p { line-height: 60px; float: left; color: #fff;}
footer > .container > span { float: right;}
footer > .container > span > img { width: 25px; height: 25px; margin-left: 10px; padding-top: 17px; cursor: pointer; opacity: .7;}
footer > .container > span > img:hover { opacity: 1;}
/*# sourceMappingURL=style.css.map */

效果圖

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

解決visual studio 2013編譯過程中存在的無法打開kernel.lib問題

1. 出現此類問題的原因由於原visual studio文件中的安裝中出現問題，所以原有的SDK（soft development kits）文件出現缺失； 2. 解決方法1 重新下載SDK工具，安裝； 3. 解決方法2 修複visual studio2013，安裝SDK工具； 4. 解決方法3 ...
「Flink」Flink 1.9 WebUI運行作業界面分析

運行作業界面在以下界面中，可以查看到作業的名稱、作業的啟動時間、作業總計運行時長、作業一共有多少個任務、當前正在運行多少個任務、以及作業的當前狀態。這裡的程式：一共有17個任務，當前正在運行的是17個任務。作業概覽界面在這個界面中，我們可以看到數據流圖。這個程式中，一共有3個運算元。Custom So... ...
「Spark」Spark SQL Thrift Server運行方式

Spark SQL可以使用JDBC/ODBC或命令行介面充當分散式查詢引擎。這種模式，用戶或者應用程式可以直接與Spark SQL交互，以運行SQL查詢，無需編寫任何代碼。Spark SQL提供兩種方式來運行SQL：通過運行Thrift Server直接執行Spark SQL命令行運行Thrift ... ...
count(1)比count(*)效率高？

`SELECT COUNT( ) FROM table_name`是個再常見不過的統計需求了。本文帶你瞭解下的`COUNT`函數。一、函數關於函數，在官網中有 "詳細介紹" ：翻譯一下： 1. ，返回語句檢索的行中的值不為的數量,結果是一個值。 1. 如果查詢結果沒有命中任何 ...
寒假學習進度一(安卓配置環境的搭建和hello world)

今天學習內容：觀看了嗶哩嗶哩上的安卓教學視頻，簡單瞭解下了安卓的基本知識具體內容：一、配置安卓開發環境（安裝Android studio,配置JDK） Android studio是個集成環境，不用配置JDK也可以正常使用，如果想要配置JDK，可以參考下麵的教程。 JDK配置教程鏈接：https ...
簡單實現Android手機“全局可調試”（ro.debuggable = 1）的方法【錘子堅果3】

在Android真機上調試程式有一個前提，就是這個apk包必須有 debuggable=true 的屬性才行。而除了自己開發的apk能夠控制打包屬性之外，其他的程式發行之後顯然不會設這個值為 true 的（不然隨隨便便就能被Debug ，豈不是很沒安全感）。為了調試這些第三方的apk，我們可以從整 ...
css3基本選擇器+屬性選擇器+動態偽類+UI狀態偽類+結構類

後代選擇器祖先元素後代元素{ } 子元素選擇器（直接子元素選擇器）父元素>子元素{ } 兄弟選擇器元素+兄弟元素（緊鄰該元素之後的下一個兄弟元素）所有兄弟元素選擇器元素~兄弟元素（該元素之後的所有兄弟元素） <!DOCTYPE html> <html lang="en" manifest ...
jQuery---表格刪除案例

表格刪除案例 //1. 找到清空按鈕，註冊點擊事件，清空tbody $("#btn").on("click", function () { $("#j_tb").empty(); }); //2. 找到delete，註冊點擊事件 $("#j_tb").on("click", ".get", func ...