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 ...
随机推荐
- 【Luogu】【关卡2-4】排序Ex（2017年10月）
任务说明:这里的排序就更上一层了.不仅融合了别的算法与技巧,排序本身也有各种花招.
- day06 python is == 编码 解码
day06 python 一. is 和 == 的区别 == :比较, 判断, 比较的是值: 可以比较数字, 字符串, 列表, 元组, 字典,等 is :是 比较, 比较的是内存地 ...
- nodejs 模板引擎jade的简单使用(2)
1.jade html head style body div.box div#div1 div aaa div(class="aaa left-warp active") div ...
- linux安装zabbix的tar包和另外一个并存
在安装zabbix客户端的时候,发现存在一个zabbix客户端,现在我们要重新建一个来与之并存 第一步安装: cd /data0/software/ tar xf zabbix-3.0.28.tar. ...
- 6371. 【NOIP2019模拟2019.9.28】基础图论练习题
题目 题目大意 维护一个无向图的割边条数,支持加边和删边. 正解 (PS:这是我很久之前在OJ上打出来的题解,现在直接copy过来) 题解只有一句话,估计没多少人可以看得懂.感觉出题人偷懒不想写题解- ...
- mongodb数据库管道操作
1.$project(修改文档的结构,可以用来重命名.增加或删除文档中的字段) db.order.aggregate([ { $project:{ rade_no:1, all_price:1} } ...
- 【SQL】Mysql常用sql语句记录
1.创建用户.赋予权限 CREATE DATABASE scadm DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; CREATE USER 's ...
- js 将字符串当作js表达式执行方法
听同事说了一个需求.他有一个数据对象obj,接口会给他返回一个索引key,这个key长度不固定,根据这个key去修改obj对应的值. 举个例子: let obj={"level1" ...
- （转）OpenFire源码学习之二十七：Smack源码解析
转:http://blog.csdn.net/huwenfeng_2011/article/details/43484199 Smack Smack是一个用于和XMPP服务器通信的类库,由此可以实现即 ...
- CentOS 安装MySQL(rpm)提示错误Header V3 DSA/SHA1 Signature
提示错误:Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY error: Failed dependencies 错误原因:这是由于yum安装了 ...