复杂页面实现

<!DOCTYPE html >
< html >
< head >
< meta charset= "utf-8" />
< meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
< title >大怪兽 </ title >
< link rel= "stylesheet" href= "E:\text\图标\iconfont.css" >
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< link rel= "stylesheet" type= "text/css" media= "screen" href= "main.css" />
< script src= "main.js" ></ script >
< style >
@font-face {
font-family: 'iconfont'; /* project id 695634 */
src: url( 'https://at.alicdn.com/t/font_695634_fpd9893zlfhwipb9.eot');
src: url( 'https://at.alicdn.com/t/font_695634_fpd9893zlfhwipb9.eot?#iefix') format( 'embedded-opentype'),
url( 'https://at.alicdn.com/t/font_695634_fpd9893zlfhwipb9.woff') format( 'woff'),
url( 'https://at.alicdn.com/t/font_695634_fpd9893zlfhwipb9.ttf') format( 'truetype'),
url( 'https://at.alicdn.com/t/font_695634_fpd9893zlfhwipb9.svg#iconfont') format( 'svg');
}
.confont{
font-family: "iconfont" !important;
font-size: 20px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.q{
width: 1000px;
height: 500px;
float: center;
margin-left: 300px;
}
.w{
width: 200px;
height: 500px;
float: left;
}
.e{
width: 50px;
height: 500px;
background-color: rgb( 10, 10, 61);
float: left;
}
.r{
width: 150px;
float: left;
height: 500px;
background-color: rgb( 37, 37, 77);
}
.t{
width: 600px;
height: 500px;
float: left;
margin-top: -500px;
margin-left: 200px;
border: 1px solid grey;
}
.u{
width: 600px;
height: 30px;
float: left;
margin-top: 0px;
margin-left: 0px;
border: 1px solid grey;
}
.d{
width: 345px;
height: 144px;
margin-top: -428px;
padding-top: 0px;
margin-left: 251px;
border: 1px solid grey;
}
.f{
width: 345px;
height: 144px;
margin-top: 0px;
padding-top: 0px;
margin-left: 251px;
border: 1px solid grey;
}
.o{
width: 250px;
height: 71px;
margin-top: 0px;
padding-top: 0px;
margin-left: 0px;
border: 1px solid grey;
}
.s{
width: 250px;
height: 71px;
margin-top: 62px;
padding-top: 0px;
margin-left: 0px;
border: 1px solid grey;
}
.y{
width: 600px;
height: 20px;
}
#btn{
width: 50px;
height: 50px;
border-radius: 50%;
border: none}
ul li{
list-style: none;
color: grey;
margin-left: -30px;
margin-top: 5px;
font-size: 10px;
}
ul li1{
color: blue;
margin-left: 20px;
margin-top: -50px;
float: left;
font-size: 12px;
}
ul li2{
color: gray;
margin-top: -40px;
margin-left: 20px;
float: left;
font-size: 4px;
}
ul li3{
margin-left: 20px;
margin-top: -60px;
float: left;
font-size: 12px;
}
ul li4{
color: gray;
margin-top: -50px;
margin-left: 20px;
float: left;
font-size: 4px;
}
ul li5{
color: gray;
margin-top: -50px;
margin-left: 30px;
float: left;
font-size: 4px;
}
ul li6{
margin-left: 20px;
margin-top: -425px;
float: left;
font-size: 12px;
}
ul li7{
margin-left: 120px;
margin-top: -425px;
float: left;
font-size: 12px;
color: gray;
}
ul li8{
margin-left: 20px;
margin-top: -350px;
float: left;
font-size: 12px;
}
ul li9{
margin-left: 120px;
margin-top: -350px;
float: left;
font-size: 12px;
color: gray;
}
ul li10{
margin-left: 20px;
margin-top: -285px;
float: left;
font-size: 12px;
}
ul li11{
margin-left: 120px;
margin-top: -285px;
float: left;
font-size: 12px;
color: gray;
}
ul li12{
margin-left: 20px;
margin-top: -235px;
float: left;
font-size: 12px;
}
ul li13{
margin-left: 120px;
margin-top: -235px;
float: left;
font-size: 12px;
color: gray;
}
ul li14{
margin-left: 20px;
margin-top: -120px;
float: left;
font-size: 12px;
}
ul li15{
margin-left: 120px;
margin-top: -120px;
float: left;
font-size: 12px;
color: gray;
}
< / style >
</ head >
< body >
< div class= "q" >
     < div class= "w" >
         < div class= "e" >
             < input type= "button" value= "" id= "btn" style= "background-color:blue" >
             < input type= "button" value= "" id= "btn" style= "background-color:violet" >
             < input type= "button" value= "" id= "btn" style= "background-color:orange" >
             < input type= "button" value= "+" id= "btn" style= "background-color:grey" >
             < br >
         </ div >
         < div class= "r" >
             < input type= "text" value= "MENU" style= "margin-top:10px;margin-left:10px;color:grey;width:130px;border:1px solid grey;background-color:rgb(15, 15, 41);" >
             < ul >
                 < li >Overview </ li >
                 < li >Sales </ li >
                 < li >Your Staff </ li >
                 < li >Analytics & Targeting </ li >
                 < li >What's New </ li >
                 < hr style= "margin-left:-30px;height:1px;border:none;border-top:1px solid #555555; "/ >
                 < input type= "text" value= "YOUR PRODUCTA" style= "margin-left:-30px;color:grey;width:130px;border:1px solid grey;background-color:rgb(15, 15, 41);" >
                 < li >BOOKS </ li >
                 < li >TUTORIALS </ li >
                 < li >STOCKS </ li >
                 < li >INFOGRAPHICS </ li >
                 < hr style= "margin-left:-30px;height:1px;border:none;border-top:1px solid #555555; "/ >
                 < input type= "text" value= "DASHBOARD" style= "margin-left:-30px; color:grey;width:130px;border:1px solid grey;background-color:rgb(15, 15, 41);" >
                 < li >MESSAGES </ li >
                 < li >CONNECTIONS </ li >
                 < li >INTEGRATIONS </ li >
                 < li >ACCOUNT SETTINGS </ li >
                 < li >APP SETTINGS </ li >
                 < br >
                 < br >
                 < br >
                 < br >
                 < li >Monthly Goals $580/$3200 </ li >
                 < hr style= "margin-left:-30px;height:1px;border:none;border-top:3px solid #555555; "/ >
             </ ul >
         </ div >
         < div class= "t" >
             < div class= "u" >
                 < h style= "float:left;margin-top:5px;" >Messages </ h >
                 < h style= "float:right;font-size:2px;color:blue;margin-right:100px;" >Tordan.j </ h >< i class= "iconfont" style= "float:right;margin-right:-80px;margin-top:5px;" > &#xe6a6; </ i >
                 < h style= "float:right;font-size:2px;color:gray;padding-top:8px;margin-right:-50px;" >Administrator </ h >
             </ div >
             < div class= "u" >
                 < input type= "text" value= "Search" style= "float:left;color:grey;margin-left:0px;margin-top:3px;" >
                 < hr style= "height:470px;margin-left:250px;width:1px;margin-top:-35px;"/ >
                 < h style= "float:left;color:black;margin-left:260px;margin-top:-445px;" >BESSIE BERRY </ h >
                 < i class= "iconfont" style= "float:left;margin-top:-445px;margin-left:450px;" > &#xe63f;&#xe604;&#xe61d; </ i >
                 < p style= "float:left;margin-left:500px;margin-top:-445px;" >
                    1 of 28
                 </ p >
                 < i class= "iconfont" style= "float:left;margin-left:560px;margin-top:-442px;" > &#xe77f;&#xe783; </ i >
             </ div >
             < div class= "s" >
                 < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "40px" height= "40px" >
                 < ul >
                     < li1 >
Bessie Berry
                     </ li1 >
                     < li2 >
Twitter
                     </ li2 >
                 </ ul >
                 < p style= "margin-left:200px;float:left; margin-top:-45px;font-size:4px;" >
                    3m
                 </ p >
                 < p style= "float:left;margin-top:-20px;margin-left:10px;color:grey;font-size:0.5px;" >
                    I pay for the 4Mb/sec down,512Kb/sec up service < br >
                    from O2.In fact,it's relatively quick,and stable..
                 </ p >
             </ div >
             < div class= "o" >
                 < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "40px" height= "40px" >
                 < ul >
                     < li3 >
Victor Weber
                     </ li3 >
                     < li4 >
Adobe
                     </ li4 >
                 </ ul >
                 < p style= "margin-left:200px;float:left; margin-top:-45px;font-size:4px;" >
                    8m
                 </ p >
                 < p style= "float:left;margin-top:-30px;margin-left:0px;color:grey;font-size:0.5px;" >
                    I shared this on my fb wall a few months back,and I
thought I'd share it here again because it's such a great ...
                 </ p >
             </ div >
             < div class= "o" >
                 < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "40px" height= "40px" >
                 < ul >
                     < li3 >
Dustin Benson
                     </ li3 >
                     < li4 >
Facebook
                     </ li4 >
                 </ ul >
                 < p style= "margin-left:200px;float:left; margin-top:-45px;font-size:4px;" >
                    Yesterday
                 </ p >
                 < p style= "float:left;margin-top:-20px;margin-left:10px;color:grey;font-size:0.5px;" >
                    If there is anyone who needs an invitation please add
yourself in the comments ofthis post!
                 </ p >
             </ div >
             < div class= "o" >
                 < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "40px" height= "40px" >
                 < ul >
                     < li3 >
Jack Macson
                     </ li3 >
                     < li4 >
Yahoo
                     </ li4 >
                 </ ul >
                 < p style= "margin-left:200px;float:left; margin-top:-45px;font-size:4px;" >
                    Yesterday
                 </ p >
                 < p style= "float:left;margin-top:-20px;margin-left:10px;color:grey;font-size:0.5px;" >
                    BruteDC is a peer-to-peer movie+tv series sharing and downloading platform which works on intranet inside...
                 </ p >
             </ div >
             < div class= "o" >
                 < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "40px" height= "40px" >
                 < ul >
                     < li3 >
Stephen
                     </ li3 >
                     < li4 >
Snapchat
                     </ li4 >
                 </ ul >
                 < p style= "margin-left:200px;float:left; margin-top:-45px;font-size:4px;" >
                    13 Jun
                 </ p >
                 < p style= "float:left;margin-top:-40px;margin-left:10px;color:grey;font-size:0.5px;" >
                    Yes,p2p traffic is often filtered (QoSed).Althought i do ues BT on O2 wires,and in good days dLspeed...
                 </ p >
             </ div >
             < div class= "o" >
                 < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "40px" height= "40px" >
                 < ul >
                     < li3 >
Sally Willis
                     </ li3 >
                     < li4 >
Twitter
                     </ li4 >
                 </ ul >
                 < p style= "margin-left:200px;float:left; margin-top:-45px;font-size:4px;" >
                    12 Jun
                 </ p >
                 < p style= "float:left;margin-top:-20px;margin-left:10px;color:grey;font-size:0.5px;" >
                    Yes,it's O2:'internet ectreme',which is no longer offered.
                 </ p >
                 < div class= "d" >
                     < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "30px" height= "30px" >
                     < ul >
                         < li6 >
Bessie Berry
                         </ li6 >
                         < li7 >
8:31 AM
                         </ li7 >
                     </ ul >
                     < p style= "float:left;margin-top:-415px;margin-left:10px;color:grey;font-size:0.1px;" >
                        Hi guys lve got the O2 package and have really slow internet.A speed check online said i can get 3mbps but it seems more like 0.5 these days,just freezing and taking ages to open pages and open audio files for exmaple.I have decided toswitch to the UPC package which offers 10mbps but do you think i will get it?
                     </ p >
                     < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "30px" height= "30px" >
                     < ul >
                         < li8 >
Jordan Jackson
                         </ li8 >
                         < li9 >
8:31 AM
                         </ li9 >
                     </ ul >
                     < p style= "float:left;margin-top:-340px;margin-left:10px;color:grey;font-size:0.5px;" >
                        Hi guys lve got the O2 package and have really slow internet.A speed check online said i can get 3mbps but it seems more like 0.5 these days,just freezing and taking ages to open pages and open audio files for exmaple.I have decided toswitch to the UPC package which offers 10mbps but do you think i will get it?
                     </ p >
                 </ div >
                 < div class= "f" >
                     < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "30px" height= "30px" >
                     < ul >
                         < li10 >
Bessie Berry
                         </ li10 >
                         < li11 >
8:31 AM
                         </ li11 >
                     </ ul >
                     < p style= "float:left;margin-top:-269px;margin-left:10px;color:grey;font-size:0.1px;" >
                        qqqqHi guys lve got the O2 package and have really slow internet.A speed check online said i can get 3mbps but it seems more like 0.5 these days,just freezing and taking ages to open pages and open audio files for exmaple.I have decided toswitch to the UPC package which offers 10mbps but do you think i will get it?
                     </ p >
                     < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "30px" height= "30px" >
                     < ul >
                         < li12 >
Jordan Jackson
                         </ li12 >
                         < li13 >
8:31 AM
                         </ li13 >
                     </ ul >
                     < p style= "float:left;margin-top:-220px;margin-left:10px;color:grey;font-size:0.5px;" >
                        Hi guys lve got the O2 package and have really slow internet.A speed check online said i can get 3mbps but it seems more like 0.5 these days,just freezing and taking ages to open pages and open audio files for exmaple.I have decided toswitch to the UPC package which offers 10mbps but do you think i will get it?
                     </ p >
                     < img src= "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1848984829,2212207435 & fm=27 & gp=0.jpg" width= "100px" height= "50px" style= "margin-top:-190px;float:left;margin-left:10px;" >
                     < img src= "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=863521418,3825111690 & fm=200 & gp=0.jpg" width= "100px" height= "50px" style= "margin-top:-190px;float:left;margin-left:120px;" >
                 </ div >
                 < div class= "f" >
                     < img src= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436322905,3996059316 & fm=27 & gp=0.jpg" width= "30px" height= "30px" >
                     < ul >
                         < li14 >
Bessie Berry
                         </ li14 >
                         < li15 >
8:31 AM
                         </ li15 >
                     </ ul >
                     < p style= "float:left;margin-top:-100px;margin-left:10px;color:grey;font-size:0.5px;" >
                        I pay for the 4Mb/sec down,512Kb/sec up service from O2.In fact,it's relatively quick,and stable.It's not < br >
                        perfect,but I really don't have issues,as long as I keep track of what I'm doing on it.
                     </ p >
                     < div style= "width:320px;height:30px;border:1px solid gray;float:left;margin-left:10px;margin-top:-60px;" >
                         < div style= "background-color:rgb(168, 160, 160);width:30px;height:30px;float:left;border:1px solid green;" >
                             < i style= "font-size:30px;margin-top:-5px;float:left;" >+ </ i >
                         </ div >
                         < div style= "width:320px;height:30px;border:1px solid blue;" >
                         </ div >
                         < p style= "color:gray;font-size:3px;margin-top:-20px;" >
                            Well,kinda both:)but more of that second option,i've seen many systems infected and crawing with|
                         </ p >
                     </ div >
                 </ div >
             </ div >
         </ div >
         </ body >
         </ html >
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值