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 ...
随机推荐
- JMeter目录结构
转载自https://www.cnblogs.com/imyalost/p/6959797.html 首先得了解一下这些东西,以后才能快速的找到某些配置文件进行修改(举个例子,改配置只是其中之一) 一 ...
- 如何使用android-support-V7包中ActionBar（Eclipse版）
$*********************************************************************************************$ 博主推荐 ...
- docker学习路线图
https://yq.aliyun.com/articles/40494?spm=a2c4e.11153959.teamhomeleft.23.6ea918b1KErlfs
- Python语法基础03(if语句,while循环与for循环)
if语句:语法:单分支if 判断条件:语句块 执行过程:首先执行判断条件,当条件成立则执行判断条件下面的语句块,若条件不成立,则不执行 双分支if 判断条件:语句块1else:语句块2执行过程: 首先 ...
- postgresql修改自增序列
----删除前先解除 id 对该序列的依赖ALTER TABLE tablename ALTER COLUMN id SET DEFAULT null;DROP SEQUENCE IF EXISTS ...
- python正则re
import reline = "Catsaresmarterthandogs"matchObj = re.match( r'(.*)are(\w{2})(.*)', line, ...
- 在一台机上搭建多个MYSQL并设置主从
安装 cd /usr/local/src/ -linux2.-x86_64.tar.gz -linux2.-x86_64 /usr/local/mysql grep mysql /etc/passwd ...
- 为什么TCP 会粘包断包UDP不会
TCP(transport control protocol,传输控制协议)是面向连接的,面向流的,提供高可靠性服务.收发两端(客户端和服务器端)都要有一一成对的socket,因此,发送端为了将多个发 ...
- cmd 修改当前路径
cd 命令需要加/d,如:
- 分析无法进入Linux系统的原因
上文:http://www.cnblogs.com/long123king/p/3549701.html 1: static int __init kernel_init(void * unused) ...