简单的网页布局效果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 ...
随机推荐
- 如何在ios手机端的Safari浏览器 中“查看网页源代码”
在这里给大家分享一个很简单的用苹果手机无需越狱就可以查看网页源代码的方法,不过这个方法只用于苹果手机自带的Safari浏览器 随便添加一个safari 书签 (用于一会改为查看源码功能书签)进入书签 ...
- Nodejs v4.x.0API文档学习（2）Assert断言测试模块
文档参考地址:https://nodejs.org/dist/latest-v4.x/docs/api/ Assert(断言) assert模块提供了一组简单的断言测试方法,可以拥有测试不变量.该模块 ...
- bootstrap兼容IE
这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式.IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用 ...
- 浅试WebStorm配置Node.js开发环境
web前端开发IDE一直喜欢用WebStorm,这里简单介绍如何用WebStorm搭建一个Node.js开发环境. 首先,需要在本地安装好node.js,以及npm包管理工具.你也可以吧node.js ...
- ant design 自定义表单验证大全
需求是 账号名可以是手机号也可以是邮箱 要做手机号和邮箱的验证,官网的那个验证规则不匹配 怎么自定义验证规则? 一:组件部分 <Form horizontal> <Row gu ...
- ASP多行多列又一个方法
<table border=1 width="200"> <% col=4 '列数 i=1 Do While i<=100 If i Mod col=1 T ...
- asp图片化电话号码，避免蜘蛛之类爬走用户隐私
作用:将页面中的电话号码生成图片格式.挺多的分类信息类网站使用这个功能.不用真正的生成图片.原理类似验证码,挺不错的. <% Call Com_CreatValidCode(Request.Qu ...
- ionic+cordova+angularJs监听刷新
普通的js返回并刷新这里就不多说了,百度就有很多方法. 下面说的是使用了angularjs.ionic开发的一个手机app中我使用的返回上一页并刷新的方法. 场景:回复的页面是单独的,点击保存回复后会 ...
- kettle Java Filter(表达式过滤)
- 2.2_线性表的顺序存储结构_参考集合ArrayList
[线性表的顺序存储从结构] 指的是用一段连续的存储单元一次储存线性表的数据元素. [线性表的顺序存储的结构代码 C语言版] #define MAXSIZE 20 /*存储空间初始分配量*/ typed ...