简单的网页布局效果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 ...
随机推荐
- [转]ORACLE日期时间函数大全
本文转自:http://www.cnblogs.com/chuncn/archive/2009/04/29/1381282.html ORACLE日期时间函数大全 TO_DATE格式(以时间: ::2 ...
- centos find
首先你要确定你的软件是什么方式安装?如果不确定,你可知道你的软件名字,用find查找一下在哪个目录find / -name softname
- linux下安装软件后的环境变量设置
/home/username/.bashrc文件中加入如下内容 export LM_LICENSE_FILE=/home/program_files/modeltech_10.2c/modeltech ...
- 用jsp方式通知客户端下载文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- GetWindowRect() GetClientRect() ScreenToClient() MoveWindow()
CWnd.GetWindowRect 参照坐标系:屏幕坐标系,原点为屏幕左上角(0,0)的位置 功能:取得调用窗口CWnd在屏幕坐标系下的RECT坐标 CWnd.GetClientRect 参照坐标系 ...
- LaTeX Pdf to Word
用LaTeX写的文稿,生成的pdf,如果要改成word文档,如何是最合适的方式? 查了很多帖子,比较靠谱的一种方式是先将pdf转成rtf格式,再用word打开rtf文件.也有直接从tex文件直接转成d ...
- WebClient.UploadValues Post中文乱码的解决方法
//using (System.Net.WebClient wc = new System.Net.WebClient()) //{ // wc.Encoding = Encoding.GetEnco ...
- 三【相关度 相似度查询与计算】相似度到大数据查找之Mysql 文章匹配的一些思路与提高查询速度
记录下,在上2回的数据基础之上,附带一个互信息(MI,Mutual Information)可以计算词之间的相关度 标准互信息 MI(X,Y)=log2p(x,y)/p(x)p(y) 值越大于0 则趋 ...
- KMP的模版实现（以hdu1711为例）
贴代码,觉得带template的有一些大材小用……不过还是按自己风格写吧! /************************************************************* ...
- 如何自动拼接 Update语句，仅Update已修改的字段
我们通常使用update语句更新数据库记录,例如使用update user set username='001', nickname='Tom', age=18 where id = 1语句更新use ...