html （第四本书第四章参考）
上机1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内部引入样式《望庐山瀑布》</title>
<style>
h3{
font-size: 20px;
color: black;
}
p{
color: green;
font-size: 14px;
}
</style>
</head>
<body>
<h3>望庐山瀑布</h3>
<p>日照香炉生紫烟，</p>
<p>遥看瀑布挂前川。</p>
<p>飞流直下三千尺，</p>
<p>疑是银河落九天。</p>
</body>
</html>
上机2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择器</title>
<style>
h2{
color: #003580;
}
#first{
font-size: 14px;
color: #000033;
}
.a1{
color: #F00;
}
.a2{
color: #1F87CC;
}
.a3{
color: #FAA53B;
}
.a4{
color: #0D7114;
}
.pic1{
width: 100px;
height: 160px;
}
.pic2{
width: 200px;
height: 130px;
}
</style>
</head>
<body>
<h2>花千骨</h2>
<p id="first">《花千骨》是由 <a href="" class="a1">慈文传媒集团</a>制作并发行，<a class="a2">林玉芬、高林豹、梁胜权联合执导，霍建华、赵丽颖</a>领衔主演，<a class="a3">蒋欣、杨烁</a>特别出演，<a class="a4">张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</a>等主演的古装玄幻仙侠剧。 该剧改编自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋[1] 。该剧于2014年5月6日开机，9月15日杀青，8月12日发布中文及英文版的预告片[2] 。 该剧于2015年6月9日起每周二、周三晚10点在 <a class="a3">湖南卫视</a>的钻石独播剧场播出。[3] 2015年7月5日起，该剧播放时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4]</p>
<img src="data:image/1.jpg" class="pic1"/>
<h2>主要演员</h2>
<img src="data:image/2.jpg" class="pic2"/><img src="data:image/3.jpg" class="pic2"/>
</body>
</html>
上机3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>开心餐厅</title>
<style>
p{
font-size: 14px;
}
body h2{
font-size: 16px;
}
.h2{
color: red;
}
.h2~h2{
color: blue;
}
p>#first{
width: 887px;
height: 439px;
}
</style>
</head>
<body>
<p><img src="data:image/game01.jpg" id="first"/></p>
<p><img src="data:image/game02.jpg"/></p>
<p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。<br/>
烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。<br/>
步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>
<p><img src="data:image/game03.jpg"/></p>
<h2 class="h2">如何做菜？</h2>
<p>1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；<br/>
2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；<br/>
3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；<br/>
4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。</p>
<h2>如何经营餐厅？</h2>
<p>1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短心情越好；好友间亲密度越高，可雇用的时间越长；<br/>
2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加；<br/>
3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。</p>
<h2>如何吸引顾客？</h2>
<p>1.美誉度决定了餐厅的客流量，美誉度高的时候来餐厅的顾客多，美誉度低的时候来餐厅的顾客少；<br/>
2.如果不需要等待，就能及时享用到食物，顾客就会满意地增加餐厅美誉度；与之相反，如果没有吃到食物就离开的顾客会降低美誉度；<br/>
3.总而言之，储备充足的食物、及时的服务、足够的餐桌椅是必不可少的！</p>
<h2>如何和好友互动？</h2>
<p>1.不忍眼睁睁看好友餐厅的食物腐坏，那就帮忙端到餐台吧！自己还可以获得经验值奖励；<br/>
2.仓库里的东西可以赠送给好友，直接拖拽到礼物即可赠送；拖拽到收银即可出售。注意哦，每个级别能收到礼物的总价值是有上限的；<br/>
3.系统的额外食物奖励可和好友分享，把分享消息发布到开心网动态上，让朋友们一起感受快乐！每天最多可以从5位好友的餐厅领取免费食物，食物将被放入仓库的冷藏室里，可出售给系统，也可以拖到餐台上卖给顾客；<br/>
4.在好友需要帮助的时候，给予帮忙，当然啦，你也可以给好友捣捣乱、使使坏。作为奖励，你也会获得经验值和现金。</p>
<p><img src="data:image/game04.jpg"/></p>
<p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。<br/>
烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。<br/>
步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>
</body>
</html>
上机4
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>爱奇艺视频播放列表</title>
<style>
li{
display: inline-block;
}
li h5:first-of-type{
font-size: 16px;
color: #4D4D4D;
}
li p:nth-of-type(1){
font-size: 14px;
color: #640000;
}
li p:nth-of-type(2){
font-size: 12px;
color: blue;
}
</style>
</head>
<body>
<h3>热播</h3>
<ul>
<li>
<img src="data:image/img1.png"/>
<h5>神武赵子龙</h5>
<p>怒，林更新不抱网红抱女神</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="data:image/img2.png"/>
<h5>旋风十一人</h5>
<p>胡歌变教练在撩前女友</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="data:image/img3.png"/>
<h5>太阳的后裔</h5>
<p>宋慧乔吃嫩草</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="data:image/img4.png"/>
<h5>山海经之赤影传说</h5>
<p>娜扎张翰再度联手</p>
<p>点击次数：242445次</p>
</li>
</ul>
</body>
</html>
上机5
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网易邮箱登录</title>
<style>
p{
font-size: 16px;
}
header a{
font-size: 14px;
color: #F10158;
}
*[type=text]{
background: #FFFFED;
font-size: 18px;
}
*[type*=pass]{
background: #FFFFED;
font-size: 18px;
}
section img:first-child{
width: 200px;
height: 150px;
}
section li{
color: #0099FF;
}
footer a{
font-size: 14px;
color: #9873F2;
}
</style>
</head>
<body>
<!--第一步，先把网页划分结构 该网页大概分为三部分，上中下结构-->
<!--header头部里面分为两部分，左右，左边放logo，右边是文字-->
<header>
<!--左边logo-->
<h1><a href="#"><img src="data:image/163logo.gif" alt="logo"/></a></h1>
<!--右边超链接-->
<p>
<a href="#">免费邮</a>
<a href="#"> 企业邮</a>
<a href="#">VIP邮箱</a>
<a href="#">帮助</a>
</p>
</header>
<!--中间的section部分又分为左右结构，左边是图片和无序列表，右边是表单-->
<section>
<!--左边-->
<div>
<img src="data:image/imap.jpg" alt=""/>
<ul>
<li>163/126/yeah三大免费邮箱均默认开放</li>
<li>全面支持iPhone/iPad及Android等系统</li>
<li>客户端、手机与网页，实现发送、阅读邮件</li>
</ul>
<a href="#">立即同步普通登录手机号登录</a>
</div>
<!--右边-->
<form action="#" method="get">
<p>
用户名：
<input type="text" name="userName"/>
@163.com
</p>
<p>
密码：
<input type="password" name="psw"/>
</p>
<p>
版本：
<select name=""version id="">
<option value="">默认</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</select>
</p>
<p>
<input type="checkbox" value="autoLogin"/>自动登录
<input type="checkbox" value="ssl" checked/>SSL
</p>
</form>
</section>
<!--底部-->
<footer>
<img src="data:image/netease_logo.gif" alt=""/>
<a href="#">关于网易</a>
<a href="#">免费邮 </a>
<a href="#">官方博客</a>
<a href="#">客户服务 </a>
<a href="#">隐私政策</a>|
<a href="#">网易公司版权所有 © 2015-2018</a>
</footer>
</body>
</html>
课后4
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>总裁致辞页面</title>
<style>
h2{
font-size: 18px;
}
p{
font-size: 12px;
}
p>a{
font-weight: bold;
color: red;
}
p>.year{
font-style: italic;
font-size: 16px;
color: blue;
}
</style>
</head>
<body>
<h2>总裁致辞</h2>
<hr/>
<img src="data:image/icon.jpg" alt="高管团队"/>
<p>目前北大青鸟IT教育全体系员工<a>10000</a>余名、授权培训中心<a>180</a>余家、合作院校<a>500</a>余所、覆盖全国<a>90</a>余座城市，市场占有率达到<a>39.8</a>%。</p>
<p>作为IT职业教育的先行者，北大青鸟IT教育创新的职业教育理念和业务经营模式得到了社会的广泛认可：国家人力资源和社会保障部与北大青鸟IT教育实施课程联合认证制度；公司两度入选中华人民共和国商务部评选的“中国连锁经营百强企业”，是迄今为止教育培训领域唯一上榜品牌。公司连续两年荣获 “中国服务业十大优秀特许品牌”称号，并获得中国特许经营协会颁发的中国连锁经营百强和中国特许经营年度大奖；获得新浪颁发的“中国教育杰出贡献奖”和“中国十大品牌教育集团”称号；并赢得 “中国IT公众认知企业金奖”、“本土最具知名度认证奖”、“最佳就业认同奖”、“质量放心用户满意双优品牌”、“最佳实用课程奖”等数十个奖项。人民日报、光明日报、经济日报、解放日报、中国青年报、中国计算机报等几十家权威媒体对公司进行了多方面的报道。</p>
<p><a class="year">2000年</a>，北大青鸟IT教育创造性地将特许经营模式引入到IT职业教育领域，在全国建立“北大青鸟APTECH计算机授权培训中心”。所有中心实行统一经营管理、严格保证教学质量，受到社会和业界的高度认可。发展速度之快、经营规模之大、学员人数之多，在全国众多IT职业培训机构中一枝独秀。成立至今，北大青鸟IT教育先后培养<a>45</a>万名学员进入IT行业。</p>
</body>
</html>
课后5
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>员工团队风采页面</title>
<style>
h3{
font-size: 18px;
}
.h3-1{
color: red;
}
#h3-2{
color: green;
}
body p{
font-size: 14px;
}
body img:nth-of-type(3){
width: 300px;
height: 200px;
}
body img:nth-of-type(4){
width: 300px;
height: 200px;
}
.p2~p{
color: blue;
}
a[href]{
font-size: 14px;
color: #640000;
}
</style>
</head>
<body>
<img src="data:image/recruit-01.jpg"/><img src="data:image/recruit-02.jpg"/>
<p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员工提供完善的培训与发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企业发展前景、 广阔的个人发展平台、快乐向上的工作环境，是青鸟人一直秉承的核心要素</p>
<h3 class="h3-1">我们的管理团队</h3>
<img src="data:image/recruit-03.jpg"/><img src="data:image/recruit-04.jpg"/>
<p class="p2">北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员工提供完善的培训与发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企业发展前景、 广阔的个人发展平台、快乐向上的</p>
<h3 id="h3-2">我们的部门风采</h3>
<img src="data:image/recruit-05.jpg"/>
<p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员工提供完善的培训与发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企业发展前景、 广阔的个人发展空间。
<ul>
<li><a href="">联系我们</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">版权声明</a></li>
<li><a href="">招商加盟</a></li>
</ul>
</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 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- C语言探索之旅】 第一部分第四课第三章：变量的世界之显示变量内容
内容简介 1.课程大纲 2.第一部分第四课第三章:变量的世界之显示变量内容 3.第一部分第五课预告:基本运算 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用 ...
- 《C++ Primer》 第四版 第7章 函数
<C++ Primer> 第四版 第7章 函数 思维导图笔记 超级具体.很具体,图片版,有利于复习查看 http://download.csdn.net/detail/onlyshi/94 ...
- 找一个四位数，要求该四位数的四倍刚好是该四位数的反序。 即b1b2b3b4 * 4 = b4b3b2b1
找一个四位数,要求该四位数的四倍刚好是该四位数的反序. 即b1b2b3b4 * 4 = b4b3b2b1 解: 第一步,确认最末位 假设 b1b2b3b4 + b4b3b2b1 = [x0]x1x2x ...
- 第四百零四节，python网站第三方登录，social-auth-app-django模块，
第四百零四节,python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的第三方登录OAuth2协议模块 目 ...
- 【直播回顾】OpenHarmony知识赋能第四期第四课——音频驱动开发
3月31日晚上19点,知识赋能第四期直播的第四节,也是本期最后一节直播课<OpenHarmony标准系统HDF框架之音频驱动开发>,在OpenHarmony开发者成长计划社群内成功举办 ...
- html （第四本书第1~3章参考）
前三章都不会的话 呵呵……
随机推荐
- PASCAL VOC数据集分析（转）
PASCAL VOC数据集分析 PASCAL VOC为图像识别和分类提供了一整套标准化的优秀的数据集,从2005年到2012年每年都会举行一场图像识别challenge. 本文主要分析PASCAL V ...
- map文件的使用
map文件相信大家并不陌生,大家都知道是用来调试的,但是具体怎么用你又清不清楚呢? 其实也很简单 1.拿JQ为例,我们需要备有jquery.js.jquery.min.js.jquery.min.ma ...
- 浅谈fhq treap
一.简介 fhq treap 与一般的treap主要有3点不同 1.不用旋转 2.以merge和split为核心操作,通过它们的组合实现平衡树的所有操作 3.可以可持久化 二.核心操作 代码中val表 ...
- gcc初步窥探
由于没有上过Linux编程这门课,所以Linux学得很水啊!!用来用去都是ls -al ; cd .. ;这些渣命令,尤其gcc都不知道什么东西来的,所以先学一下吧. 一.程序的编译过程 对于GUN编 ...
- javascript的单例/单体模式(Singleton)
首先,单例模式是对象的创建模式之一,此外还包括工厂模式.单例模式的三个特点:1,该类只有一个实例2,该类自行创建该实例(在该类内部创建自身的实例对象)3,向整个系统公开这个实例接口 Java中大概是这 ...
- HDU 2680 Choose the best route 最短路问题
题目描述:Kiki想去他的一个朋友家,他的朋友家包括所有的公交站点一共有n 个,一共有m条线路,线路都是单向的,然后Kiki可以在他附近的几个公交站乘车,求最短的路径长度是多少. 解题报告:这道题的特 ...
- bzoj 1432 数学（找规律）
我们可以发现所有的情况(除n=1时),都可以找到两个交叉的直线,就是第一层的那 两个线段所在的直线如图中左 那么我们以这个为准,两边对称着加直线,会得到右图,每一层是折线,且每 加一对儿就多两条线段, ...
- input文本框禁止修改文本——disabled和readonly属性的作用及区别
1.input文本框禁止修改文本 disabled属性:<input type="text" name="name" value="xxx&qu ...
- struct termios结构体详解
一.数据成员 termios 函数族提供了一个常规的终端接口,用于控制非同步通信端口. 这个结构包含了至少下列成员:tcflag_t c_iflag; /* 输入模式 */tcflag_t ...
- Android sdk安装目录中没有platform-tools目录问题详解
sdk下载地址 http://tools.android-studio.org/index.php/sdk 安装步骤很简单,百度即可. 下面详细说一下,在安装中遇到android sdk下没有plat ...