文件域跟图像域-制作QQ主页信息
生活随笔
收集整理的這篇文章主要介紹了
文件域跟图像域-制作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="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;
}
?
總結
以上是生活随笔為你收集整理的文件域跟图像域-制作QQ主页信息的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web自动化——Selenium原理
- 下一篇： 计算机设计大赛国赛可以换队员,关于遴选2