html5+css3布局尝试
今日刚学习了html5+css3布局入门,下面将学习的内容记录如下:
一、预期目标
实现一个博客的显示布局,如图:
二、使用html5编写网页结构,代码容易理解:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Layout TEST</title>
</head>
<body>
<h2>body</h2>
<header id="page_header">
<h1>Header</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</nav>
</header>
<section id="posts">
<h2>Section</h2>
<article class="post">
<h2>article</h2>
<header>
<h2>Article Header</h2>
</header>
<aside>
<h2>Article Aside</h2>
</aside>
<p>Without you?I'd be a soul without a purpose.
</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
<article class="post">
<h2>article</h2>
<header>
<h2>Article Header</h2>
</header>
<aside>
<h2>Article Aside</h2>
</aside>
<p>Without you?I'd be a soul without a purpose. </p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<section id="sidebar">
<h2>Section</h2>
<header>
<h2>Sidebar Header</h2>
</header>
<nav>
<h3></h3>
<ul>
<li><a href="2012/04">April 2012</a></li>
<li><a href="2012/03">March 2012</a></li>
<li><a href="2012/02">February 2012</a></li>
<li><a href="2012/01">January 2012</a></li>
</ul>
</nav>
</section>
<footer id="page_footer">
<h2>Footer</h2>
</footer>
</body>
</html>
三、主要是css代码的编写:
@charset "utf-8";
/* CSS Document */
body { /*整个页面的属性设定*/
background-color: #CCCCCC; /*背景色*/
font-family: Geneva, sans-serif , 宋体; /*可用字体*/
margin: 10px auto; /*页边空白*/
max-width: 800px;
border: solid; /*边缘立体*/
border-color: #FFFFFF; /*边缘颜色*/
}
h2 { /*设定整个body内的h2的共同属性*/
text-align: center; /*文本居中*/
}
header { /*整个body页面的header适用*/
background-color: #F47D31;
color: #FFFFFF;
text-align: center;
}
article { /*整个body页面的article适用*/
background-color: #eee;
}
p { /*整个body页面的p适用*/
color: #F36;
}
nav,article,aside { /*共同属性*/
margin: 10px;
padding: 10px;
display: block;
}
header#page_header nav { /*header#page_header nav的属性*/
list-style: none;
margin: 0;
padding: 0;
}
header#page_header nav ul li { /*header#page_header nav ul li属性*/
padding: 0;
margin: 0 20px 0 0;
display: inline;
}
section#posts { /*#posts 的section属性*/
display: block;
float: left;
width: 70%;
height: auto;
background-color: #F69;
}
section#posts article footer { /*section#posts article footer属性*/
background-color: #039;
clear: both;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
padding: 15px;
}
section#posts aside { /*section#posts aside属性*/
background-color: #069;
display: block;
float: right;
width: 35%;
margin-left: 5%;
font-size: 20px;
line-height: 40px;
}
section#sidebar { /*section#sidebar属性*/
background-color: #eee;
display: block;
float: right;
width: 25%;
height: auto;
background-color: #699;
margin-right: 15px;
}
footer#page_footer { /*footer#page_footer属性*/
display: block;
clear: both;
width: 100%;
margin-top: 15px;
display: block;
color: #FFFFFF;
text-align: center;
background-color: #06C;
}
四、总结
看上去挺容易,但每个位置,布局都比较繁琐,需要多次练习才能掌握,还要多多练习。
html5+css3布局尝试相关推荐
- 国家游泳中心-水立方 8页面 北京奥运会主游泳馆 HTML5+CSS3布局 ASP+ACCESS数据库 注册登录留言功能 搜索修改删除留言功能(增删查改)
<DOCTYPE> <html> <head> <meta charset="utf-8"> <title>国家游泳中心 ...
- html5 css3 jquery 画板
采用html5 canvas + css3 + jquery 写的涂鸦画板,以前为了学习h5 新特性做的一个小玩意,功能有打开图片,支持拖拽到画布中加载: 画笔功能.毛笔刷.插入文字,画直线.圆形.方 ...
- html5布局ppt,HTML5+CS3布局.ppt
HTML5+CSS3布局 主要工作 布局之前先在站点中建立几个文件夹(分门别类或内容)和index.htm文件: 如images.css等: 利用HTML5框架放置网页元素 如图片.文字.超级链接.表 ...
- css3网站代码 html5_网站布局、排版优秀的HTML5+CSS3网页设计
网站布局.排版优秀的HTML5+CSS3网页设计 七月 8, 2013 评论 (3) Sponsor 目前大部分浏览器已经更新换代,并支持新的网站技术,所以网页设计师们开始喜欢使用HTML5和CSS3 ...
- html5+css3网页设计与网站布局从新手到高手,HTML5+CSS3网页设计与网站布局从新手到高手...
HTML5+CSS3网页设计与网站布局从新手到高手 语音 编辑 锁定 讨论 上传视频 <从新手到高手:HTML 5+CSS 3网页设计与网站布局从新手到高手>是2013年1月清华大学出版社 ...
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计...
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
- html常规的布局模版,html5/css3常规布局(示例代码)
简介这篇文章主要介绍了html5/css3常规布局(示例代码)以及相关的经验技巧,文章约2644字,浏览量165,点赞数6,值得推荐! content="initial-scale=1.0, ...
最新文章
- 节后招人平均工资9000上热搜,为什么有些人去哪里都值钱?
- php里Array2xml
- Activity的taskAffinity属性
- java并发编程实战学习笔记之基础知识与对象的共享
- Java代理设计模式(Proxy)的四种具体实现:静态代理和动态代理
- php是单线程吗,php语言是单线程吗?
- 创建抽象类、_【Java视频教程】day16-抽象类
- 电脑dns_女生也能学会的修电脑技巧
- SpringCloud——服务调用
- 《HRNet-OCR:Object-Contextual Representations for Semantic Segmentation》论文笔记
- 保存的离线网页总是自动跳转
- 教你如何下载并破解IAR
- 论文检测_免费论文检测系统
- “狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
- 【生信分析】Analyzing RNA-seq data with DESeq2:输入数据和差异表达分析
- 桌面图标小箭头去除方法
- 为什么要将数据序列化?
- java数组下标异常越界程序,Java程序运行时会自动检查数组的下标是否越界,如果越界,会抛出下面的哪一个异常?...
- 容联携手火星时代教育 促进线上线下一体化
- VBA的 随机数 rnd 和 randomize 如何配合使用? 伪随机数带来的问题,根据需要产生不同的随机数!
热门文章
- 字符串分割(split),将字符串按照指定字符进行分割。split(String regex)和split(String regex, int limit)
- 在Outlook 2007中配置自动存档
- scratch 学习网址:
- Google退出中国内地祭
- 隐藏a标签html,a标签显示隐藏 js怎么控制a标签的显示和隐藏
- Unity 实现A* 寻路算法
- Cg语言学习笔记(1)
- 逻辑回归(logistic regression)原理理解+matlab实现
- 计算机博士要几篇顶会论文,我,斯坦福读博,5年5篇顶会论文,却依然觉得研究生涯充满挫折...
- JSch执行shell命令