实现效果图:

代码实现

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

这个案例还是比较磨人的

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

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

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

<!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. matlab彩色图像插值

    软件是MATLAB R2014b 使用的是matlab中已有的函数imresize(); 彩色图像分别对R.G.B三个通道进行插值,之后融合.[imresize函数不用,可以直接插值] clear;c ...

  2. Effective C++ Item 35 Consider alternatives to virtual functions

    考虑你正在为游戏人物设计一个继承体系, 人物有一个函数叫做 healthValue, 他会返回一个整数, 表示人物的健康程度. 由于不同的人物拥有不同的方式计算他们的健康指数, 将 healthVal ...

  3. 说说GPIO.H(NUC131)

    /**************************************************************************//** * @file GPIO.h * @ve ...

  4. javascript中五种基本数据类型

    前言: JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined.null.bolean.number.string:另外还含有一种复杂的数据类型:object. 深入 ...

  5. Lua脚本和C++交互（二）

    上一节讲了一些基本的Lua应用,下面,我要强调一下,Lua的栈的一些概念,因为这个确实很重要,你会经常用到.熟练使用Lua,最重要的就是要时刻知道什么时候栈里面的数据是什么顺序,都是什么.如果你能熟练 ...

  6. iOS 9 分屏多任务：入门（中文版）

    本文转载至 http://www.cocoachina.com/ios/20150714/12555.html 本文由钢铁侠般的卿哥(微博)翻译自苹果官方文档:Adopting Multitaskin ...

  7. Android 权限信息

    访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permiss ...

  8. Oracle里 用sql*plus 登陆时，用户名和密码是多少啊？

    Oracle里sql*plus的用户名即system用户,密码是自己设置的密码. 如果密码忘记,可通过如下方法重置. 1.win键+R键,输入cmd,打开命令提示符. 2.输入sqlplus /nol ...

  9. CSS-布局样式之筛选条件右边线的处理方法（no CSS3）

    先上图:

  10. MyBatis官方文档——XML 映射配置文件

    XML 映射配置文件 MyBatis 的配置文件包含了影响 MyBatis 行为甚深的设置(settings)和属性(properties)信息.文档的顶层结构如下: configuration 配置 ...