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 ...
随机推荐
- ie 图片拉伸
终于发现只要设置img为 height:auto,width:auto,就不会出现这种情况了 img { height: auto; width: auto; }
- 【JS学习】慕课网4-1编程挑战 函数
要求:小伙伴们,请编写"改变颜色"."改变宽高"."隐藏内容"."显示内容"."取消设置"的函数,点 ...
- KMP 算法学习
KMP算法是用来做字符串匹配的.关于字符串匹配,最简单最容易想到的方法是暴利查找,使用双重for循环处理. 该方法的时间复杂度为O((n-m+1)*m) (n为目标串T长度,m为模式串P长度, 从T中 ...
- 文件上传绕过WAF
文件上传 文件上传实质上还是客户端的POST请求,消息主体是一些上传信息.前端上传页面需要指定 enctype为multipart/from-data才能正常上传文件. 此处不讲各种中间件解析漏洞只列 ...
- leetcode-160周赛-5240-串联字符串的最大长度
题目描述: 自己的提交:O(2**n∗n∗m),m 为字符串长度 class Solution: def maxLength(self, arr: List[str]) -> int: from ...
- luoguP1313 [NOIp2011]计算系数 [组合数学]
题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...
- 64 计算机图形学入门（1）——OpenGL环境配置与图形流水线（图像管线）
0 引言 最近想学一下计算机图形学方面的知识,原因如下.目前本人接触了数字图像处理(opencv)以及点云处理(PCL)方面的知识,对从图像和点云中提取特征信息,并将特征转化为底层/中层语义信息有了一 ...
- （转）XMPP协议原理
本文介绍XMPP协议原理及相关信息. XMPP协议简介 XMPP(Extensible Messageing and Presence Protocol:可扩展消息与存在协议)是目前主流的四种IM ...
- 使用ansible远程管理集群
使用ansible远程执行命令 1.ansible简介 ansible的官方定义:"Ansible is Simple IT Automation"--简单的自动化IT工具.这个工 ...
- 在Python的列表中利用remove()方法删除元素的教程
在Python的列表中利用remove()方法删除元素的教程 这篇文章主要介绍了在Python的列表中利用remove()方法删除元素的教程,是Python入门中的基础知识,注意其和pop()方法的区 ...