基于HBuild
综合训练1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>work1</title>
</head>
<body>
<img src="../img/666.jpg"title="firstwork彩蛋!" width="200" height="300" border="5"/> <br>
<a href="#work1">跳转锚点</a>
<a href="../class1.html" target="_blank">第一个网页</a> <br> <!-- ../上一级，普通的 / 就下一级 -->
<a href="work2.html" >待开发</a> <!-- 本页跳转 -->
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
<p>段落五</p>
<p>更多内容可以 <a href="http://www.baidu.com" target="_blank">百度一下</a> </p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id=work1>复习锚点链接</h3>
</body>
</html>
综合训练2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小说排行榜</title>
<style >
table {
width: 500px;
height: 249px;
}
th {
height: 35px;
}
table, /* 相同设置 */
td, th {
border: 1px solid pink;
/* 合并相邻的边框，边框之间不会有缝隙 */
border-collapse: collapse ;
font-size: 0.875rem;
text-align: center;
}
</style>
</head>
<body>
<table align="center" cellspacing="0" > <!-- 全部放到CSS -->
<tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr>
<tr><td>1</td> <!-- 先写好一行为模板复制 -->
<td>三国演义</td>
<td> <img src="../img/百里.jpg" width="100" height="200" title="合久必分,分久必合"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="http://www.baidu.com">百科</a> </td>
</tr>
<tr><td>1</td>
<td>西游记</td>
<td> <img src="../img/666.jpg" width="100" height="200" title="吃俺老孙一棒!"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr><td>1</td>
<td>水浒传</td>
<td> <img src="../img/背景图片.jpg" width="100" height="200" title="108绿林好汉"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr><td>1</td>
<td>红楼梦</td>
<td> <img src="../img/logo.png" width="100" height="200" title="林妹妹"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr><td>1</td>
<td>鬼吹灯</td>
<td> <img src="../img/百里.jpg" width="100" height="200" ></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr><td>1</td>
<td>甄嬛传</td>
<td> <img src="../img/title_sprite.png" width="100" height="200" title="臣妾做不到啊!"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr><td>1</td>
<td>盗墓笔记</td>
<td> <img src="../img/logo.png" width="100" height="200" title="你是天真我是XX"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</table>
</body>
</html>
综合训练3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="700">
<tr><!-- 第一行 -->
<td>性别</td>
<td><input type="radio" name="sex" id="nan"/><label for="nan"><!-- 此处可加图片增加点击范围 -->男 </label>
<input type="radio" name="sex" id="nv"/><label for="nv">女 </label></td>
</tr>
<tr><!-- 第二行 -->
<td>生日</td>
<td>
<select >
<option>--请选择年份--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>
<select >
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select >
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>19</option>
</select>
</td>
</tr>
<tr><!-- 第三行 -->
<td>所在地区</td>
<td><input type="text" value="大田小仔快哇" /> </td>
</tr>
<tr><!-- 第四行 -->
<td>婚姻状况</td>
<td><input type="radio" name="marry"/>已婚 <input type="radio" name="marry" checked="checked"/> 未婚 <input type="radio" name="marry"/>离婚</td>
</tr>
<tr><!-- 第五行 -->
<td>学历</td>
<td><input type="radio" name=""official checked="checked"/>幼儿园 <input type="radio" name=""official />小学 <input type="radio" name=""official />大学</td>
</tr>
<tr><!-- 第六行 -->
<td>喜欢的类型</td>
<td><input type="checkbox" />小可爱 <input type="checkbox" />小甜瓜 <input type="checkbox" />憨八龟<input type="checkbox" /> 小牛逼
<input type="checkbox" />小天使 <input type="checkbox" /> 大天使 <input type="checkbox" checked="checked"/>都喜欢 </td>
</tr>
<tr><!-- 第七行 -->
<td>自我介绍</td>
<td><textarea >个人简介</textarea> </td>
</tr>
<tr><!-- 第八行 -->
<td></td> <!-- 占一格单元格 -->
<td>
<input type="submit" value="免费注册"/> </td>
></tr>
<tr><!-- 第九行 -->
<td></td>
<td>
<input type="checkbox" /> 我同意加入注册条款和会员加入标准
</td>
</tr>
<tr><!-- 第十行 -->
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁</li>
<li>聪明果敢</li>
<li>真诚</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
综合训练4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻页面</title> <!-- Chrome调试工具，鼠标右击检查 ，要改代码还是要在这里改 ，缺样式可能名字写错，黄色！表示语法错误-->
<style>
body {
font: 16px/28px "microsoft yahei"
}
h1 {
font-weight: 400;
text-align: center;
}
div {
text-align: center;
}
.gray {
color: #888888;
}
.search {
color: #666666;
}
.btn {
font-weight: 700;
}
p {
text-indent: 2em;
}
.pic { /* 让图片水平对齐要让把图片包括的标签写上class */
text-align: center;
}
.footer {
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<h1>今年首个高温预警发布：局地气温将超40℃</h1>
<div class="gray" > 发布时间: 20-06-03 18:37 <a href="#" >中国天气网</a>
<input type="text" value="请输入查询条件..." class="search" /> <button class="btn" >搜索</button> </div>
<hr >
<p> 据中国天气网消息，本周北方多地扎堆进入高温周，华北、黄淮一带热力不断升级，迎来今年来最大范围持续性高温天气。6月3日，北京、济南现今年来首个高温，中央气象台18时发布今年首个高温黄色预警。未来几天，整个华北平原以及黄淮一带都将处于持续暴晒中，公众需及时补水降温，外出做好防晒措施。北方将迎今年最大范围高温天。
2日，华北、黄淮一带的高温开始“冒头”，石家庄午后气温突破35℃，迎来今年来首个高温。3日，华北、黄淮、江淮等地经历了今年以来范围最广、强度最强的高温天气。监测显示，3日14时，华北平原以及黄淮一带高温势力扩展，河北西南部，河南西北部的部分地区超40℃，像是河北磁县14时气温飙升至41.8℃，河南安阳40.8℃。同时，午后，济南、北京也纷纷迎来今年来首个高温，其中北京的高温日较常年平均（6月10日）偏早7天。
为此，中央气象台3日18时发布今年首个高温黄色预警。预计6月4日白天，华北南部、黄淮、江汉北部、江淮北部、陕西关中、海南北部、新疆南疆盆地东部等地有35～39℃高温天气，其中，河南西北部、新疆吐鲁番等地局地最高气温可达40℃以上。</p>
<p class="pic"> <img src="../img/img.jpg" width="300" height="500"> </p> <!-- 让图片水平对齐要让把图片包括的标签写上class -->
<p> 中国天气网气象分析师石妍表示，随着高温继续“发力”，明后两天，山东、江苏北部、湖北西北部、山西、陕西等地也将陆续加入高温队伍，明天，河北、河南部分地区最高气温仍将达40℃或以上。
此次高温过程多地将打“持久战”，今天开始至8日，济南将会出现连续6天的高温，郑州和西安的连续高温日数也将达到5天。</p>
<p> 不过，北方的炎热大多局限于白天，西北地区东部、华北等地早晚时段都还比较凉爽。从气候上来看，每年6、7月份是北方一年中高温最集中的时段，济南、石家庄、郑州都是6月高温日数最多，而北京、西安、天津则是7月高温日数更胜一筹。
预计，本轮高温过程将持续到8日以后，东北地区也将搭乘本次升温的“末班车”，在本周末最高气温将升至30℃左右，体感由凉转热。需要注意的是，此次大范围持续性高温可能会加剧河南、陕西、安徽北部部分地区气象干旱。
目前仍处于疫情防控时期，口罩是外出“标配”，在密闭空间内、人群密集区和需要长时间与人密切接触的地方都要佩戴口罩。随着北方气温不断攀高，多地“火力十足”，长时间佩戴口罩会导致人体闷热感加剧，有网友就戏称自己是“行走的桑拿房”。
因此，建议大家外出随身准备一些湿巾，每隔一会儿擦擦脸，既可以清洁皮肤又可以起到物理降温的效果。女性也应精简护肤，尽量化淡妆，以减少化妆品和皮肤深度接触，这样能有效预防因长时间佩戴口罩导致的皮肤类疾病。另外，天气炎热， “挂脖小风扇”、“降温冰巾”等避暑降温神器都可以安排上。</p>
<p class="footer"> 文/北京青年报记者 解丽</p>
</body>
</html>
综合训练5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简介版小米侧边栏2.0</title>
<style>
a { /* 让文字的行高等于盒子的高度就可以实现文字在盒子内垂直居中 */
display: block;
width: 200px; /* 230 - 30 */
height: 40px;
line-height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
padding-left: 30px;
text-indent: 2em;
}
a:hover { /* 鼠标经过的背景颜色 */
background-color: #ff6700;
}
</style>
</head>
<!-- 1.把链接a转化为块级元素，这样链接就可以独占一行，且可以设置宽度高度-->
<!--2.鼠标经过a给链接上设置背景颜色 -->
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
综合训练6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五彩导航</title>
<style type="text/css">
.nav a {
display: inline-block;
wdith: 120px;
height: 58px;
background-color: skyblue;
text-align: center;
line-height: 3.625rem;
color: #fff;
text-decoration: none;
/* 撤下划线 */
}
.nav .bg1 {
background:url(../img/百里.jpg) no-repeat ;
}
.nav .bg2 { /* 背景图片不够 */
background:url(../img/百里.jpg) no-repeat ;
}
.nav .bg3 {
background:url(../img/百里.jpg) no-repeat ;
}
.nav .bg4 {
background:url(../img/百里.jpg) no-repeat ;
}
.nav .bg5 {
background:url(../img/百里.jpg) no-repeat ;
}
.nav .bg1:hover {
background-image: url(../img/logo.png);
}
.nav .bg2:hover {
background-image: url(../img/logo.png);
}
.nav .bg3:hover {
background-image: url(../img/logo.png);
}
.nav .bg4:hover {
background-image: url(../img/logo.png);
}
.nav .bg5:hover {
background-image: url(../img/logo.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div>
</body>
</html>
综合训练7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新浪首页</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
/* a属于行内元素,要转换为行内块元素 */
display: inline-block;
height: 41px;
padding: 0 20px; /* 左右 */
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<!-- 字数不同时，字数多的盒子用内边距调整让padding撑开盒子 -->
<div class="nav">
<a href="#">新浪微博</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>
综合训练8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝综合案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
/* 让块级盒子水平居中对齐 */
margin: 100px auto;
}
.box img {
width: 100%;
/* 让图片宽度和盒子一样 */
height: 60%;
}
.review {
height: 70px;
font-size: 14px;
/* 因为没有width,不会撑开盒子 */
padding: 0 28px;
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info {
font-size: 14px;
margin-top: 10px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400; /* 不加粗 */
}
.info span {
color: #ff6700;
}
.info em {
font-size: normal;
color: #ebe4e0;
margin: 0 6px 0 15px; /* 顺时针 */
font-style: normal;
}
a {
color: #333;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/维密睡衣.jpg" alt="">
<p class="review">维密情性感吊带睡裙睡袍两件套装刺绣真丝绸睡衣女夏带胸垫家居服</p>
<div class="appraise">累积获得用户评价1314</div>
<div class="info">
<h4> <a href="#"> V领夏季睡衣刺绣真丝... </a></h4>
<em> |</em>
<span id="">
989元 <!-- 分两个标签 ，调整之间间隔策略，多一个标签如这em的左右外边距等效拉开-->
</span>
</div>
</div>
</body>
</html>
综合训练9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻快报模块</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none; /* 去掉li前面的小圆点 */
}
.box {
width: 248px;
height: 163px;
border: 1px solid #ccc;
margin: 100px auto;
}
.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px; /* 行高等于盒子,垂直居中 */
/* margin-left: 15px;会把线断了,不行 */
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
.box ul li a:hover {
text-decoration: underline;
}
.box ul li {
height: 23px; /* height 与 line-height一样则垂直居中 */
line-height: 23px;
padding-left: 20px;
}
.box ul {
margin-top: 7px;
}
</style>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒！</a></li> <!-- shift+Alt按键分行剪切和移动 -->
<li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
<li><a href="#">【特惠】爆款手机0元购！</a></li>
<li><a href="#">【特惠】9.9专场特卖！</a></li>
<li><a href="#">【特惠】百亿补贴优惠不停！</a></li>
<!-- 内边距法一li设，法二padding设全部 -->
</ul>
</div>
</body>
</html>
综合训练10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局练习</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
float: left;
width: 296px;
height: 285px;
background-color: purple;
margin-right:14px ;
}
.last {
margin-right:0!important; /* 权重10 小于.box li 11 ，法二可以 .box .last */
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</body>
</html>
综合训练11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局练习3</title>
<style>
.box {
width: 1226px;
height: 615px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: purple;
}
.right {
float: right;
width: 992px;
height: 615px;
background-color: #00FFFF;
}
.right>div {
float: left;
width: 234px;
height: 300px;
background-color: pink;
margin-left: 14px;
margin-bottom: 14px ;
}
</style>
</head>
<body>
<h2>网页设计第二准则: 先设计盒子大小，之后设置盒子位置</h2>
<div class="box">
<div class="left">左青龙</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div> <!-- 八个小盒子 -->
</div>
</div>
</body>
</html>
综合训练12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见网页布局</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
}
.banner { /* 横幅 */
width: 980px;
height: 150px;
margin: 10px auto;
background-color: gray;
}
.box {
width: 980px;
height: 300px;
margin: 0 auto;
background-color: pink;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: gray;
margin-right: 10px ;
}
.box .last {
margin-right: 0;
}
/* 只要是通栏的盒子(和浏览器一样宽,整行) 不需要指定宽度 */
.footer {
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
综合训练13.css
* {
margin: 0;
padding: 0;
}
.w {
width: 1200px;
margin:auto;
}
li {
list-style: none;
}
a {
text-decoration: none; /*不要下划线*/ /* 观察标签选择器没有加点 */
}
.header {
height: 42px;
background-color: skyblue;
/* 注意此地方会层叠w 的margin ，auto*/
margin: 30px auto;
}
.logo {
float: left;
width: 198;
height: 42px;
background-color: pink;
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: #050505;
}
综合训练13.html
<!DOCTYPE html>
<html>
<head> <!-- 缺少图片，ps而搁置，要重做才知道为什么浮动和格子内导航栏错 -->
<meta charset="utf-8">
<title>在线学成</title> <!-- 需要工具，ps用于切图 -->
<link rel="stylesheet" href="work13.css"/> <!-- 调用CSS文件 -->
</head>
<body>
<!-- CSS书写顺序（重点）：1.布局（display） 2.自身属性（盒子） 3. 文本属性（文字）4.其他属性<br> -->
<!-- 页面布局：先测量页面的版心多宽，再确定每行，再观察每个盒子的结构，以及结构内元素分类，内外边距 -->
<div class="header w">
<!-- logo部分 -->
<div class="logo"> <img src="../img/logo.png " height="42px"> 盒子</div> <!-- 没有显示盒子？ -->
</div>
<!-- 导航栏用li+a法 -->
<!-- 导航栏部分 -->
<div class="nav"> <!-- ul>li>a -->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">特长</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
</body>
</html>
