第一个比较完整的但是乱七八糟的网页

原创 于 2016-12-22 11:31:25 发布 · 782 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文分享了一个使用纯CSS和HTML实现的网站案例，包括下拉菜单、图片展示及过渡效果等，通过实战提高基本技能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

之前看完html之后看了css再看了css3.

然后着急想试一下。

试玩之后发现，还是基本功扎实一点好呀。

纯CSS+html

这次就是单纯为了实现而实现。我也还没有这个能力考虑性能啥的。

写的很乱，css啥的比较乱。。。想找人指点但是太乱了都不敢拿出来。

瞅着乐一下。

ps：之前知乎看了css大神，今天看了谦谦大神的flv.js，没看懂，觉得自己真是连皮毛都还没学到。。。

ppps：人活一世真的不能只会一件事，世界太精彩了。

ppppps：我看完html和css之后感觉好迷茫 !???如何进阶??

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="refresh" content="5"/>
<title>PRODUCT DETAIL</title>
<style type="text/css">

body{font-family:Palatino,Georgia,Courier,Arial,微软雅黑;}
#head{height:70px;}
#logo{float:left;}
#Menu a{text-decoration:none;width:100%;}
#Menu a:link,a:visited,a:hover{color:#B8B8B8;}
#Menu a:active{color:black;}
.dropdown{float:right;font-size:19px;margin-right:60px;margin-top:10px;width:200px;text-align:center;}
.dropdowncontent{background-color:white;width:100%;display:none;}
.dropdowncontent a{width:100%;font-size:18px;display:inline-block;padding-top:5px;padding-bottom:5px;border:1px solid #F0F0F0;}
.dropdown:hover .dropdowncontent{display:block;}
.fenge{height:auto;text-align:center;}
#content{width:auto;height:auto;}
#company{width:auto;height:750px;}
.company_content{position:absolute;margin-top:10px;margin-left:25px;width:600px;height:375px;}
.company_introduce{position:absolute;text-align:center;display:none;width:400px;height:300px;margin-left:100px;margin-top:40px;background-color:white;opacity:0.6;}
.company_content:hover .company_introduce{display:block;}
.company_content1{margin-top:10px;position:absolute;margin-left:670px;width:600px;height:701px;}
.company_introduce1{position:absolute;text-align:center;display:none;width:400px;height:300px;margin-left:100px;margin-top:200px;background-color:white;opacity:0.6;}
.company_content1:hover .company_introduce1{display:block;}
.company_content2{text-align:center;position:absolute;border:2px dotted #B8B8B8;margin-top:400px;margin-left:25px;width:600px;height:300px;}
.company_content2 ul{color:#B8B8B8;list-style:none;line-height:30px;}
.brand_content{text-align:center;border-radius:150px;position:relative;border:1px solid white;width:300px;height:300px;}
.brand_content div{margin-top:110px;font-size:50px;color:#888888;}
.brand_content:hover{animation:myfirst 5s;-webkit-animation:myfirst 5s; }
@keyframes myfirst
{
	0% {transform:rotateY(0deg);}
	50%{transform:rotateY(180deg);}
	100% {transform:rotateY(360deg);}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0% {transform:rotateY(0deg);}
	50%{transform:rotateY(180deg);}
	100% {transform:rotateY(360deg);}
}
.brand_content1{width:300px;height:300px;position:relative;border:1px solid white;}
.brand_content1 p{color:#888888;text-align:center;line-height:30px;}
.furniture_content{float:left;width:400px;height:400px;margin-left:20px;margin-top:20px;}
.furniture_class{width:250px;height:250px;background:white;opacity:0.7;margin-top:50px;margin-left:75px;}
.furniture_class>p{font-size:30px;text-align:center;color:#888888;}
#painting{height:600px;}
.painting_1{background:url(painting6.jpg) no-repeat;background-size:300px 380px;width:300px;height:380px;transition:width 2s,height 2s; -webkit-transition: width 2s, height 2s;}
.painting_2{display:block;position:relative;top:-380px;left:320px;background:url(painting3.jpg) no-repeat;background-size:300px 380px;width:300px;height:380px;transition:width 2s,height 2s; -webkit-transition: width 2s, height 2s;}
.painting_3{display:block;position:relative;top:-763px;left:630px;background:url(painting2.jpg) no-repeat;background-size:300px 380px;width:300px;height:380px;transition:width 2s,height 2s; -webkit-transition: width 2s, height 2s;}
.painting_4{display:block;position:relative;top:-1144px;left:950px;background:url(painting4.jpg) no-repeat;background-size:300px 380px;	width:300px;height:380px;transition:width 2s,height 2s; -webkit-transition: width 2s, height 2s;}
.painting_1:hover{width:400px;height:500px;background-size:400px 500px;}
.painting_2:hover{width:400px;height:500px;background-size:400px 500px;}
.painting_3:hover{width:400px;height:500px;background-size:400px 500px;}
.painting_4:hover{width:400px;height:500px;background-size:400px 500px;}
#upbutton a:link{color:#888888;}
#foot{text-align:center;color:#888888;height:200px;}
.copyright,.contactus,.morelink{ width:380px;height:200px;border:1px solid white;}
.copyright{margin-left:20px;}
#foot ul{font-size:12px;list-style:none;}
.contactus{position:relative;left:460px;top:-200px;}
.morelink{position:relative;left:900px;top:-402px;}

</style>

</head>

<body>
<div id="head">
     <div id="logo">
	    <img src="brand.png" alt="Brand" />
		<strong style="font-size:2px;font-style:oblique;font-family:STXingkai">Sun Lee</strong>
	 </div>
     <div id="Menu">
          <ul>
          	<div class="dropdown">
			   <a href="#">More Products</a>
			   <div class="dropdowncontent">
			       <a href="#furniture">Furniture</a>
				   <a href="#painting">Painting</a>
			   </div>
			</div>
			<div class="dropdown">
			   <a href="#">The Brands</a>
			   <div class="dropdowncontent">
			       <a href="#brands">LEMA</a>
				   <a href="#brands">Poliform</a>
				   <a href="#brands">B&B </a>
				   <a href="#brands">Varenna</a>
			   </div>
			</div>
			<div class="dropdown">
			   <a href="#">About Us</a>
			   <div class="dropdowncontent">
			       <a href="#company">Our Company</a>
				   <a href="#brands">Our Brands</a>
			   </div>
			</div>  
          </ul>
     </div>
</div>
<br />
<br />
<br />
<div id="content">
	<div id="aboutus">
	    <div id="company">
		    <div class="fenge">
				<div style="width:80px;height:60px;margin-left:48%;">
				    <img src="brand24.png" alt="" />
					<strong>Company</strong>
				</div>
				<hr/>
			</div>
			<div >
			    <div class="company_content" style="background:url(BB4.jpg);">
				    <div class="company_introduce">
					    <p>Company Intruduction:I dont know how to say. But 
						this company must be awesome.So add some information here.
						</p>
					</div>
				</div>
				<div class="company_content1" style="background:url(BB1.jpg);">
				    <div class="company_introduce1">
					    <p>Company Intruduction:I dont know how to say. But 
						this company must be awesome.So add some information here.
						</p>
					</div>
				</div>
				<div class="company_content2">
				    <ul> Our Company
				    	<li>Many brands like:B&B,IKEA,Varenna</li>
				    	<li>Many products like Chair,Table</li>
				    	<li>Many desingers like Jonny,Mike</li>
				    	<li>Many advantages like blablabla</li>
				    </ul>
					
				</div>
			</div>
		</div>
		<br />
		<br />
		<br />
		<div id="brands" style="height:700px;">
		    <div class="fenge">
				<div style="width:80px;height:60px;margin-left:48%;">
				    <img src="brand24.png" alt="" />
					<strong>Brands</strong>
				</div>
				<hr/>
			</div>
			<div class="brand_content" style="top:0px;left:10px;background:url(BB3.jpg) no-repeat;background-position:-190px -90px;"><div>B&B</div></div>
			<div class="brand_content" style="top:-300px;left:330px;background:url(Poliform2.jpg) no-repeat;background-position:-120px -10px;"><div>Poliform </div></div>
			<div class="brand_content" style="top:-602px;left:650px;background:url(varenna1.jpg) no-repeat"><div>Varenna </div></div>
			<div class="brand_content" style="top:-904px;left:970px;background:url(lema3.jpg) no-repeat;background-position:-150px -60px;"><div>LEMA</div></div>
		     <div class="brand_content1" style="top:-870px;left:10px;">
			      <p><strong>B&B</strong></p>
				  <p>B&B Italia produce and offer quality contemporary furniture, outdoor funirture and office furniture </p>
			 </div>
		     <div class="brand_content1" style="top:-1170px;left:330px;">
			 <p><strong>Poliform</strong></p>
				  <p>Poliform e Varenna sono tra i marchi protagonisti della prima edizione del “Salone del Mobile.Milano Shanghai”. L’evento, di grande rilevanza ...</p>
			 </div>
		     <div class="brand_content1" style="top:-1470px;left:650px;">
			      <p><strong>Varenna</strong></p>
				  <p>Video dello spazio Poliform alla 55a edizione del Salone del Mobile di Milano. DESIGNERS ON STAGE Un dialogo costante tra realtà differenti, </p>
			 </div>
		     <div class="brand_content1" style="top:-1770px;left:980px;">
			      <p><strong>LEMA</strong></p>
				  <p>B&B Italia produce and offer quality contemporary furniture, outdoor funirture and office furniture </p>
			 </div>
		</div>
	</div>
	
	<div id="products" style="height:2000px;">
		<div id="furniture" style="height:1400px;">
		    <div class="fenge">
				<div style="width:80px;height:60px;margin-left:48%;">
				    <img src="brand24.png" alt="" />
					<strong>Furniture</strong>
				</div>
				<hr/>
			</div>
			<div class="furniture_content" style="background:url(BB3.jpg)">
			     <div class="furniture_class">
				 <p>Light</p>
				 <p>I dont know how to describe a lamp,but all you need is just  click the link.</p>
				 </div>
			</div>
			<div class="furniture_content" style="background:url(BB2.jpg)"></div>
			<div class="furniture_content" style="background:url(Varenna3.jpg) no-repeat;background-position:-30px 0px;">
			     <div class="furniture_class">
				 <p>Kitchen</p>
				 <p>I dont know how to describe a kitchen,so add some information here.</p>
				 </div>
			</div>
			<div class="furniture_content" style="background:url(Varenna3.jpg) no-repeat; background-position:-30px;"></div>
			<div class="furniture_content" style="background:url(LEMA2.jpg) no-repeat;background-position:-160px -230px;">
			     <div class="furniture_class">
				 <p>Sofa</p>
				 <p>I dont know how to describe a sofa,but all you need is just  click the link.</p>
				 </div>
			</div>
			<div class="furniture_content" style="background:url(LEMA1.jpg) no-repeat;background-position:-50px -180px;"></div>
			<div class="furniture_content" style="background:url(LEMA5.jpg)">
			     <div class="furniture_class">
				 <p>Table</p>
				 <p>I dont know how to describe a table,but all you need is just  click the link.</p>
				 </div>
			</div>
			<div class="furniture_content" style="background:url(LEMA3.jpg)"></div>
			<div class="furniture_content" style="background:url(poliform3.jpg) no-repeat;background-position:-100px;">
			     <div class="furniture_class">
				 <p>Wardrobe</p>
				 <p>I dont know how to describe a wardrobe,but all you need is just  click the link.</p>
				 </div>
			</div>
			
			
		</div>
		<div id="painting">
		      <div class="fenge">
				<div style="width:80px;height:60px;margin-left:48%;">
				    <img src="brand24.png" alt="" />
					<strong>Painting</strong>
				</div>
				<hr/>
			  </div>
		      <div id="tupianzhanshi" style="margin-left:20px;">
			       <div class="painting_1">
				   </div>  
				   <div class="painting_2">
				   </div>  
				   <div class="painting_3">
				   </div>  
				   <div class="painting_4">
				   </div>    
			  </div>
		</div>
	</div>
</div>
<div id="upbutton" style="width:30px;height:30px;position:fixed;left:10px;bottom:10px;">
<a href="#head" style="text-align:center;list-style:none;text-decoration:none;"><img src="brand24.png" alt="" /></a>
</div>
<div id="foot">
     <hr/>
	    <div class="copyright">
		     <p>Copyright</p>
			 <ul>
			 	<li>Copyright (C) 2016 bbcompany. All Rights Reserved.</li>
			 	<li>@author mememememli</li>
			 </ul>
		</div>
	    <div class="contactus">
		     <p>Contact Us</p>
			 <ul>
			 	<li>Tel:12345567890</li>
			 	<li>E-mail:awesome@gmail.com</li>
				<li>Address:where street which building</li>
			 </ul>
		</div>
	    <div class="morelink">
		      <p>More Information</p>
			  <ul>
			  	<li>maybe you can check baidu</li>
			  	<li>i dont want to add a href</li>
			  	<li>that's the end of the website</li>
			  </ul>
			  </div>
</div>
</body>


1.没啥东西，就是一个下拉菜单，图片还没截出来。

2.还有图片是鼠标过去显示中间的透明小块。

啊~图片都是从知乎上来的，侵删!


3.css3D动画效果，hover过去就转动。



4.这个也没啥了。就是过渡效果。。嘿嘿嘿


The End

fleetingevent
关注
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值