[css]网站骨架布局作业
实现效果图:
代码实现
- 第一次写的时候不知道如何下手, 后来摸清规律了,由大到小. 由全局到局部
- 第一次还遇到区块命名问题, 和哪个该怎么划分问题
- 第一次还遇到由于划分不规整,所以有些代码没达到预期的效果
这个案例还是比较磨人的
注: 这个代码不考虑浮动产生的影响,清除浮动的方法统一用了: 给父元素加高法.
最终效果图:(将图片拖一下新窗口看)
一定要从大到小,从全局到细节来布局.
<!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 ...
随机推荐
- 工作流JBPM_day01：4-管理流程定义
工作流JBPM_day01:4-管理流程定义 管理流程(流程定义) 部署(添加) 查询 删除 查看流程图(xxx.png) -- 修改 --> 没有真正的修改,而是使用“再次部署+使用最新版本启 ...
- Extjs学习笔记--（五，事件）
Extjs中事件包括浏览器事件(单机按钮,鼠标移动等触发)和内部事件(组件之间的联动) 绑定浏览器事件的过程Ext.EventManager 要为元素绑定事件,通常会使用EventManager.on ...
- Zookeeper（三）-- JAVA原生API
一.前提 jar包:zookeeper-3.4.9.jar,slf4j-api-1.6.1.jar,slf4j-log4j12-1.6.1.jar,log4j-1.2.15.jar 二.Demo pa ...
- Unity导入FBX自动进行动画切分
手动处理动画分割 在导入FBX模型过程中,若带有动画呢,需要对它进行切分. 当然这个工作可以在Unity中完成. 比如: 这样手动来分割进行. 自动动画切分 这就需要代码了. 把代码保存成cs文件 ...
- iOS应用国际化教程（2014版）
本文转载至 http://www.cocoachina.com/industry/20140526/8554.html 这篇教程将通过一款名为iLikeIt的应用带你了解最基础的国际化概念,并为你的应 ...
- Spring学习笔记--声明一个简单的Bean
spring依赖的maven dependencyhttp://mvnrepository.com/artifact/org.springframework 在pom.xml中添加如下依赖: < ...
- PyQt4滑块QSlider、标签QLabel
滑块部件由一个简单的操控杆构成,用户可以通过向前或向后滑动滑块来选择数据.这种选择数据的方式对一些特殊的任务来说比单纯的提供一个数据或使用spin box调整数据大小的方式要自然友好的多.而标签部件则 ...
- Linux命令之type - 显示命令的类型
用途说明 type命令用来显示指定命令的类型.一个命令的类型可以是如下之一 alias 别名 keyword 关键字,Shell保留字 function 函数,Shell函数 builtin 内建命令 ...
- centos 7 搭建ntp 服务器
第一步 安装ntp yum install ntp 第二步,查找最近的时间同步服务器 http://www.pool.ntp.org/zone/asia 第三部编辑 /etc/ntp.conf ser ...
- 【Android】安卓中常用的图片加载方法
一.通过相机选图片: 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...