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

<!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="data:images/pic2.png" alt="" title="" class="top-img"/><p class="mr-font">&lt;返回<span>编辑</span></p><p class="mr-tx"><img src="data:images/head.png" alt="" title=""/></p><p class="mr-font-img">他的猫<img src="data:images/vip.png" alt="" title="" class="mr-vip"/>念。</p></div><!-- 手机背景内部，中部内容1 --><div class="mr-pic1"><p><img src="data:images/qq.png" alt="" title=""/>199999999</p></div><!-- 手机背景内部，中部内容2 --><div class="mr-pic2"><img src="data:images/zone.png" alt="" title=""/><img src="data:images/my_suggest_list_img.png" alt="" title=""/><img src="data:images/pic.png" alt="" title=""/><img src="data: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;
}

文件域跟图像域-制作QQ主页信息相关推荐

查找计算机域服务不可用,win7系统打印文件提示Active Directory域服务不可用解决方法...
办公用户因为工作需要,就需要安装打印机,也是办公设备中不可缺少一部分,使用过程中难免遇到一些故障问题,Win7系统打印文件时频繁弹出提示"Active Directory域服务当前不可用&q ...
GANs中的明星StarGAN：使用单一模型执行多个域的图像转换，GAN之父点赞
2017年可谓"GANs之年",各种基于GANs的模型和变化层出不穷.近日,来自韩国首尔大学.Naver等研究者发布了一篇"StarGAN:Unified Generat ...
[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？
[html] 使用a标签的download属性下载文件会有跨域问题吗?如何解决? 最近刚遇到这个问题,后台返回的图片链接,点击按钮批量下载,a标签的 download 属性只对同源文件有效, 所以我们 ...
jquery读取json文件跨域_跨域方法的若干种方式
一.跨域的解释那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制, a.com 域名下的js无法操作 b.com 或是 c.a.com 域名下的对象.当协议.子域名.主域名.端口号 ...
sysvol 域控制器文件_[转载]重建域控制器上的SYSVOL和NETLOGON共享
一次为win2003域安装了一个额外域控制器,完成后发现没有netlogon及sysvol共享,而且子目录结构也没有完全建立,大为紧张,上网查找问题所在及解决方法,找到了这样一篇,http://www ...
sysvol 域控制器文件_重建SYSVOL和NETLOGON共享(解决域安全策略和域控制器安全策略不能打开)...
对Windows活动目录有所了解的管理员应该对SYSVOL不陌生,它是用来存储域公共文件服务器副本的共享文件夹,例如我们用得最多的组策略设置.脚本等都是存在这个共享目录中的.如果组织内有多台域控制器, ...
图像的空间域与频率域
图像的空间域:是指图像平面所在的二维平面,对于空间域的图像处理主要是对像元灰度值的改变,其位置不变. 图像的频率域:是图像像元的灰度值随位置变化的空间频率,以频谱表示信息分布特征,傅立叶变换能把图像从 ...
AAAI 2023 | 双域风格图像和谐化
©PaperWeekly 原创 · 作者 | 曹俊燕单位 | 上海交通大学BCMI实验室图像合成(Image Composition)是指将前景从一张图片上剪切下来,然后粘贴到另一张图片上,生成一 ...
域控-笔记二（域权限，域组，域管理，Kerberso 协议）
文章目录一. 域环境搭建 1.1 添加AD功能 1.2 安装 1.3 部署二. 如何加入域 2.1 加入域 2.2 域中主机登录 2.3 退出域 2.4 添加域用户三. 域权限 3.1 A-G- ...

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

文件域跟图像域-制作QQ主页信息相关推荐

最新文章

热门文章