文件域跟圖像域-製作QQ主頁信息

原創

2020-06-16 02:22

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>文件域跟圖像域-製作QQ主頁信息</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<!-- 外邊整體背景 -->
<body>
<!-- 手機圖像背景 -->
<div id="mr-bg">
    <!-- 手機圖像內部背景 -->
    <div class="mr-head">
        <!-- 手機背景內部，頂部內容 -->
        <div class="mr-top">
            <img src="images/pic2.png" alt="" title="" class="top-img"/>
            <p class="mr-font">&lt;返回<span>編輯</span></p>
            <p class="mr-tx"><img src="images/head.png" alt="" title=""/></p>
            <p class="mr-font-img">他的貓<img src="images/vip.png" alt="" title="" class="mr-vip"/>念。</p>
        </div>
        <!-- 手機背景內部，中部內容1 -->
        <div class="mr-pic1">
            <p><img src="images/qq.png" alt="" title=""/>199999999</p>
        </div>
        <!-- 手機背景內部，中部內容2 -->
        <div class="mr-pic2">
            <img src="images/zone.png" alt="" title=""/>
            <img src="images/my_suggest_list_img.png" alt="" title=""/>
            <img src="images/pic.png" alt="" title=""/>
            <img src="images/head.png" alt="" title=""/>
        </div>
        <!-- 手機背景內部，底部部文件域背景 -->
        <div class="mr-bot">
            <label><input type="button" value="我的名片"/></label>
            <div class="mr-btn">
                <label><input type="button" value="上傳照片"/></label>
                <label><input type="file" value="" name=""/></label>
            </div>
        </div>
    </div>
</div>

</body>
</html>

@charset "utf-8";
/**css document*/
* { /*通配選擇器，清除所有標籤默認內外邊距樣式*/
    padding: 0;
    margin: 0;
}

img { /*標籤選擇器，設置所膛img標籤的大小樣式*/
    width: 70px;
    height: 70px;
}

body { /*標籤選擇器，設置整體頁面背景樣式*/
    width: 100%;
    height: 100%;
    background: rgb(247, 245, 245);
}

#mr-bg { /*id選擇器，設置手機圖像背景*/
    width: 320px;
    height: 660px;
    margin: 0 auto;
    background: url("../images/mobile.png");
}

.mr-head { /*類選擇器，手機圖像內部背景樣式*/
    width: 318px;
    height: 503px;
    position: relative; /*相對定位，手機圖像內部背景*/
    top: 113px;
    border: 1px solid rgb(219, 212, 212);
    background: rgb(247, 245, 245);
}

.mr-top { /*類選擇器，設置手機內部，頂部內容背景*/
    width: 318px;
    height: 250px;
    position: relative; /*相對路徑*/
    border-bottom: 1px solid rgb(219, 212, 212);
}

.mr-top .top-img { /*類選擇器，包含選擇器，手機內部頂部圖片大小樣式*/
    width: 318px;
    height: 147px;
}

.mr-top .mr-font { /*類選擇器，包含選擇器，設置頂部定位樣式*/
    margin-left: 10px;
    position: absolute; /*絕對定位*/
    top: 15px;
}

.mr-top .mr-font span { /*類選擇器，包含選擇器，設置字體之間的左外邊距樣式*/
    margin-left: 210px;
}

.mr-top .mr-tx { /*類選擇器，設置頭像位置*/
    position: absolute;
    top: 110px;
    left: 100px;
}

.mr-top .mr-font-img { /*類選擇器，設置暱稱跟vip*/
    width: 100px;
    position: absolute;
    top: 190px;
    left: 120px;
}

.mr-top .mr-font-img .mr-vip { /*類選擇器，設置vip圖標樣式*/
    width: 30px;
    height: 30px;
    margin-left: 5px;
    vertical-align: middle;
}

.mr-pic1 { /*類選擇器，設置QQ賬號樣式*/
    width: 318px;
    height: 62px;
    border-bottom: 1px solid rgb(219, 212, 212);
}

.mr-pic1 img { /*類選擇器，設置QQ賬號圖標樣式*/
    height: 62px;
    vertical-align: middle; /*屬性垂直*/
    padding-right: 5px;
}

.mr-pic2 { /*類選擇器，設置空間圖片樣式*/
    height: 74px;
    border-bottom: 1px solid rgb(219, 212, 212);
}

.mr-bot { /*類選擇器，設置按鈕的外邊距位置*/
    margin: 35px 0 0 40px;
}

.mr-bot input { /*類選擇器，設置按鈕大小及背景顏色*/
    width: 100px;
    height: 30px;
    border: none;
    background: rgb(42, 176, 247);
}

.mr-bot label { /*類選擇器，設置第1個按鈕的外邊距*/
    float: left;
    margin-right: 30px;
}

.mr-btn { /*類選擇器，設置第2個按鈕跟文件上傳按鈕的重疊*/
    float: left;
    width: 100px;
    height: 30px;
    position: relative;
    top: 0;
}

.mr-btn [type="file"] { /*類選擇器，設置文件上傳按鈕爲透明*/
    position: absolute;
    top: 0;
    opacity: 0;
}