html （第四本书第八章参考）
上机1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>花样链接卡</title>
<style>
div{
border: solid red 2px;
width: 300px;
height: 300px;
padding: 10px;
}
a {
color: white;
display: inline-block;
height: 100px;
width: 100px;
background:pink ;
text-align: center;
line-height:100px;
text-decoration: none;
}
a:hover{
background:deepskyblue ;
}
a:nth-of-type(2){
position: relative;
left: 100px;
}
a:nth-of-type(3){
position: relative;
top: 200px;
right: 200px;
}
a:nth-of-type(4){
position: relative;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<div>
<a href="">链接1</a><a href="">链接2</a><a href="">链接3</a><a href="">链接4</a><a href="">链接5</a>
</div>
</body>
</html>
上机2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>带按钮的图片横幅广告</title>
<style>
#adverImg{
width: 430px;
height: 130px;
position: relative;
}
#number{
position: absolute;
right: 5px;
bottom: 2px;
}
li{
float: left;
margin-right: 5px;
width: 20px;
height: 20px;
border: 1px #666 solid;
text-align: center;
line-height: 20px;
font-size: 12px;
list-style: none;
background: #FFF;
}
</style>
</head>
<body>
<div id="adverImg">
<img src="data:image/adver-01.jpg" alt="夏日商品促销"/>
<div id="number">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
上机3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>奖多多安全购彩页面</title>
<style>
body{
margin: 0 auto;
width: 1012px;
position: relative;
}
img:nth-of-type(2){
position: absolute;
left: -250px;
top: 200px;
}
img:nth-of-type(3){
position: absolute;
right: -165px;
top: 200px;
}
img:nth-of-type(4){
position: fixed;
right: 0;
top: 230px;
}
img:nth-of-type(5){
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<img src="data:image/1.bmp"/>
<img src="data:image/2.bmp"/>
<img src="data:image/3.bmp"/>
<img src="data:image/4.bmp"/>
<img src="data:image/5.bmp"/>
</body>
</html>
上机4
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当当图书榜</title>
<style>
body {
padding: 5px;
margin: 0 auto;
width: 960px;
position: relative;
}
header img:nth-of-type(2){
position: absolute;
top: 15px;
right: 190px;
}
header > ul {
padding: 5px 8px;
position: absolute;
top: 15px;
right: 5px;
border-top: solid 1px #b5ffe3;
border-left: solid 1px #b5ffe3;
border-right: solid 1px #b5ffe3;
background: #e6fff1;
font-size: 12px;
}
header > ul > li {
float: left;
list-style: none;
}
header > ul > li a{
color: #6c6c6c;
text-decoration: none;
}
header > ul > li a:hover{
color: #f03c3d;
}
nav ul{
position: absolute;
top: 45px;
right: 5px;
border: solid 1px #ff7133;
width: 958px;
height: 40px;
padding: 0;
background: #ff6c1d;
}
nav li{
float: left;
list-style: none;
line-height: 40px;
width: 40px;
padding-left: 15px;
font-size: 15px;
}
nav a{
color: white;
text-decoration: none;
}
nav a:hover{
text-decoration: underline;
}
section>img:nth-of-type(1){
position: absolute;
top: 112px;
}
section div{
position: absolute;
top: 250px;
border: solid 2px #4bff9c;
width: 956px;
height: 370px;
}
section>img:nth-of-type(2){
position: absolute;
top: 266px;
left: -6px;
}
div img:nth-of-type(1) {
position: absolute;
top: 90px;
}
div img:nth-of-type(2) {
position: absolute;
top: 90px;
left: 560px;
}
div img:nth-of-type(3) {
position: absolute;
top: 230px;
left: 560px;
}
div img:nth-of-type(4) {
position: absolute;
top: 85px;
left: 20px;
}
div img:nth-of-type(5) {
position: absolute;
top: 85px;
left: 560px;
}
div img:nth-of-type(6) {
position: absolute;
top: 230px;
left: 560px;
}
p{
font-family:Verdana,"宋体";
font-size: 12px;
line-height: 26px;
}
#p1{
position: absolute;
top: 90px;
left: 260px;
width: 280px;
height: 250px;
}
#p2{
position: absolute;
top: 80px;
left: 660px;
width: 280px;
height: 250px;
}
section a{
color: #3e78ed;
font-size: 15px;
text-decoration: none;
}
section a:hover{
color: green;
}
.s1{
color: #cf150a;
font-weight: bold;
}
.s2{
color: #979993;
}
footer{
position: absolute;
top: 612px;
width: 960px;
height: 90px;
text-align: center;
}
footer p{
color: #979993;
vertical-align: middle;
}
footer img{
vertical-align: middle;
}
</style>
</head>
<body>
<header>
<img src="data:image/logo.jpg"/>
<ul>
<li><a href="">尾品汇</a> </li>
<li><a href="">当当优品</a> </li>
<li><a href="">数字馆</a> </li>
<li><a href="">都看阅器</a></li>
</ul>
<img src="data:image/icon_count.png"/>
<nav>
<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>
<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>
<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>
</nav>
</header>
<section>
<img src="data:image/banner.png"/>
<div>
<img src="data:image/book-01.jpg"/>
<img src="data:image/book-02.jpg"/>
<img src="data:image/book-03.jpg"/>
<img src="data:image/bookNo1.gif"/>
<img src="data:image/bookNo2.gif"/>
<img src="data:image/bookNo3.gif"/>
<p id="p1">
<a href="">偷影子的人</a><br/>
作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译<br/>
出版社：湖南文艺出版社<br/>
当当价：<span class="s1">￥ 17.90</span><br/>
不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他
</p>
<p id="p2">
<a href="">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a><br/>
作 者：柴静 著<br/>
出版社：广西师范大学出版社<br/>
<span class="s1">￥ 29.40</span> <span class="s2">7.4折</span><br/>
<a href="">改变孩子先改变自己</a><br/>
作 者：贾容韬 贾毅 著<br/>
出版社：作家出版社<br/>
<span class="s1">￥ 22.20</span> <span class="s2">7.4折</span>
</p>
</div>
<img src="data:image/bg_bang.gif"/>
</section>
<footer>
<p>Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="data:image/validate.gif">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
</footer>
</body>
</html>
课后3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>美食今日推荐</title>
<style>
*{
margin: 0;
}
div{
margin: 50px auto;
height: 373px;
width: 280px;
border: 1px solid #04e7ff;
border-radius: 10px;
position: relative;
}
h4{
color: red;
margin-top: 22px;
margin-left: 32px;
}
h4 span {
color: black
}
div>a{
position: absolute;
right: 10px;
top: 22px;
}
#first{
float: left;
padding-left: 20px;
margin-top: 10px;
}
#second{
float: right;
padding-left: 0;
margin-top: 10px;
margin-right: 30px;
}
h5 a{
color: #b80613;
line-height: 28px;
font-size: 8px;
}
p{
line-height: 17px;
font-size:10px;
color: #525050;
}
span{
color: #989595;
}
li{
list-style: none;
height: 77px;
text-align: left;
}
div>img{
position: absolute;
left: 80px;
top: 43px;
}
</style>
</head>
<body>
<div>
<h4>SHOP<span> 今日推荐</span></h4>
<a href=""><img src="data:image/more.gif"></a>
<ul id="first">
<li><img src="data:image/img9.gif"/></li>
<li><img src="data:image/img7.gif"/></li>
<li><img src="data:image/img8.gif"/></li>
<li><img src="data:image/img7.gif"/></li>
</ul>
<ul id="second">
<li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味：</span>创意中餐<br/><span>区域：</span>朝阳/CBD</p></li>
<li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味：</span>创意中餐<br/><span>区域：</span>朝阳/CBD</p></li>
<li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味：</span>创意中餐<br/><span>区域：</span>朝阳/CBD</p></li>
<li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味：</span>创意中餐<br/><span>区域：</span>朝阳/CBD</p></li>
</ul>
<img src="data:image/shen.png"/>
</div>
</body>
</html>
课后4
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东轮播图</title>
<style>
#background{
position: relative;
height: 454px;
width: 1200px;
text-align: center;
margin-top: 40px;
}
#number{
position: absolute;
left: 545px;
bottom: 10px;
}
a{
float: left;
margin-right: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px #666 solid;
line-height: 14px;
font-size: 12px;
list-style: none;
background: #666;
text-decoration: none;
color: white;
}
a:hover{
background: orange;
border: 1px orange solid;
}
</style>
</head>
<body>
<div id="background"><img src="data:image/focus.jpg"/>
<div id="number">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</div>
</body>
</html>
课后5
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>新东方顶部导航菜单</title>
<style>
*{
margin: 0;
}
#first{
background: url("image/logo.gif") no-repeat 10px,url("image/open_icon.gif") no-repeat 558px,url("image/top_bg.gif");
border-bottom: dotted 1px #c3c3b8;
height: 26px;
width: 600px;
position: relative;
}
p{
position: absolute;
left: 140px;
float: left;
list-style: none;
height: 26px;
text-align: center;
font-size: 12px;
line-height: 26px;
color: #818181;
}
span{
color: #d1d1d1;
}
#second{
border: 1px solid #b9b9b9;
position: absolute;
left: 343px;
top: 20px;
width: 200px;
padding: 0 10px;
background: white;
}
ul{
padding: 10px 6px ;
float: left;
width: 185px;
}
li{
list-style: none;
font-size: 12px;
line-height: 22px;
color: #989898;
float: left;
margin-right: 14px;
}
ul:nth-of-type(1),ul:nth-of-type(2){
border-bottom: solid 1px #dbdbdb;
}
</style>
</head>
<body>
<div id="first">
<p>
购物车 <span>|</span>
优惠券 <span>|</span>
快速注卡 <span>|</span>
各地购课 <span>|</span>
手机报 <span>|</span>
网站导航
</p>
</div>
<div id="second">
<ul>
<li>托福</li>
<li>雅思</li>
<li>考研</li>
<li>职称英语</li>
<li>初中</li>
<li>日语</li>
</ul>
<ul>
<li>网络课堂</li>
<li>资讯中心</li>
<li>知识堂</li>
<li>大师讲坛</li>
<li>学习论坛</li>
<li>学词</li>
<li>考研搜校</li>
</ul>
<ul>
<li>M-Zone</li>
<li>手机报</li>
<li>时时英语</li>
</ul>
</div>
</body>
</html>
html （第四本书第八章参考）的更多相关文章
- html （第四本书第九章参考）
上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- html （第四本书第七章浮动参考）
课上1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- html （第四本书第1~3章参考）
前三章都不会的话 呵呵……
- html （第四本书第五章参考）
上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- html （第四本书第四章参考）
上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- html （第四本书第六章盒子模型参考）
上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- 『.NET Core CLI工具文档』（十四）dotnet-install 脚本参考
说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:dotnet-install scripts reference 翻译:dotnet-install 脚本参考 名称 d ...
- 四、API使用参考
官方文档:https://docs.blender.org/api/blender_python_api_current/info_api_reference.html Blender有很多互连数据类 ...
- java编程思想第四版第八章习题
第一题 package net.mindview.polymorphism; //基类-自行车 class Cycle{ } //子类-单轮车 class Unicycle extends Cycle ...
随机推荐
- webpack打包提取css到独立文件
将本来镶嵌在bundle.js的css转到外面来,我们需要用到一个插件:extract-text-webpack-plugin 使用方法: 1.安装 npm i extract-text-webpac ...
- Hadoop基础-Map端链式编程之MapReduce统计TopN示例
Hadoop基础-Map端链式编程之MapReduce统计TopN示例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.项目需求 对“temp.txt”中的数据进行分析,统计出各 ...
- 在“安装”阶段发生异常。 System.Security.SecurityException: 未找到源,但未能
写Windows服务的时候,运行了一下,就是没反应,命令框一闪而过,查了一下异常,大致是题目的那样.原因是因为权限不足.但是在网上搜的方法都不顶用. 解决方法如下: (1)以管理员身份运行CMD: ( ...
- Java与groovy混编 —— 一种兼顾接口清晰和实现敏捷的开发方式
有大量平均水平左右的"工人"可被选择.参与进来 -- 这意味着好招人 有成熟的.大量的程序库可供选择 -- 这意味着大多数项目都是既有程序库的拼装,标准化程度高而定制化场景少 开发 ...
- 2018年11月25日ICPC焦作站参赛总结
可能就这么退役了吧. 对这次ICPC还是比较有信心的,毕竟心态都放平和了. 路途很波折,热身赛还是赶上了. 等到了正赛的时候,开场看出了A题的签到,签到肯定是我来签的,11分钟签完了这道题之后,开始看 ...
- zTree的简单例子
<%@ page language="java" pageEncoding="UTF-8" %> <%@ include file=" ...
- mysql Keepalived 实践
Keepalived 是一种高性能的服务器高可用或热备解决方案,Keepalived可以用来防止服务器单点故障(单点故障是指一旦某一点出现故障就会导致整个系统架构的不可用)的发生,通过配合Nginx可 ...
- Linux ALSA声卡驱动之五：移动设备中的ALSA（ASoC）
转自http://blog.csdn.net/droidphone/article/details/7165482 1. ASoC的由来 ASoC--ALSA System on Chip ,是建立 ...
- Ansible Tower系列 四（使用tower执行一个命令）【转】
在主机清单页面中,选择一个主机清单,进入后,选择hosts里的主机 Paste_Image.png 点击 RUN COMMANDS MODULE 选择 commandARGUMENTS 填写 ifco ...
- 使用SpringCloud搭建高可用服务注册中心
我们需要的,不仅仅是一个服务注册中心而已,而是一个高可用服务注册中心. 上篇博客中我们介绍了如何使用Spring Cloud搭建一个服务注册中心,但是搭建好的服务注册中心是一个单节点的服务注册中心,这 ...