zoukankan      html  css  js  c++  java
  • 【周末作业】2015.7.15 第二周 css作业及答案

    【作业题】

     一、问答题
      
      1、 CSS选择器以及引入方式哪几种,CSS选择器有哪些以及它们的优先级
      
      2、 行内元素和块级元素的区别,分别举出6个行内元素和块级元素,块级元素的特点是什么
      
      3、 改变元素外边距是什么属性,改变元素内边距是什么属性
      
      4、 如何让一个div在页面中居中
      
      5、 如何隐藏一个div
      
      6、 CSS的注释是什么
      
      7、 怎样定义li列表项目符号为实心矩形
      
      8、 margin:5px 2px; 表示什么
      
      9、 CSS产生浏览器兼容性问题的原因是什么,举出三个处理浏览器兼容性问题的例子
      
      10、如何实现层级元素中的文字水平居中和垂直居中
      
      11、盒子模型包含哪些内容
      
      12、绝对定位和相对定位的区别
      
      13、如何清除浮动
      
      14、如何让一个div置于另一个div上面
      
      15、在新窗口打开一个超链接的方法是什么
      
      16、背景具有哪些css属性
      
      17、当div里面的文字高度大于div高度的时候,如何让div产生一个滚动条
      
      18、a:link,a:hover,a:active,a:visitied,如何处理它们的浏览器兼容性问题
      
      19、如何处理常用块级元素(如:body,p,ul,hr,h1~h6)默认有间距的兼容性问题
      
     二、操作题
      
      目录结构:(image文件夹存放图片,css文件夹存放css文件)
      
      1、 编写demo1效果图的菜单(存放在demo1文件夹中,文件夹中的目录格式如上,所需素材见素材文件夹)

        

      
      2、 编写demo2效果图的产品列表(存放在demo2文件夹中,文件夹中的目录格式如上,所需素材见素材文件夹)

        
      
      3、写demo3效果图的搜索页面:http://so.39.net/(存放在demo3文件夹中,文件夹中的目录格式如上,所需素材见素材文件夹)

      
      
      4、编写demo4效果图的页面:https://auth.alipay.com/login/index.htm(存放在demo4文件夹中,文件夹中的目录格式如上,所需素材见素材文件夹)

      
      
      5、制作demo5效果图:http://ke.qq.com/index.html(此网页的左侧导航栏部分)(存放在demo5文件夹中,文件夹中的目录格式如上,所需素材见素材文件夹)

      

    -----------------------------------------------------------------------------------------------

    【作业答案】

     

    一、问答题

    1、 CSS选择器以及引入方式哪几种,CSS选择器有哪些以及它们的优先级

    行内样式 style=””形式

    内嵌式  <style></style>形式

    链接式 <link rel="stylesheet" type="text/css" href=" "/>形式

    导入式:<style>@import url(“”)</style>形式

    优先级:标签选择器<class<id

    2、 行内元素和块级元素的区别,分别举出6个行内元素和块级元素,块级元素的特点是什么

    区别:1、行内元素默认情况下不会单独占满一行,而块级元素会。2、行内元素的高宽不受width,height属性的影响,只受到其里面的内容的多少的影响。而块级元素大小会受到width和height影响。

    块级元素:p,div,h1~h6,table,body,hr…

    行内元素:a,span,br,font,sub,sup,input…..

    块级元素特点:1、默认情况下单独占满一行 2、背景图片、里面的内容默认显示在左上角。

    3、 改变元素外边距是什么属性,改变元素内边距是什么属性

    margin

    padding

    4、 如何让一个div在页面中居中

    margin:0px auto;

    5、 如何隐藏一个div

    display:none;

    6、 CSS的注释是什么

    /* */

    7、 怎样定义li列表项目符号为实心矩形

    list-style-type:square;

    8、 margin:5px 2px; 表示什么

    块级元素外面上下间距5px,左右2px

    9、 CSS产生浏览器兼容性问题的原因是什么,举出三个处理浏览器兼容性问题的例子

    产生原因:各大浏览器使用不同的内核,对有些前端语言支持不一样,导致同一个代码在不同的浏览器里面显示不同的效果。

    举例:略

    10、如何实现层级元素中的文字水平居中和垂直居中

    text-align:center;

    line-height等于块级元素高度;

    11、盒子模型包含哪些内容

    border 边框

    padding 内间距

    margin 外间距

    12、怎么理解绝对定位和相对定位

    1、绝对定位的top和left是相对于浏览器,而相对定位是相对于其父级元素

    2、设置绝对定位则脱离了文档流,不会受到浮动的影响。而设置相对定位则没有脱离文档流。

    13、如何清除浮动

      clear:both;

    14、如何让一个div置于另一个div上面

      设置z-index,越大则越在上面

    15、在新窗口打开一个超链接的方法是什么

      target:_blank;

    16、背景具有哪些css属性

      Background-color 背景颜色

      Background-image 背景图片

      Background-repeat 背景重复

      Background-position 背景方位

      background-attachment 背景固定

    17、当div里面的文字高度大于div高度的时候,如何让div产生一个滚动条

      overflow:auto;

    18、a:link,a:hover,a:active,a:visitied,如何处理它们的浏览器兼容性问题

      Love hate原则 , 按照 link visitied hover active 的顺序

    19、如何处理常用块级元素(如:body,p,ul,hr,h1~h6)默认有间距的兼容性问题

      pading:0px;

      margin:0px;


      
     二、操作题
      
      目录结构:(image文件夹存放图片,css文件夹存放css文件)
      
      1、 淘宝界面

    <!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>demo1:淘宝界面</title>
    <link href="css/demo1.css" rel="stylesheet" />
    
    <style type="text/css">
    *{ margin:0px; padding:0px;}
    
    #kuang{
        width:190px;
        height:490px;
        border:solid 1px #FF4400;
    }
    
    #topic{
        background-color:#FF4400;
        height:35px;
        color:#FFFFFF;
        font-family:"微软雅黑";
        font-size:16px;
        font-weight:bold;
        padding-left:10px;
        line-height:35px;
    }
    
    #main{
        padding:10px;
    }
    
    #market,#shopping,#sale{
        padding-bottom:6px;
        border-bottom:solid 1px #E0E0E0;
        margin-bottom:10px;
    }
    
    #name{
        height:25px;
        line-height:20px;
        color:#000000;
        font-family:"微软雅黑";
        font-size:16px;
        font-weight:bold;
        padding-left:30px;
        background-repeat:no-repeat;
    }
    
    #market #name{
        background-image:url(../image/bg_1.jpg);
    }
    
    #shopping #name{
        background-image:url(../image/bg_2.jpg);
    }
    
    #sale #name{
        background-image:url(../image/bg_3.jpg);
    }
    
    #nr td{
        height:24px;
        line-height:24px;
        font-size:13px;
        color:#333333;    
    }
    
    
    
    </style>
    
    </head>
    
    <body>
    
    <div id="kuang">
        
        <div id="topic">淘宝特色服务</div>
        
        <div id="main">
        
        
            <div id="market">        
                <div id="name">主题市场</div>            
                <div id="nr">
                    <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">        
                        <tr><td>淘宝女人</td><td>运动派</td><td>情侣</td></tr>
                        <tr><td>美容护肤</td><td>中老年</td><td>美食</td></tr>
                        <tr><td>淘宝女人</td><td>运动派</td><td>情侣</td></tr>
                        <tr><td>美容护肤</td><td>中老年</td><td>美食</td></tr>
                        <tr><td>淘宝女人</td><td>运动派</td><td>情侣</td></tr>            
                    </table>            
                </div>        
            </div>
            
            
            <div id="shopping">        
                <div id="name">特色购物</div>            
                <div id="nr">            
                    <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">        
                        <tr><td>淘宝女人</td><td>运动派</td><td>情侣</td></tr>
                        <tr><td>美容护肤</td><td>中老年</td><td>美食</td></tr>
                        <tr><td>淘宝女人</td><td>运动派</td><td>情侣</td></tr>
                        <tr><td>美容护肤</td><td>中老年</td><td>美食</td></tr>
                        <tr><td>淘宝女人</td><td>运动派</td><td>情侣</td></tr>            
                    </table>            
                </div>        
            </div>
            
            
            <div id="sale">        
                <div id="name">优惠促销</div>            
                <div id="nr">            
                    <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">        
                        <tr><td>淘宝女人</td><td>运动派</td><td>情侣</td></tr>
                        <tr><td>美容护肤</td><td>中老年</td><td>美食</td></tr>        
                    </table>            
                </div>        
            </div>
            
            
            <div id="nr">            
                    <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">        
                        <tr><td>阿里旺旺</td><td>支付宝</td><td>来往</td></tr>    
                    </table>            
            </div>
            
            
        </div>
        
    </div>
    
    </body>
    </html>

      
      2、 商品展示

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo2 商品展示</title>
    <link href="css/demo2.css" rel="stylesheet">
    <style>
    *{ margin:0px; padding:0px;}
    
    #main{
        width:970px;
        height:750px;
        margin:auto 0px;
    }
    
    #kuang{
        float:left;
        width:220px;
        height:360px;
        border:solid 1px #EDEDED;
        margin:10px;
    }
    
    #pic{
        width:220px;
        height:220px;
    }
    
    #price{
        width:220px;
        height:43px;
    }
    .left{
        line-height:43px;
        margin-left:5px;
        float:left;
        text-align:left;
        color:#FF4400;
        font-family:"微软雅黑";
        font-size:20px;
        font-weight:bold;
    }
    .by{
        margin-top:13px;
        margin-left:2px;
        float:left;
        width:27px;
        height:14px;
        background-color:#FF4400;
        color:#FFFFFF;
        font-family:"宋体";
        font-size:10px;
    }
    .right{
        line-height:43px;
        float:right;
        width:60px;
        text-align:right;
        color:#898886;
        font-family:"微软雅黑";
        font-size:12px;
        margin-right:10px;
    }
    
    #describe{
        height:30px;
        width:200px;
        padding:0px 10px;
        text-align:left;
        color:#3D3D3D;
        font-family:"微软雅黑";
        font-size:12px;
    }
    .red{color:#FF4400;}
    
    #name{
        height:35px;
        width:220px;
    }
    .left1{
        line-height:35px;
        float:left;
        margin:0px 10px;
        color:#888888;
        font-family:"微软雅黑";
        font-size:12px;
    }
    .left1 a:visited{ 
        text-decoration:underline;
        color:#888888;
        font-family:"微软雅黑";
        font-size:12px;
    }
    .left1 a:link{ 
        text-decoration:underline;
        color:#888888;
        font-family:"微软雅黑";
        font-size:12px;
    }
    
    .right1{
        line-height:35px;
        float:right;
        margin-right:10px;
        color:#888888;
        font-family:"微软雅黑";
        font-size:12px;
    }
    
    #contact{
        margin:0px 10px;
        height:30px;
    }
    .left2{ float:left;}
    .right2{ float:right;}
    </style>
    
    </head>
    
    <body>
    <center>
    
    <div id="main">
    
        <div id="kuang">
            <div id="pic"><img src="image/pro.jpg" width="219" height="220"></div>
            <div id="price">
                <div class="left">¥169.00</div>
                <div class="by">包邮</div>
                <div class="right">120人付款</div>
            </div>
            <div id="describe">瑞贝卡罗西 2014新款欧美奢华女包单肩手提水桶包杀手包女士<span class="red">包包</span></div>
            <div id="name">
                <div class="left1"><a href="#">瑞贝卡罗西旗舰店</a></div>
                <div class="right1">广东  广州</div>
            </div>
            <div id="contact">
                <div class="left2"><img src="image/logo_1.jpg"></div>
                <div class="right2"><img src="image/logo_2.jpg"></div>
            </div>
        </div>
        
        <div id="kuang">
            <div id="pic"><img src="image/pro.jpg" width="219" height="220"></div>
            <div id="price"><div class="left">¥169.00</div><div class="by">包邮</div><div class="right">120人付款</div></div>
            <div id="describe">瑞贝卡罗西 2014新款欧美奢华女包单肩手提水桶包杀手包女士<span class="red">包包</span></div>
            <div id="name"><div class="left1"><a href="#">瑞贝卡罗西旗舰店</a></div><div class="right1">广东  广州</div></div>
            <div id="contact"><div class="left2"><img src="image/logo_1.jpg"></div><div class="right2"><img src="image/logo_2.jpg"></div></div>
        </div>
        
        <div id="kuang">
            <div id="pic"><img src="image/pro.jpg" width="219" height="220"></div>
            <div id="price"><div class="left">¥169.00</div><div class="by">包邮</div><div class="right">120人付款</div></div>
            <div id="describe">瑞贝卡罗西 2014新款欧美奢华女包单肩手提水桶包杀手包女士<span class="red">包包</span></div>
            <div id="name"><div class="left1"><a href="#">瑞贝卡罗西旗舰店</a></div><div class="right1">广东  广州</div></div>
            <div id="contact"><div class="left2"><img src="image/logo_1.jpg"></div><div class="right2"><img src="image/logo_2.jpg"></div></div>
        </div>
        
        <div id="kuang">
            <div id="pic"><img src="image/pro.jpg" width="219" height="220"></div>
            <div id="price"><div class="left">¥169.00</div><div class="by">包邮</div><div class="right">120人付款</div></div>
            <div id="describe">瑞贝卡罗西 2014新款欧美奢华女包单肩手提水桶包杀手包女士<span class="red">包包</span></div>
            <div id="name"><div class="left1"><a href="#">瑞贝卡罗西旗舰店</a></div><div class="right1">广东  广州</div></div>
            <div id="contact"><div class="left2"><img src="image/logo_1.jpg"></div><div class="right2"><img src="image/logo_2.jpg"></div></div>
        </div>
        
        <div id="kuang">
            <div id="pic"><img src="image/pro.jpg" width="219" height="220"></div>
            <div id="price"><div class="left">¥169.00</div><div class="by">包邮</div><div class="right">120人付款</div></div>
            <div id="describe">瑞贝卡罗西 2014新款欧美奢华女包单肩手提水桶包杀手包女士<span class="red">包包</span></div>
            <div id="name"><div class="left1"><a href="#">瑞贝卡罗西旗舰店</a></div><div class="right1">广东  广州</div></div>
            <div id="contact"><div class="left2"><img src="image/logo_1.jpg"></div><div class="right2"><img src="image/logo_2.jpg"></div></div>
        </div>
        
        <div id="kuang">
            <div id="pic"><img src="image/pro.jpg" width="219" height="220"></div>
            <div id="price"><div class="left">¥169.00</div><div class="by">包邮</div><div class="right">120人付款</div></div>
            <div id="describe">瑞贝卡罗西 2014新款欧美奢华女包单肩手提水桶包杀手包女士<span class="red">包包</span></div>
            <div id="name"><div class="left1"><a href="#">瑞贝卡罗西旗舰店</a></div><div class="right1">广东  广州</div></div>
            <div id="contact"><div class="left2"><img src="image/logo_1.jpg"></div><div class="right2"><img src="image/logo_2.jpg"></div></div>
        </div>
        
        <div id="kuang">
            <div id="pic"><img src="image/pro.jpg" width="219" height="220"></div>
            <div id="price"><div class="left">¥169.00</div><div class="by">包邮</div><div class="right">120人付款</div></div>
            <div id="describe">瑞贝卡罗西 2014新款欧美奢华女包单肩手提水桶包杀手包女士<span class="red">包包</span></div>
            <div id="name"><div class="left1"><a href="#">瑞贝卡罗西旗舰店</a></div><div class="right1">广东  广州</div></div>
            <div id="contact"><div class="left2"><img src="image/logo_1.jpg"></div><div class="right2"><img src="image/logo_2.jpg"></div></div>
        </div>
        
        <div id="kuang">
            <div id="pic"><img src="image/pro.jpg" width="219" height="220"></div>
            <div id="price"><div class="left">¥169.00</div><div class="by">包邮</div><div class="right">120人付款</div></div>
            <div id="describe">瑞贝卡罗西 2014新款欧美奢华女包单肩手提水桶包杀手包女士<span class="red">包包</span></div>
            <div id="name"><div class="left1"><a href="#">瑞贝卡罗西旗舰店</a></div><div class="right1">广东  广州</div></div>
            <div id="contact"><div class="left2"><img src="image/logo_1.jpg"></div><div class="right2"><img src="image/logo_2.jpg"></div></div>
        </div>
    
    </div>
    
    </center>
    </body>
    </html>

      
      3、健康搜首页

    <!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>demo3 健康搜</title>
    <link href="css/demo3.css" rel="stylesheet" />
    
    <style>
    *{ margin:0px; padding:0px;}
    img{ border-width:0px;}
    
    #head{
        width:auto;
        height:35px;
        background-color:#0096A5;
    }
    
    
    #nav{
        float:left;
    }
    #nav li{
        float:left;
        list-style-type:none;
        background:url(../image/bg_1.png) no-repeat right 13px;
    }
    #nav li a{
        height:35px;
        line-height:35px;    
        padding:0px 10px;
        font-size:14px;
        font-family:"微软雅黑";
        color:#FFFFFF;
        text-decoration:none;
        display:block;
        margin-left:-2px;
    }
    #nav li a:hover{
        background-color:#008C9A;
    }
    
    #login{
        float:right;
        width:120px;
    }
    #login_1{
        float:left;
        background:url(../image/bg_2.png) no-repeat;
        background-position:6px 10px;
    }
    #login_2{
        float:left;
        background:url(../image/bg_3.png) no-repeat;
        background-position:6px 10px;
    }
    #login_1 a,#login_2 a{
        height:35px;
        line-height:35px;    
        padding:0px 10px;
        font-size:14px;
        font-family:"微软雅黑";
        color:#FFFFFF;
        text-decoration:none;
        display:block;
        padding-left:22px;
        display:block;
    }
    #login_2 a:hover{
        background:url(../image/bg_3.png) no-repeat;
        background-position:6px 10px;
        background-color:#008C9A;
    }
    
    
    #main{
        text-align:center;
        padding-bottom:110px;
        border:solid 1px #E9E9E9;
    }
    #pic{
        margin-top:125px;
        margin-bottom:50px;
    }
    #sousuo{
        width:700px;
        height:40px;
        margin:0 auto;
    }
    .sou_kuang{
        float:left;
        width:570px; 
        height:38px; 
        padding:0; 
        color:#999; 
    }
    .sou_pic{
        background-image:url(../image/bg_5.png);
        float:left; 
        width:125px; 
        height:42px; 
        padding:0; 
        border:none;
    }
    
    
    #key{
        width:700px;
        height:50px;
        line-height:50px;
        margin:0 auto;
    }
    .word{
        float:left;
        font-weight:bold;
        font-family:"宋体";
        padding-top:1px;
        padding-left:2px;
        font-size:14px;
        color:#666666;
        width:90px;
        text-align:left;
    }
    #key li{
        float:left;
        list-style-type:none;
    }
    #key li a{
        margin-right:20px;
        color:#666666;
        text-decoration:none;
        font-family:"宋体";
        font-size:14px;
    }
    #key li a:hover{
        text-decoration:underline;
    }
    
    
    #footer{
        margin:auto 0px;
        text-align:center;
        color:#666666;
        font-size:12px;
        font-family:"微软雅黑";
    }
    .footer_word{
        margin-top:15px;
    }
    .footer_word a{
        text-decoration:none;
        color:#666666;
    }
    .footer_word a:hover{
        text-decoration:underline;
        color:#666666;
    }
    
    </style>
    
    </head>
    
    <body>
    <div id="head">
        <div id="nav">
            <ul>
                <li><a href="#">39健康网首页</a></li>
                <li><a href="#">药品通</a></li>
                <li><a href="#">疾病百科</a></li>
                <li><a href="#">就医助手</a></li>
            </ul>
        </div>
        
        <div id="login">
            <div id="login_1"><a href="#">登录</a></div>
            <div id="login_2"><a href="#">注册</a></div>
        </div>
    
    </div>
    
    
    <div id="main" align="center">
    
        <div id="pic"><a href="#"><img src="image/bg_4.png" /></a></div>
        <div id="sousuo">
            <form>
                <input type="text" class="sou_kuang" />
                <input type="submit" class="sou_pic" value="" />
            </form>
        </div>
        <div id="key">
        <span class="word">热门搜索:</span>
            <ul>
                <li><a href="#">瘦脸</a></li>
                <li><a href="#">糖尿病</a></li>
                <li><a href="#">丰面颊</a></li>
                <li><a href="#">祛疤</a></li>
                <li><a href="#">乳腺增生</a></li>
                <li><a href="#">磨骨术</a></li>
            </ul>
            
        </div>
    
    </div>
    
    <div id="footer">
        <div class="footer_word"><a href="#">将39so设为首页</a>&nbsp;|&nbsp;<a href="#">关注39健康微信</a></div>
        <div class="footer_word"><a href="#">39健康网</a> - 中国健康门户网站&#12288;Copyright  &copy; 2000-2013&#12288;<a href="#">未经授权请勿转载</a></div>
    </div>
    
    
    </body>
    </html>

      
      4、支付宝首页

    <!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>demo4:支付宝首页</title>
    <link rel="stylesheet" type="text/css" href="css/demo4.css">
    
    <style>
    *{ margin:0px; padding:0px;}
    
    #quanju{
        width:1280px;
        height:800px;
        background-image:url(../image/bg_1.jpg);
    }
    
    #head{
        height:25px;
        line-height:25px;
        background-color:#3D474A;
        text-align:left;
    }
    
    #head_1{
        float:left;
        background:url(../image/pic_1.jpg) -0px 3px no-repeat;
        margin-left:170px;
        padding-left:20px;
        color:#FFFFFF;
        font-family:"微软雅黑";
        font-size:12px;
    }
    
    #head_2{
        float:left;
        margin-left:700px;
    }
    
    #head_2 ul{
        list-style-type:none;
    }
    
    #head_2 li{
        float:left;
        color:#FFFFFF;
        font-family:"微软雅黑";
        font-size:12px;
        padding-left:17px;
        padding-right:13px;
    }
    .line{
        background:url(../image/pic_2.jpg) 0px 7px no-repeat;
    }
    
    #main{
        width:1024px;
    }
    
    #main_kuang1{
        float:right;
        width:226px;
        height:245px;
        padding:25px 30px;
        margin-top:120px;
        margin-right:80px;
        background:rgba(0,0,0,0.4);
        text-align:center;
    }
    
    #main_kuang2{
        width:220px;
        text-align:left;
    }
    
    #main1{
        height:45px;
        line-height:30px;
        font-family:"微软雅黑";
        font-size:18px;
        color:#FFFFFF;
    }
    
    .text,.password{
        float:left;
        width:180px; 
        height:40px;
        border:0px; 
    }
    
    #word{
        text-align:right;
        font-family:"宋体";
        font-size:13px;
        color:#D1C9C6;
        margin-bottom:15px;
    }
    
    .submit{
        background-image:url(../image/pic_5.jpg);
        float:left; 
        width:219px; 
        height:40px; 
        padding:0; 
        border:none;
        margin-bottom:10px;
    }
    
    #main3_1{
        float:left;
        font-family:"宋体";
        font-size:12px;
        color:#D8D6D4;
    }
    #main3_2{
        float:right;
        font-family:"宋体";
        font-size:12px;
        font-weight:bold;
        color:#FF9800;
    }
    
    #footer{
        margin-top:580px;
        text-align:center;
    }
    
    p{
        height:30px;
        line-height:30px;
        color:#FFFFFF;
        font-size:12px;
        font-family:"宋体";
    }
    
    
    </style>
    
    </head>
    
    <body>
    <center>
    
    <div id="quanju">
    
        <div id="head">
            <div id="head_1">支付宝钱包</div>
            <div id="head_2">
                <ul>
                    <li>支付宝首页</li>
                    <li class="line">帮助中心</li>
                    <li class="line">提建议</li>
                </ul>
            </div>
        </div>
    
        <div id="main">
            <div id="main_kuang1">
            <div id="main_kuang2">
                <div id="main1">登录支付宝</div>
                <div id="main2">
                    <form>
                        <div style="float:left"><img src="image/pic_3.jpg" /></div><div style="float:left"><input type="text" class="text" /></div>
                        <div style="clear:both; height:10px;"></div>
                        <div style="float:left"><img src="image/pic_4.jpg" /></div><div style="float:left"><input type="password" class="password" /></div>
                        <div style="clear:both; height:10px;"></div>
                        <div id="word">忘记登录密码?</div>
                        <input type="submit" class="submit" value="" />
                    </form>
                </div>
                <div id="main3">
                    <div id="main3_1">淘宝会员登录</div>
                    <div id="main3_2">免费注册</div>
                </div>
            </div>
            </div>    
        </div>
    
        <div id="footer">
            <div>
                <p>关于支付宝 | 经销商体系 | 官方博客 | 诚征英才 | 联系我们 | International Business | About Alipay</p>
                <p>支付宝版权所有 2004-2015 ICP证:沪B2-20150087</p>
            </div>
        </div>
    
    </div>
    
    </center>
    </body>
    </html>

      
      5、腾讯课堂导航栏

    <!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>demo5 导航栏</title>
    <link rel="stylesheet" type="text/css" href="css/demo5.css">
    
    <style>
    
    *{ margin:0px; padding:0px;}
    
    #kuang{
        width:220px;
        height:480px;
        
    }
    
    #topic{
        height:20px;
        width:190px;
        line-height:20px;
        background-color:#188EEE;
        padding:15px;
    }
    
    #topic_img{
        float:left;
        height:20px;
        width:20px;
        background:url(../image/1.png) -65px -90px no-repeat;
    }
    
    #topic_word{
        float:left;
        margin-left:10px;
        height:20px;
        line-height:20px;
        font-family:"微软雅黑";
        font-size:16px;
        color:#FFFFFF;
    }
    
    #nav{
        width:220px;
        height:425px;
    }
    
    #nav ul{
        list-style-type:none;
    }
    
    #nav li{
        padding:15px;
        width:190px;
        height:40px;
        border-bottom:solid 1px #1681C5;
        background-color:#0577C0;
    }
    #nav li:hover{
        background-color:#0264A3;
    }
    
    #nav1{
        float:left;
        height:20px;
        line-height:20px;
        font-family:"微软雅黑";
        font-size:16px;
        color:#FBFCFE;
    }
    
    #img1{
        float:right;
        width:10px;
        height:15px;
        background:url(../image/1.png) -115px -40px no-repeat;
    }
    
    #nav2{
        float:left;
        margin-top:5px;
        font-family:"微软雅黑";
        font-size:14px;
        color:#98D4F6;
    }
    
    
    
    </style>
    </head>
    
    <body>
    
    <div id="kuang">
        
        <div id="topic">
            <div id="topic_img"></div>
            <div id="topic_word">全部课程</div>
        </div>
        
        <div id="nav">
            <ul>
                <li>
                    <div>
                        <div id="nav1">职业技能</div>
                        <div id="img1"></div>
                    </div><div style="clear:both;"></div>
                    <div id="nav2">公务员 SEO/SEM 金融类</div>
                </li>
                <li>
                    <div>
                        <div id="nav1">职业技能</div>
                        <div id="img1"></div>
                    </div><div style="clear:both;"></div>
                    <div id="nav2">公务员 SEO/SEM 金融类</div>
                </li>
                <li>
                    <div>
                        <div id="nav1">职业技能</div>
                        <div id="img1"></div>
                    </div><div style="clear:both;"></div>
                    <div id="nav2">公务员 SEO/SEM 金融类</div>
                </li>
                <li>
                    <div>
                        <div id="nav1">职业技能</div>
                        <div id="img1"></div>
                    </div><div style="clear:both;"></div>
                    <div id="nav2">公务员 SEO/SEM 金融类</div>
                </li>
                <li>
                    <div>
                        <div id="nav1">职业技能</div>
                        <div id="img1"></div>
                    </div><div style="clear:both;"></div>
                    <div id="nav2">公务员 SEO/SEM 金融类</div>
                </li>
                <li>
                    <div>
                        <div id="nav1">职业技能</div>
                        <div id="img1"></div>
                    </div><div style="clear:both;"></div>
                    <div id="nav2">公务员 SEO/SEM 金融类</div>
                </li>
            </ul>    
        </div>
        
    </div>
    
    </body>
    </html>
  • 相关阅读:
    UIView的常见属性
    Object-C-Foundation-反射
    Object-C-自定义类型归档
    Java集合:HashMap源码剖析
    spring-boot-2.0.3之quartz集成,数据源问题,源码探究
    杂谈篇之我是怎么读源码的,授之以渔
    ElasticSearch 从零到入门
    java实现图片上传功能,并返回图片保存路径
    quartz定时任务及时间设置
    笛子初学者吹什么曲子
  • 原文地址:https://www.cnblogs.com/59muyu/p/4681107.html
Copyright © 2011-2022 走看看