兒童攝影網-網頁原始碼全

BY-H發表於2020-12-27
網頁原始碼

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

     <link rel="stylesheet" type="text/css" href="style.css">

     <title>兒童攝影</title>

<body>

<!--bg begin-->

<div id="bg">

<div class="nav">

<span>網站首頁</span>

<span class="margin_more">關於我們</span>

<span>攝影作品</span>

<span>聯絡我們</span>

</div>

</div>

<!--bg end-->

<!-- news begin -->

<div id="news">

<div class="news_con">

<img src="news1.jpg" />

<h2 class="one">優惠活動</h2>

<p class="two">新年訂單有特大驚喜！</p>

<p class="shadow"></p>

</div>

<div class="news_con">

<img src="news2.jpg" />

<h2 class="one">寶貝寫真應注意什麼？</h2>

<p class="two">孩子拍攝的時候如果是陌生人接觸的話會比較容易哭鬧，如果換做是親近的或者比較平時比較熟悉玩得來的就會好很多。</p>

<p class="shadow"></p>

</div>

<div class="news_con">

<img src="news3.jpg" />

<h2 class="one">寶貝慶生會</h2>

<p class="two">為新生寶寶準備的生日party，參與者可獲得精美生日禮物一份。</p>

<p class="shadow"></p>

</div>

</div>

    <!-- news end -->

    <!-- exhibition begin -->

    <div id="exhibition">

    <div class="pic">

    <img src="img1.jpg" />

    <img src="img2.jpg" />

    <img src="img3.jpg" />

    <img src="img4.jpg" />

    </div>

    </div>

    <!-- exhibition end -->

    <!-- foooter end -->

    <div id="footer">青春樹版權所有2000-2016京ICP備08001421號  京公網安備110108007702</div>

    <!-- footer begin -->

    <!-- tree begin -->

    <div class="tree"><img src="erweima.png" /></div>

    <!-- tree end -->

</body>

</head>

</html>

 

 

style.css

 

/*重置瀏覽器的預設樣式*/

*{  margin: 0;

padding: 0;

border: 0;

background: none;

}

/*全域性控制*/

body{ font-family:"宋體";

      background: #fdfdfd;

}

#bg{

width: 980px;

height: 617px;

background: url(bg.jpg) no-repeat;

margin: 0 auto;

padding-top: 10px;

}

.nav{

width: 848px;

height: 46px;

background: url(nav.jpg) no-repeat;

margin: 0 auto;

padding: 40px 0 0 123px;

}

.nav span{

color: #685649;

font-size: 16px;

padding: 0 30px;

}

.nav .margin_more{margin-right:240px;}

#news{

width: 980px;

height: 300px;

background: url(dongtai.jpg) 60px top no-repeat;

margin:10px auto;

padding-top: 120px;

}

.news_con{

width: 296px;

height: 256px;

float: left;

margin-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 #ddd; 

}

.news_con .two{

width:284px; 

height:70px;

line-height:20px;

padding:10px 0 0 10px;

font-size:12px;

color:#bbb;

}

.news_con .shadow{

width: 194px;

height:5px;

background:url(yinying.jpg) no-repeat;

}

#exhibition{

width: 980px;

height:292px;

background:url(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(footer_bg.jpg) repeat-x;

color:#fff;

text-align:center;

line-height:80px;

}

 

.tree{

position:fixed; 

right:5%;

bottom:5%;

}

相關文章