https://www.cnblogs.com/longhai3/longhai

HTML>>笔记002

Posted on 2022-02-13 01:21  凡是过去，皆为序曲  阅读(27)  评论(0)  编辑  收藏  举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body { margin:0; font-family:"宋体"; font-size:12px;}
a { text-decoration:none; color:#000;}
h1,h2,h3,h4,h5,h6,p,ul,li { margin:0}

.all { width:310px; border:1px solid #999; padding:15px;
margin:50px auto; position:relative; overflow:hidden; float:left;}
.fly { position:absolute; left:0; top:0; }
.all h3 { line-height:1.5em; margin-top:20px;}
.all .box { margin-top:20px;}
.all .box .p1{ float:left;}
.all .box .p2{ float:right; width:80px; text-align:right;}

a { color:#666;}
a:hover { color:#C60;}

.all .box .p1 .z1 { font-weight:bold; color:#F00; font-size:2em;}
.all .box .p2 .z2 { color:#F00;}
#b03 { width:1026px; border:1px solid #F00; overflow:hidden;}
</style>
</head>
<body>

<!--<style type="text/css">
body { margin:0; font-family:"宋体"; font-size:12px;}
a { text-decoration:none; color:#000;}
h1,h2,h3,h4,h5,h6,p,ul,li { margin:0}
.all { width:310px; border:1px solid #999; padding:15px;
margin:50px auto; position:relative; overflow:hidden;}
.fly { position:absolute; left:0; top:0; }
.mid00 { font-size:14px; padding:20px 0;}
.p1{ float:left; padding-top:10px;}
.p2{ float:right; width:80px; text-align:right;}
#z1 { font-weight:bold; color:#F00; font-size:2em;}
#z2 { color:#F00;}
</style>
<div class="all">
<div class="fly"><span class="fd0"><img src="images/top_tu.gif"></span></div>
<div><img src="images/adv.jpg"></div>
<div class="mid00">【12店通用】领航冰品哈根达斯：冰淇潜双球，口味任选2种，节假通用</div>
<div class="p1"><span id="z1">&yen;20.8</span>&nbsp;原价&yen;38</div>
<div class="p2"><img src="images/see.jpg"><span id="z2">32</span>人已购买</div>
</div> -->

<div id="b03">
<div class="all">
<span class="fly"><img src="images/top_tu.gif"></span>
<a href="#"><img src="images/adv.jpg"></a>
<h3><a href="#">
【12店通用】领航冰品哈根达斯：冰淇潜双球，口味任选2种，节假通用
</a></h3>
<div class="box">
<p class="p1"><span class="z1">&yen;20.8</span>&nbsp;原价&yen;38</p>
<p class="p2"><img src="images/see.jpg"><span class="z2">32</span>人已购买</p>
</div>
</div>
<div class="all">
<span class="fly"><img src="images/top_tu.gif"></span>
<a href="#"><img src="images/adv.jpg"></a>
<h3><a href="#">
【12店通用】领航冰品哈根达斯：冰淇潜双球，口味任选2种，节假通用
</a></h3>
<div class="box">
<p class="p1"><span class="z1">&yen;20.8</span>&nbsp;原价&yen;38</p>
<p class="p2"><img src="images/see.jpg"><span class="z2">32</span>人已购买</p>
</div>
</div>
<div class="all">
<span class="fly"><img src="images/top_tu.gif"></span>
<a href="#"><img src="images/adv.jpg"></a>
<h3><a href="#">
【12店通用】领航冰品哈根达斯：冰淇潜双球，口味任选2种，节假通用
</a></h3>
<div class="box">
<p class="p1"><span class="z1">&yen;20.8</span>&nbsp;原价&yen;38</p>
<p class="p2"><img src="images/see.jpg"><span class="z2">32</span>人已购买</p>
</div>
</div>
<div class="all">
<span class="fly"><img src="images/top_tu.gif"></span>
<a href="#"><img src="images/adv.jpg"></a>
<h3><a href="#">
【12店通用】领航冰品哈根达斯：冰淇潜双球，口味任选2种，节假通用
</a></h3>
<div class="box">
<p class="p1"><span class="z1">&yen;20.8</span>&nbsp;原价&yen;38</p>
<p class="p2"><img src="images/see.jpg"><span class="z2">32</span>人已购买</p>
</div>
</div>
</div>
</body>
</html>

======================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout {width:600px; margin:auto;}
#layout ul li { width:85px; float:left; margin:20px 0 0 20px; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>

</head>

<body>
<div id="layout">
<ul>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.jpg" width="81" height="54" />三亚</a></li>

</ul>
</div>
</body>
</html>

==============================================================================

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
p {
color:red;
font-size:20px;
}
h2 {
}
</style>
<style type="text/css">
h2{
color:red;
font-size:18px;}
.c0{
color:red;
font-weight:100;}
#a1{
text-decoration:underline;}
*{font-size:20px; color:red;}
</style>
</head>

<body>
<p class="c0"></p>
<p id="a1"></p>
<ul type="disc">
<li type="square">春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<hr>
<ol type="A" start="3">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol>
<hr>
<dl>
<dt>茶</dt>
<dd>崂山</dd>
<dd>西湖</dd>
<dt>咖啡</dt>
<dd>雀</dd>
<dd>摩卡</dd>
</dl>
<hr>、
z
<hr>
</body>
</html>

随心，随记

https://www.cnblogs.com/w1hg/331817