zoukankan      html  css  js  c++  java
  • 新浪微博

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    body {
    background-color: #f0b6cf;
    font-size: 14px;
    background-image: url(../lx5/images/sinablogb.jpg);//背景图片
    background-position: center top;
    background-repeat: no-repeat;
    }
    #header {
    850px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-left: 100px;
    color: #FFF;
    padding-bottom: 45px;
    overflow: hidden;
    }
    #header .nav {
    margin-top: 100px;
    }
    #header a {
    text-decoration: none;
    color: #FFF;
    }
    #header a:hover {
    text-decoration: underline;
    color: #06C;
    }
    #header .nav li {
    list-style-type: none;
    float: left;
    100px;
    border-right- 1px;//显示竖杠
    border-right-style: dotted;
    border-right-color: #FFF;
    text-align: center;
    line-height: 25px;
    }
    #header .nav .last {
    border-right-style: none;
    }
    #header .nav ul {
    padding-left: 0px;
    }
    #content{950px;margin:0px auto;}

    #content .left img.img1 {
    position: relative;
    top: -40px;显示精英博主图片
    left: 150px;
    }
    #content .left .txt {
    font-weight: bold;
    color: #999;
    text-align: center;
    margin-top: -40px;
    }
    #content .left{
    210px;
    float:left;
    background-color: #fcf1f5;
    border: 1px solid #cfa1ac;
    }
    #content .left .btns .btn1 {
    background-image: url(../lx5/images/qing_bg.gif);
    background-repeat: no-repeat;
    height: 23px;
    74px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-align: left;
    text-indent: 20px;
    }
    #content .left .btns .btn2 {
    background-image: url(../lx5/images/weibo_bg.gif);
    background-repeat: no-repeat;
    height: 23px;
    74px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-align: left;
    text-indent: 20px;
    }
    #content .main{730px;float:right}
    #content .left .btns {
    text-align: center;
    line-height: 40px;
    }
    #content .left .header {
    background-color: #f7dde8;//背景颜色
    line-height: 25px;
    font-weight: bold;
    color: #900;//字体颜色
    padding-left: 10px;
    }
    #content .left .img {
    background-image: url(../lx5/images/idimg.jpg);
    height: 180px;
    background-repeat: no-repeat;
    180px;
    border: 1px solid #999;
    margin-left: 14px;
    margin-top: 14px;
    }

    #content .left .left3 {
    border-top:dotted 1px #999;
    border-bottom:dotted 1px #999;
    padding:10px;
    }
    #content .left .left3 .item{
    padding:5px;text-align:center;
    }
    #content .left .left3 .item .btn{
    background-image:url(images/btn_bg.gif);
    69px;height:23px;
    border:none;
    }
    #content .order{
    margin-top:10px;
    }
    #content .order ul{
    list-style-type:none;
    padding-left:20px;
    }
    #content .order li{
    height:30px;
    line-height:30px;
    }
    </style>
    </head>

    <body>
    <div id="header">
    <h1>多情浪子</h1>
    <p><a href="#">http://blog.sina.com.cn/xwxbk</a> [<a href="#">订阅</a>] [<a href="#">手机订阅</a>]</p>
    <div class="nav">
    <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">博文目录</a></li>
    <li><a href="#">图片</a></li>
    <li class="last"><a href="#">关于我</a></li>
    </ul>
    </div>
    </div>
    <div id="content">
    <div class="left">
    <div class="header">个人资料</div>
    <div class="img">
    </div>
    <img src="images/badge.png" class="img1"/>
    <div class="txt">雨中竹</div>
    <div class="btns">
    <input type="button" value="Qing" class="btn1"/>
    <input type="button" value="微博" class="btn2"/>
    </div>
    <div class="left3">
    <div class="item">
    <input type="button" value="加好友" class="btn"/> <input type="button" value="加好友" class="btn"/>
    </div>
    <div class="item">
    <input type="button" value="加好友" class="btn"/> <input type="button" value="加好友" class="btn"/>
    </div>
    </div>
    <div class="order">
    <ul>
    <li>博客等级: <img src="images/number.gif" /></li>
    <li>博客积分:<span>4615</span></li>
    <li>博客访问:<span>39,803,258</span></li>
    <li>关注人气:<span>7,262</span></li>
    </ul>
    </div>
    </div>


    <div class="main">2
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    document.all用法
    $.ajax同步/异步(async:false/true)
    link 和@import 的区别
    如何对网页的加载进行性能优化
    border-style有哪些值?
    CSS设置DIV居中
    jquery选择器
    jQuery库中获取jQuery对象的方式
    Observer,观察者模式,C++描述
    Iterator,迭代器模式,C++描述
  • 原文地址:https://www.cnblogs.com/tian114527375/p/4931959.html
Copyright © 2011-2022 走看看