Project4_The_Camera

最新推荐文章于 2021-08-12 17:31:15 发布

FawkesDoris

最新推荐文章于 2021-08-12 17:31:15 发布

阅读量327

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/qq_30277453/article/details/88069527

版权

web 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

web习作四

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" http-equiv="Content-Type" content="text/html";/>
    <title>儿童摄影</title>
   <link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>
<body>
<!--bg begin-->
<div id="bg">
  <div class="nav">
    <span>网站首页</span>
    <span class="margin_more">关于我们</span>
    <span class="margin_more"></span>
    <span >摄影作品</span>
    <span>联系我们</span>
  </div>
</div>
<!--bg emd-->
<!--news begin-->
<div id="news">
  <div class="news_con">
    <img src="img/news1.jpg"/>
    <h2 class="one">优惠活动</h2>
    <p class="two">新年订单有特大惊喜</p>
    <p class="shadow"></p>
  </div>
  <div class="news_con">
    <img src="img/news2.jpg"/>
    <<h2 class="one">宝贝写真应注意什么</h2>
    <p class="two">孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹，如果换做是亲近的或者比较平时比较熟悉玩得来的就会好很多。</p>
    <p class="shadow"></p>
  </div>
  <div class="news_con">
    <img src="img/news3.jpg"/>
    <h2 class="noe">宝贝庆生会</h2>
    <p class="two">为新生宝宝准备的生日party，参与者可获得精美生日礼物一份。</p>
    <p class="shadow"></p>
  </div>
</div>
<!--news end-->
<!--exhibition begin-->
<div id="exhibition">
  <div class="pic">
    <img src="img/img1.jpg"/>
    <img src="img/img2.jpg"/>
    <img src="img/img3.jpg"/>
    <img src="img/img4.jpg"/>
  </div>
</div>
<!--exhibition end-->
<!--footer begin-->
<div id="footer">青春树版权所有 2000-2016 京 ICP 备 08001421 号&nbsp;&nbsp;京公网安备 1101108007702</div>
<!--footer end-->
<!--tree begin-->
<div class="tree">
<img src="img/erweima.png"/>
</div>
<!--tree end-->
</body>
</html>

css部分

/*重置浏览器的默认样式*/
*{margin:0;padding: 0;
  border: 0;background: none;}
/*全局控制*/
body{font-family: "微软雅黑";background: #fdfdfd;}
#bg{
  width: 980px;
  height: 617px;
  background:url("../img/bg.jpg") no-repeat;
  margin: 0 auto;
  padding-top: 10px;
}
.nav{
  width: 848px;
  height: 46px;
  background: url("../img/nav.jpg") no-repeat;
  margin: 0 auto;
  padding: 40px 0 0 123px;
}
.nav sapn{
  color: #685649;
  font-size: 16px;
  padding: 0 30px;
}
.nav .margin_more{ margin-right: 240px;}
#news{
  width: 980px;
  height: 300px;
  background: url("../img/dongtai.jpg") 60px top no-repeat;
  margin: 18px auto;
  padding-top: 120px;
}
.news_con{
  width: 294px;
  height: 284px;
  float: left;
  padding-left: 29px;
}
.news_con .one{
  width: 284px;
  height: 50px;
  padding-left: 10px;
  line-height: 50px;
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #dddddd;
}
.new_con .two{
   width: 284px;
   height: 70px;
  line-height: 20px;
   padding: 10px 0 0 10px;
   font-size: 12px;
   color: #bbbbbb;
 }
 .news_con .shadow{
   width: 294px;
   height: 5px;
   background: url("../img/yinying.jpg") no-repeat;
 }
#exhibition{
  width: 980px;
  height: 292px;
  background: url("../img/xinshang.jpg") no-repeat;
  margin: 0 auto;
  padding-top: 170px;
}
#exhibition .pic{
  width: 916px;
  height: 260px;
  margin: 0 auto;
}
#exhibition .pic img{margin-left: 56px;}
#footer{
  width: 100%;
  height: 80px;
  background: url("../img/footer_bg.jpg") repeat-x;
  color: #ffffff;
  text-align: center;
  line-height: 90px;
}
.tree{
  position: fixed;
  right: 5%;
  bottom: 5%;
}

FawkesDoris

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Project4_The_Camera

web习作四&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" http-equiv="Content-Type" content="text/html";/&gt; &lt;title&gt;儿童摄影&l
复制链接

扫一扫