Day1（0715
div的css样式
-
div 是一个块级元素浏览器通常会在 div 元素前后自动换行。
-
我们可以通过设置div的样式
-
div样式有color：文字颜色
font-family：字体字型
font-style：italic设置字体倾斜
font-weight：设置文字加粗
text-decoration：underline 设置下划线
background-color： 设置背景颜色
border属性可以设置边框的宽度、样式、颜色
//可以添加空行
© //添加版权符号
href="#"// 超链接跳转
<br>//换行
图片的插入
-
使用img来插入一张图片
<img src="图片路径" >
a. 案例一
<div style="border: 0px black solid; <!--设置外边框0像素 -->
text-align: center; <!--设置文本居中 -->
font-size: 30px; <!--设置字体大小30像素 -->
font-weight: 900; <!--设置字体加粗900-->
margin-bottom: 20px;"> <!--设置底部外边距为20像素-->
拍拍网注册系统
</div>
<div style="border: 0px black solid;
color:blue;text-decoration: underline;
text-align: center;">
返回
</div>
b. 案例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="background-color: mediumpurple;">
<span>今天天气不错<img src="img/images/1.gif" ></span>
<h1>我是 ©一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<div id="" style="text-align: center;font-size: 20px; margin-bottom: 20px;">
<a href="#" >点这里，看奖品</a><br>
<a href="#">点这里，看爷爷</a><br>
<a href="#">这里是空的</a>
</div>
咖啡<br>
<tr> 是用来喝的，带苦味<br />
是用来喝的，带苦味<br />
</tr>
<img src="img/images/1.gif" ><br>
<tr>
这是一只青蛙，可以吃，可以当宠物
</tr>
<br>
<tr> 大减价仅需<font color="red"><a style="font-size: 100px;">9</a></font>元</tr>
<h1 style="text-align: center;">射雕英雄传</h1><br>
<h2>第一部 铁血丹心</h2>
<h3>第一章 风雪惊变</h3>
</body>
</html>
案例三
<!DOCTYPE html>
<html>
hr {color:sienna;}
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="padding-left: 20px;">
<div style="padding-left: 100px;">
<img src="img/images/logo.jpg" ><br>
<a href="#" style="padding-left: 200px;">工作室简介</a> <a href="#">设计作品</a> <a href="#">广告知识</a> <a href="#">E-mail站长</a>
</div>
<span style="color: red;">
欢迎光临梦幻美术工作室！
</span><br>
<b>工作室简介</b>
<div id="">
<img src="img/images/1.jpg" ><br>
小动物图案是蜗牛进化而来，名叫牛牛<br>
牛牛形态多种多样，每天不知热情的为工作室各项事业而奔波。<br>
工作室职员喜欢牛牛可爱的形象以及忘我的工作作风。<br>
牛牛喜欢样样事情追求的完美，所以牛。<br>
牛牛初次上网，望各位给予关照。<br><br>
<hr >
</div>
<div id="">
<b>设计作品</b><br><br>
<img src="img/images/s1.jpg" >书皮设计<img src="img/images/s2.jpg" >环保/进化<br>
<img src="img/images/s3.jpg" >黑豹的广告-新娘篇<img src="img/images/s4.jpg" >黑豹的广告-出家篇
<hr >
<b>广告知识</b><br><br>
<ul style="list-style-type: none;">
<li>☆<a href="">大地公司CI设计</a></li>
<li>☆<a href="">盛泉CI设计</a></li>
<li>☆<a href="">威海新艺美化工程有限公司标志</a></li>
<li>☆<a href="">西楼工业集团标志</a></li>
<li>☆<a href="">优联衣号</a></li>
</ul>
</div>
</body>
</html>
Day2(0717)
表格 table标签 的使用 [跳转到菜鸟教程](CSS Table(表格) | 菜鸟教程 (runoob.com))
-
表格边框颜色可以使用bordercolor属性来更改
-
表格边框的粗细可以使用border属性更改
<table border="1" bordercolor="red"> -
表格的背景填充颜色可以使用 bgcolor属性来更改
<tr bgcolor="pink"> <td>手机充值、IP卡</td> <td colspan="2">办公设备、文具</td> </tr> -
表格中可以嵌套列表也可以嵌套表格
<table border="1" cellspacing="" cellpadding="" bordercolor="red"> <tr> <th style="border: 1; border-color: red;"><img src="img/images/02.GIF"> <div style="font-weight:800; font-size: 30px; white-space: pre-line; " align="left"> 这是一个 豆豆</div> </th> <td> <ul style="font-size: 30px;"> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ul> </td> </tr> <tr> <th style="font-size: 30px;" rowspan="2">标题</th> </tr> <tr> <td> <table border="1" cellspacing="" cellpadding="" bordercolor="blue"> <tr> <td width="90" style="font-size: 30px;">联通3G</td> <td width="50" style="font-size: 30px;">移动</td> <td width="50" style="font-size: 30px;">电信</td> </tr> <tr> <td width="90" style="font-size: 30px;">IBM</td> <td width="50" style="font-size: 30px;">联想</td> <td width="50" style="font-size: 30px;">惠普</td> </tr> </table> </td> </tr> </table>效果图如下
input标签用法 [用法介绍W3school](HTML 标签的 type 属性 (w3school.com.cn))
-
input标签常用type属性值有button、checkbox、file、password、text、radio、submit
-
多选、单选按钮可以给个checked属性设置为默认选择状态
-
text文本框或者密码框可以设置placeholder有提示作用选择后框内文本自动消除
-
file属性为选择文件按钮
-
submit为提交按钮
-
button为普通按钮
<input type="checkbox" checked="checked"/><input type="checkbox" /><input type="checkbox" />多选按钮<br> <input type="radio" name="sex" id="sex" value="" checked="checked"/><input type="radio" name="sex" id="sex" value="" />单选按钮<br> <input type="text" placeholder="请输入用户名"/><br> <input type="password" placeholder="请输入密码" /><br> <input type="file" /><br> <input type="submit" name="" id="" value="提交按钮" /><br> <input type="button" name="" id="" value="按钮" /><br>
效果图如下：
textarea标签的使用 [菜鸟教程](HTML 标签 | 菜鸟教程 (runoob.com))
textarea的文本框可以容纳无限数量的文本
textarea标签可以设置一个文本框，这个文本框可以通过rols、rows或height、width设置尺寸大小
<textarea rows="10" cols="20" style="font-size: 20px;"> 本协议。。。。。</textarea>
如何使文字两端对齐
将要对齐的文字用span标签包住设置style样式为
<span class="first" style = "width: 70px;//这里宽度可以改为 4em 设置这一行字占据多少字符text-align-last: justify;display: inline-block;" >一口价</span>
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
