简单的网页布局效果html5+CSS3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout</title>
<style>
*{
margin: 0;
padding: 0; }
.container{
padding: 15px;
}
.header{
position: relative;
padding: 10px;
margin-bottom: 10px;
border: solid 2px #4CAF50;
}
.log{
width: 100px;
height: 100px;
float: left;
border: solid 2px #E91E63;
}
.user{
line-height: 1.5em;
width: 5em;
border: solid 2px #E91E63;
position: absolute;
bottom: 10px;
right: 10px;
}
.asider{
width: 200px;
height: 50px;
border: solid 2px #E91E63;
background-color: #4CAF50;
float: right;
}
.content{
margin-right: 210px;
height: 300px;
border: solid 2px #E91E63;
}
.clear:after{
display: block;
content: ".";
height: 0;
visibility: hidden;
clear: both;
}
.footer{
margin-top: 20px;
background-color: #E0E0E0;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<div class="header clear">
<div class="log">logo</div>
<div class="user">用户名</div>
</div>
<div>
<div class="asider">asider,宽度200px</div>
<div class="content">content，宽度自适应</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
效果截图:
尤其注意CSS代码中的clear类
简单的网页布局效果html5+CSS3的更多相关文章
- HTML实例之简单的网页布局
需求: <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8" ...
- CSS简单的网页布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- 8.html表格相关的标记9.html表格实战《简单的网页布局》
<html> <head> <title>第八课标题表格</title> <meta charset="utf-8"> ...
- 利用DIV，实现简单的网页布局
<html lang="en"><head> <meta charset="UTF-8"> <title>GIS ...
- 一个简单的网页布局HTML+CSS
<!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- 12款非常精致的免费 HTML5 & CSS3 网站模板
01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示 下载 02. Folder ...
- 2019.4.25 表格表单与HTML5 && CSS3
目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
随机推荐
- Java并发编程专题
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4852149. ...
- MSP430电平转换
说道到这个电平转换,写程序的时候居然还要示波器来观察现象,表示我们交的是211的学费,上的却不是211大学,创新实验室的仪器设备真的是少的可怜啊,我级不吐槽了说说这个电平转换的一些知识还有看法吧.. ...
- JS HTML标签尺寸距离位置定位计算
四种浏览器对 clientHeight.offsetHeight.scrollHeight.clientWidth.offsetWidth 和 scrollWidth 的解释差异 网页可见区域宽:do ...
- hiveserver2 后台运行
启动hivemetastore hive --service metastore 启动hiveserver2 hive --service hiveserver2 beeline !conne ...
- DOS批处理命令-@命令
@命令是一个禁止当前语句回显的简单命令. 语法: @[command].[command]是要屏蔽的批处理命令 例如执行包含以下内容的bat文件 echo on @echo ------- @echo ...
- AWK 脚本编写习惯
教训总结: 不能忽略了脚本语言的编写规范! 创建数组的时候初始化,特别是在for循环中使用的数组: u_count[; g_count[; 认真对待对象,特别是数组的命名: username_to_d ...
- ###STL学习--关联容器
点击查看Evernote原文. #@author: gr #@date: 2014-08-23 #@email: forgerui@gmail.com STL中的关联容器. ###stl学习 |--迭 ...
- iOS项目里面如何清理缓存
在正式讲解以前,请先看一下以下图片,在以下这款APP种设有清理缓存,开始我以为很复杂,在弄明白之后,其实就是几句代码就解决了. 在实际项目开发中,我们很多的文件都会缓存在沙盒里面,比如:照片 ...
- （poj）3268 Silver Cow Party 最短路
Description One cow ≤ N ≤ ) conveniently numbered ..N ≤ X ≤ N). A total of M ( ≤ M ≤ ,) unidirection ...
- caffe源码阅读(1)-数据流Blob
Blob是Caffe中层之间数据流通的单位,各个layer之间的数据通过Blob传递.在看Blob源码之前,先看一下CPU和GPU内存之间的数据同步类SyncedMemory:使用GPU运算时,数据要 ...