简单的网页布局效果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 ...
随机推荐
- cgi表单的处理
在HTML中,当客户填写了表单,并按下了发送(submit)按钮后,表单的内容被发送 到了服务器端,一般的,这时就需要有一个服务器端脚本来对表单的内容进行一些处理, 或者是把它们保存起来,或者是按内容 ...
- [问题] PHP接收Request payload传递过来的参数
在使用Apidoc的时候,有一个配置参数是 @apiSampleRequest http://localhost/api 在测试时,发现发送的参数是Request payload的,而PHP中使用的A ...
- 小学英语课文朗读APP开发笔记(一):创建Win7虚拟机
1 缘起 以小米盒子为代表的OTT机顶盒.智能电视的快速普及,快速推动了Android技术在机顶盒.智能电视领域的普及.既然都是用的Android操作系统,那么从技术上来说应该是大同小异的,当然和手机 ...
- Android IntentService使用
因为多数启动服务不必同时处理多个请求(在多线程情景下会很危险),所以使用IntentService类实现服务是很好的选择.本经验将通过继承IntentService输出当前时间教大家如何使用Inten ...
- Anddoi 将时间转换为指定时区的时间
import java.text.Format;import java.text.ParseException;import java.text.SimpleDateFormat;import jav ...
- C#数据等待
1 public bool WaitData() 2 { 3 bool states = false; 4 try 5 { 6 DateTime Get_Time = DateTime.Now; 7 ...
- ubuntu系统安装flashplayer
打开浏览器,输入adobe flashplayer 进入官方网站,下载Linux 32-bit, 简体中文, Firefox,下载.tar.gz包. 然后点击立即下载.下载之后找到解压该文件夹,找到 ...
- popen pclose 不等待命令执行完毕
$handle = popen("start D:\\test.bat", "r"); //exec("start D:\\test.bat" ...
- ###使用phpmailer自动邮件提醒
近期的一个小项目中需要用到邮件自动通知功能,搜了搜,发现phpmailer这个东西大家用的挺多的. 首先去sourceforge下载phpmailer,也可去我的网盘下载,我用的是5.1版本的. 看到 ...
- How to debug Custom Action DLL
在MSI工程中,经常会遇到这样的情况: MSI 工程需要调用DLL(C++)中的一个函数实现某些特殊或者复杂的功能,通常的做法是在Custom Action 中调用该DLL . 那么在安装过程中,该C ...