HTML+CSS项目课3：利用DIV+CSS制作网页（世赛服装网）

其他 2019-02-22 12:20:56 阅读次数: 0
版权声明：王迪 https://blog.csdn.net/dnruanjian/article/details/85228973

用到的知识点：
1、DIV+CSS布局
2、相对定位、绝对定位
3、CSS精灵的使用（共用背景图像，然后定位xy数值）
4、浮动塌陷的清除（在父级div添加一对空的div，并对其clear:both）

网页效果图：

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>NAUTICA</title>
<link rel="stylesheet" style="text/css" href="index.css" />
</head>

<body>
<div id="head"><!--头部菜单-->
	<div class="menu">
        	<ul>
            	<li><a href="#">Sign-in/Register</a></li>
                <li><a href="#">Customer Service</a></li>
                <li><a href="#">Track Order</a></li>
                <li><a href="#">My Account</a></li>
            </ul>
            <div class="menu-r"><a href="#"><img src="images/bag.png" />My Shopping Bag:0 Items(<font color="#FFFF00">$0.00</font>)</a></div>
    </div>
    
    <div class="head-z">
        <div class="navigation"><!--导航-->
        	<ul>
            	<li><a href="#"><font color="#FFFF00">Men</font></a></li>
                <li><a href="#">Women</a></li>
                <li><a href="#">Kids</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Watches</a></li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Ocean2Ocean</a></li>
            </ul>
        </div>
        <div class="logo"><img src="images/brand.png" /></div><!--logo-->
        
        <div class="search"><!--查找框-->
        <input type="text"/>
        <a href="#"><div>GO</div></a>
        </div>
        
        <div class="discount"><!--优惠区-->
        	<div class="sale">
            	<p class="p1">50<font size="6">%</font></p>
                <p class="p2">Natucia a morden America<br/>classic,offers quality...</p>
            </div>
            <div class="sale-t">
                <img src="images/shadow.png" /><img src="images/shadow.png" />
            </div>
            <div class="sale-l"><img src="images/banner_1.png" /></div>
        
        </div>
      </div>
        

    <div class="button">
        	<ul>
            	<li>●</li>
                <li>●</li>
                <li>●</li>
            </ul>
    </div>
    
</div>

<div id="zhong">
	<div class="left">
    	<dl>
        	<dt><a href="#">FATHER'S DAY GIFT GUIDE<img src="images/goods_nav.png" /></a></dt>
            <dd><a href="#">All Gifts</a></dd>
            <dd><a href="#">Men's Swim Shop</a></dd>
            <dd><a href="#">Father & Son</a></dd>
            <dd><a href="#">Gifts Under $75</a></dd>
            <dt><a href="#">FATHER'S DAY GIFT GUIDE<img src="images/goods_nav.png" /></a></dt>
            <dd><a href="#">All Gifts</a></dd>
            <dd><a href="#">Men's Swim Shop</a></dd>
            <dd><a href="#">Father & Son</a></dd>
            <dd><a href="#">Gifts Under $75</a></dd>
            <dd><a href="#">All Gifts</a></dd>
            <dd><a href="#">Men's Swim Shop</a></dd>
            <dd><a href="#">Father & Son</a></dd>
            <dd><a href="#">Gifts Under $75</a></dd>
            <dt><a href="#">FATHER'S DAY GIFT GUIDE<img src="images/goods_nav.png" /></a></dt>
            <dd><a href="#">All Gifts</a></dd>
            <dd><a href="#">Men's Swim Shop</a></dd>
            <dd><a href="#">Father & Son</a></dd>
            <dd><a href="#">Gifts Under $75</a></dd>
            <dd><a href="#">All Gifts</a></dd>
            <dd><a href="#">Men's Swim Shop</a></dd>
            <dd><a href="#">Father & Son</a></dd>
            <dd><a href="#">Gifts Under $75</a></dd>
        	<dt><a href="#">FATHER'S DAY GIFT GUIDE<img src="images/goods_nav.png" /></a></dt>
            <dd><a href="#">All Gifts</a></dd>
            <dd><a href="#">Men's Swim Shop</a></dd>
        	<dt><a href="#">FATHER'S DAY GIFT GUIDE<img src="images/goods_nav.png" /></a></dt>
            <dd><a href="#">All Gifts</a></dd>
            <dd><a href="#">Men's Swim Shop</a></dd>
            
        </dl>
    </div>
    
    <div class="right">
    	<div class="title">
        	<dl>
            	<dt>New</dt>
                <dd class="title1">FEATURED</dd>
                <dd class="title2"><a href="#">more>></a></dd>
            </dl>
        </div>
        <ul class="product">
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        </ul>
    	<div class="title">
        	<dl>
            	<dt>New</dt>
                <dd class="title1">FEATURED</dd>
                <dd class="title2"><a href="#">more>></a></dd>
            </dl>
        </div>
        <ul class="product">
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        </ul>
        <ul class="product">
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        	<li>
            	<dl>
                	<dt>$49.50</dt>
                    <dd>Fine Strip Polo</dd>
                    <dd>★★★☆</dd>
                    <dd><img src="images/new.png" /></dd>
                </dl>
                <div class="tu"><img src="images/goods_1.png" /></div>
                <div class="buy">Buy</div>
                <div class="free"><p>Free shipping on all orders<br />$50+**</p></div>
            </li>
        </ul>
        
    </div>
  <div class="clearfloat"></div>
</div>



<div id="foot"><!--底部-->
	<div class="dao"><!--底部导航-->
    	<ul>
            <li>Corporate Responsibility | </li>
            <li>Privacy Policy | </li>
            <li>Terms and Conditions | </li>
            <li>Affilates | </li>
            <li>Careers | </li>
            <li>Sitemap </li>
        </ul>
    </div>
    <div class="shop">
    	<dl>
        	<dt>SHOP</dt>
            <dd>Men</dd>
            <dd>Women</dd>
            <dd>Kids</dd>
            <dd>Home</dd>
            <dd>Watches</dd>
            <dd>Gifts Certificates</dd>
            <dd>Sale</dd>
        </dl>
    </div>
    <div class="help">
    	<dl>
        	<dt>HELP</dt>
            <dd>Customer Service</dd>
            <dd>Contact Us</dd>
            <dd>About Nautica</dd>
            <dd>Watch Information</dd>
        </dl>
    </div>
    <div class="offer">
    	<dl>
        	<dt>OFFERS BY EMAIL</dt>
            <dd><input type="text" placeholder="Your email address" /><div>SUBMIT</div></dd>
            <dd class="strong">SIGN UP FOR NAUTICA TEXT ALERTS></dd>
            <dd>STORE LOCATOR</dd>
            <dd>Find a Store</dd>
        </dl>
    </div>
    <div class="COMMUNITY">
    	<dl>
        	<dt>COMMUNITY</dt>
            <dd class="tu1"></dd>
            <dd class="tu2"></dd>
            <dd class="tu3"></dd>
            <dd class="tu4"></dd>
            <dd class="tu5"></dd>
        </dl>
    </div>
    <div class="clearfloat"></div>
</div>

<div id="copuright">©2013 NAUTICA </div>
</body>

</body>
</html>

CSS样式：

@charset "utf-8";
/* CSS Document */

*{margin:0 auto; padding:0px;}
a:link {color:#FFF; text-decoration:none;}
#head,#foot,#copuright{ width:1440px;}

/*头部*/
#head{background-image:url(images/bg.png); height:450px; overflow:hidden;}
#head ul li { list-style-type:none; float:left; margin-right:30px;}
 /*头部菜单栏*/
 .menu {font-size:12px; background-color:rgba(0,0,0,0.3); padding-left:170px; height:30px; padding-top:5px;}
 .menu ul li{ list-style-image:url(images/goods_nav.png);}
 .menu div { margin-right:150px; float:right;}

 /*头部中间部分*/
 .head-z{height:390px; margin:0px 150px; position: relative;}
 /*头部导航栏*/
 .navigation{float:left; font-size:20px; padding-top:5px;width:900px;}

 /*logo*/
 .logo{margin-top:50px;float:left;}

 /*查找框*/
 .search{ float:left;position:absolute; left:20px; top:300px;}
 .search input {height:40px; width:300px; float:left;}
 .search div {background-color:#F00; padding:2px; height:40px; font-size:24px; float:left;}

 /*优惠区*/
 .discount {float:right; margin-top:80px; position:bsolute;}
	.sale { float:left; position:absolute; top:120px; left:550px; z-index:1;}
	  .p1 {color:#FF0; font-size:80px;}
	  .p2 {color:#FFF;}
	.sale-t{ float:right;}
	.sale-t img{ margin-left:60px;}
	.sale-l img{ position:absolute; top:36px; left:740px; z-index:2;}

 /*底部按钮*/
 .button{background-color:rgba(0,0,0,0.3); height:30px;}
 .button ul{ margin:0 auto; width:200px; color:#FFF;}

/*中间内容部分*/
#zhong{ width:1250px; margin-top:10px;}
#zhong a:link { color:#000;}
dt,dd,li{ list-style-type:none; }
/*中间内容-左边样式*/
.left{float:left;}
.left dt {font-size:16px; background-color:#999; height:30px; line-height:30px; margin:20px 0px 0px 10px;}
.left dt img{ margin-left:30px;}
.left dd{ margin:5px 20px;}
/*中间内容-右边样式*/
.right{float:right;margin-left:10px;}
  /*中间内容-右边-标题样式*/
  .title{height:40px;margin:20px 20px 20px 10px; border-bottom:1px #666 solid; line-height:40px;}
  .title dt,.title dd{float:left; margin-right:10px;}
  .title dt{ font-size:36px; color:#F30;}
  .title1{ font-size:16px; color:#999; }
  .title2{ font-size:10px; color:#CCC; margin-left:600px;}
  /*中间内容-右边-图片样式*/
  .product{ height:300px; margin:20px 0px;}
   .product li{position:relative; float:left; margin:10px;}
   .product dl { float:left;}
     .product dl dt{ font-size:24px; color:#F00; margin-bottom:20px;}
  .tu {float:right;}
  .buy{background-color:#15496b; width:70px; height:70px; border-radius:50%; font-size:30px; line-height:70px; color:#FFF; text-align:center; position:absolute;top:190px; left:190px;}
  .free{font-size:14px; position:absolute; left:0px; top:230px; color:#999;}
.clearfloat{ clear:both;}

/*底部样式*/
#foot{ width:1250px;  color:#666; margin-top:100px;}
#foot dt{ font-size:18px; }
#foot dd{ margin-top:10px; font-size:14px;}
/*底部-导航样式*/
.dao ul li{ float:left;}
.dao {border-bottom:1px #999 solid; height:30px; margin-bottom:30px; padding-bottom:20px;}
.dao ul{ margin-left:250px;}
/*底部-菜单导航样式*/
.shop{ width:300px; float:left; margin-left:30px;}
.shop dl dd { float:left; width:140px;}

.help{ float:left; margin-left:30px;}
.offer{ float:left;  margin-left:60px; width:300px;}
 .offer dd{ height:20px;}
 .offer input{ float:left;}
 .offer div{ float:left; background-color:#006; width:80px; text-align:center; color:#FFF;}
 .strong{ font-weight:bold;}
/*底部-菜单导航-CSS精灵样式*/
.COMMUNITY{ float:left; margin-left:60px; width:300px;}
.COMMUNITY dl dd{ background-image:url(images/global_sprite.png); background-repeat:no-repeat;width:32px; height:34px; float:left; margin-right:10px;}
.tu1{ background-position:0px -36px;}
.tu2{ background-position:-32px -36px;}
.tu3{ background-position:-64px -36px;}
.tu4{ background-position:-96px -36px;}
.tu5{ background-position:-128px -36px;}
/*底部-版权样式*/
#copuright{ background-color:#036; text-align:center; margin-top:100px;}


用到的CSS样式：
1、颜色透明：rgba（如background-color:rgba(0,0,0,0.3);）
2、圆形图：设置宽高以后，设置border-radius:50%
3、ul居中
4、图片叠加（z-index属性）

================================这里是结束分割线====================================

猜你喜欢

转载自blog.csdn.net/dnruanjian/article/details/85228973
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022