首页 > > 网页制作 > css >

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

2018-06-24 00:37:57来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

主题《新世界》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;
}

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HTML+CSS 基础布局（案列一）

下一篇：标准W3C盒子模型和IE盒子模型

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签