CSS3实战网页制作(1)

最新推荐文章于 2022-11-14 18:00:53 发布

蜗牛杨哥

最新推荐文章于 2022-11-14 18:00:53 发布

阅读量353

点赞数

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

版权

做简单的事,简单的事重复做.......

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>茶叶文化网站</title>
    <link href="style/css2-7.css" rel="stylesheet" type="text/css" />
    <link href="style/div2-7.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="box">
    <!-- 为保证图片显示不失真,width,height与图片的宽,高一致;-->
    <div id="top"><img src="images/2502.jpg" width="950" height="379" /></div>
    <div id="main">
        <div id="main-left"><img src="images/2503.png" width="258" height="180" /><br />
            <span class="font01">百佳妍迷迭香茶</span><br />
            　　用迷迭香来泡茶，其强烈香气会随热水的浸泡而扩散到茶雾之中，有令人清醒的功效。身心疲劳，头脑昏沉的时候来上这样一杯茶，迷迭香将会在体内释放源源不断的活力，精神也为之振奋起来。迷迭香草中含有的益于人体健康的物质能促进血液循环、强化血管，所以迷迭香茶又有&quot;回春茶&quot;之称，它还活化脑部，提高记忆力，早上喝它会觉得神清气爽，充满活力。</div>
        <div id="main-main"><img src="images/2504.png" width="258" height="180" /><br />
            <span class="font01">七彩云南醇香袋泡茶</span><br />
            　　七彩云南醇香普洱茶，汤色绝妙，芳香诱人，醇香回甘，美味悠长；醇香普洱精选上等普洱，提取一叶一芽之精华，以非常品质带来非常滋味，非常健康！地道普洱熟茶，感觉温暖柔和，散发熟茶特有悠悠的陈香。将普洱茶大叶肥壮的条索切细筛分为颗粒状，使得品质优异，香郁持久，味美纯然。现代商务精英首选，简约品位，在享受醇香四溢的同时获得纯正普洱茶的关爱。 </div>
        <div id="main-right"><img src="images/2505.png" width="258" height="188" /><br />
            <span class="font01">中茶大国茶园滇红茶</span><br />
            　　滇红的品饮多以加糖加奶调和饮用为主，加奶后的香气滋味依然浓烈。冲泡后的滇红茶汤红艳明亮，高档滇红，茶汤与茶杯接触处常显金圈，冷却后立即出现乳凝状的冷后浑现象，冷后浑早出现者是质优的表现。滇红工夫茶最大的特征为茸毫显露，毫色分淡黄、菊黄、金黄。凤庆、云昌等地生产的滇红工夫茶，毫色呈菊黄；临沧、勐海等地所产，毫色则多为金黄。  </div>
    </div>
    <div id="bottom"><br />
        关于我买网<span>│</span>送货范围<span>│</span>退换货政策<span>│</span>媒体报道<span>│</span>友情链接<span>│</span>联系我们<span>│</span>招聘信息
        <br/>
        Copyright@2021 All Rights Reserved 托普朗宁(北京)教育科技有限公司版权所有  <br/>
        技术支持：托普朗宁(北京)教育科技技术有限公司</div>
</div>

</body>
</html>

对应的css文件：

// 样式文件 css2-7.css
@charset "utf-8";
/**
   先大道小; 所有的
 */
* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

/**
 本页面的body标签
 */
body {
    font-family: "宋体";
    font-size: 12px;
    color: #666666;
    background-image: url("../images/2501.jpg");
    background-repeat: repeat-x;
}

.font01 {
    font-family: "微软雅黑";
    font-size: 18px;
    color: #5ca900;
    line-height: 30px;
}

// 样式文件div2-7.css 

@charset "utf-8";
/*margin:auto; 四周的外补丁平均,自动适应*/
#box {
    width: 1007px;
    height: auto;
    margin: auto;

}

/**
  ctrl+shift +/  注释单行,有相同的样式,遵循就进生效法则
 */
#top {
    width: 950px;
    height: 375px;
    margin: auto;
}

#main {
    width: 1042px;
    height: 400px;
    margin: auto;
}

/*float: left;左浮动,最外层的height现在内层的div高度*/
#main-left {
    width: 258px;
    height: 400px;
    float: left;
    line-height: 20px;
    margin: 0px 35px 0px 35px;
}

#main-main {
    width: 258px;
    height: 400px;
    float: left;
    line-height: 20px;
    margin: 0px 35px 0px 35px;
}

#main-right {
    width: 290px;
    height: 400px;
    float: left;
    line-height: 20px;
    margin: 0px 35px 0px 35px;
}

#bottom {
    width: 1007px;
    height: 89px;
    color: #000;
    text-align: center;
    line-height: 20px;
    background-image: url("../images/2506.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    margin-top: 20px;
    border-top: #093 dashed 1px;
}

效果图如下：

蜗牛杨哥

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3实战网页制作(1)

做简单的事,简单的事重复做.......html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>茶叶文化网站</title> <link href="style/css2-7.css" rel="stylesheet" type="text/css" /> <link href..
复制链接

扫一扫