HTML5布局篇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head> <body>
<a name="sh"></a>
<!--导航-->
<div id="holder">
<div id="begin">
<div id="timu">
<h1>
<a href="#">WILDFLOWERS</a>
</h1>
</div> <div id="daoh">
<ul>
<li><a href="#">HOMEPAGE</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div>
<img src="data:images/img03.png" width="1000" height="40"/>
</div>
<!--导航结束--> <div id="pic">
<img src="data:images/img04.jpg">
</div> <div>
<img src="data:images/img03.png" width="1000" height="40"/>
</div> <!-- 文章部分-->
<div id="wenz">
<div id="youb">
<div class="post">
<h2>
<a href="#">WELCOME TO WILDFLOWERS</a>
</h2> <p class="meta">
<span>September 02, 2012</span>
<span>Posted by Someone</span>
</p> <div class="scrap">
<p>
body{
background:yellow url("images/img01.jpg");
}
/* 导航*/
#holder{
width:1000px;
margin:50px auto auto;
}
#begin{
height:100px;
background:url("images/img02.jpg");
margin:auto auto;
}
#timu{
width:300px;
height:100px;
float:left;
line-height:100px;
margin:auto 100px auto 50px;
}
#timu a{
font-size:1.5em ;
color:white;
}
#daoh{
height:100px;
line-height:100px;
float:left;
}
#daoh li{
list-style-type:none;
float:left;
margin-left:50px;
}
#daoh li a{
color:white;
}
/* 相片*/
#pic{
width:1000px;
height:300px;
background:white;
}
#pic img{
margin:16px 10px;
}
/* 文章右侧*/
#wenz{
background:#FFF ;
width:1000px ;
height:1400px ;
}
/*w=文章开始*/
#youb{
width:580px;
height:1400px;
float:left;
}
.post h2 a {
font-size:30px;
color:#79A62E;;
}
.post h2{
padding:30px 30px 20px ;
}
.post p span:nth-child(1) {
float:left ;
color: #5E5E5E;
}
.post p span:nth-child(2) {
float:right ;
color: #5E5E5E;
}
span{
padding-left:30px;
}
.meta{
font-size: 14px;
}
.scrap{
clear:both ;
padding-left:33px;
padding-top:20px;
color: #787878;
}
p {
line-height:180% ;
}
.hdu img{
margin-top:15px;
}
.bd{
font-size:15px;
}
.yd a{
color: #5E5E5E;
}
p.yd {
margin:30px auto 40px ;
}
.post{
border-bottom:1px solid #E7EBED ;
}
/* 右侧内容*/
#for{
width:300px;
height:1400px;
float:left;
margin-left:50px;
}
#for ul li a{
line-height:40px;
border-bottom:1px solid #E7EBED ;
color:#5E5E5E;
}
#for ul li{
list-style-type:none;
}
#for h2 {
margin:50px auto 45px;
color:#5E5E5E;
}
#wb p{
color:#527800 ;
margin:10px 130px 80px;
}
/* 固定图标*/
#tub{
width:38px;
position:fixed;
right:0px;
bottom:0px;
}
.pic{
width:38px;
height:37px;
margin-top:2px;
background:gray;
border-radius:3px 0 0 3px ;
font-family:myzt; /************************这里就是引用字体*************** ****************/
line-height:37px;
text-align:center;
color:white;
font-size:35px;
position:relative ;
}
.jl{
margin-bottom:170px;
}
.icon{
width:38px ;
height:37px ;
display:block ;
position:absolute;
right:;
top:;
z-index:;
overflow:hidden ;
text-align:center ;
transition:background .2s ;
}
.icon-text{
background:red;
width:150px;
height:38px;
font-size:14px;
line-height:38px;
position:absolute;
right:-150px;
top:;
z-index:;
text-align:center ;
padding-left:left;
border-radius:2px 0 0 2px ;
transition:right .2s ease-in-out ;
}
a{
color:white;
}
.pic:nth-child(1):hover .icon-text{
right:0 ;
}
.pic:nth-child(1):hover .icon {
background:red ;
}
.pic:nth-child(2):hover .icon-text{
right:0 ;
}
.pic:nth-child(2):hover .icon {
background:red ;
}
.pic:nth-child(3):hover .icon-text{
right:0 ;
}
.pic:nth-child(3):hover .icon {
background:red ;
}
.pic:nth-child(4):hover .icon-text{
right:0 ;
}
.pic:nth-child(4):hover .icon {
background:red ;
}
.pic:nth-child(5):hover .icon-text{
right:0 ;
}
.pic:nth-child(5):hover .icon {
background:red ;
}
.pic:nth-child(6):hover .icon-text{
right:0 ;
}
.pic:nth-child(6):hover .icon {
background:red ;
}
.pic:nth-child(7):hover .icon-text{
right:0 ;
}
.pic:nth-child(7):hover .icon {
background:red ;
}
.pic:nth-child(8):hover .icon-text{
right:0 ;
}
.pic:nth-child(8):hover .icon {
background:red ;
}
This is <b> WildFlowers</b>,a free,fully standards-compliant CSS template designed by FCT.
The photos in this template are from Fotogrph.This free template is released under a Creative Commons Attributions 3.0 license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
</p>
<p class="hdu">
<img src="data:images/img06.jpg" width="545" height="200"/> </p>
<p class="bd">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus, cursus egestas at sem.
</p>
<p class="yd">
<a href="#">Read More</a>
<a href="#">Comments</a>
</p>
</div>
</div>
<!--第二部分-->
<div class="post">
<h2>
<a href="#">LOREM IPSUM SED ALIQUAM</a>
</h2> <p class="meta">
<span>September 01, 2012</span>
<span>Posted by Someone</span>
</p> <div class="scrap"> <p class="hdu">
<img src="data:images/img05.jpg" width="545" height="200"/> </p>
<p class="bd">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus, cursus egestas at sem.
</p>
<p class="yd">
<a href="#">Read More</a>
<a href="#">Comments</a>
</p>
</div>
</div>
</div> <!-- 右侧内容-->
<div id="for">
<h2>Categories</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul> <h2>BLOGROLL</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul> <h2>ARCHIVES</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</div> <div>
<img src="data:images/img03.png"/>
</div> <div id="wb">
<p>
COPYRIGHT (C) 2012 SITENAME.COM. ALL RIGHTS RESERVED. DESIGN BY FCT. PHOTOS BY FOTOGRPH.
</p>
</div>
</div> <div id="tub">
<div class="pic">
<div class="icon">H</div>
<div class="icon-text">欢迎光临</div> </div> <div class="pic">
<div class="icon">K</div>
<div class="icon-text">注册用户</div>
</div> <div class="pic">
<div class="icon">U</div>
<div class="icon-text">购买</div>
</div> <div class="pic">
<div class="icon">Ù</div>
<div class="icon-text">超级用户</div>
</div> <div class="pic jl">
<div class="icon">Û</div>
<div class="icon-text">记事本</div>
</div> <div class="pic">
<div class="icon">M</div>
<div class="icon-text">邮件箱</div>
</div> <div class="pic">
<div class="icon">S</div>
<div class="icon-text">花的论坛</div>
</div> <div class="pic">
<div class="icon"><</div>
<div class="icon-text"><a href="#sh">回到顶部</a></div>
</div>
</div> </body>
</html>
这里就是css代码
效果图
HTML5布局篇的更多相关文章
- 一步一步构建手机WebApp开发——页面布局篇
继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...
- Html5 布局方式
在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关.在新的Html5中,布局却显得更加人性化,更易理解了.如增加了Header,Footer,Sectio ...
- react-native 之布局篇
一.宽度单位和像素密度 react的宽度不支持百分比,设置宽度时不需要带单位,那么默认的单位是什么呢? /** * Sample React Native App * https://github.c ...
- HTML5 布局标签
HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站,相对HTML4,HTML5新增的带有语义化的标签可以代替div进行页面布局(与html5.js结合起来时可以放心使用 ) ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- HTML5布局
完整示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Angular Material 教程之布局篇
Angular Material 教程之布局篇 (一) : 布局简介https://segmentfault.com/a/1190000007215707 Angular Material 教程之布局 ...
- 【WPF】 布局篇
[WPF] 布局篇 一. 几个常用且至关重要的属性 1. Width,Height : 设置窗体,控件宽高. 这里注意,WPF是自适应的, 所以把这2个属性设置 Auto, 则控件宽高会自动改变. 2 ...
随机推荐
- 【javascript闭包】转载一篇不错的解释，也有几个大牛的链接
初学闭包时一直以为很简单.但伴随对一个问题深入学习后,才算真正理解了闭包,同时也发现连<<JavaScript高级程序设计>>中都些不准确的地方. 我不准备从头介绍闭包的概念, ...
- es5-class
1. 通过class定义类/实现类的继承2. 在类中通过constructor定义构造方法3. 通过new来创建类的实例4. 通过extends来实现类的继承5. 通过super调用父类的构造方法6. ...
- redis相关笔记(一.安装及单机及哨兵使用)
redis笔记一 redis笔记二 redis笔记三 1.安装 cd /usr/src #进入下载目录(这个目录自己定) yum install -y wget gcc make tcl #安装依赖 ...
- 基于SpringBoot的花里胡哨配置
花里胡哨的配置 记录一下流行框架的一些常用配置 lomback配置文件 <?xml version="1.0" encoding="UTF-8"?> ...
- MySql中创建用户,授权
第一天搞MySql好多东西都不会,幸好有网络的强大资源,首先需要注意的是任何一条sql语句都是要以分号结尾的,不然很是蛋疼的 1.新建用户. //登录MYSQL @>mysql -u root ...
- PHP学习(MVC架构与面向对象)
想好好的学一下php中的一些面向对象的知识,以前只是为了打CTF随意的学了一下,但是为了以后的代码审计(准备PHP这边把thinkphp这个框架好好的学一下). PHP面向对象的基本知识 类与对象 类 ...
- TeleportPoint可瞬移的目标位置
TeleportPoint.png 最外部的组件: Animation: 包含了该装置的几个动画Teleport Point: 点传送的脚本 teleport_marker_mesh: 外部的圆柱形光 ...
- （转）websocket
作者:Ovear链接:https://www.zhihu.com/question/20215561/answer/40316953来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
- CSS：CSS 媒体类型
ylbtech-CSS:CSS 媒体类型 1.返回顶部 1. CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体类型 ...
- C++——编译器运行过程
C++ 编译过程简介 C/C++程序编译流程: 预处理->编译->汇编->链接 具体的就是: 源代码(source coprede)→预处理器(processor)→编译器(co ...