【学习笔记】HTML5 示例
示例1
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/common.css" type="text/css">
<title>博文尚美title>
head>
<body>
<div id="header" class="container-fluid">
<div id="head" class="container">
<div id="logo" class="l">
<img src="img/logo.png" title="厦门博文尚美文化传媒有限公司"/>
div>
<div id="head_menu" class="r">
<ul>
<li><a href="#">首页a>li>
<li><a href="#">关于我们a>li>
<li><a href="#">客户案例a>li>
<li><a href="#">服务项目a>li>
<li><a href="#">新闻资讯a>li>
<li><a href="#">联系我们a>li>
ul>
div>
div>
div>
<div id="banner" class="container-fluid">
<div id="banner_list" class="ohidd">
<ul>
<li><img src="img/20141118105240603.jpg" title="手机网站制作"/>li>
<li><img src="img/20141118105318954.jpg" title="企业vi识别设计"/>li>
<li><img src="img/20141118105423471.jpg" title="专业地产网站设计"/>li>
<li><img src="img/20141118105500969.jpg" title="企业网站建设"/>li>
<li><img src="img/20141118105240603.jpg" title="手机网站制作"/>li>
ul>
div>
div>
<div id="services" class="container-fluid">
<div id="service" class="container">
<h2>服务范围h2>
<p>OUR SERVICESp>
<ul id="service_list">
<li>
<div class="img" style="background-image: url(img/web1.png);">div>
<div class="top">
<h3>1.WEB DESIGNh3>
<p>企业品牌网站设计 / 手机网站制作 <br/>
动画网站创意设计 p>
div>
li>
<li>
<div class="img" style="background-image: url(img/graphic1.png);">div>
<div class="top">
<h3>2.GRAPHIC DESIGNh3>
<p>标志LOGO设计 / 产品宣传册设计 <br/>
企业广告 / 海报设计 p>
div>
li>
<li>
<div class="img" style="background-image: url(img/e-bussiness1.png);">div>
<div class="top">
<h3>3.E-BUSINESS PLANh3>
<p>淘宝 / 天猫装修设计及运营推广 <br/>
企业微博 / 微信营销 p>
div>
li>
<li>
<div class="img" style="background-image: url(img/mail1.png);">div>
<div class="top">
<h3>4.MAILBOX AGENTSh3>
<p>腾讯 / 网易企业邮箱品牌代理 <br/>
个性化邮箱定制开发 p>
div>
li>
ul>
div>
div>
<div id="cases" class="container-fluid ohidd">
<h2>［ 客户案例 ］h3>
<p>With the best professional technology, to design the best innovative web sitep>
<ul id="case_list" class="container">
<li>
<a href="" title="凯雷澳眼镜">
<img src="img/20141121095528549.jpg" width="339">
<div class="vlock">
<p>项目名称：凯雷澳眼镜p>
div>
a>
li>
<li>
<a href="" title="日月谷温泉乡村俱乐部">
<img src="img/20141121095216750.jpg" width="339">
<div class="vlock">
<p>项目名称：日月谷温泉乡村俱乐部p>
div>
a>
li>
<li>
<a href="" title="厦门倍特雷贸易">
<img src="img/20141121105856226.jpg" width="339">
<div class="vlock">
<p>项目名称：厦门倍特雷贸易p>
div>
a>
li>
ul>
<a id="case_more" href="">VIEW MOREa>
div>
<div id="news" class="container-fluid">
<div id="news_list" class="container">
<h2>最新资讯h2>
<p >TEH LATEST NEWSp>
<table class="news_table">
<tr>
<td rowspan="2"><img class="img l" src="img/xs1.jpg" />td>
<td>
<div class="news_date l">
<p>18p>
<em>Augem>
div>
td>
<td>
<div class="news_text l">
<h3><a href="#">漳州西恩视觉婚纱摄影网站建设a>h3>
<p>漳州西恩视觉婚纱摄影隶属西恩视觉文化传播有限公司旗下婚纱摄影品牌，由国内著名摄影师冬晖CHAN...p>
div>
td>
<td>
<div class="news_date l">
<p>16p>
<em>Augem>
div>
td>
<td>
<div class="news_text l">
<h3><a href="#">网站数据统计用哪种比较好?a>h3>
<p>网站数据统计代码是平常网站建设过程中最受用户青睐的数据统计工具，几乎每个用户的网站程序都会...p>
div>
td>
tr>
<tr>
<td>
<div class="news_date l">
<p>14p>
<em>Augem>
div>
td>
<td>
<div class="news_text l">
<h3><a href="#">厦门网站建设服务的内容主要有哪些？a>h3>
<p>大多数用户建网站由于都是头一次接触，对于网站建设并不了解，往往会误认为找网站建设公司建网站...p>
div>
td>
<td>
<div class="news_date l">
<p>12p>
<em>Augem>
div>
td>
<td>
<div class="news_text l">
<h3><a href="#">海石景观股份有限公司网站设计案例解析a>h3>
<p>此次网站整体设计采用扁平化的的风格、简约式排版，网站主视觉区采用大面积的视觉效果图，以动画...p>
div>
td>
tr>
table>
div>
div>
<div id="bottom" class="container-fluid">
<div class="container">
<p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reservedp>
<span class="r">
<a href="">Homea> | <a href="">Abouta> |
<a href="">Portfolioa> | <a href="">Contacta>
span>
div>
div>
body>
html>
CSS
* {margin: 0; padding: 0;}
ul, ol {list-style: none;}
img {display: block;}
a {text-decoration: none; color: #646464}
body {font-family: Verdana; text-align: center;}
.l {float: left;}
.r {float: right;}
.ohidd{ overflow: hidden; *zoom:1;}
.clear:after{content:""; display:block; clear: both;}
.container {width: 1080px; margin: 0 auto; position: relative;}
.container-fluid {width: 100%;}
#header {position: fixed; width: 100%; background: rgba(255,255,255,.8); top: 0; border-bottom: 1px solid #f2f2f2; z-index: 1000;}
#head {height: 81px;}
#logo {width: 162px; height: 44px; line-height: 81px;}
#head_menu li {float: left; margin-left: 40px;}
#head_menu li a {font-size: 16px; line-height: 81px; font-family: "microsoft yahei"; font-weight: 500;}
#head_menu li:hover a {color: #66C5B4;}
#banner {position: relative; margin-top: 80px;}
#banner_list {width: 1440px; height: 469px; margin: auto;}
#banner_list ul {width: 500%; height: 469px; animation: picmove 30s linear infinite forwards;}
@keyframes picmove {0% {transform: translate(0);} 100% {transform: translate(-5760px);}}
#banner_list img {width: 1440px; height: 469px; float: left;}
#banner_list ul:hover {animation-play-state: paused;}
#services {height: 357px; margin: 0 auto;}
#service h2 {margin-top: 52px; background: url(../img/titbg.jpg) no-repeat center 0;
color: #6d6d6d; font-size: 18px; line-height: 30px; height: 30px; font-weight: normal;}
#service p {color: #9d9d9d; margin-right: 3px; line-height: 25px; font-size: 12px;}
#service_list li {width: 250px; margin: 20px 10px; float: left; border-bottom: 4px solid #fff; padding-top: 15px;}
#service_list li:hover {box-shadow: 0 10px 5px #66C5B4;}
#service_list .img {width: 102px; height: 102px; margin: auto; background-repeat: no-repeat; background-position: center 0;}
#service_list h3 {color: #747474; font-family: Calibri; font-size: 20px; margin: 25px 0 12px;}
#service_list p {height: 45px; line-height: 22px; color: #999999; font-size: 14px;}
#cases {margin: auto; padding-top: 52px; height: 408px; background: #f8f8f8;}
#cases h2 {color: #66c5b4; font-size: 18px;}
#cases p {font-size: 12px; color: #9d9d9d; margin-right: 3px; line-height: 25px;}
#case_list {margin-top: 37px; height: 181px;}
#case_list .vlock {width: 339px; height: 181px; z-index: 10; position: absolute; top: 0; left: 0; display: none;
background:url(../img/caselock.png) no-repeat 0 0;}
#case_list .vlock p {color: #fff; font-size: 14px; margin-top: 120px; height: 30px;}
#case_list li:hover .vlock {display: block;}
#case_list li {width: 339px; float: left; margin: 0 10px; position: relative;}
#case_list img {height: 181px;}
#case_more {width: 165px; line-height: 35px; color: #fff; font-size: 14px; height: 35px; margin-top: 40px;
position: absolute; left: 44%; background: url(../img/casecur.png) no-repeat 0 0;}
#case_more:hover {text-decoration: underline; background: url(../img/casehover.png) no-repeat 0 0;}
#news_list h2 {margin-top: 52px; background: url(../img/titbg.jpg) no-repeat center 0;
color: #6d6d6d; font-size: 18px; line-height: 30px; height: 30px}
#news_list p {color: #9d9d9d; margin-right: 3px; line-height: 25px; font-size: 12px;}
#news_list .news_table {margin: 50px 0 60px;}
#news_list .img{width: 234px; margin-right: 2px;}
#news_list .news_date {width: 74px; height: 74px; border-right: 1px solid #e3e3e3; margin-right: 16px;}
#news_list .news_date p {font-size: 36px; color: #66c5b4; font-weight: bold;
display: block; width: 100%; height: 50px; line-height: 50px;}
#news_list .news_date em {font-size: 18px; color: #999; display: block; font-style: normal;}
#news_list .news_text {width: 330px; height: 74px; text-align: left}
#news_list .news_text a {font-size: 14px; color: #666;}
#news_list .news_text p {font-size: 12px; color: #a9a9a9; margin-top: 10px; line-height: 22px;}
#bottom {background-color: #66c5b4;}
#bottom .container {height: 54px; line-height: 54px; font-size: 12px; color: white;}
#bottom a {color: #fff; font-family: Arial; margin: 0 10px;}
效果
示例2
HTML
<html>
<head>
<meta charset="utf-8" />
<title>QQ飞车官网title>
<link rel="stylesheet" href="./css/common.css" type="text/css">
head>
<body>
<header class="container-fluid">
<div class="container" style="z-index: 10;">
<ul>
<li class="logo l">
<a href="" title="腾讯游戏logo"><img src="img/logo.png" />a>
li>
<li class="logo_ad l">
<img src="img/ab8a2cc25c11723da9e814e589cad603.jpg" />
li>
<li class="ost r" style="position: relative;">
<div class="circle l">div>
<h3 class="czsh l"><a href="" style="color: #333;">成长守护平台a>h3>
<h3 class="phb l">腾讯游戏排行榜h3>
<div class="arrow l">div>
li>
ul>
div>
<div id="touch" class="container" style="z-index: 1; height: 50px;">
<div class="white">
<ul class="top">
<li>
<h2>新品端游排行榜h2>
<p><b>1. b>FIFI Online 4p>
<p><b>2. b>NBA2K Online2p>
<p><b>3. b>天涯明月刀p>
<p><b>4. b>剑灵p>
<p><b>5. b>穿越火线p>
<p><b>6. b>逆战p>
<p><b>7. b>QQ炫舞p>
<p><b>8. b>使命召唤Onlinep>
li>
<li>
<h2>热门端游排行榜h2>
<p><b>1. b>英雄联盟p>
<p><b>2. b>穿越火线p>
<p><b>3. b>地下城与勇士p>
<p><b>4. b>天涯明月刀p>
<p><b>5. b>QQ炫舞p>
<p><b>6. b>剑灵p>
<p><b>7. b>FIFI Online 4p>
<p><b>8. b>逆战p>
<p><b>9. b>NBA2K Online2p>
li>
<li>
<h2>新品手游排行榜h2>
<p><b>1. b>雪鹰领主手游p>
<p><b>2. b>火影忍者p>
<p><b>3. b>欢乐斗地主p>
<p><b>4. b>天天爱消除p>
<p><b>5. b>QQ飞车p>
<h2>热门手游排行榜h2>
<p><b>1. b>王者荣耀p>
<p><b>2. b>和平精英p>
<p><b>3. b>穿越火线：枪战王者p>
<p><b>4. b>火影忍者p>
<p><b>5. b>天天爱消除p>
li>
ul>
div>
div>
header>
<div id="banner" class="container-fluid">
<nav class="container-fluid">
<div class="mask container-fluid">div>
<div class="in_logo">div>
<div id="nav_menu" class="container">
<a href="" title="QQ飞车官网首页"><div class="sy l">div>a>
<ul class="navi yx l">
<li><a href="" >新手指引a>li>
<li class="hot"><a href="" >官方漫画a>li>
<li class="new"><a href="" >飞车手游a>li>
<li><a href="" >精美壁纸a>li>
<li><a href="" >游戏下载a>li>
ul>
<ul class="navi ss l">
<li><a href="" >谁是车王a>li>
<li><a href="" >SSCa>li>
<li><a href="" >全国公开赛a>li>
ul>
<ul class="navi hd l">
<li class="hot"><a href="" >版本专区a>li>
<li><a href="" >合作专区a>li>
<li><a href="" >CDK兑换a>li>
ul>
<ul class="navi sc l">
<li><a href="" >紫钻专区a>li>
<li><a href="" >道聚城a>li>
<li><a href="" >点券充值a>li>
ul>
<ul class="navi sp l">
<li><a href="" >教学视频a>li>
<li><a href="" >视频中心a>li>
ul>
<ul class="navi wj l">
<li><a href="" >官方论坛a>li>
<li class="hot"><a href="" >掌上飞车a>li>
<li><a href="" >兴趣部落a>li>
<li><a href="" >官方微信a>li>
<li><a href="" >官方微博a>li>
ul>
<ul class="navi kf l">
<li><a href="" >客服中心a>li>
<li class="new"><a href="" >安全信用体系a>li>
<li><a href="" >封号查询a>li>
<li><a href="" >游戏安全查询a>li>
ul>
div>
<a class="lin" href="">a>
nav>
<div class="container-fluid">
<div class="main_top container">
<div class="left_area l">
<div class="download">
<div class="f">div>
<div class="en_f">div>
div>
<div class="login">
<div class="login_box">
<div class="usr_img">
<div class="mask">div>
div>
<p>欢迎<a href="">登录a>，进入飞车世界p>
div>
div>
div>
<div class="middle_area l">
<div class="source">div>
<ul>
<li>
<a href=""><img src="img/1c543250b26d1e28ed65a258adc99876.jpeg">a>
<div class="dot">
<i class="cur">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
div>
li>
<li>
<a href=""><img src="img/22a1b025c5cb0ce9c0fc298413ef0f92.jpeg">a>
<div class="dot">
<i class="">i>
<i class="cur">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
div>
li>
<li>
<a href=""><img src="img/da96da4bfc07ebec24535dda1921ccd6.jpeg">a>
<div class="dot">
<i class="">i>
<i class="">i>
<i class="cur">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
div>
li>
<li>
<a href=""><img src="img/19b9388dceb2ea5384f6990aa10e598a.jpeg">a>
<div class="dot">
<i class="">i>
<i class="">i>
<i class="">i>
<i class="cur">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
div>
li>
<li>
<a href=""><img src="img/7b333985b6e38e89053b6229881cb938.jpeg">a>
<div class="dot">
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="cur">i>
<i class="">i>
<i class="">i>
<i class="">i>
div>
li>
<li>
<a href=""><img src="img/e80522edceb4bb443b6c80f428cfa2d0.jpeg">a>
<div class="dot">
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="cur">i>
<i class="">i>
<i class="">i>
div>
li>
<li>
<a href=""><img src="img/50cc86fb6fd967c73b0e837c4e28469d.jpeg">a>
<div class="dot">
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="cur">i>
<i class="">i>
div>
li>
<li>
<a href=""><img src="img/b7813fb4bb05c7412799398aff78d9d7.jpeg">a>
<div class="dot">
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="">i>
<i class="cur">i>
div>
li>