实现效果图:
代码实现
- 第一次写的时候不知道如何下手, 后来摸清规律了,由大到小. 由全局到局部
- 第一次还遇到区块命名问题, 和哪个该怎么划分问题
- 第一次还遇到由于划分不规整,所以有些代码没达到预期的效果
这个案例还是比较磨人的
注: 这个代码不考虑浮动产生的影响,清除浮动的方法统一用了: 给父元素加高法.
最终效果图:(将图片拖一下新窗口看)
一定要从大到小,从全局到细节来布局.
<!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]网站骨架布局作业的更多相关文章
-
IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例
首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...
-
《CSS网站布局实录》学习笔记(四)
第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...
-
《CSS网站布局实录》学习笔记(一)
今天开始,认真学习前端技术,哈哈哈~~~加油~~~ 推荐这本<CSS网站布局实录>(第2版)给初级入门选手,虽然这本书年代有点久远,不过很经典. 注明一下:这里讲述的CSS均为CSS 2. ...
-
《css网站布局实录》(李超)——读书札记
1.web表现层技术 2.HTML链接设计思想 3.对信息进行合理的分析.分类与处理来创造商业价值. 4.头部描述浏览器所需信息,主体包含所需要展现的具体内容. 5.HTML(XHTML)XML 6. ...
-
全新的css网站布局--Grid布局
Grid布局全新的css网站布局 CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格),items 是 grid( ...
-
PHP.3-DIV+CSS标准网页布局准备工作(上)
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
-
CSS的flex布局(转载)
我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...
-
HTML+CSS网站开发兵书
<HTML+CSS网站开发兵书> 基本信息 作者: 高洪涛 丛书名: 程序员藏经阁 出版社:电子工业出版社 ISBN:9787121212369 上架时间:2013-8-26 出版日期:2 ...
-
CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...
随机推荐
-
注解spring
================================================ 没有bean的话 也可以放到参数前面
-
Unslider.js Tiny Sample
<!-- The HTML --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&g ...
-
hdu 5057 Argestes and Sequence(分块算法)
Argestes and Sequence Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
-
[bzoj1787][Ahoi2008]紧急集合
Description 给定一棵大小为的树,有组询问,每组询问给三个点,求到这三个点距离和最小的点及最小距离和. Input 第一行两个数. 接下来行,每行两个数表示到有一条边. 最后行,每行个数,为 ...
-
Cosmos OpenSSD--greedy_ftl1.2.0(三)
我们来假设模拟一个小型的模型来分析写和垃圾回收的过程 假设只有一个die,4个block,每个block4个page,每个page8KB 那么PageMap就是Page[0][0]到Page[0][1 ...
-
为什么win记事本编辑的shell在linux中运行会报错
结论:win记事本使用的格式有别于linux,二者不可混用.linux使用一个叫vi的编辑器. 解决办法:使用vi命令建立文件,在其中敲shell.命令:vi > filename (敲完 ...
-
(二叉树 递归) leetcode 144. Binary Tree Preorder Traversal
Given a binary tree, return the preorder traversal of its nodes' values. Example: Input: [1,null,2,3 ...
-
OC线程操作-GCD介绍
1. GCD介绍 1.11.2 1.3 异步具备开启能力但是不是 一定可以开启 1.4 1.5 67. 8.
-
[Node.js]28. Level 5: Express Server
Now let's create an express server which queries out for this search term and just returns the json. ...
-
flask源码解析之DispatcherMiddleware
DispatcherMiddleware作用 实现多app的应用,完成路由分发的功能 如何使用 from werkzeug.wsgi import DispatcherMiddleware from ...