【Web前端】儿童摄影网——网页制作代码

本篇博客我们来一个好看的前端页面——儿童摄影网。

目录

一、案例图

二、源代码

2.1 html部分

2.2 css部分

三、效果图

---

一、案例图

二、源代码

2.1 html部分

    

        


            
 网站首页
            
 关于我们

            
 摄影作品
            
 联系我们
        
    
    

        
    
    

        
        
        
    
    

        

            

                
优惠活动
                
新年订单有特大惊喜！
            

            

                
宝贝写真应注意什么?
                
孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹，如果换成是亲近的或者比较平时比较熟悉玩得来的就会好很多。
            

            

                
宝贝庆生日
                
为新生宝宝准备的生日party，参与者可获得精美生日礼物一份。
            
        

    
    

        
        
        
    

    
    

        

            
 
            

            

            

            
        
    
    

        
青春树版权所有2000-2016京ICP备08001421号 京公网安备11018007702
    
    

2.2 css部分

* {
    margin: 0;
    padding: 0;
}

.toubu {
    height: 627px;
    width: 980px;
    margin: 0 auto;
    background-image: url(../images/bg.jpg);
}

.nav {
    height: 100px;
    width: 981px;
    margin-top: 20px;
    background: url(../images/nav.jpg) no-repeat;
    margin: 0 auto;
}


.toubu .nav h4 {
    font-weight: 400;
    display: inline-block;
    padding-top: 40px;
}

.toubu .nav .h4_1 {
    padding-left: 150px;
}

.toubu .nav .h4_2 {
    padding-left: 60px;
}

.toubu .nav .h4_3 {
    padding-left: 300px;
}

.toubu .nav .h4_4 {
    padding-left: 60px;

}

/* 动态 */
.dongtai {
    height: 88px;
    width: 980px;
    margin: 0 auto;
}

/* 评论 */
.pinglun {
    width: 980px;
    height: 140px;
    margin: 0 auto;

}

.pinglun img {
    display: inline-block;
}

.pinglunwenzi {
    height: 93px;
    width: 980px;
    margin: 0 auto;

}

.pinglunwenzi ul li {
    float: left;
    /* background-color: pink; */
    list-style: none;
    height: 93px;
    width: 294px;
    margin-left: 25px;
}

.pinglunwenzi ul .top {
    margin-left: 0px;
}

.pinglunwenzi ul li h4 {
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    text-indent: 1em;
    border-bottom: solid 1px #e2e2e2;
}

.pinglunwenzi ul li p {
    margin-top: 6px;
    color: rgb(191, 188, 186);
    font-size: 12px;
    margin-left: 14px;
}

/* 阴影 */
.yinying {
    width: 980px;
    height: 30px;
    margin: 0 auto;
}

/* 样篇 */
.yangpian {
    /* float: left; */
    width: 980px;
    height: 442px;
    margin: 20px auto;
    background-image: url(../images/xinshang.jpg);

}

/* 照片 */
.yangpian ul li {
    width: 156px;
    height: 237px;
    float: left;
    list-style: none;
    margin-left: 50px;
    margin-top: 170px;
    background-color: pink;
}

.yangpian ul .zhaopian1 {
    margin-left: 100px;
    background-image: url(../images/img1.jpg);
}


.yangpian ul .zhaopian2 {
    background-image: url(../images/img2.jpg);
}

.yangpian ul .zhaopian3 {


    background-image: url(../images/img3.jpg);
}

.yangpian ul .zhaopian4 {

    background-image: url(../images/img4.jpg);

}

.footer {
    height: 80px;
    background-image: url(../images/footer_bg.jpg);
}

.footer p {
    text-align: center;
    line-height: 80px;
    color: #fef0d9;
}

.welcome {
    position: fixed;
    right: 55px;
    bottom: 80px;
    width: 220px;
}

三、效果图

 这个案例是我手敲的，感觉做的并不是很好，前半部分的代码与后半部分代码处理盒子的方式不同，风格不统一，而且有很多赘余的代码，我后面会慢慢优化的。

这个案例做的有问题大家可以在评论区或私聊我。如果需要素材也的也可以私聊我。

我们下期再见(留个赞吧，求求)~~