实现效果图:

代码实现

  • 第一次写的时候不知道如何下手, 后来摸清规律了,由大到小. 由全局到局部
  • 第一次还遇到区块命名问题, 和哪个该怎么划分问题
  • 第一次还遇到由于划分不规整,所以有些代码没达到预期的效果

这个案例还是比较磨人的

注: 这个代码不考虑浮动产生的影响,清除浮动的方法统一用了: 给父元素加高法.

最终效果图:(将图片拖一下新窗口看)

一定要从大到小,从全局到细节来布局.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>布局2</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .header {

            width: 970px;

            height: 103px;

            margin: 0 auto;

        }

        .header .logo {

            width: 277px;

            height: 103px;

            background-color: red;

            float: left;

        }

        .header .language {

            width: 137px;

            height: 49px;

            background-color: lightgreen;

            float: right;

            margin-bottom: 10px;

        }

        .header .nav {

            width: 679px;

            height: 46px;

            background-color: lightgreen;

            float: right;

        }

        .content {

            width: 970px;

            height: 435px;

            margin: 0 auto;

            /*background-color: lightpink;*/

            margin-top: 10px;

        }

        .content .banner {

            width: 310px;

            height: 435px;

            background-color: gold;

            float: left;

            margin-right: 10px;

        }

        .content .rightPart {

            width: 650px;

            height: 435px;

            /*background-color: deeppink;*/

            float: left;

        }

        .content .rightPart .news {

            width: 450px;

            height: 400px;

            /*background-color: palegoldenrod;*/

            float: left;

            margin-right: 10px;

        }

        .content .rightPart .hostPots {

            width: 190px;

            height: 400px;

            background-color: hotpink;

            float: left;

        }

        .content .rightPart .links {

            width: 650px;

            height: 25px;

            background-color: darkgreen;

            float: left;

            margin-top: 10px;

        }

        .content .rightPart .news .new1 {

            width: 450px;

            height: 240px;

            background-color: cornflowerblue;

        }

        .content .rightPart .news .new2 {

            width: 450px;

            height: 110px;

            background-color: cornflowerblue;

            margin-top: 10px;

        }

        .content .rightPart .news .new3 {

            width: 450px;

            height: 30px;

            background-color: cornflowerblue;

            margin-top: 10px;

        }

        .footer{

            width: 970px;

            height: 35px;

            background-color: navy;

            margin: 0 auto;

            margin-top: 10px;

        }

    </style>

</head>

<body>

<div class="header">

    <div class="logo">logo</div>

    <div class="language">language</div>

    <div class="nav">nav</div>

</div>

<div class="content">

    <div class="banner">banner</div>

    <div class="rightPart">

        <div class="news">

            <div class="new1">new1</div>

            <div class="new2">new2</div>

            <div class="new3">new3</div>

        </div>

        <div class="hostPots">hostPots</div>

        <div class="links">links</div>

    </div>

</div>

<div class="footer">footer</div>

</body>

</html>

[css]网站骨架布局作业的更多相关文章

  1. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  2. 《CSS网站布局实录》学习笔记（四）

    第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...

  3. 《CSS网站布局实录》学习笔记（一）

    今天开始,认真学习前端技术,哈哈哈~~~加油~~~ 推荐这本<CSS网站布局实录>(第2版)给初级入门选手,虽然这本书年代有点久远,不过很经典. 注明一下:这里讲述的CSS均为CSS 2. ...

  4. 《css网站布局实录》（李超）——读书札记

    1.web表现层技术 2.HTML链接设计思想 3.对信息进行合理的分析.分类与处理来创造商业价值. 4.头部描述浏览器所需信息,主体包含所需要展现的具体内容. 5.HTML(XHTML)XML 6. ...

  5. 全新的css网站布局--Grid布局

    Grid布局全新的css网站布局 CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格),items 是 grid( ...

  6. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  7. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

  8. HTML+CSS网站开发兵书

    <HTML+CSS网站开发兵书> 基本信息 作者: 高洪涛 丛书名: 程序员藏经阁 出版社:电子工业出版社 ISBN:9787121212369 上架时间:2013-8-26 出版日期:2 ...

  9. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

随机推荐

  1. error C2065: “m_Pic”: 未声明的标识符

    public: CPicture m_Pic; 要写在头文件里! 而不能是cpp文件的public里!

  2. Phpcms V9当前栏目及所有二级栏目下内容调用标签

    在二级栏目列表页调用: <!--* 获取子栏目* @param $parentid 父级id* @param $type 栏目类型* @param $self 是否包含本身 0为不包含* @pa ...

  3. nginx 杂谈

    http://blog.sina.com.cn/s/articlelist_1834459124_0_1.html

  4. mybatis由浅入深day01_8.2resultMap

    8.2 resultMap mybatis中使用resultMap完成高级输出结果映射. resultType可以指定pojo将查询结果映射为pojo,但需要pojo的属性名和sql查询的列名一致方可 ...

  5. Java精选笔记_集合【List(列表)接口】

    List(列表)接口 简介 List接口继承自Collection接口,是单列集合的一个重要分支,习惯性地会将实现了List接口的对象称为List集合. 元素是有序的,即元素的存入顺序和取出顺序一致, ...

  6. IIS禁止xml文件访问

    今天在出现数据库账号信息泄露的时候,突然想到xml文件里面放着很多信息,而且网页能够直接访问到,这就很有问题了 开始的时候,也在IIS网站那里看到请求筛选这个设置,开始还以为不能加呢,还是同事说的.

  7. php数据访问之查询关键字

    本文根据数据库中的car表做一个汽车查询页面,巩固php查询关键字操作,感兴趣的小伙伴们可以参考一下   本文实例为大家分享了php查询操作的实现代码,供大家参考,具体内容如下 一.一个关键字查询 主 ...

  8. 如何使用腾讯云开发一款 AR 应用介绍

    版权声明:本文由张亚舒原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/117 来源:腾云阁 https://www.qclo ...

  9. Android PackageManager：queryIntentActivities

    Intent intent = new Intent(Intent.ACTION_MAIN, null); intent.setPackage(getPackageName()); intent.ad ...

  10. sencha touch 入门系列 （五）sencha touch运行及代码解析（上）

    由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTY ...