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 ...
随机推荐
- model字段对象和forms字段对象的区别和联系
一.model字段对象 (一)_meta _meta是django.db.models.options.Options的实例,获取字段对象可通过模型类来进行获取,而_meta可提供如下功能: 获取模型 ...
- 关于SQL中 =：的含义
一个很恶臭的例子来说明 =: 在sql语句中是做什么用的 int number= 114514: //众所周知野兽先辈的咆哮(世界级美声)是一串数字 var strSql = "select ...
- AcWing 139. 回文子串的最大长度 hash打卡
如果一个字符串正着读和倒着读是一样的,则称它是回文的. 给定一个长度为N的字符串S,求他的最长回文子串的长度是多少. 输入格式 输入将包含最多30个测试用例,每个测试用例占一行,以最多1000000个 ...
- python 拆分字符串（3.0）
拆分字符串 1. def my_split(s, ds): l = [s] for d in ds: res = [] list(map(lambda x: res.extend(x.split(d) ...
- 互斥锁Demo
#include <stdio.h> #include <pthread.h> pthread_t work1Id; pthread_t work2Id; ; ; pthrea ...
- Future初次使用理解
当客户端执行方法时,立即返回一个代理对象,此时代理对象没有数据,与此同时开启一个线程去构造真实对象并把真实对象替换掉代理对象(使用set方法).所以就会出现,客户端收到代理对象之后以为执行完了然后执行 ...
- 19、javascript基础知识
1.几天接到了一个奇葩的需求,就是在鼠标滚轮滑动的时候,div要悬浮不动,因此这引起了我对于javascript知识的复习 首先从最基础的变量的类型开始 <!DOCTYPE html> & ...
- Java学习之集合（LinkedList链表集合）
一.什么是链表集合,通过图形来看,比如33只知道它下一个是55 如果:现在要删除33的话,就是把55赋值给45,这样看它操作集合速度会非常快. 二.LinkedList特有方法 1.添加 addFir ...
- 在一台机上搭建多个MYSQL并设置主从
安装 cd /usr/local/src/ -linux2.-x86_64.tar.gz -linux2.-x86_64 /usr/local/mysql grep mysql /etc/passwd ...
- vue-router 动态路由
上一篇文章我们已经配置好了路由,下面,来说说如何实现动态路由. 比如,我想在 news 页点击列表项,跳转到对应项,如图所示: 这里引用的数据是豆瓣电影,地址: http://api.douban.c ...