HTML+CSS 基础布局（案列二）

主题《新世界》html+css 静态布局（二）

刚开始学习了一个星期html和css之后，老师布置了这样一个作业，就是一张图，然后这样了

新世界 代码 说明

html

部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>兔兔派伴</title>
    <link rel="stylesheet" type="text/css" href="bigerf.css">
</head>
<body>
<div class="tutu">
    <header>
        <img src="images/header-logo.png" alt="图片加载失败">
        <p>新世界</p>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">最新活动</a></li>
            <li><a href="#">项目介绍</a></li>
            <li><a href="#">爱心社区</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#"><img src="images/header-user.png">登录</a></li>
        </ul>
    </header>

    <section class="header">
        <p class="life-1">Time of new life</p>
        <p class="life-2">新时代，年轻的人们让我们一起<br>体验新生活，享受新生活</p>
        <div class="header-action"><a href="#">开始体验</a></div>
    </section>

    <section class="content-1">
        <div class="content-1-1">
            <img src="images/advancement-1.png" alt="图片加载失败" width="30" height="30"><br><br>
            <p>打造全新的世界观，让你更爱你的生活</p>
        </div>
        <div class="vertical"></div>  //用来构造竖线
        <div class="content-1-2">
            <img src="images/advancement-2.png" alt="图片加载失败" width="30" height="30"><br><br>
            <p>丰富多彩的公益活动，发挥新世界的主人公意识</p>
        </div>
        <div class="vertical"></div>
        <div class="content-1-3">
            <img src="images/advancement-3.png" alt="图片加载失败" width="30" height="30"><br><br>
            <p>时尚的新理论，超前体验未知的生活</p>
        </div>
        <div class="vertical"></div>
        <div class="content-1-4">
            <img src="images/advancement-4.png" alt="图片加载失败" width="30" height="30"><br><br>
            <p>完善的培养机制，培养你全新的世界观</p>
        </div>
    </section>
    
    <section class="content-2">
        <img src="images/question-logo.png"><br><br>
        <p>关于新世界，你不知道的还有什么？</p>
    </section>

    <section class="content-3">
        <p class="content-3-p1">查找新世界城市活动信息</p>
        <div class="horizontal"></div>
        <p class="content-3-p2">每个城市有不同的信息，请自主查询您所要了解得城市</p>
       

//添加下拉选择表单

　　  <form>
            <select>
              <option>中国</option>
              <option>美国</option>
              <option>俄罗斯</option>
              <option>英国</option>
              <option>法国</option>
              <option>德国</option>
            </select>
            <select>
              <option>省份</option>
              <option>北京</option>
              <option>上海</option>
              <option>广东</option>
              <option>深圳</option>
              <option>湖北</option>
              <option>湖南</option>
            </select>
            <select>
              <option>城市</option>
              <option>朝阳</option>
              <option>广州</option>
              <option>深圳</option>
              <option>武汉</option>
              <option>长沙</option>
            </select>
        </form>
        <div class="search"><a href="#">搜索</a></div>
    </section>
    
    <section class="content-4">
        <div class="img">
           <img src="images/beijing.png" alt="图片加载失败">
           <p><strong>北京活动</strong></p>
           <p>新社区大联盟</p>
        </div>

        <div class="img">
           <p><strong>上 海 活 动</strong></p>
           <p>夜上海新景区探索</p>
           <img src="images/shanghai.png" alt="图片加载失败">
        </div>

        <div class="img">
           <img src="images/shenzhen.png" alt="图片加载失败">
           <p><strong>深圳活动</strong></p>
           <p>全新海岸线景观站点</p>
        </div>

        <div class="img">
           <img src="images/hongkong.png" alt="图片加载失败">
           <p><strong>香港活动</strong></p>
           <p>奢饰消费大派送</p>
        </div>
    </section>

    <section class="content-5">
        <div class="back-img">
            <p class="ct-5-p1">新世界</p>
            <p class="ct-5-p2">TIME</p>
            <p class="ct-5-p3">@新世界 - 北京</p>
            <p class="ct-5-p4">2016.10.20</p>
        </div>
        <div class="content-5-r">
           <p class="ct-5-p5">新世界<span>/01</span></p>
           <div class="ct-5-p">
           <p class="ct-5-p6">新世界是个潇潇洒洒的世界，新世界是个潇潇洒洒的世界，新世界是个潇潇洒洒的世界，新世界是个潇潇洒洒的世界，新世界是个潇潇洒洒的世界，新世界是个潇潇洒洒的世界，新世界是个潇潇洒洒的世界</p>
           </div>
           <div class="more" style="border: 1px solid red" ><a href="#">更多选择</a></div><br>
           <ul>   //用来构造选择圆点
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
           </ul>
        </div>
    </section>

    <section class="content-6">
        <div class="ct-6-1">
            <p class="ct-6-p1">新时代</p>
            <p class="ct-6-p2">关于爱生活的我们</p>
            <hr class="hr1">
            <div class="more-1" style="border: 2px solid white"><a href="#">查看更多</a></div>
        </div>

        <div class="ct-6-2">
            <p class="ct-6-p3">新时代</p>
            <p class="ct-6-p4">关于爱生活的我们</p>
            <hr class="hr2">
            <div class="more-2" style="border: 2px solid red"><a href="#">查看更多</a></div>
        </div>
        <img src="images/model2.png" alt="图片加载失败">
    </section>

    <section class="content-7">
        <p class="ct-7-p1">成为我们的志愿者</p>
        <hr class="ct-7-hr">
        <p class="ct-7-p2">新世界的大家庭需要每一个爱生活的人加入，如果你够年轻，有梦想，有激情<br>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
    </section>

    <section class="content-8">
        <div class="ct-8-l">
            <p class="title">新世界志愿者协议</p><br>
            <p class="label">加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则......</p>
            <p class="ct-8-more">
              <img src="images/unfold.png" alt="图片加载失败">
              <a href="#">more</a><br><br>
            </p>

            <p class="title">新世界志愿者权利</p><br>
            <p class="label">新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在新世界活动的优先参与资格</p>
            <p class="ct-8-more">
              <img src="images/unfold.png" alt="图片加载失败">
              <a href="#">more</a><br><br>
            </p>

            <p class="title">更多条款</p>
            <p class="ct-8-more">
              <img src="images/unfold.png" alt="图片加载失败">
              <a href="#">more</a>
            </p>
        </div>

        <div class="ct-8-r">
            <div class="name line-h">
                <p> 姓 名 ： </p>
                <form>
                    <input type="text" name="name" class="input-in4"></input>
                </form>
            </div>

            <div class="age line-h">
                <p> 年 龄 ： </p>    
                <form>
                    <input type="text" name="age" class="input-in4"></input>
                </form>
            </div>

            <div class="telephone line-h">
                <p>联系方式：</p>
                <form>
                    <input type="text" name="telephone" class="input-in4"></input>
                </form>
            </div>

            <div class="address line-h">
                <p>联系地址：</p>
                <form>
                    <input type="text" name="address" class="input-in4"></input>
                </form>
            </div>

            <div class="dream ">
                <p>请简单描述您梦想的生活：</p><br>
                <form>
                    <textarea name="dream"></textarea>
                </form>
            </div>

            <div class="submit">
                <a href="#">提交申请</a>
            </div>
        </div>
    </section>
    
    <section class="footer">
        <p class="me">联系我们</p>
        <p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br>也可以通过以下任何方式关注我们的动态</p>
        <form>

              //添加了提示输入placeholder
           <input type="text" placeholder="someone@emall.com" name="emall"></input>
        </form>
        <div class="submit"><a href="#">提交</a></div>
        <div class="icon">
            <img src="images/qq.png" alt="图片加载失败">
            <img src="images/globe.png" alt="图片加载失败">
            <img src="images/twitter.png" alt="图片加载失败">
            <img src="images/earth.png" alt="图片加载失败">
        </div>
        <div class="end">
            <p>@2016新世界</p>
            <span><a href="#">Back to top</a></span>
        </div>
    </section>

</div>
</body>
</html>

图片材料就不上存了

css

部分

body{
    background-color: #44565C;
    color:#767777;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    margin: 0 auto;
}
* {
    margin: 0;
    padding: 0;
}
.tutu{
    width: 800px;
    height: 2750px;
    margin:0 auto;
    background-color: #fff;
    padding: 0;
}
header{
    position: relative;
    padding-top: 10px;
}
header img{
    width: 20px;
    height: 20px;
    float: left;
    padding-left: 30px;
}
header p{
    float: left;
    padding-left: 7px;
}
header ul{
    list-style: none;
    float: right;
    padding-right:20px;
}
header ul li{
    float: left;
}
header ul li a{
    text-decoration: none; //去掉链接标签的下滑线
    float: left;
    color: gray;
    padding-right: 20px;
}
header ul li a:hover{  //当鼠标触碰是字体颜色为红色
    color: red;
}
header ul li img{
    width: 13px;
    height: 13px;
}


.header{
    margin-top: 30px;
    height: 400px;
    background-color: yellow;
    background-image: url(images/life.gif);
    color: white;
}
.header .life-1{
    font-size: 40px;
    padding-top: 100px;
    padding-left: 50px;
}
.header .life-2{
    font-size: 13px;
    padding-top: 10px;
    padding-left: 50px;
}
.header .header-action{
    margin-top: 40px;
    margin-left: 50px;
    width: 180px;
    height: 40px;
    background-color: red;
}
.header .header-action a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    line-height: 40px;
    padding: 20px 0px 0px 50px;
}

.content-1{
    height:150px;
    padding-top:20px;
    /*background-color: green;*/
}
.content-1 .content-1-1{
    width: 100px;
    text-align: center;
    padding-left:50px;
    float: left;
}
.content-1 .content-1-2{
    width: 100px;
    text-align: center;
    padding-left:50px;
    float: left;
}
.content-1 .content-1-3{
    width: 100px;
    text-align: center;
    padding-left:50px;
    float: left;
}
.content-1 .content-1-4{
    width: 100px;
    text-align: center;
    padding-left:50px;
    float: left;
}
.content-1 .vertical{
    float: left;
    width: 1px;
    height: 50px;
    margin-top: 50px;
    background-color: green;
    margin-left: 50px;
}

.content-2{
    height: 180px;
    background-color: #F0F8FF;
}
.content-2 img{
    position: relative;
    padding-top: 30px;
    width: 50px;
    height: 50px;
    padding-left:365px;
}
.content-2 p{
    font-size:30px;
    padding-left: 160px;
}

.content-3{
    height: 200px;
    color: white;
    text-align: center;
    background-image: url(images/search-bg.jpg);
}
.content-3 .content-3-p1{
    padding-top: 30px;
    font-size: 15px;
}
.horizontal{
    width: 20px;
    height: 2px;
    margin-top: 5px;
    margin-left:390px;
    background-color: white;
}
.content-3 .content-3-p2{
    font-size: 10px;
    margin-top: 8px;
}
form{
    float: left;
    margin: 40px;
}
form select{
    width: 130px;
    height: 25px;
    margin-left: 40px;
}
.content-3 .search{
    width: 140px;
    height: 25px;
    float: left;
    margin-top: 40px;
    background-color: red;
}
.content-3 .search a{
    text-decoration: none;
    color: white;
    line-height: 25px;
}
.content-4{
    height: 320px;
    background-color: #F0FFFF;
}
.content-4 img{
    width: 130px;
    height: 200px;
    float: left;
}
.content-4 .img{
    padding: 35px;
    float: left;
    text-align: center;
}
.content-4 strong{
    font-size: 16px;
}

.content-5{
    height: 350px;
    /*background-color: gray;*/
}
.content-5 .back-img{
    width: 550px;
    height: 350px;
    float: left;
    color: white;
    text-align: center;
    background-image: url(images/slide.jpg);
}
.content-5 .back-img .ct-5-p1{
    font-size: 22px;
    padding-top: 70px;
}
.content-5 .back-img .ct-5-p2{
    font-size: 90px;
}
.content-5 .back-img .ct-5-p3{
    font-size: 12px;
    color: #FFFAFA;
}
.content-5 .back-img .ct-5-p4{
    font-size: 12px;
    color: #FFFAFA;
}
.content-5 .content-5-r{
    text-align: center;
}
.content-5  .content-5-r .ct-5-p5{
    padding-top: 80px;
    font-size: 15px;
    color: black;
}
span{
    color: red;
}
.content-5 .content-5-r .ct-5-p{
    width: 250px;
    height: 180px;
    float: left;
}
.content-5 .content-5-r .ct-5-p6{
    color: #C0C0C0;
    font-size: 8px;
    line-height: 25px;
    padding: 20px;
}
.content-5 .content-5-r .more{
    width: 80px;
    height: 20px;
    float: left;
    margin-left: 80px;
}
.content-5 .content-5-r .more a{
    text-decoration: none;
    color: red;
}
.content-5 .content-5-r ul{
    list-style: none;
    position: relative;
    float: left;
    margin-left: 71px;
}
.content-5 .content-5-r ul li{
    width: 8px;
    height: 8px;
    border: 1px solid black;  /*添加边框*/
    border-radius: 50%;   /*构造圆*/
    /*background-color: red;*/
    float: left;
    margin: 5px;

}
.content-5 .content-5-r ul li:hover{
    cursor: pointer;    /*当鼠标触碰时，光标样式为小手*/
    background-color: red;
}

.content-6{
    height: 350px;
    background-color: green;
}
.content-6 .ct-6-1{
    width: 275px;
    height: 350px;
    float: left;
    color: white;
    text-align: center;
    background-color: #F08080;
}
.content-6 .ct-6-1 .ct-6-p1{
    padding-top: 100px;
    font-size: 15px;
}
.content-6 .ct-6-1 .hr1{
    width: 15px;
    margin-top: 15px;
    margin-left: 125px;
}
.content-6 .ct-6-1 .more-1{
    width: 110px;
    height: 25px;
    margin-left: 80px;
    margin-top: 15px;
    padding-top: 5px;
}
.content-6 .ct-6-1 .more-1 a{
    text-decoration: none;
    color: white;
}
.content-6 .ct-6-2{
    width: 275px;
    height: 350px;
    float: left;
    text-align: center;
    background-color: #FFF5EE;
}
.content-6 .ct-6-2 .ct-6-p3{
    padding-top: 100px;
    font-size: 15px;
}
.content-6 .ct-6-2 .hr2{
    width: 15px;
    margin-top: 15px;
    margin-left: 125px;
}
.content-6 .ct-6-2 .more-2{
    width: 110px;
    height: 25px;
    margin-left: 80px;
    margin-top: 15px;
    padding-top: 5px;
}
.content-6 .ct-6-2 .more-2 a{
    text-decoration: none;
    color: red;
}

.content-7 {
    height: 180px;
    text-align: center;
}
.content-7 .ct-7-p1{
    font-size: 18px;
    padding-top: 60px;
}
.content-7 .ct-7-hr{
    width: 20px;
    margin: 5px 0px 8px 390px;
}


.content-8{
    height: 300px;
    /*background-color: #DCDCDC;*/
}
.content-8 .ct-8-l{
    width: 250px;
    height: 300px;
    float: left;
    padding-left: 50px;
    /*background-color: green;*/
}
.content-8 .ct-8-l .title{
    color: black;
    font-size: 14px;
}
.content-8 .ct-8-l .ct-8-more{
    margin-left: 200px;
}
.content-8 .ct-8-l a{
    text-decoration: none;
    color: red;
}

.ct-8-r{
    width: 500px;
    height: 300px;
    float: right;
    /*background-color: #F0E68C;*/
}
.ct-8-r p{
    float: left;
}
.ct-8-r form{
    margin: 0;
    padding:0;
}
.ct-8-r .input-in4{
    position: absolute;
    width: 135px;
    height: 25px;
    font-size: 15px;
    margin-top: 2px;
}
.ct-8-r .line-h{
    width: 200px;
    height: 30px;
    line-height: 30px;
    background-color:  #DCDCDC;
}
.ct-8-r .name{
    float: left;
    margin-left:20px;
}
.ct-8-r .name p{
    padding-left: 18px;
}
.ct-8-r .age{
    float: left;
    margin-left:20px;
}
.ct-8-r .age p{
    padding-left: 18px;
}
.ct-8-r .telephone{
    float: left;
    margin-top: 15px;
    margin-left:20px;
}
.ct-8-r .address{
    float: left;
    margin-top: 15px;
    margin-left:20px;
}
.ct-8-r .dream{
    width: 420px;
    height: 140px;
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    background-color:  #DCDCDC;
}
.ct-8-r .dream textarea{
    resize: none;
    width: 418px;
    height: 111px;
}
.ct-8-r .dream p{
    padding:5px 0 5px 0px;
}
.ct-8-r .submit{
    width: 420px;
    height: 25px;
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    text-align: center;
    line-height: 25px;
    background-color:  #DCDCDC;
}
.ct-8-r .submit a{
    text-decoration: none;
    color: red;
}

.footer{
    height: 250px;
    color: white;
    text-align: center;
    background-color: #33353F;
}
.footer form{
    margin:0;
    padding:0;
}
.footer .me{
    font-size: 18px;
    padding-top: 50px;
}
.footer input{
    width: 250px;
    height: 20px;
    float: left;
    margin-top: 20px;
    margin-left: 250px;
}
.footer .submit{
    width: 50px;
    height: 24px;
    line-height: 24px;
    float: left;
    margin-top: 20px;
    background-color: #5F9EA0;
}
.footer .submit a{
    text-decoration: none;
    color: white;
}

.footer .icon{
    width: 800px;
    float: left;
    height: 60px;
}
.footer .icon img{
    width:20px;
    height:20px;
    margin-top: 10px;
    padding: 5px;
}
.footer .icon img{
    cursor: pointer;
}
.footer .end{
    float: left;
    width: 800px;
    height: 40px;
    line-height: 40px;
    background-color: #2f3038;
}
.footer .end p{
    float: left;
    font-size: 10px;
    padding-left: 50px;
}
.footer .end span{
    float: right;
}
.footer .end a{
    text-decoration: none;
    padding-right: 30px;
    color: white;
    font-size: 8px;
}

  
思路  从上往下构思好层级关系，划分好盒子关系，然后一个个地布局下来  

 陌陌说：这里有一些比较常用重要的知识点：比如构造竖线，横线，选择的圆点，输入框的提示输入等

posted @ 2016-11-13 16:31  Bigerf  阅读(618)  评论(0)  编辑  收藏  举报