简单的网页布局效果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 ...
随机推荐
- MATLAB的基本元素
MALTAB程序的基本数据单元是数组,MATLAB 的变量名必须以字母开头,后面可以跟字母,数字和下划线(_).只有前31个字符是有效的:如果超过了31 个字符,基余的字符将被忽略.如果声明两个变量, ...
- c# 委托与异步调用
背景:在winform UI中,有时需要对控件进行比较频繁的刷新,如进度条.picturebox显示视频等.如果在主线程进行这些刷新操作,操作还未完成就将执行下一次刷新,程序将发生错误:如果只是创建另 ...
- 用js操作表格
效果图: 任务: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff var tr=document.getElementsByTagName(" ...
- spring beans的写入工具——spring-beans-writer
spring-beans-writer是我曾经为动态生成spring beans配置文件做的一个写入工具,托管地址: https://github.com/bluejoe2008/spring-bea ...
- 在ef下使用lambda实现left join
db.Categories .GroupJoin( db.Products, Category => Category.CategoryId, Product => Product.Cat ...
- 20160509-hibernate-集合映射
集合映射 集合映射(set, list, array,bag, map) <set name=”employees” > <key column=”depart_id”/> & ...
- System.Data.SqlClient.SqlError: 对文件……的目录查找失败[转]
System.Data.SqlClient.SqlError: 对文件……的目录查找失败,出现操作系统错误 3 的处理办法 在还原SQL SERVER数据库时出现了查找目录失败的原因,困扰了我一个多小 ...
- c# winform动态生成控件与获取动态控件输入的值
差不多有2年没有写winform程序,一直都是写bs.最近项目需要,又开始着手写一个小功能的winform程序,需要动态获取xml文件的节点个数,生成跟节点个数一样的textbox, 最后还要获取操作 ...
- JDOM方法实现对XML文件的解析
首先要下载JDOM.jar包,下载地址:http://download.csdn.net/detail/ww6055/8880371 下载到JDOM.jar包之后导入到工程中去. 实例程序: book ...
- unity3d环境安装指南: Unity 4.5.5 + Visual Studio 2010
1. UnitySetup-4.5.5.exe 官网下载最新版本4.X 安装exe文件 2. Unity 4.x Pro Patch.exe 复制exe到安装目录下 C:\Program Files ...