导航代码

商城导航代码,导航代码

  一个css写的商城导航效果 

<!DOCTYPE%20html>
<html%20lang="en">
<head>
%20%20%20%20<meta%20charset="UTF-8">
%20%20%20%20<title>商城分类导航</title>

%20%20%20%20<style%20type="text/css">
%20%20%20%20%20%20%20body
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20padding:%200;
%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2010pt;

%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.topmenu
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;
%20%20%20%20%20%20%20%20%20%20%20%20width:%20220px;
%20%20%20%20%20%20%20%20%20%20%20%20border:%202px%20solid%20#e4393c;
%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;
%20%20%20%20%20%20%20%20%20%20%20%20padding:%200;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.toptitle
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20height:%2040px;
%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2040px;
%20%20%20%20%20%20%20%20%20%20%20%20text-align:%20left;
%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2011pt;
%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20bold;
%20%20%20%20%20%20%20%20%20%20%20%20color:%20White;
%20%20%20%20%20%20%20%20%20%20%20%20background:%20#e4393c;
%20%20%20%20%20%20%20%20%20%20%20%20padding-left:%2020px;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.topmenu%20li
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20height:%2030px;
%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2030px;
%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2011pt;
%20%20%20%20%20%20%20%20%20%20%20%20list-style-type:%20none;
%20%20%20%20%20%20%20%20%20%20%20%20text-align:%20left;
%20%20%20%20%20%20%20%20%20%20%20%20padding-left:%208px;
%20%20%20%20%20%20%20%20%20%20%20%20z-index:%203;


%20%20%20%20%20%20%20%20%20%20%20%20background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);
%20%20%20%20%20%20%20%20%20%20%20%20background-repeat:no-repeat;
%20%20%20%20%20%20%20%20%20%20%20%20background-position:right;

%20%20%20%20%20%20%20%20}

%20%20%20%20%20%20%20%20.topmenu%20li:hover
%20%20%20%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20border:1px%20solid%20#DDD;
%20%20%20%20%20%20%20%20%20%20%20%20border-right:0;
%20%20%20%20%20%20%20%20%20%20%20%20box-shadow:%200%200%208px%20#DDD;
%20%20%20%20%20%20%20%20%20%20%20%20-moz-box-shadow:0%200%208px%20#DDD;
%20%20%20%20%20%20%20%20%20%20%20%20-webkit-box-shadow:0%200%208px%20#DDD;
%20%20%20%20%20%20%20%20%20%20%20%20background-image:none;
%20%20%20%20%20%20%20%20%20%20%20%20}

%20%20%20%20%20%20%20%20.topmenu%20li%20a
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;
%20%20%20%20%20%20%20%20%20%20%20%20color:%20#313131;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.topmenu%20li%20a:hover
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20text-decoration:%20underline;
%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20bold;
%20%20%20%20%20%20%20%20%20%20%20%20color:%20#e4393c;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.submenu
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20display:%20none;
%20%20%20%20%20%20%20%20%20%20%20%20width:%20715px;
%20%20%20%20%20%20%20%20%20%20%20%20left:%20220px;
%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20%20%20%20%20%20%20top:%2040px;
%20%20%20%20%20%20%20%20%20%20%20%20border:%201px%20solid%20#DDD;
%20%20%20%20%20%20%20%20%20%20%20%20z-index:%204;
%20%20%20%20%20%20%20%20%20%20%20%20background:%20white;
%20%20%20%20%20%20%20%20%20%20%20%20box-shadow:%200%200%208px%20#DDD;
%20%20%20%20%20%20%20%20%20%20%20%20-moz-box-shadow:%200%200%208px%20#DDD;
%20%20%20%20%20%20%20%20%20%20%20%20-webkit-box-shadow:%200%200%208px%20#DDD;
%20%20%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.leftdiv
%20%20%20%20%20%20%20%20{

%20%20%20%20%20%20%20%20%20%20%20%20float:left;
%20%20%20%20%20%20%20%20%20%20%20%20width:490px;
%20%20%20%20%20%20%20%20%20%20%20%20margin:5px;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.rightdiv
%20%20%20%20%20%20%20%20{

%20%20%20%20%20%20%20%20%20%20%20%20float:left;
%20%20%20%20%20%20%20%20%20%20%20%20width:200px;
%20%20%20%20%20%20%20%20%20%20%20%20margin:5px;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.topmenu%20li:hover%20.submenu
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.topmenu%20li:hover%20span
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20background:%20white;
%20%20%20%20%20%20%20%20%20%20%20%20display:%20inline-block;
%20%20%20%20%20%20%20%20%20%20%20%20z-index:%2020;
%20%20%20%20%20%20%20%20%20%20%20%20width:%2020px;
%20%20%20%20%20%20%20%20%20%20%20%20height:%2030px;
%20%20%20%20%20%20%20%20%20%20%20%20float:%20right;
%20%20%20%20%20%20%20%20%20%20%20%20position:%20relative;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.leftdiv%20dl
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20display:block;
%20%20%20%20%20%20%20%20%20%20%20%20border:-bottom:1px%20solid%20#EEE;
%20%20%20%20%20%20%20%20%20%20%20%20padding-bottom:6px;
%20%20%20%20%20%20%20%20%20%20%20%20overflow:%20hidden;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.leftdiv%20dl%20dt
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;
%20%20%20%20%20%20%20%20%20%20%20%20float:left;
%20%20%20%20%20%20%20%20%20%20%20%20width:60px;
%20%20%20%20%20%20%20%20%20%20%20%20text-align:%20right;
%20%20%20%20%20%20%20%20%20%20%20%20height:22px;
%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2022px;
%20%20%20%20%20%20%20%20%20%20%20%20padding-right:6px;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.leftdiv%20dl%20dt%20a
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20color:#e4393c;
%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20blod;
%20%20%20%20%20%20%20%20%20%20%20%20text-decoration:%20underline;
%20%20%20%20%20%20%20%20%20%20%20%20font-size:10pt;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.leftdiv%20dl%20dd
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;
%20%20%20%20%20%20%20%20%20%20%20%20overflow:%20hidden;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.leftdiv%20dl%20dd%20a
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;
%20%20%20%20%20%20%20%20%20%20%20%20float:left;
%20%20%20%20%20%20%20%20%20%20%20%20border-left:1px%20solid%20#DDD;
%20%20%20%20%20%20%20%20%20%20%20%20color:#737373;
%20%20%20%20%20%20%20%20%20%20%20%20font-size:%209px;
%20%20%20%20%20%20%20%20%20%20%20%20padding:0%208px;
%20%20%20%20%20%20%20%20%20%20%20%20height:14px;
%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2014px;
%20%20%20%20%20%20%20%20%20%20%20%20margin:4px%200;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.rightdiv%20dl%20dd
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20margin:3px%200;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.rightdiv%20dl%20dt
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20color:#e4393c;
%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20bold;
%20%20%20%20%20%20%20%20%20%20%20%20font-size:10pt;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.rightdiv%20dl%20dd%20a
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20font-size:9pt;
%20%20%20%20%20%20%20%20%20%20%20%20color:#737373;
%20%20%20%20%20%20%20%20%20%20%20%20line-height:%2022px;
%20%20%20%20%20%20%20%20}
%20%20%20%20%20%20%20%20.rightdiv%20dl%20dd%20a:hover
%20%20%20%20%20%20%20%20{
%20%20%20%20%20%20%20%20%20%20%20%20color:#737373;
%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20normal;
%20%20%20%20%20%20%20%20}
%20%20%20%20</style>
</head>
<body>

%20%20%20%20<ul%20class="topmenu">
%20%20%20%20%20%20%20%20<div%20class="toptitle">
%20%20%20%20%20%20%20%20%20%20%20%20全部商品分类
%20%20%20%20%20%20%20%20</div>
%20%20%20%20%20%20%20%20<li>
%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">图书、音像、数字商品</a>
%20%20%20%20%20%20%20%20%20%20%20%20<div%20class="submenu">
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<div%20class="leftdiv">
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dl>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dt><a%20href="">电子书</a></dt>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">免费</a><a%20href="">小说</a><a%20href="">励志与成功</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">婚恋/两性</a><a%20href="#">文学</a><a%20href="#">经管</a>%20<a%20href="#">畅读VIP</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dl%20>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dt><a%20href="#">生活</a></dt>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">家教与育儿</a>%20<a%20href="#">旅游/地图</a>%20<a%20href="#">烹饪/美食</a>%20<a%20href="#">时尚/美妆</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">家居</a>%20<a%20href="#">婚恋与两性</a>%20<a%20href="#">娱乐/休闲</a>%20<a%20href="#">健身与保健</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">动漫/幽默</a>%20<a%20href="#">体育/运动</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dl>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</div>
%20%20%20%20%20%20%20%20%20%20%20%20<div%20class="rightdiv">
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dl>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<img%20src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width="194"%20height="70"%20title="\家电">
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dl>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dl>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dt>推荐品牌</dt>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">美的官方旗舰店</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">苏泊尔旗舰店</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dl>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</div>

%20%20%20%20%20%20%20%20%20%20%20%20</div>
%20%20%20%20%20%20%20%20</li>
%20%20%20%20%20%20%20<li>
%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">家用电器</a>
%20%20%20%20%20%20%20%20%20%20%20%20<div%20class="submenu">
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<div%20class="leftdiv">
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dl>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dt><a%20href="">大家电</a></dt>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">平板电视</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">空调</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">冰箱</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">洗衣机</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">扫地机器人</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">吸尘器</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#">电话机</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">家电配件</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">家庭影院</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">冷柜/冰吧</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="">洗衣机</a>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dd>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</dl>
%20%20%20%20%20%20%20%20%20%20%20%20</div>
%20%20%20%20%20%20%20%20%20%20%20%20</div>
%20%20%20%20%20%20%20</li>
%20%20%20%20%20%20%20<li><a%20href="#">手机、数码</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">电脑、办公</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">家居、家具、家装、厨具</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">服饰内衣、珠宝首饰</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">个护化妆</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">鞋靴、箱包、钟表、奢侈品</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">运动户外</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">汽车用品</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">母婴、玩具乐器</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">食品饮料、酒类、生鲜</a></li>
%20%20%20%20%20%20%20%20<li><a%20href="#">营养保健</a></li>
%20%20%20%20</ul>
</body>
</html>

%20一个css写的商城导航效果%20!
DOCTYPE%20html%20html%20lang%20=”en”%20head%20meta%20charset%20=”UTF-8″%20title
商城分类导航%20/%20title%20style%20type%20=”text/css…

18、HTML,18html

HTML

超文本标记语言(Hyper%20Text%20Markup%20Language)。

用来描述网页的一种语言。

HTML标签%20%20

由尖括号包围的关键词。%20如:<html>

通常是成对出现的,开始标签和结束标签。%20如:<html>和</html>

HTML文档%20%20

用来描述网页。

包含HTML标签和文本。

文档的结构

<!DOCTYPE%20html>
<html%20lang="zh-CN">
%20%20%20%20<head>
%20%20%20%20%20%20%20%20<title>网页标题</title>
%20%20%20%20%20%20%20%20<meta%20charset="gb2312">
%20%20%20%20%20%20%20%20<meta%20name="keywords"%20content="关键字">
%20%20%20%20%20%20%20%20<meta%20name="description"%20content="详细描述">
%20%20%20%20</head>
<body>
%20%20%20%20网页内容
</body>
</html>

常用特殊字符

显示%20%20%20%20代码%20%20%20
<%20%20%20%20%20%20&lt;%20%20%20
>%20%20%20%20%20%20&gt;
&%20%20%20%20%20%20&amp;%20%20%20
"%20%20%20%20%20%20&quot;
©%20%20%20%20%20%20&copy;%20%20%20
®%20%20%20%20%20%20&reg;
×%20%20%20%20%20%20&times;%20%20%20
÷%20%20%20%20%20%20&divide;
¥%20%20%20%20%20&yen;%20%20%20
§%20%20%20%20%20%20&sect;
£%20%20%20%20%20&pound;%20%20%20
¢%20%20%20%20%20&cent;
%20%20%20%20%20%20%20&nbsp;

常用HTML标签

注释

<!–%20–>

<!--这是一段注释。注释不会在浏览器中显示。-->

定义规范

<!DOCTYPE>

三种文档类型:Strict、Transitional%20以及%20Frameset。

超链接

<a>

外链:<a%20href=”%20″%20target=”_blank”
title=”点击跳转百度”>百度</a>
页内:<a%20name=”a”>啊</a>%20<a
href=”#a”>跳转到啊</a>
邮箱:%20<a
href=”mailto:[email protected]”>点击发邮件</a>

署名

<address>

用来定义署名地址。

标题

<hn>

<h1>%20定义最大的标题。<h6>%20定义最小的标题。

换行

<br>

不产生一个新段落的情况下进行换行,接着上一行换行。

段落

<p>

产生一个新段落,换行空一行。<p%20align=”left%20center
right”>左中右对齐</p>

预格式文本

<pre>

用于显示预先在源代码中定义好的格式。

居中对齐

<center>

使内容居中对齐。

水平线

<hr>

在%20HTML%20页面中创建一条水平线。<hr%20size=”5″%20color=”red”%20width=”300″
/>%20size高度%20color%20颜色%20width长度

文字

<font>

用来定义文字字体%20样式%20大小颜色等。<font%20size=”字号”%20color=”颜色”
face=”字体”></font>

滚动标签

<marquee>

direction方向
bihavior方式=scroll(一直滚)slide(一次)alternate(交替式)loop次数
scrollamount速度

图片

<img>

在网页中显示图片。<img%20src=”路径”%20width=”宽度” height高度 alt=”提示”
align=”top%20bottom%20left%20right”%20vspace=”10″%20hspace=”10″%20/>%20 %20vspace
hspace文字间距%20align%20与文本对齐方式

有序列表

<ol>

数字/编号%20自动排序%20type=”1%20a%20A%20i%20I%20″%20<ol><li>

无序列表

<ul>

可实心%20空心%20方形%20<ul><li>

文字样式

b粗体%20i斜体%20u下划线%20del删除线%20span%20em%20strong%20cite
code%20kbdsamp%20sub%20sup%20var%20acronym%20abbr%20dfn%20bdo

表格

<table>

定义一个表格%20border%20cellspacing设置内框宽度%20cellpadding
文字与边框的距离。

<tr>

表格中的行%20还可以设置tfoot%20th%20tbody%20thead来分组。

单元格

<td>

表格中的单元格%20rowspan合并行%20colspan合并列。

表单

<form>

method="post%20get"%20action="http://www.baidu.com/login.aspx"%20method提交方式%20action提交地址

文本框

<input>

type="text"%20name="name"%20value="value"%20size="20"%20maxlength="20"%20size长度%20maxlength最大长度

隐藏域

<input>

type="hidden"%20name="hidden"%20value=""

密码框

<input>

type="password"%20name="name"%20value="value"%20size="20"%20maxlength="20"

单选按钮

<input>

type="radio"%20name="name"%20value="value"%20checked="checked"%20name相同为一组%20value区分值%20单选

复选按钮

<input>

type="checkbox"%20name="name"%20value="value"%20checked="checked"%20name相同为一组%20value区分值%20多选

下拉列表

<select>

type="checkbox"%20name="name"%20size="4"%20下面加<option%20value="值">名</option>%20一组选择框

文本域

<textarea>

rows="1"%20cols="10"%20onpropertychange="this.style.posHeight=this.scrollHeight"

按钮

<button>

type="button%20submit%20reset"%20name="name"%20按钮%20submit%20提交当前表%20reset%20重置表单

框架

<iframe>

<iframe%20name%20=%20″”%20src=””%20width=””%20allowtransparency=”true”
scrolling=”no”%20frameborder=”0″%20/>%20插入框架

背景颜色

Bgcolor

<body%20bgcolor="#666"%20/>

背景图片

BgcGround

<body%20Background="bg.gif"%20/>

CSS%20BFC(Block%20Formatting%20Context),bfcformatting

BFC的定义
是%20W3C%20CSS%202.1
规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
在创建了%20Block%20Formatting%20Context
的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于
‘margin’%20特性。在%20Block%20Formatting%20Context
中相邻的块级元素的垂直边距会折叠(collapse)。

在%20Block%20Formatting%20Context
中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边),
即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的
Block%20Formatting%20Context%20。

常用技巧

禁止选取%20复制 <body%20onselectstart="return%20false">
10秒后跳转 <meta%20http-equiv="Refresh"%20content="10;URL=http://www.baidu.com"%20/>
ico图标 <link%20rel="Shortcut%20Icon"%20href="favicon.ico"%20>
背景音乐 <bgsound%20src="音乐url"%20loop="-1">
首页 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<a%20href="#"%20%20onclick=this.style.behavior='url(#default#homepage)';%20this.setHomePage('http://链接');%20>设为首页</a>
收藏夹 <a%20href="Javascript%20:window.external.addFavorite('http://链接','说明');"%20>%20加入收藏夹</a>

%20HTML%20超文本标记语言(Hyper%20Text
Markup%20Language)。%20用来描述网页的一种语言。%20HTML标签
由尖括号包围的关键词。%20如:html%20通常是…

BFC到底是什么?

当涉及到可视化布局的时候,Block%20Formatting
Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。

怎样才能形成BFC

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell,%20table-caption,%20inline-block中的任何一个。
  • position的值不为relative和static。

发表评论

电子邮件地址不会被公开。 必填项已用*标注