实现效果图:

代码实现

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

这个案例还是比较磨人的

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

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

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

<!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. kendo-ui的使用和开发自己的组件

    摘要: 前面介绍了一款非常不错的前端框架kendo-ui,如果你想阅读,请点这里.通过使用它一段时间,感觉是非常好用.下面就介绍一下如何使用它和开发自己的组件 引入: 只需要引进下面三个文件即可 ke ...

  2. C# 哈希加密

    1.方法一: [c-sharp] view plaincopy //适用于C#语言 //使用前需导入以下命名空间:using System.Web.Security; //第一个参数为需加密的字符串, ...

  3. day21<IO流+&FIle递归>

    IO流(字符流FileReader) IO流(字符流FileWriter) IO流(字符流的拷贝) IO流(什么情况下使用字符流) IO流(字符流是否可以拷贝非纯文本的文件) IO流(自定义字符数组的 ...

  4. Exception in thread "main" java.lang.NoSuchMethodError: org.testng.TestNG.configure(Lorg/testng/CommandLineArgs;)V

    TestNG运行时报以下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.testng.TestNG. ...

  5. Yarn中几个专用名称

    1. ResourceManager(RM)          RM是一个全局的资源管理器,负责整个系统的资源管理和分配.它主要由两个组件构成:调度器(Scheduler)和应用程序管理器(Appli ...

  6. 经典 MapReduce框架（MRv1）

    在 MapReduce 框架中,作业执行受两种类型的进程控制: 一个称为 JobTracker 的主要进程,它协调在集群上运行的所有作业,分配要在 TaskTracker 上运行的 map 和 red ...

  7. /usr/local/java/jdk1.8.0_11

  8. 在Win64系统上动态加载无签名驱动：WIN64LUD

    1.WIN64LUD的全称是WIN64 Load Unsigned Driver,功能如其名,在WIN64系统上加载无签名的驱动. 2.支持Windows 7/8/8.1/2008R2/2012/20 ...

  9. LeetCode——Basic Calculator

    Description: Implement a basic calculator to evaluate a simple expression string. The expression str ...

  10. EUI组件之EditableText

    一.EditableText常规使用 EditableText是一个可输入文本,例如登陆时输入用户名.密码等. 拖动EditableText到exml即可 实际效果 其他: 1.输入密码框 设置inp ...