zoukankan      html  css  js  c++  java
  • web_html-day1

    概述

    HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。

    浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!(例:djangomoan模版引擎)

    Doctype

    Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

    有和无的区别
    1. BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
    2. CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

    这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

    有,用什么?

    Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

    Meta(metadata information)

    提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

    页面编码(告诉浏览器是什么编码)

    < meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

    刷新和跳转

    < meta http-equiv=“Refresh” Content=“30″>

    < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

    关键词

    < meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

    描述

    例如:cnblogs

    X-UA-Compatible

    微软的IE6是通过XP、Win2003等操作系统发布出来,作为占统治地位的桌面操作系统,也使得IE占据了通知地位,许多的网站开发的时候,就按照IE6的标准去开发,而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候,采用了微软公司内部标准以及部分W3C的标准,这个时候许多网站升级到IE7的时候,就比较痛苦,很多代码必须调整后,才能够正常的运行。而到了微软的IE8这个版本,基本上把微软内部自己定义的标准抛弃了,而全面的支持W3C的标准,由于基于对标准彻底的变化了,使得原先在早期IE8版本上能够访问的网站,在IE8中无法正常的访问,会出现一些排版错乱、文字重叠,显示不全等各种兼容性错误。

    与任何早期浏览器版本相比,Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此,针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题,Internet Explorer 8 引入了文档兼容性的概念,从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式;这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示,则可以更新该站点以支持最新的 Web 标准(首选方式),也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中,可以实现这一点。

    当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时,它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型,则 Internet Explorer 8 将以 IE5 模式(Quirks 模式)显示该网页。

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Title

    网页头部信息

    Link

    css

    < link rel="stylesheet" type="text/css" href="css/common.css" >

    icon

    < link rel="shortcut icon" href="image/favicon.ico">

    Style

    在页面中写样式

    例如:
    < style type="text/css" >
    .bb{
          background-color: red;
       }
    < /style>

     

     

     

    Script

    引进文件

    < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

    写js代码

    < script type="text/javascript" > ... </script >

    常用标签

    标签一般分为两种:块级标签 和 行内标签

    • a、span、select 等
    • div、h1、p 等

    各种符号

    http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

    p 和 br

    p表示段落,默认段落之间是有间隔的!

    br 是换行

    a标签

    < a href="http://www.autohome.com.cn"> </a>

    1、target属性,_black表示在新的页面打开

    2、锚

    H 标签

    H1

    H2

    H3

    H4

    H5
    H6

    select 标签

    Checkbox

    redio

    password

    button

    file

    提交文件时: enctype='multipart/form-data' method='POST'

    textarea

    label

    ul ol dl

    ul

    • ul.li
    • ul.li
    • ul.li

    ol

    1. ol.li
    2. ol.li
    3. ol.li

    dl

    河北省
    邯郸
    石家庄
    山西省
    太原
    平遥

    table

    fieldset

    form 表单

    文件:enctype='multipart/form-data' method='POST'

     标签选择器:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /* 样式 :
            id 选择器:
             #i1{
             background-color: #2459a2;
             height: 48px;
             }
             class选择器: 用的最多
              .c1 {
               -----
              }
              标签选择器:
               div{
               -----
               }
               层级选择器:
                .c1 .c2 div{
                           -----
                }
               组合选择器(逗号):
                #.c1,.c2,.c3{
                -------
                }
               属性选择器:  对选择到的标签再通过属性再进行一次筛选
               .c1[class='liudong']{ 100px; height:200px; }
    
               css样式也可以现在一个单独文件里,进行引用,饮用方法如下:
               <link rel="stylesheet" href="文件名.css" />
    
            */
        </style>
    </head>

    background

    border

    margin

    padding

    display

    display:none

    original
    none

    display:block

    display:inline

    cursor

    • css提供的cursor值

    pointer || help || wait || move || crosshair

    • 伪造超链接

    pointer

    • 自定义(一般不用)

    mine

    浮动

    position

    http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

    透明度

    静态网页代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            .c1{
                height: 38px;
                background:lavender;
                line-height: 38px;
                cursor: pointer;
            }
            .c2{
                cursor: pointer;
            }
        </style>
    </head>
    <body style="margin: 0;padding: 5px 15px">
        <div class="c1" >
            <div style=" 1500px;margin: 0 auto">
                <div style="font-family: 幼圆;color:dimgray;float: left;">*收藏网站</div>
                <div style="float: right;">
                    <a href="登陆.html" style="font-family: 幼圆;color:dimgray">登陆&nbsp;</a>
                    <a href="注册.html" style="font-family: 幼圆;color:dimgray">注册&nbsp;</a>
                    <a style="font-family: 幼圆;color:dimgray">我的订单&nbsp;</a>
                    <a style="font-family: 幼圆;color:dimgray">我的收藏&nbsp;</a>
                    <a style="font-family: 幼圆;color:dimgray">VIP会员俱乐部&nbsp;</a>
                    <a style="font-family: 幼圆;color:dimgray">客服服务&nbsp;</a>
                    <a style="font-family: 幼圆;color:dimgray">关注&nbsp;</a>
                    <a style="font-family: 幼圆;color:dimgray">手机版&nbsp;</a>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div>
            <div style=" 800px;margin: 0 auto;">
                <div style="float: left;">
                    <img src="图片/t.png" title="要知感恩" alt="要感恩">
                </div>
                <div style="float: right">
                    <div style="height: 50px; 500px; overflow:hidden;zoom: 1;margin-top: 10px;"> <!--把浮动撑起来 -->
                        <input type="text" name="aa" value="请搜索" style=" 240px;height: 27px;padding: 0;margin:0;float: left;font-family: 华文仿宋"/>
                        <input type="submit" name="bb" value="" style=" 61px;height: 31px;padding: 0;margin: 0;float: left; background: #dddddd url(图片/x.png)"/>
                        <span type="text"class="c2" style="color:dimgray; 140px;height: 35px;margin: 0;float: right">
                            <a style="font-family: 幼圆;line-height: 30px;padding: 2px;">购物车<a style="color:red">2</a></a>
                        </span>
                        <br />
                        <p style="color: #BEBEBE;">热门搜索:火龙果&nbsp;瓜子</p>
                    </div>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div  class="c1"style="background-color: crimson;padding: 5px 15px;">
            <div style=" 1500px;height:40px;line-height:40px;margin: 0 auto;">
                <div style="float: left">
                    <a style="color:#fff;font-weight: bold; 220px;height: 40px;display: inline-block" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">全部商品分类&nbsp;&nbsp;</a>
                    <a href="http://jd.com" style="color:#fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">首页&nbsp;&nbsp;</a>
                    <a style="color:#fff;font-weight: bold;" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">网上超市&nbsp;&nbsp;</a>
                    <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">水果超市&nbsp;&nbsp;</a>
                    <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">超级餐厅&nbsp;&nbsp;</a>
                    <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">生活娱乐&nbsp;&nbsp;</a>
                    <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">研究院&nbsp;&nbsp;</a>
                </div>
                <div style="float: right">
                    <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">研究院&nbsp;&nbsp;</a>
                    <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">研究所&nbsp;&nbsp;</a>
                    <a style="color: #fff;font-weight: bold" onmouseover="this.style.color='black'" onmouseout="this.style.color='#fff'">论坛&nbsp;&nbsp;</a>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div style=" 1500px;height: auto;margin:0 auto;">
            <div style=" 220px;float: left;">
                <div style=" 220px;height: 60px;border: 1px solid gainsboro;">
                    <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">南方水果</span>
                    <br />
                    <span style="font-family: 幼圆;line-height: 25px;padding: 15px;color: #BEBEBE">荔枝&nbsp;火龙果&nbsp;....</span>
                </div>
                <div style=" 220px;height: 60px;border: 1px solid gainsboro;">
                    <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">北方水果</span>
                    <br />
                    <span style="font-family: 幼圆;line-height: 25px;padding: 15px;color: #BEBEBE">樱桃&nbsp;猕猴桃&nbsp;...</span>
                </div>
                <div style=" 220px;height: 60px;border: 1px solid gainsboro;">
                    <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">西方水果</span>
                    <br />
                    <span style="font-family: 幼圆;line-height: 25px;padding: 15px;color: #BEBEBE">酸梅&nbsp;桃、杏&nbsp;...</span>
                </div>
                <div style=" 220px;height: 60px;border: 1px solid gainsboro;">
                    <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">东方水果</span>
                    <br />
                    <span style="font-family: 幼圆;line-height: 25px;padding: 15px;color: #BEBEBE">沙拉&nbsp;芒果&nbsp;...</span>
                </div>
                <div style=" 220px;height: 60px;border: 1px solid gainsboro;">
                    <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">东方水果</span>
                    <br />
                    <span style="font-family: 幼圆;line-height: 25px;padding: 15px;color: #BEBEBE">沙拉&nbsp;芒果&nbsp;...</span>
                </div>
                <div style=" 220px;height: 60px;border: 1px solid gainsboro;">
                    <span style="color: black;line-height:25px;padding: 15px;font-weight: bold"class="c2" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">东方水果</span>
                    <br />
                    <span style="font-family: 幼圆;line-height: 25px;padding: 15px;color: #BEBEBE">沙拉&nbsp;芒果&nbsp;...</span>
                </div>
                <br />
                <div  style=" 220px;height: 30px;background-color:beige; border: 1px solid gainsboro;"class="c2">
                    <span style="color:mediumslateblue;line-height: 30px;padding: 15px;font-weight: bold"class="c2">热销排行榜</span> <!-- font-weight: bold 加粗-->
                </div>
                <div  style=" 220px;height: 20px; border: 1px solid gainsboro;">
                    <span >content</span>
                </div>
            </div>
    
            <div style=" 1270px;float: right"><br /><br />
                <div style="font-family: 幼圆; 220px;height: 20px;">福特&gt;蒙迪欧&gt;2.0T</div><br />
                <div style="font-family: 幼圆;border:1px solid gainsboro; 1000px;height: 40px;line-height: 35px;border-top: 2px solid red;border-bottom: 0"><!-- border-bottom: 0 下边框为0-->
                    <b>您的选择:</b>&nbsp;猕猴桃
                </div>
                <div style="font-family: 幼圆;border:1px solid gainsboro; 1000px;height: 40px;line-height: 35px;border-bottom: 0;border-top: 1px dotted gainsboro"><!-- border-top: 1px dotted gainsboro上边线给虚线 -->
                    <b>&nbsp;&nbsp;材质:</b>&nbsp;猕猴桃&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;猕猴桃&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;猕猴桃
                </div>
                <div style="font-family: 幼圆;border:1px solid gainsboro; 1000px;height: 40px;line-height: 35px;border-bottom: 0;border-top: 1px dotted gainsboro">
                    <b>&nbsp;&nbsp;产地:</b>&nbsp;北方&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北方&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北方
                </div>
                <div style="font-family: 幼圆;border:1px solid gainsboro; 1000px;height: 40px;line-height: 35px;border-top: 1px dotted gainsboro">
                    <b>&nbsp;&nbsp;口感:</b>&nbsp;爽口&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;倍甜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上瘾
                </div>
                    <p style="font-family: 幼圆; 1000px;height:5px;text-align: center;line-height: 5px"class="c2">更多选项&nbsp;&nbsp;!</p>
                <div  style="background-color:lavender;border:1px solid gainsboro;1000px;height: 25px;line-height:25px;">
                    <div style="float: left">
                        排序:&nbsp;&nbsp;
                        <span style="color: blue;font-family: 幼圆"class="c2">价格</span>&nbsp;&nbsp;
                        <span style="color: blue;font-family: 幼圆"class="c2">销量</span>&nbsp;&nbsp;
                        <span style="color: blue;font-family: 幼圆"class="c2">最新</span>
                    </div>
                    <div  style="250px;height: 25px;line-height: 25px;float: right">
                        <div style="border-right:1px solid gainsboro;float: left">
                            <span style="color: red;"class="c2">
                                <b style="font-family: 幼圆">共xx件商品</b>
                            </span>
                        </div>
                        <div style="float: left">
                            <span style="color: blue">
                                <b>1/998</b>
                            </span>
                        </div>
                        <div style="float: right;margin-right: 30px;margin-top: 2px"><!-- margin-top: 2px 给上边距两个像素-->
                            <img src="图片/zy.png" />
                        </div>
                        <div style="clear:both"></div>
                    </div>
                </div>
                <div style="margin:0;padding:0;980px;padding:10px;">
                    <ul style="margin:0;padding:0">
                        <li style="margin:0;padding:0;height:300px;235px;float:left;border:1px solid red;text-align: center;"> <!-- text-align: center;根据行内元素设定居中-->
                            <img src="水果/水果10.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:20px;color:black;padding: 5px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold"class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                            <img src="水果/水果.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold"class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                            <img src="水果/水果2.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold"class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                            <img src="水果/水果3.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold"class="c2" >-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold"class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="100%;height:10px;float:left;"></li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;border:1px solid red;text-align: center;">
                            <img src="水果/水果4.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                            <img src="水果/水果5.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                            <img src="水果/水果6.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                            <img src="水果/水果7.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="100%;height:10px;float:left;"></li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;border:1px solid red;text-align: center;">
                            <img src="水果/水果8.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0">
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                        <li style="margin:0;padding:0;height:300px;235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
                            <img src="水果/水果9.png" style="225px;height:230px;">
                            <span style="font-family: 幼圆;display:inline-block;235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
                            <span style="display:inline-block; 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
                            <div style="display:inline-block; 45%;margin: 0;">
                                <span style="display:inline-block;height: 10px;font-weight: bold;" class="c2">-</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" >1</span>
                                <span style="display:inline-block;height: 10px;font-weight: bold" class="c2">+</span>&nbsp;
                                <span style="display: inline-block;height: 10px;background-color:crimson;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;padding-top: 5px"class="c2"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>
    View Code
  • 相关阅读:
    笨方法学python中执行argv提示ValueError: not enough values to unpack (expected 4, got 1)
    VMware workstation安装
    Redis bigkey分析
    MySQL drop table 影响及过程
    MySQL 大表硬连接删除
    ES elasticsearch 各种查询
    ES elasticsearch 各种聚合
    ES elasticsearch 聚合统计
    ES elasticsearch 实现 count单字段,分组取前多少位,以地理位置中心进行统计
    MySQL行溢出、varchar最多能存多少字符
  • 原文地址:https://www.cnblogs.com/liuyansheng/p/6046442.html
Copyright © 2011-2022 走看看