实现效果图:

代码实现

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

这个案例还是比较磨人的

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

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

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

<!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. centos7 systemctl

    下机为systemctl指令systemctl enable *.service #开机运行服务systemctl disable *.service #取消开机运行systemctl start * ...

  2. oracle函数学习_根据用户id获取用户角色

    create or replace function FN_GET_ROLES(v_user_id varchar2) return varchar2 istype zy_emp_cursor is ...

  3. 实例教程Unity3D单例模式(二)自我包括法

    unity3d 里的单例模式自我包括法 有一次玩Trench Run game,我意识到我的场景类里存在很多的GameObject.所以,我开发了自我包括的单例.假设没找找到实例,就会创建它自己的Ga ...

  4. MySQL性能优化（六）-- using filesort，in和exists，慢查询，mysqldumpslow

    一.order by产生using filesort详解 1.首先建表和索引(以下使用的sql版本是5.5.54) /*课程表*/ create table course( id int primar ...

  5. JS 操作iframe

    很多人一直都有个想法,要是可以随心所欲的操作iframe就好了.这样静态页面也就有了相当于后台动态页面php,jsp,asp中include,require实现统一多页面布局的能力. 通过Javasc ...

  6. Android编译系统(Android.mk文件详解)

    [Android-NDK(Native Development Kit)  docs文档] NDK提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so和java应用一起打包成a ...

  7. JDK1.8在LINUX下安装步骤

    JDK1.8在LINUX下安装步骤: 在/usr/lib/目录下新建jvm文件夹,如果已有jvm文件夹,则将之前的JDK版本删除,即在jvm目录下执行命令:rm –rf * 将JDK文件jdk-8u4 ...

  8. Android Processes and Threads

    Processes and Threads When an application component starts and the application does not have any oth ...

  9. C#如何判断程序调用的exe已结束

    二个方法:以运行系统记事本为例 方法一:这种方法会阻塞当前进程,直到运行的外部程序退出System.Diagnostics.Process exep = System.Diagnostics.Proc ...

  10. windowSoftInputMode

    有个问题困扰我一晚上,每次进入Activity后,EditText自动获得焦点弹出软键盘,键盘遮挡listView,使得无法显示最后一条消息.我在edittext点击事件中也设定了,listView. ...