css列表样式
css列表属性允许我们设置不同的列表项标记.在html中,有两种类型的列表:
●无序列表(<ul>):列表项目用项目符号标记.
●有序列表(<ol>):列表项目用数字或字母标记.
使用css,列表可以进一步风格化,图像可以用做列表项标记.
其中一种方法是使用list-style-type属性,可以设置为:circle(。),square(■),decimal(十进制数字),disc(●),lower-alpha(小写字母)等
html代码:
<ol class="lower-alpha">
<li>美是恋人的赠品</li>
<li>生活有度,人生添寿</li>
<li>成功的秘籍在于恒心</li>
</ol>
<ul class="circle">
<li>人生如画,岁月如歌</li>
<li>爱的匆忙,散得也快</li>
<li>生活便是寻求新的知识</li>
</ul>
<ul class="square">
<li>时间和潮流永不待人</li>
<li>爱情是两个人的利己主义</li>
<li>自信和自靠是坚强的柱石</li>
</ul>
<ul class="disc">
<li>青年时鲁莽,老年时悔恨</li>
<li>爱情是生命的盐</li>
<li>只有登上山顶,才能看到那边的风光</li>
</ul>
css代码:
ol.lower-alpha{list-style-type:lower-alpha; }
ul.circle{ list-style-type:circle;}
ul.square{list-style-type: square;}
ul.disc{list-style-type: disc;}
效果如下:
body分为块级和行内
<div>qwer<br/>zxcv</div>
<div style="background-color: green;">qwer</div>
span style="background-color: green;">zxcv</span>
<p>hahahahah</p>
<p>hahahahahaaa</p>
h1~h6y依次变小
<div>默认文字字体</div>
<h1>再再再再再粗一点</h1>
<h2>再再再再粗一点</h2>
<h3>再再再粗一点</h3>
<h4>再再粗一点</h4>
<h5>再粗一点</h5>
<h6>粗一点</h6>
<a href="http://www.baidu.com" title="baidu">百度</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>野鸡平台</title>
</head>
<body>
<h1>章节</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>内容</h1>
<div style="height: 1000px;" id="i1">
<h3>第一章 寂寞的春天</h3>
<p>春暖花开,万物复苏,又到了交配的季节。</p>
</div>
<div style="height: 1000px;" id="i2">
<h3>第二章 寂寞的夏天</h3>
<p>夏天夏天悄悄过去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
<h3>第三章 寂寞的秋天</h3>
<p>今年的秋天真是寂寞呀!!!</p>
</div>
<div style="height: 1000px;" id="i4">
<h3>第四章 寂寞的冬天</h3>
<p>下雪</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>野鸡平台</title>
</head>
<body>
<ul>
<li>周杰伦</li>
<li>林俊杰</li>
<li>王力宏</li>
</ul>
<ol>
<li>铁锤</li>
<li>钢弹</li>
<li>狗蛋</li>
</ol>
<dl>
<dt>河北省</dt>
<dd>邯郸</dd>
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遥</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6666</title>
</head>
<body>
<table border="3"> <!--border 选择表格样式-->>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxxx</td>
<td>18</td>
<td>看书</td>
</tr>
<tr>
<td rowspan="3">aaaa</td> <!--rowspan 合并单元格-->>
<td>18</td>
<td>吃饭</td>
</tr>
<tr>
<td>33</td>>
<td>heiheihei</td>>
</tr>>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6666</title>
</head>
<body>
<!--显示本地图片,找不到图片则显示alt中的文字-->
<img src="img/lover.png" alt="美女">
<!--显示网络图片-->
<img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>
type
<button type="button"> 按钮 </button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>666666</title>
</head>
<body>
<h3>文本框</h3>
<input type="text">
<h3>密码框</h3>
<input type="password">
<h3>单选框</h3>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h3>复选框</h3>
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">橄榄球
<h3>上传文件</h3>
<input type="file">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<h3>单选</h3>
<select>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
<h3>多选</h3>
<select multiple>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
</body>
</html>
<!DOCTYPE html>
卧槽,无情呀
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML学习</title>
</head>
<body>
<textarea>文本内容写在这里...</textarea>
</body>
</body>
</html>
用于提交数据到后台
// 提交表单之后,实际上会将表单中的数据构造成一种特殊的结构,发送给后台,类似于:
{
user:用户输入的姓名,
pwd:用户输入的密码,
...
}
lt;marquee></marquee>文字滑动
<marquee behavior="slide"></marquee>滑动
<marquee behavior="scroll"></marquee>预设卷动
<marquee behavior="alternate"></marquee>来回卷动
<marquee direction="down"></marquee>向下卷动
<marquee direction="up"</marquee>向上卷动
<marquee direction="right"></marquee>向右卷动
<marquee direction="left"></marquee>向左卷动
<marquee loop="2"></marquee>循环次数, 默认值为:-1, 表示一直滚动下去。
<marquee width="180"></marquee>设定宽度
<marquee height="30"></marquee>设定高度
<marquee bgcolor="#FF0000"></marquee>设定背景颜色
<marquee scrollamount="30"></marquee>设定卷动距离(px)
<marquee scrolldelay="300"></marquee>设定卷动时间(毫秒)
<marquee hspace="100"></marquee> hspace 水平页边距
<marquee vspace="80"></marquee> vspace 垂直页边距
<marquee direction="left" behavior="scroll" width="300" height="400" bgcolor="#ff0" scrollAmount="50" scrollDelay="1000">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
<li>BOOTSTRAP</li>
</ul>
</marquee>
以上整数涉及的单位是像素px
<marquee>
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<img src="images/08.jpg" />
<img src="images/09.jpg" />
</marquee>
marquee常用到的两个事件:
onmouseout="this.start()" 当鼠标移出该区域时
onbmouseover="this.stop()" 当鼠标移入该区域时
*请认真填写需求信息,我们会在24小时内与您取得联系。