CSS——我的第一个网站

来源：互联网发布：淘宝充值赚客吧编辑：程序博客网时间：2024/06/05 16:43

<html>
<head>
<meta charset="UTF-8">
<title>行走中的美食</title>
<style>
body{
background:url(小清新1.jpg);
font-size:13px ;
cursor: url('胡萝卜.png')16 16,auto;
}
a:link,a:visited{
text-decoration: none;
display: block;

}
a:hover{
background-color: pink;
font-size: 20px;
cursor: url('西红柿.png')16 16,auto;
}
#A{
width: 802px;
height: 1200px;
margin: 0px auto;
}
#huanyingye img{
width: 802px;
}
#daohang{
border: 1px solid yellow;
width: 802px;
height: 33px;
margin-top:0px;
}
#daohang ul {
border: 1px solid white;
list-style: none;
height: 33px;
margin-top:0px;
margin-bottom: 0px;
padding:0px;
}
#daohang ul li{
float:left;
text-align: left;
width: 100px;
}
#daohang ul li a{
list-style: none;
display: block;
color: black;
background: url(b导航栏背景.jpg);
text-decoration: none;
line-height: 33px;
}
#daohang>ul>li>a:link,a:visited{
text-decoration: none;
display: block;

}
#daohang>ul>li>a:hover{
background: url(b导航栏背景2.jpg) 0px;
font-size: 14px;
cursor: url('西红柿.png')16 16,auto;
}
#daohang>ul>li>a:active{
font-size: 16px;
text-decoration: none;
}
#left{
width:250px;
height:100%;
float: left;
text-align: left;
padding-top: 0px;
padding-bottom:20px ;
}
#meishixiaotieshi{
border: 1px solid white;
background: url(b美食小贴士.jpg);
width: 250px;
height: 180px;
margin: 0px;
}
#meishixiaotieshi h3{
font-size: 20px;
font-weight: bold;
background: url(小南瓜.png) no-repeat 20px 5px;
text-align: center;
padding-top: 15px;
color: white;
margin-top: 0px;
}
#meishixiaotieshi ul li{
font-size: 18px;
}
#meishixiaotieshi ul li a{
color: white;
}
#yiguofengqing{
border: 1px solid white;
background: url(b美食小贴士.jpg);
width: 250px;
height: 1017px;
text-align: center;
}
#yiguofengqing h3{
padding-top: 15px;
font-size: 20px ;
font-weight: bold;
background: url(小南瓜.png) no-repeat 20px 5px;
color: white;
margin-top: 0px;
}
#yiguofengqing ul li{
list-style-type: none;
padding-right: 20px;
}
#yiguofengqing ul li a{
font-size: 18px;
font-weight: bold;
color: white;
}
#yiguofengqing ul li a img{
width: 180px;
height: 130px;
text-align: center;
}
#center{
width: 300px;
height: 100%;
text-align: center;
float: left;
margin: 0px；
}
#geleimeishi img{
border: 5px solid pink;
width: 330px;
height: 250px;
margin:0px 2px;
padding: 5px;
}
#sijimeishi{
border: 1px solid white;
width: 350px;
height: 305px;
clear: both;
background: url(b美食小贴士.jpg);
margin-left: 2px;
}
#sijimeishi h3{
width: 350px;
height: 40px;
font-size: 20px ;
font-weight: bold;
background: url(小南瓜.png) no-repeat 20px 5px;
color: white;
padding-top: 15px;
margin-top: 0px;
}
#sijimeishi img{
width: 150px;
height: 100px;
padding-bottom: 10px;
float: left;
margin: 0px 11px;
}
#cantingtuijian{
background: url(b美食小贴士.jpg);
border: 1px solid white;
width: 350px;
height: 620px;
margin-left: 2px;
}
#cantingtuijian h3{
width: 350px;
height: 30px;
background: url(小南瓜.png) no-repeat 20px 5px;
color: white;
padding:10px 10px;
margin: 0px;
text-align: center;
font-size: 20px;
}
#cantingtuijian a{
font-size: 18px;
font-weight: bold;
color: black;
text-decoration: none;
}
#cantingtuijian a img{
border: 2px dotted white;
width: 330px;
height: 260px;
padding: 0px;
margin: 5px 10px;
}
#cantingtuijian ul{
list-style: inside;
text-align: left;
padding:0px 5px;
margin: 0px;
}
#right{
float: right;
width: 200px;
}
#jinrichufang{
border: 1px solid white;
background: url(b美食小贴士.jpg);
width: 200px;
height: 1197px;

}
#jinrichufang h3{
text-align: center;
font-weight: bolder;
background: url(小南瓜.png) no-repeat 10px 5px;
color: white;
font-size: 20px;
padding-top: 15px;
margin:0px;
}
#jinrichufang p{
text-align: center;
font-weight: bold;
color: black;
font-size: 18px;
margin: 0px;
padding: 5px 0px;
}
#jinrichufang img{
border: 2px solid white;
width: 180px;
height: 120px;
padding:0px;
margin: 7px;
}
#jinrichufang ul{
list-style-type: none;
padding: 5px 10px;
margin: 5px;
}
#jinrichufang ul li{
padding: 5px 0px;
}
#bottom{
background: url(bottom.jpg) no-repeat;
width: 800px;
height: 30px;
clear:both;
text-align: center;
padding: 0px ;
margin: 0px;
}
#bottom p{
width: 802px;
height: 20px;
}
/*#left,#right,#bottom{
margin: 1px;
}*/
</style>
</head>
<body>
<a id="top">
<div id="A">

<div id="huanyingye">
<img src="b网页标头.jpg">
</div>

<div id="daohang">
<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>
<li><a href="#">甜品站</a></li>
<li><a href="#">美食信箱</a></li>
</ul>
</div>
<div id="left">
<div id="meishixiaotieshi">
<h3>美食小贴士</h3>
<ul>
<li><a href="#">深秋十月饮食五原则</a></li>
<li><a href="#">避开吃零食的四个误区</a></li>
<li><a href="#">熬夜时如何选择零食和水果</a></li>
<li><a href="#">最毁营养的食材做法</a></li>
</ul>
</div>
<div id="yiguofengqing">
<h3>异国风情</h3>
<ul>
<li><a href="#"><img src="y韩国拌饭.jpg"></a></li>
<li><a href="#">韩国拌饭</a></li>
<li><a href="#"><img src="y日本寿司.jpg"></a></li>
<li><a href="#">日本寿司</a></li>
<li><a href="#"><img src="y印度咖喱.jpg"></a></li>
<li><a href="#">印度寿司</a></li>
<li><a href="#"><img src="y泰国菠萝饭.jpg"></a></li>
<li><a href="#">泰国菠萝饭</a></li>
<li><a href="#"><img src="y意大利面.jpg"></a></li>
<li><a href="#">意大利面</a></li>
<li><a href="#"><img src="y西班牙海鲜饭.jpg"></a></li>
<li><a href="#">西班牙海鲜饭</a></li>
</ul>
</div>
</div>
<div id="center">
<div id="geleimeishi">
<img src="各类美食.jpg">
</div>
<div id="sijimeishi">
<h3>四季美食</h3>
<img src="s草莓派.jpg">
<img src="s冰激凌.jpg">
<img src="s麻辣小龙虾.jpg">
<img src="s烤红薯.jpg">
</div>
<div id="cantingtuijian">
<h3>餐厅推荐</h3>
<a href="http://www.krosnest.com"><img src="c乌巢披萨.jpg"><br/>乌巢披萨</a>
<p>     乌巢比萨主义主题餐厅（The Kro’s Nest）,是一家以纽约式大比萨为主餐，围绕“比萨主义”不断创新与研发各类美食的主题餐厅。永远站在餐厅潮流的尖端。乌巢美食种类包括：比萨、小吃、沙拉、甜点、汤、各种酒水。说起乌巢最大的特点可以算得上比萨的型号了，中号18寸，大号23寸，超大号28寸。共有15种风味，几乎涵盖了所有美味比萨品种。最值得一题的是“垃圾筒”比萨，乌巢厨房里所有好吃的东西都在这张比萨上。</p>
<ul>
<li>人均消费:85元</li>
<li>推荐菜品：乌巢pizza 反凯撒沙拉 BBQ鸡翅炸洋葱圈薯条垃圾桶pizza pizza 披萨洋葱圈厨房pizza 芝士薯条沙拉</li>
<li>地址：朝阳区工体北路4号院(近滚石）</li>
<li>电话：010-85236655</li>
<li>官方网站:<a href="http://www.krosnest.com">http://www.krosnest.com</a></li>
</ul>
</div>
</div>
<div id="right">
<div id="jinrichufang">
<h3>今日厨房</h3>
<img src="j黑胡椒红酒牛排.jpg">
<p>黑胡椒红酒牛排</p>
<ul>
<li>原料<br/>  牛排、红酒、黑胡椒、盐、黄油、红薯、柠檬汁、黄瓜。</li>
<li>做法<br/>  1、买回来的牛排，洗净了，放进保鲜袋里，用肉锤子砸一通；
2、双面撒上手磨黑胡椒粒，盐，倒入没过牛排三分之一的红酒腌半小时以上；
3、锅内放橄榄油，倒入切好的红薯块，小火慢煎熟，出锅，切黄瓜、柠檬摆盘；
4、放黄油一块，化了以后放入牛排，煎2分钟后翻面，煎2分钟后再翻面2分钟，盛盘；
5、泡牛排的汁倒入锅内，放少许玉米粉勾芡，做烘焙的那个，可不是熬玉米面糊糊的那个。汤汁收浓后，浇在牛排上。</li>
<li>注意<br/>  1、煎牛排怕老，也怕不熟
2、摆盘可以多种方式
3、冰酒要再低温下喝，放进冰箱冷藏一下，开瓶后等十分钟后再喝，口感更好</li>
</ul>
<img src="j百香果汁.jpg">
<p>百香果汁</p>
<ul>
<li>原料：<br/>  百香果两个，白糖蜂蜜适量</li>
<li>做法：<br/>  1.先把百香果的果肉挖出来。2.放到打汁机里，搅一下。3.放入容器里，加入白糖搅拌均匀。4.用温开水冲入，然后加入蜂蜜，一杯酸甜可口的百香果汁就做好了。</li>
</ul>
<img src="j水果沙拉.jpg">
<p>水果沙拉</p>
</div>
</div>
<div id="bottom">
<p>行走中的美食 ©版权所有<a href="www.XZZDMS.com">www.XZZDMS.com</a>
</p>
</div>
<center>
<a href="#top">置顶</a>
</center>
</body>
</html>

0 0