文件域跟图像域-制作QQ主页信息

原创

wx62dfdc6aea345 2022-07-27 10:32:57 博主文章分类：html+css ©著作权

©著作权归作者所有：来自51CTO博客作者wx62dfdc6aea345的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!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"><返回<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;
}