概述

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']{ width: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="width: 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="width: 800px;margin: 0 auto;">
<div style="float: left;">
<img src="图片/t.png" title="要知感恩" alt="要感恩">
</div>
<div style="float: right">
<div style="height: 50px;width: 500px; overflow:hidden;zoom: 1;margin-top: 10px;"> <!--把浮动撑起来 -->
<input type="text" name="aa" value="请搜索" style="width: 240px;height: 27px;padding: 0;margin:0;float: left;font-family: 华文仿宋"/>
<input type="submit" name="bb" value="" style="width: 61px;height: 31px;padding: 0;margin: 0;float: left; background: #dddddd url(图片/x.png)"/>
<span type="text"class="c2" style="color:dimgray;width: 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="width: 1500px;height:40px;line-height:40px;margin: 0 auto;">
<div style="float: left">
<a style="color:#fff;font-weight: bold;width: 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="width: 1500px;height: auto;margin:0 auto;">
<div style="width: 220px;float: left;">
<div style="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 220px;height: 20px; border: 1px solid gainsboro;">
<span >content</span>
</div>
</div> <div style="width: 1270px;float: right"><br /><br />
<div style="font-family: 幼圆;width: 220px;height: 20px;">福特&gt;蒙迪欧&gt;2.0T</div><br />
<div style="font-family: 幼圆;border:1px solid gainsboro;width: 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;width: 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;width: 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;width: 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: 幼圆;width: 1000px;height:5px;text-align: center;line-height: 5px"class="c2">更多选项&nbsp;&nbsp;!</p>
<div style="background-color:lavender;border:1px solid gainsboro;width: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="width: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;width:980px;padding:10px;">
<ul style="margin:0;padding:0">
<li style="margin:0;padding:0;height:300px;width:235px;float:left;border:1px solid red;text-align: center;"> <!-- text-align: center;根据行内元素设定居中-->
<img src="水果/水果10.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:20px;color:black;padding: 5px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
<img src="水果/水果.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
<img src="水果/水果2.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
<img src="水果/水果3.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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="width:100%;height:10px;float:left;"></li>
<li style="margin:0;padding:0;height:300px;width:235px;float:left;border:1px solid red;text-align: center;">
<img src="水果/水果4.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
<img src="水果/水果5.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
<img src="水果/水果6.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
<img src="水果/水果7.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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="width:100%;height:10px;float:left;"></li>
<li style="margin:0;padding:0;height:300px;width:235px;float:left;border:1px solid red;text-align: center;">
<img src="水果/水果8.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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;width:235px;float:left;margin-left:10px;border:1px solid red;text-align: center;">
<img src="水果/水果9.png" style="width:225px;height:230px;">
<span style="font-family: 幼圆;display:inline-block;width:235px;height:30px;">欧凯隆&nbsp;景德镇骨瓷欧凯隆</span>
<span style="display:inline-block;width: 30%;height:25px;margin: 0;font-weight: bold;color: red">¥980</span>
<div style="display:inline-block;width: 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>

web_html-day1的更多相关文章

  1. NOIp2016 Day1&Day2 解题报告

    Day1 T1 toy 本题考查你会不会编程. //toy //by Cydiater //2016.11.19 #include <iostream> #include <cstd ...

  2. day1

    day1.py ][][: ][: ): : ]['lock'] = 0 json.dump(userlist_message, open(userlist, 'w')) break #输错次数到3次 ...

  3. day1作业--登录入口

    作业概述: 编写一个登录入口,实现如下功能: (1)输入用户名和密码 (2)认证成功后显示欢迎信息 (3)输错三次后锁定 流程图: readme: 1.程序配置文件: 黑名单文件blacklist.t ...

  4. luogu1003铺地毯[noip2011 提高组 Day1 T1]

    题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号从小到大的顺序平行于 ...

  5. Python学习路程day1

    变量起名: 变量名如果太长,推荐使用下划线来分开,让人看得清晰明白.例:nums_of_alex_girl=19 .或者是驼峰写法,即首字母大写.例:NumOfAlexGf=18 注意:不合法的变量起 ...

  6. 团队项目——站立会议 DAY1

    团队项目--站立会议 DAY1        团队成员介绍(5人):张靖颜.何玥.钟灵毓秀.赵莹.王梓萱        今日(2016/5/6)为站立会议的第一天,一起对团队项目进行讨论,并对每个人的 ...

  7. Day1 login

    使用流程: 1.程序启动后,显示欢迎信息,提示用户输入用户名: 2.判断用户是否存在,不存在则提示重新输入,或者关闭程序:客户存在则提示客户输入密码: 3.判断密码是否正确,如果不正确则提示用户重新输 ...

  8. contesthunter CH Round #64 - MFOI杯水题欢乐赛day1 solve

    http://www.contesthunter.org/contest/CH Round %2364 - MFOI杯水题欢乐赛 day1/Solve Solve CH Round #64 - MFO ...

  9. noip2011提高组day1+day2解题报告

    Day1 T1铺地毯https://www.luogu.org/problem/show?pid=1003 [题目分析] 全部读入以后从最后一个往前找,找到一个矩形的范围覆盖了这个点,那这个矩形就是最 ...

  10. 全国信息学奥林匹克联赛 ( NOIP2014) 复赛 模拟题 Day1 长乐一中

    题目名称 正确答案  序列问题 长途旅行 英文名称 answer sequence travel 输入文件名 answer.in sequence.in travel.in 输出文件名 answer. ...

随机推荐

  1. [转] SQL Server中变量的声明和使用方法

    原文地址 SQL Server中变量的声明和使用方法 声明局部变量语法: DECLARE @variable_name DataType 其中 variable_name为局部变量的名称,DataTy ...

  2. Xib/Storyboard碰到不同版本的Xcode真是想死啊!

    Command /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/ ...

  3. python的websocket实现Tornado

    1.使用flask的扩展: pip install flask-socketio 2.Tornado提供较好的ws(websocket)支持 参考:1.http://www.jianshu.com/p ...

  4. 单词number 和 numeral 的区别

    原文: http://blog.sina.com.cn/s/blog_72cd06360100vn7t.html be of 的用法,相当于表征特征或属性的形容词. 简单地说,“of + 名词”等于“ ...

  5. SQL ORDER BY 关键字

    SQL ORDER BY 关键字 ORDER BY 关键字用于对结果集进行排序. SQL ORDER BY 关键字 ORDER BY 关键字用于对结果集按照一个列或者多个列进行排序. ORDER BY ...

  6. Dynamics CRM 2015中的SSRS Report集成配置

    大家应该都知道.Dynamics CRM能集成SSRS Report,而且我也在之前的博文中讨论过怎样制作一个简单的SSRS Report并部署到Dynamics CRM中.今天我们来看看一些比較有用 ...

  7. Our happy ending

    题目链接 题意: 输入n.k.L,n个数,最大值不超过L,在序列中取若干个数和能达到k的序列个数 n,k<=20 , 0<=L<=10^9 分析: 题目关键在于和k比較小,所以能够考 ...

  8. angular 的 GET 请求 和 POST 请求的 区别 及 实现

    1.GET 请求 .factory('AlarmService', ['$rootScope','ENV','$resource','$http','ionicToast',function($roo ...

  9. 浅谈xss原理

    近日,论坛上面XSS满天飞,各处都能够见到XSS的痕迹,前段时间论坛上面也出现了XSS的迹象.然后我等小菜不是太懂啊,怎么办?没办法仅仅有求助度娘跟谷歌这对情侣了. 能够说小菜也算懂了一些.不敢藏私, ...

  10. HDU 1398 Square Coins(母函数或dp)

    Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...