【小練習06】HTML+CSS--電影公告

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

要求實現如下效果圖：

這裡寫圖片描述

程式碼演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            h3,h4,p{
                margin: 0;
            }
            ul{
                margin: 0;
                padding: 0;
                list-style 
: none;
            }
            a{
                text-decoration: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }


            section{
                width: 310px;
            }
            section 
 h3{
                height: 28px;
                background: url(images/head_bg.gif);
                font: bold 12px/28px '宋體';
                color: #4c5354;
                padding-left: 38px;
            }
            .imgWrap{
                height: 131px;
                margin: 14px 0;
            } 

            .imgLink{
                float: left;
            }
            .imgWrap img{
                padding: 2px;
                margin-right: 12px;
                border: 1px solid #c8c4d3;
            }
            .imgWrap div{
                float: left;
                width: 176px;
            }
            .imgWrap div h4{
                height: 27px;
                line-height: 27px;
            }
            .imgWrap div h4 a{
                font-size: 12px;
                color: #333;
            }
            .imgWrap div span,.imgWrap div p{
                font: 12px/20px "宋體";
                display: block;
                color: #666;
            }

            section li{
                height: 22px;
                font: 12px/22px "宋體";
                background: url(images/ico_01.gif) no-repeat 17px 9px;
                padding: 0 18px 0 31px;
            }
            section li a{
                color: #333;
            }
            section li span{
                color: #888;
                float: right;
            }
        </style>
    </head>
    <body>
        <!--
            劃分結構
                1、看邊框
                2、看距離
                3、看顏色塊
                4、看背景圖片

            結構書寫的順序：從上到下，從左往右

            h1          首先，一個頁面中只能有一個h1標籤，整個頁面中找到大標題。如果沒有的話，可以選擇給logo

            浮動
                1、如果想讓兩個元素在一行中顯示，就用浮動
                2、用完了必需要清，給父級加清除浮動

            一行中所有的元素都浮動了，如果換行的話，那就是父級的寬度不夠了
        -->

        <section>
            <h3>明星薦片</h3>
            <div class="imgWrap clearfix">
                <a href="#" class="imgLink"><img src="images/img_01.jpg" alt="" /></a>
                <div>
                    <h4><a href="#">讓子彈飛一會</a></h4>
                    <span>導演：姜文</span>
                    <span>主演：姜文 姜文 姜文</span>
                    <p>點評：我最近喜歡的要算我最近喜歡的要算我最近喜歡的要</p>
                </div>
            </div>
            <ul>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
            </ul>
        </section>
    </body>
</html>

【小練習06】HTML+CSS--電影公告

要求實現如下效果圖：程式碼演示 <!DOCTYPE html> <html> <head> <meta charset="

【2018-01-28】HTML-css樣式表分類、選擇器

set html span ima meta class選擇器優先 sheet har 樣式表，css:層疊式樣式表style後綴名：css 分類：內聯：寫在標記的屬性位置，優先級最高，重用性最差內嵌：寫在頁面的head中，優先級第二，重用性一般外部：寫在一個以css結尾

【前端開發例項】HTML CSS

Question. 問題微信端商城首頁製作一個引導關注公眾號的二維碼，對於公眾號的引流可以起到很大的作用。一般商城上的二維碼有按照某種邏輯被動推送的形式，比如未關注過公眾號的使用者，第一次進入商城跳出一個二維碼；另一種是使用者主動點選某個按鈕，觸發二維碼的展

【小程式開發】VSCode-：識別wxml,wxss檔案為html,css格式

問題描述：由於wxml 及 wxss檔案不能直接被識別，因此在vscode中作為純文字，可以在右下角純文字出點擊修改，然而！在幾個頁面編輯需要來回切換，它就偶爾翻臉不認識了，又變回了純文字，反覆改了幾次，決定解決掉這個問題：處理辦法：在vscode擴充套件中（快捷鍵s

【小練習】程式設計基本概念：賦值語句_常用運算子1

1.練習原始碼 #include "stdafx.h" #include <iostream> using namespace std; int _tmain(int argc, _TC

【小練習】程式設計基本概念：賦值語句_常用運算子3

1.練習程式碼 #include "stdafx.h" #include <iostream> using namespace std; int _tmain(int argc, _TC

【小練習】指標與引用：傳遞動態記憶體2

1.練習程式碼-程式碼中的問題是什麼？ #include <iostream> void GetMemory(char *p, int num) { p = (char *)ma

【小練習】指標與引用：傳遞動態記憶體1

1.練習程式碼-哪些函式能成功進行兩個數的交換？ void swap1 (int p, int q) { int temp; temp = p; p = q; q =

【小練習】指標與引用：基本問題

1.練習程式碼-找出錯誤 #include "stdafx.h" #include <iostream> using namespace std; int _tmain(int argc

【小練習】指標與引用：傳遞動態記憶體3

1.練習程式碼 #include "stdafx.h" #include <iostream> using namespace std; int _tmain(int argc, _TC

【小練習】迴圈、遞迴與概率：遞迴

1.練習程式碼 #include "stdafx.h" #include <iostream> #include <stdio.h> using namespace std;

【小練習】迴圈、遞迴與概率：概率

1.練習程式碼-隨機在正方形裡面落1000個點，落在正方形內切圓中的點有多少個 #include "stdafx.h" #include <iostream> #include <s

【小練習】STL模板與容器_容器2

1.練習程式碼-vector容器常規操作 #include "stdafx.h" #include <iostream> #include <stdio.h> #include

【分類】- html/css

專欄達人授予成功建立個人部落格專欄

CSS【06】：CSS顯示模式

div和Span標籤作用：一般用於配合css完成網頁的基本佈局 <style> .header{ width: 980px; height: 100px; background: red; margin: au

【程式碼筆記】HTML+CSS+JavaScript實現密碼輸入框顯示文字

原理：通過設定一個input為password，預設display為none，再設定一個input為text設定為block，利用js指令碼控制顯隱。具體思路：給type型別為text的輸入框加一個點選事件，點選事件是設定text型別輸入框的display為none，

【小練習】紅白葡萄酒案例2_資料分組聚合

紅白葡萄酒問題：哪個水平的酸度（pH 值）獲得的平均評級最高？思路：先用pd.cut() 對酸度進行劃分，再用pd.groupby()對劃分好的區間進行分組求評分的平均值。import pandas as pddf = pd.read_csv('winequality_ed

【程式碼筆記】HTML+CSS+JAVAScript+jQuery點選圖示下滑列表

原理：同前一篇，不過使用的是sildeToggle方法。具體思路：同前一篇。具體實現程式碼： JS檔案： function showSort() { $("#sort").click(funct

【小練習】SQL_DATE

Walmart 在哪一年的哪一個月在銅版紙上的消費最多？SELECT DATE_TRUNC('month', o.occurred_at) ord_date, SUM(o.gloss_amt_usd) tot_spent FROM orders o JOIN accounts a ON a.id = o.a

【小練習】SQL_CASE

CASE我們想要根據相關的購買量了解三組不同的客戶。最高的一組是終身價值（所有訂單的總銷售額）大於 200,000 美元的客戶。第二組是在 200,000 到 100,000 美元之間的客戶。最低的一組是低於 under 100,000 美元的客戶。請提供一個表格，其中包含與

【小練習06】HTML+CSS--電影公告

相關推薦