实现效果图:

代码实现

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

这个案例还是比较磨人的

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

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

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

<!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. mysql数据库使用mysqldump工具针对一个数据库备份,使用--databases选项与不使用该参数的区别

    需求描述: 今天在做mysqldump备份某个数据库的试验,在备份某个数据库的时候可以使用 --databases参数,也可以直接进行某个数据库的备份,那么这里记录下两者的区别 操作过程: 1.使用- ...

  2. Landpy.ActiveDirecoty，按照Active Record Pattern设计的方便Lib开源发布

    想方便的操作AD吗,不想记住那么多AD Attribute名称和常量?请使用Landpy.ActiveDirecoty库,按照Active Record Pattern设计的AD Lib已经在Code ...

  3. Android Bigmap的操作（绘制，裁剪）

    绘制 依据某一种颜色绘制Bitmap Bitmap resultBitmap = Bitmap.createBitmap(600,800,Bitmap.Config.ARGB_8888); resul ...

  4. 从css样式表中抽取元素尺寸

    jS从样式表取值的函数.IE中以currentStyle,firefox中defaultView来获取 DOM.style仅仅能读到写在html中的样式值 获取样式值的函数 function retu ...

  5. day07<面向对象+>

    面向对象(构造方法Constructor概述和格式) 面向对象(构造方法的重载及注意事项) 面向对象(给成员变量赋值的两种方式的区别) 面向对象(学生类的代码及测试) 面向对象(手机类的代码及测试) ...

  6. js 对象引用传值

    1)当变量是一个对象(例如:{}或[]),使用 a = b = {} 这种形式传值的话,会变成会用传值,修改 a 时 b 会相应变化,修改 b 时 a 也一样会相应变化 var a = b = {}; ...

  7. Nginx（一）-- 初体验

    1.概念 Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 服务器. Nginx提供基本http服务,可以作 ...

  8. Google Inc.:Google APIs:23' 解决方案

    在导入一个项目是,出现 Unable to resolve target 'Google Inc.:Google APIs:6'第一种解决方法: compileSdkVersion 23 改成 com ...

  9. IT教程视频

    声明:以下视频均来自与互联网各个高级培训机构内部视频,我们能保证大部分的链接均可用.但不能保证所有的视频内容都是最新的.如果想要实时跟进各个培训机构的内部视频建议您关注微信公众号(BjieCoder) ...

  10. Java创建数组的三种方法

    ■ 第一种: int[] arr=new int[6]; arr[0] = 1; arr[1] = 2 arr[2] = 3; arr[3] = 4; arr[4] = 5; arr[5] = 6; ...