CSS3实战网页设计(4)

最新推荐文章于 2023-06-17 14:13:56 发布

蜗牛杨哥

最新推荐文章于 2023-06-17 14:13:56 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/u014635374/article/details/118821641

版权

html源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天马行空-时尚娱乐</title>
    <link href="style/div6-5.css" rel="stylesheet" type="text/css" />
    <link href="style/css6-5.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="box">
    <div id="top"><img src="images/logo.gif" width="222" height="57" class="float" /><img src="images/home.gif" width="48" height="27" /><img src="images/us.gif" width="69" height="27" /><img src="images/web.gif" width="54" height="27" /></div>
    <div id="menu"><img src="images/menu.gif" width="784" height="77" border="0" usemap="#Map" />
        <map name="Map" id="Map"><area shape="poly" coords="488,35,555,19,562,48,494,61" href="#" /><area shape="poly" coords="245,36,297,22,307,48,251,62" href="#" />
            <area shape="poly" coords="210,42" href="#" />
            <area shape="poly" coords="155,35,207,21,217,47,161,61" href="#" />
            <area shape="poly" coords="341,21,389,40,381,65,334,50" href="#" />
            <area shape="poly" coords="417,23" href="#" />
            <area shape="rect" coords="418,23,471,52" href="#" />
            <area shape="poly" coords="598,24,653,35,645,63,594,51" href="#" />
            <area shape="poly" coords="707,22,694,44,745,74,762,50" href="#" />
        </map>
        <img src="images/fls.gif" width="784" height="262" /></div>
    <div id="main">
        <div id="left"><img src="images/goide.gif" width="223" height="56" />
            <div id="left01">
                <p><img src="images/img.gif" width="79" height="50" /></p>
                <p>民众乐园</p>
                <p>首屈一指的新闻平台</p>
            </div>
            <img src="images/movie.gif" width="223" height="65" />
            <div id="left02">
                <p><img src="images/img01.gif" width="189" height="151" /></p>
                <p>《生死逃亡》上映时间8月30日</p>
            </div>
            <img src="images/shop.gif" width="223" height="65" />
            <div id="left03">
                <p><img src="images/img02.gif" width="189" height="122" /></p>
                <p class="font01">四月店</p>
                <p> 四月店主要经营，日本韩国流行服饰，同时本店还经营各种运动鞋和欧美流行玩具。</p>
            </div>
        </div>
        <div id="right">
            <div id="right01"> <img src="images/news.gif" width="510" height="28" />
                <dl>
                    <dt>三楼新民众乐园又将为大家奉献两款全新主题广场 </dt>
                    <dd>10-08-08</dd>
                    <dt>扮靓空间有多家美容、美发、美甲、化妆、文身……</dt>
                    <dd> 10-08-05</dd>
                    <dt>外地人若到武汉，必游民众乐园。</dt>
                    <dd>10-08-04</dd>
                    <dt> 民众乐园的生活 </dt>
                    <dd>10-08-03</dd>
                    <dt> COCOOL品牌个性：时尚、率性、青春…… </dt>
                    <dd>10-08-02</dd>
                    <dt>4月主要经营，日本韩国流行服饰。</dt>
                    <dd>10-08-01</dd>
                </dl>
            </div>
            <div id="right02"> <img src="images/tj.gif" width="510" height="20" />
                <div id="sp01">
                    <p><img src="images/img06.gif" width="110" height="105" /></p>
                    <p class="font02">秋季U2女装</p>
                    <p class="font03">￥：500</p>
                    <p>店铺：时尚前沿</p>
                    <p>铺号：2楼9号</p>
                </div>
                <div id="sp02">
                    <p><img src="images/img07.gif" width="110" height="105" /></p>
                    <p class="font02">秋季ITOJING套装</p>
                    <p class="font03">￥：350</p>
                    <p>店铺：时尚前沿</p>
                    <p>铺号：2楼9号</p>
                </div>
                <div id="sp03">
                    <p><img src="images/img08.gif" width="110" height="105" /></p>
                    <p class="font02">汉斯纪念版</p>
                    <p class="font03">￥：400</p>
                    <p>店铺：时尚前沿</p>
                    <p>铺号：2楼9号</p>
                </div>
                <div id="sp04">
                    <p><img src="images/img09.gif" width="110" height="105" /></p>
                    <p class="font02">时尚T血 </p>
                    <p class="font03">￥：200</p>
                    <p>店铺：时尚前沿</p>
                    <p>铺号：2楼9号</p>
                </div>
                <div id="sp05">
                    <p><img src="images/img10.gif" width="110" height="105" /></p>
                    <p class="font02">汉斯休息运动鞋</p>
                    <p class="font03">￥：500</p>
                    <p>店铺：时尚前沿</p>
                    <p>铺号：2楼9号</p>
                </div>
                <div id="sp06">
                    <p><img src="images/img11.gif" width="110" height="105" /></p>
                    <p class="font02">GUGI新款背包</p>
                    <p class="font03">￥：2500</p>
                    <p>店铺：时尚前沿</p>
                    <p>铺号：2楼9号</p>
                </div>
                <div id="sp07">
                    <p><img src="images/img12.gif" width="110" height="105" /></p>
                    <p class="font02">GUGI新款手提包</p>
                    <p class="font03">￥：3500</p>
                    <p>店铺：时尚前沿</p>
                    <p>铺号：2楼9号</p>
                </div>
                <div id="sp08">
                    <p><img src="images/img13.gif" width="110" height="105" /></p>
                    <p class="font02">欧米茄腕表</p>
                    <p class="font03">￥：1500</p>
                    <p>店铺：时尚前沿</p>
                    <p>铺号：2楼9号</p>
                </div>
            </div>
            <img src="images/yj.gif" width="510" height="58" /></div>
    </div>
    <div id="bottom"><img src="images/b_menu.gif" width="729" height="42" /></div>
</div>
</body>
</html>

css6-5.css样式文件如下:

@charset "utf-8";
/* 默认的body div 等元素是带有边框的呀;*/
* {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

body {
    font-family: "宋体";
    font-size: 12px;
    color: #666;
    background-color: #e3e6c7;
}

.float {
    float:left;
    margin-right:350px;
}
.font01 {
    font-weight:bold;
    font-size:15px;
    font-family:"黑体";
}
.font02 {
    font-weight:bold;
    color:#669900;
}
.font03 {
    color:#F00;
}

div6-5.css源代码：

@charset "utf-8";

/*margin: auto; 让div内容居中的方式之一*/
#box {
    width: 784px;
    height: 1136px;
    margin: auto;
}

#top {
    width: 784px;
    height: 57px;
}

#menu {
    width: 784px;
    height: 339px;
}

#main {
    width: 784px;
    height: 670px;
}

/**
    width: 223px;
    height: 670px;
    float: left;
    该div内部有多个div元素时,如果设置了float属性,且空间够容纳内部属性,这设置float元素会自动排列为一行
 */
#left {
    width: 223px;
    height: 670px;
    float: left;
}

#left01 {
    width: 213px;
    height: 50px;
    background-color: #efefef;
    line-height: 20px;
    color: #699;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 8px;
}

/*荣该div内的三个p元素的后两个p元素上移,第一个p元素的img向右移动*/
#left01 img {
    float: right;
    margin-right: 5px;
}

#left02 {
    width: 206px;
    height: 180px;
    background-color: #efefef;
    line-height: 20px;
    padding-left: 17px;
    padding-top: 13px;
    font-weight: bold;
}

#left02 img {
    margin-bottom: 5px;
}

#left03 {
    width: 198px;
    height: 220px;
    background-color: #efefef;
    line-height: 20px;
    padding: 13px 17px 0px 17px;

}

#left03 img {
    margin-bottom: 5px;
}

#right {
    width: 510px;
    height: 670px;
    float: left;
    margin-left: 9px;
    background-color: #fcfee6;
}

/*限定外层div的宽度和高度,便于设置内部元素在有限空间区域进行束缚*/
#right01 {
    width: 510px;
    height: 200px;
}
/*background-repeat 默认平铺的*/
/*background-position 背景绝对定位*/
#right01 dt {
    width: 340px;
    line-height: 27px;
    float:left;
    background-image: url("../images/tb.gif");
    background-position:7px 13px;
    background-repeat:no-repeat;
    margin-left:20px;
    border-bottom:#a1a09c dashed 1px;
    padding-left:20px;
}
/*line-height:20px; 与dt处于同一行*/
#right01 dd{
    width:100px;
    float:left;
    line-height:20px;
}

#right02 {
    width:510px;
    height:402px;
    margin-top:10px;
}

#sp01,#sp02,#sp03,#sp04,#sp05,#sp06,#sp07,#sp08 {
    width:118px;
    height:181px;
    float:left;
    padding-left:9px;
    margin-top:8px;
    line-height:17px;
}
#sp01 img,#sp02 img,#sp03 img,#sp04 img,#sp05 img,#sp06 img,#sp07 img,#sp08 img {
    margin-bottom:5px;
}
#bottom{
    width:784px;
    height:60px;
    padding-top:20px;
}

效果图：

蜗牛杨哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS3实战网页设计(4)

html源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>天马行空-时尚娱乐</title> <link href="style/div6-5.css" rel="stylesheet" type="text/css" /> <link href...
复制链接

扫一扫