html网页制作之页面文本控制及页面布局（2018年8月14日）
作业1：
实例
<!-- demo2.html 2018-8-14 22:10 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本控制</title> </head> <body> <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h5标签</h5> <h6>这是一个h6标签</h6> <b>这是一个粗体标签</b> <p>针对土耳其危机的产生根源，<br>对外经济贸易大学副校长丁志杰对凤凰网财经表示，在过去两年，由于地缘政治冲突加剧，国民经济疲弱，出现较为严重的通货膨胀，土耳其里拉一直处于贬值状态。近期美国对土耳其的贸易制裁升级严重影响了的信心，引起恐慌，<br>是导致里拉大幅度贬值的导火索。 </p> <br> <br> <strong>php中文网</strong><br> <i>坚决打赢脱贫攻坚战</i><br> <em>定义着重字</em><br> <del>定义删除字标签</del><br> <span style="background: pink;width:300px;height: 200px;">399元</span><del>499元</del><br> <pre>预格式化文本标签</pre> <p style="background: #ccc;width:300px;height: 200px;">123</p> <span>399元</span> <!-- 块级元素：div h1-h6 p 独占一行 对宽高属性值设置生效 行内：可以共存于一行对宽高属性值设置不生效 行内块元素：结合了块级以及行内的特点 --> <img src="img/c1.jpg" style="width: 300px;height: 180px;" alt=""/> <!-- img的src定义原属性，即url地址 行内块级可以相互转换： display: inline 将块级元素转换的行内 display: inline-block;将块级元素转换为行内块元素 --> <div style="width: 100px;height: 100px;background: pink;display: inline;">1</div> <div style="width: 100px;height: 100px;background: pink;display: inline-block;">2</div> <span style="width: 100px;height: 100px;background: pink;display: block;">3</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">4</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">5</span> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
demo3.html
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight: : bold; /* 定义粗体 */
font-size: 20px; /* 定义字体大小 */
font-family: 微软雅黑; /* 定义字体 */
text-align: center; /*left*/
}
h1{ text-align: center; /*left right*/
height: 100px;
background: #ccc;
line-height: 100px; /*定义行高*/
}
span{ font-size: 40px;
font-weight: bold;
font-family: georgia;
}
img{
width: 300px; height: 400px;
}
b{
display: block;
width: 300px;
height: 40px;
background: pink;
overflow: hidden;
margin-bottom: 100px;
/* overflow: 溢出设置，hidden:隐藏;visible:显示*/
}
/* 伪类选择器 ，hover就是一个伪类*/
b:hover{overflow: visible;} /* 内容不会被修剪，元素会被呈现在元素框的外部 */
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<br>
<span style="color: #0388f1;">G</span>
<span style="color: rgb(245,28,39);">o</span>
<span style="color: #FFE80E;">o</span>
<span style="color: #0388f1;">g</span>
<span style="color: #39FF1B;">l</span>
<span style="color: #FFE80E;">e</span>
<!-- 图文混排 -->
<p style="display: inline-block;width: 300px;height: 400px;">
近日，科技达人董晓龙和钟文泽分别携带三款笔记本从广州到北京，进行了一场复兴号长续航体验之旅。其中董晓龙体验了i5版本的荣耀MagicBook、小米笔记本Air与联想潮7000，钟文泽体验了i7版本的荣耀MagicBook、小米笔记本Air与戴尔潮7000。
</p>
<img src="img/c1.jpg" alt="">
<br><br>
<img src="img/c1.jpg" alt="">
<b>
近日，科技达人董晓龙和钟文泽分别携带三款笔记本从广州到北京，进行了一场复兴号长续航体验之旅。其中董晓龙体验了i5版本的荣耀MagicBook、小米笔记本Air与联想潮7000，钟文泽体验了i7版本的荣耀MagicBook、小米笔记本Air与戴尔潮7000。
</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2：
手抄html文本控制标签的属性用法
作业3：
布局案例制做
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面案例布局作业</title>
<style>
div{
width: 706px;
}
</style>
</head>
<body>
<div>
<h1>黄晓明出借账户被卷股票操作案 知情人：账户未冻结</h1>
<h6 style="color: #ccc;">2018-8-13 21:18 来源 搜狐娱乐</h6>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180813/2f1c5e1bdb8c44e6ad1246ec7c803b33.jpeg">
<h6 style="text-align: center; ">黄晓明（资料图）</h6>
<br/>
<h6>（来源：财新报）</h6>
<p>搜狐娱乐讯 8月13日，据财新报道，记者证实，证监会刚刚公布的获利近9亿元、罚没款高达18亿元的高勇股票操纵案中的自然人账户之一确实为影视明星黄晓明名下账户。</p>
<br/>
<p>而接近监管层的人士表示，这些自然人账户的所有人如果仅仅是出借账户，并不知道账户被利用进行操纵，这些账户也不会被冻结。</p>
<br/>
<p>8月10日晚，证监会通报了5宗shichang操纵案件，其中，高勇控制16个账户，操纵“精华制”，半年内股价暴涨300%，非法获利8.97亿，被证监会没收违法所得8.97亿元并处罚8.97亿元。</p>
<br/>
<p>根据证监会通报，高勇控制的16个账户，这些账户是黄某、张某燕、张某、吴某江、倪素某、倪松某、姜某、黄某明、徐某、朴某娜、薛某、吴某丰、崔某欣、吴某等人的账户。</p>
<br/>
<p>媒体“股票说”调查表示，名单中，黄某就是明星黄晓明：“黄某明账户开立后由其母亲张某霞管理使用。经路某介绍，张某霞将黄某明证券账户部分委托高勇管理，该账户涉案交易由高勇作出。黄晓明的母亲叫张素霞。黄晓明和母亲张素霞，跟证监会通报材料中的黄某明和其母亲张某霞，正好一一对应！”</p>
<br/>
<p>黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担。</p>
<br/>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
