利用Div+CSS整体布局页面的操作流程
简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新浪网局部布局</title>
<style>
*{
margin: 0px auto;
padding: 0px;
}
.top-nav{
width: 100%;
height: 40px;
background-color:#CCCCCC;
}
.container{
width: 100%;
border: 1px solid black;
}
.content{
width: 1000px;
height: 800px;
border: 1px solid black;
}
.logo-banner, .content-nav{
width: 100%;
height: 40px;
border: 1px solid black;
}
.logo-left{
width: 30%;
height: 40px;
border: 1px solid black;
float: left;
}
.logo-right{
width: 30%;
height: 40px;
border: 1px solid black;
float:right;
}
.content-nav{
background-color: darkgreen;
}
.content-2{
width: 60%;
height: 400px;
background-color: blueviolet;
float: left;
}
.content-3{
width: 40%;
height: 400px;
background-color:brown;
float: left;
}
</style>
</head>
<body>
<div class="top-nav"></div>
<div class="container">
<div class="content">
<div class="logo-banner">
<div class="logo-left"></div>
<div class="logo-right"></div>
</div>
<div class="content-nav"></div>
<div class="content-1">
<div class="content-2"></div>
<div class="content-3"></div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
利用Div+CSS整体布局页面的操作流程的更多相关文章
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- 表格布局扩展/DW设计界面中快速整体布局页面的操作
DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- div,css&table布局有哪些区别
DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
随机推荐
- Python序列类型
Python序列类型 序列:字符.列表.元组 所有序列都支持迭代 序列表示索引为非负整数的有序对象集合 字符和元组属于不可变序列,列表可变 1)字符 字符串字面量:把文本放入单引号.双引号或三引号中: ...
- VI修改文件
找到路径 vi 文件名 i 添加或修改 esc : wq 保存退出 --------------------------------------------------- ...
- ExtJs2.0里Ext.form.Radio水平排列布局
ExtJs2.0好像不支持单选框组,因此用两个name相同单选框来实现单选框组 var radio1 = new Ext.form.Radio({boxLabel:'男',name:'sex',i ...
- 浅谈MySQL的事务隔离级别
希望这篇文章能够阐述清楚跟数据库相关的四个概念:事务.数据库读现象.隔离级别.锁机制 一.事务 先来看下百度百科对数据库事务的定义: 作为单个逻辑单元执行一系列操作,要么完全执行,要么完全不执行.事务 ...
- spring的applicationContext.xml配置SessionFactory抛异常
<bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFa ...
- java IO之 序列流 集合对象Properties 打印流 流对象
序列流 也称为合并流. SequenceInputStream 序列流,对多个流进行合并. SequenceInputStream 表示其他输入流的逻辑串联.它从输入流的有序集合开始,并从 第一个输入 ...
- ReactiveSwift源码解析(七) Signal的CombineLatest的代码实现
本篇博客我们就来聊一下combineLatest()的使用以及具体的实现方式.在之前的<iOS开发之ReactiveCocoa下的MVVM>的博客中我们已经聊过combineLatest( ...
- Unity3D Image 组件附入图片问题
作为新手经常会看到有个Image的组件 代码中理所当然的public 发现图片并不能附入其中, 解决办法直接 public Sprite 就可以了
- 响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式
去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window). ...
- neo4j 数据库导入导出
工作中需要将 A 图数据库的数据完全导出,并插入到 B 图数据库中.查找资料,好多都是通过导入,导出 CSV 文件来实现.然而,经过仔细研究发现,导出的节点/关系 都带有 id 属性 ,因为 A B ...