1.首先是html代码:

<!-- markup time -->
<div class="wrapper wb"> <div class="black-bar wb-bottom">
<div class="battery">22% <i class="fa fa-bolt"></i></div>
<div class="network"><i class="fa fa-signal"></i> AT&amp;T</div>
<div class="time">12:34 PM</div>
</div> <div class="search-box wb-bottom">
<form>
<input type="text" class="search-input wb" placeholder="Search..."/>
<input type="submit" class="search-button wb" value="Go" />
</form>
</div> <div class="categories wb-bottom">
<a class="wb-right">Length</a>
<a>Category</a>
</div> <div class="search-results">
<!-- book listing -->
<div class="search-head wb-bottom">
<button class="wb">Show all 48 titles</button>
<h2>Books</h2>
</div>
<ul class="wb-child-bottom">
<li>
<div class="thumb wb"><i class="fa fa-book"></i></div>
<a class="book-name">Drift</a>
<span>By Marlene Gybson</span>
</li>
<li>
<div class="thumb wb"><i class="fa fa-book"></i></div>
<a class="book-name">What the Nanny...</a>
<span>By Vivian Bandy</span>
</li>
</ul>
<!-- author listing -->
<div class="search-head wb-bottom">
<button class="wb">Show all 6 authors</button>
<h2>Authors</h2>
</div>
<ul class="wb-child-bottom">
<li>
<div class="thumb author-thumb wb"><i class="fa fa-user"></i></div>
<a class="author-name">Carmen A. Maher</a>
</li>
<li>
<div class="thumb author-thumb wb"><i class="fa fa-user"></i></div>
<a class="author-name">Willie Poon</a>
</li>
</ul>
</div> </div>

2.其次是css代码:

/*3 custom fonts(handwriting style)*/
@import url('http://fonts.googleapis.com/css?family=Delius|Walter+Turncoat|Permanent+Marker');
/*fontawesome icon font*/
@import url('http://thecodeplayer.com/uploads/fonts/font-awesome-4.1.0/css/font-awesome.min.css'); /*basic reset*/
* {margin:; padding:; box-sizing: border-box;} /* Apply border image/style/color but not width to:
1. elements with class attribute containing 'wb'
2. Direct/1st level children of elements with class attr containing 'wb-child'
*/
[class*='wb'], [class*='wb-child'] > * {
/*solid border color(fallback)*/
border: 0px solid #aaa;
/*Cloud image sliced at 2px from all sides as border-image*/
border-image: url('http://thecodeplayer.com/u/m/clouds.png') 2 stretch;
}
/*border widths*/
/*all sides*/
.wb, .wb-child > * {border-width: 2px;}
/*single sides*/
.wb-top, .wb-child-top > * {border-top-width: 2px;}
.wb-right, .wb-child-right > * {border-right-width: 2px;}
.wb-bottom, .wb-child-bottom > * {border-bottom-width: 2px;}
.wb-left, .wb-child-left > * {border-left-width: 2px;} /*preventing certain elements from using their default border/bg styles*/
form, input, textarea, table, button, select, optgroup, option {
font: inherit; color: inherit; background: transparent;
} /*general styles*/
body {
font: bold 12px/18px Delius; color: white;
background: #333;
}
a {
text-decoration: none; color: white;
cursor: pointer; /*since all links will be dummy*/
} .wrapper {width: 320px; margin: 50px auto; border-bottom-width:;} .black-bar {padding: 2px 4px; background: rgba(0, 0, 0, 0.25);}
.battery {float: right;}
.network {float: left;}
.time {text-align: center;} .search-box {padding: 5px; overflow: hidden;}
.search-input, .search-button {padding: 10px; font-size: 14px; float: left;}
.search-input {width: 70%; margin-right: 2%;}
.search-button { width: 28%; background: rgba(255, 255, 255, 0.15);} .categories {overflow: hidden; background: rgba(0, 0, 0, 0.35);}
.categories a {
display: block; float: left; width: 50%; text-align: center;
font: bold 18px/50px 'Walter Turncoat';
} .search-head {padding: 10px; background: rgba(0, 0, 0, 0.2);}
.search-head button { float: right; padding: 2px 10px; background: rgba(255, 255, 255, 0.1);}
.search-head h2 {padding: 3px 0; font: normal 18px/20px 'Permanent Marker';} .search-results li {list-style-type: none; overflow: hidden; padding: 10px;}
.thumb {height: 60px; width: 60px; float: left; margin-right: 10px; text-align: center; background: rgba(0, 0, 0, 0.15);}
.thumb .fa {font-size: 32px; line-height: 60px; opacity: 0.15;} /*smaller thumbs for authors*/
.author-thumb {width: 32px; height: 32px;}
.author-thumb .fa {font-size: 18px; line-height: 32px; } .book-name {font: bold 18px 'Walter Turncoat'; display: block; margin-top: 7px;}
.author-name {font-size: 14px; line-height: 32px;}

3.最后是javascript代码:

这里没有使用

4.效果图:

html笔记05:html、css、javascript综合案例的更多相关文章

  1. JavaScript:综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  2. canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  3. 073 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 05 综合案例-数组移位-主方法功能1和2的实现

    073 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 05 综合案例-数组移位-主方法功能1和2的实现 本文知识点:综合案例-数组移位-主方法功能1和2的实现 说 ...

  4. 101 01 Android 零基础入门 02 Java面向对象 03 综合案例(学生信息管理) 02 案例分析及实现 05 通过方法实现学生类与专业类关联——方案二

    101 01 Android 零基础入门 02 Java面向对象 03 综合案例(学生信息管理) 02 案例分析及实现 05 通过方法实现学生类与专业类关联--方案二 本文知识点:通过方法实现学生类与 ...

  5. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  6. jquery-easyUI第二篇【综合案例】

    基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...

  7. CSS3_综合案例

    综合案例 设置元素的 width,还可以利用 left 和 right 为了防止图片太小,background-size: 100% 100%; <!DOCTYPE html> <h ...

  8. Ext.js入门:常用组件与综合案例(七)

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

  9. JavaScript 入门案例

    四.  JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇  https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...

随机推荐

  1. vi编辑器的三种模式

    1.命令模式(command mode)—执行命令 在该模式中,可以输入命令来执行许多种功能.控制屏幕光标的移动,字符.字或行的删除,移动复制某区段及进入Insert mode下,或者到 last l ...

  2. 【HDOJ】1042 N!

    肯定是大叔,本来以为用加法做乘法,后来想想这样麻烦,还是可以使用乘法的,按位乘,ov可以看成不止一位,程序如下所示: #include <stdio.h> #define MAX 4000 ...

  3. wcf教程

    WCF Tutorial WCF stands for Windows Communication Foundation. It is a framework for building, config ...

  4. v2ex上100个话题

    V2EX 是创意工作者们的社区. 这里目前汇聚了超过 110,000 名主要来自互联网行业.游戏行业和媒体行业的创意工作者. V2EX在华人IT圈占有举足轻重的地位. 近来闲的蛋疼,按照4个不同的指标 ...

  5. hdu4293Groups

    http://acm.hdu.edu.cn/showproblem.php?pid=4293 这题单拉出来写篇吧 确实不错的一题 将每个人说的话 转化一下 可以算出它处在哪个段中 题目就转换成了求不相 ...

  6. common.css 值得学习的css样式布局

    正常的项目当中,应当有一个common.css,就是把一些常用的样式,写入其中. 然后再结合一些特性的css,构造漂亮的页面. 下面欣赏一些海盗商城的common.css. /***样式初始化***/ ...

  7. WPF——菜单栏及TabControl

    一.先造一个窗体,然后在窗体里面增加菜单栏及原始的TabControl选项卡 <Grid> <Menu> <MenuItem Header="文件" ...

  8. bzoj2208

    首先有向图的题目不难想到先tarjan缩点 一个强连通分量中的点的连通数显然是相等: 据说这样直接dfs就可以过了,但显然不够精益求精 万一给定的是一个完全的DAG图怎么办,dfs铁定超时: 首先想, ...

  9. POJ 2513 Colored Sticks 解题报告

    第一次接触欧拉回路.虽然在离散数学里学过,敲代码还是第一次. 本题是说端点颜色相同的两根木棒可连接,能否将所有的木棒连成一条直线. 将颜色视为节点v,将木棒视为边e,构成图G.如果能找到一条一笔画的路 ...

  10. spring--注解注入--12

    12.1  概述 12.1.1  什么是零配置 在SSH集成一章中大家注意到项目结构和包结构是不是很有规律,类库放到WEB-INF/lib文件夹下,jsp文件放到WEB-INF/jsp文件夹下,web ...