整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

css零基础自学教程(六)css属性 第三部分

css零基础自学教程(六)css属性 第三部分

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;}

效果如下:

ody

常用标签

body分为块级和行内

  • 块级 独占整行
  • 行内 内容有多少就占多少

文本格式化标签

br 换行

<div>qwer<br/>zxcv</div>

div和span

  • div 块级标签样式
<div style="background-color: green;">qwer</div>
  • span 行内标签样式
span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>   

h 标题

h1~h6y依次变小

   <div>默认文字字体</div>
   <h1>再再再再再粗一点</h1>
   <h2>再再再再粗一点</h2>
   <h3>再再再粗一点</h3>
   <h4>再再粗一点</h4>
   <h5>再粗一点</h5>
   <h6>粗一点</h6>

链接

  • a 超链接,跳转到指定的地址
<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>

ul ol dl 列表展示

  • ul 无序列表
  • ol 有序列表
  • dl 层级列表
  • li 列表项目
<!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>

table 表格

  • table表格标题
  • thead表格标题
  • tr 行标签
  • th 列名
  • tbody表格内容
  • tr 列标签
  • td 列内容
<!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>

img 图片

<!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

  • buttom: 普通
  • submit: 提交
  • reset: 重置
 <button type="button"> 按钮 </button>

input

  • text,文本框。
  • password,密码框。
  • radio,单选框(必须设置name属性相同,否则无法实现)。
  • checkbox,复选框。
  • file,文件上传。
<!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>

select下拉框

<!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>

textarea多行文本框

<!DOCTYPE html>
卧槽,无情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML学习</title>
</head>
<body>
    <textarea>文本内容写在这里...</textarea>
</body>
</body>
</html>

form表单

用于提交数据到后台

  • 提交时,只会提交form标签内部【用户交互】相关的标签。
  • <input type="submit" value="提交"> 用于提交当前所在的表单。
  • <input type="reset" value="重置"> 用于重置当前标签中的选项。
  • form标签内置属性action="/xx/" ,表示表单要提交的地址。method="get",表示表单的提交方式。enctype="multipart/form-data",如果form内部有文件上传,必须加上此设置
  • form内部【用户交互】相关标签必须设置name,不然提交数据后后端无法获取
// 提交表单之后,实际上会将表单中的数据构造成一种特殊的结构,发送给后台,类似于:
{
    user:用户输入的姓名,
  pwd:用户输入的密码,
    ...
}
  • radio、checkbox、select 除了要设置name属性以外,还必须设置value属性,因为这三中标签在form表单提交时,不会把看到的内容提交到后台,而是把选择选项对应的value值提交到后台。

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()" 当鼠标移入该区域时