web大前端之旅Ⅱ

十三、嵌套列表

一、以无序列表为例

<ul>
    <li>
        码农
    <ul>
        <li>
            程序猿
            <ul>
                <li>搞前端</li>
                <li>搞后端</li>
                <li>嵌入式</li>
                <li>移动端</li>
            </ul>
        </li>
        <li>
                工程师
                <ul>
                    <li>搞软件</li>
                    <li>搞硬件</li>
                    <li>搞网络</li>
                </ul>
        </li>
    </ul>
</li>
</ul>

效果展示

二、以定义列表为例

 <h1>好美味小吃</h1>
    <dl>
        <dt>小吃类</dt>
        <dd>煮粉干</dd>
        <dd>拌青菜</dd>
        <dt>卤味类</dt>
        <dd>鸭肠</dd>
        <dd>猪头肉</dd>
        <dt>套餐类</dt>
        <dd>卤面筋饭</dd>
        <dd>卤猪蹄饭</dd>
        <dt>炖罐类</dt>
        <dd>猪蹄黄豆</dd>
        <dd>猪心枸杞</dd>
    </dl>

效果展示

十四、表格标签

table、tr、th、td、caption 等
它们之间是有嵌套关系的，要符合嵌套规范。

< table >:表格的最外层容器
< tr >:定义表格行
< th >:定义表头
< td >:定义表格单元
< caption >:定义表格标题
语义化标签< tHead >、< tBody >、< tFood >

在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次

十五、表格属性

< border >:表格边框
< cellpadding >:单元格内的空间
< cellspacing >:单元格之间的空间
< rowspan > :合并行 colspan :合并列
< align > :左右对齐方式
< valign > :上下对齐方式

<table border="1" cellpadding="5" cellspacing="0.1">
            <thead>
            <tr style="background-color: lightgrey;">
                <th>班次名称</th>
                <th>科目</th>
                <th>授课内容</th>
                <th>增值服务</th>
                <th>课时</th>
                <th>价格</th>
                <th>试听</th>
                <th>购买</th>
            </tr>
            <tbody>
                <tr>
                    <td rowspan="3"><strong>真题精品班</strong></td>
                    <td>行测+申论</td>
                    <td>全科历年真题精解</td>
                    <td rowspan="3">课后赠2套模拟卷<br>24小时以内答疑</br></td>
                    <td>48</td>
                    <td style="color:red ;">1280元</td>
                    <td><img src="./耳机.jpg" alt="" width="20" height="20"></td>
                    <td><img src="./购物车.jpg" alt="" width="20" height="20"></td>
                </tr>
                <tr>
                   
                    <td>行测</td>
                    <td>行测历年真题精解</td>
                    
                    <td>32</td>
                    <td>980元</td>
                    <td><img src="./耳机.jpg" alt="" width="20" height="20"></td>
                    <td><img src="./购物车.jpg" alt="" width="20" height="20"></td>
                </tr>
                <tr>
                     
                    <td>申论</td>
                    <td>申论历年真题精解</td>
                    
                    <td>16</td>
                    <td>580元</td>
                    <td><img src="./耳机.jpg" alt="" width="20" height="20"></td>
                    <td><img src="./购物车.jpg" alt="" width="20" height="20"></td>
                </tr>
                <tr>
                    <td rowspan="3"><strong>高分技巧班</strong></td>
                    <td>行测+申论</td>
                    <td>全科技巧强化</td>
                    <td rowspan="3">入学试卷测评<br>24小时以内答疑</br></td>
                    <td>32</td>
                    <td style="color:red ;">980元</td>
                    <td><img src="./耳机.jpg" alt="" width="20" height="20"></td>
                    <td><img src="./购物车.jpg" alt="" width="20" height="20"></td>
                </tr>
                <tr>
                                       
                    <td>行测</td>
                    <td>行测速解技巧强化</td>
                    
                    <td>18</td>
                    <td>680元</td>
                    <td><img src="./耳机.jpg" alt="" width="20" height="20"></td>
                    <td><img src="./购物车.jpg" alt="" width="20" height="20"></td>
                </tr>
                <tr>
                                       
                    <td>申论</td>
                    <td>申论速解技巧强化</td>
                    
                    <td>14</td>
                    <td>580元</td>
                    <td><img src="./耳机.jpg" alt="" width="20" height="20"></td>
                    <td><img src="./购物车.jpg" alt="" width="20" height="20"></td>
                </tr>
            </tbody>
            </thead>
        </table>

效果展示

十六、表单标签

< form > 表单的最外层容器

< input > 标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

<input type="">

< textarea > 多行文本框

<textarea cols="" rows=""></textarea>

< option > 下拉菜单

<select>
    <option>选项</option>
</select>

< label > 辅助表单

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

在单选框和复选框里必须设置name属性，且name值必须相同，才可以达到单选或复选的效果

性别:<input type="radio" name="gender" id="man"><label for="man">男</label>
     <input type="radio" name="gender" id="woman"><label for="woman">女</label><br></br>

效果展示

注册登记表单示例

十七、表格表单组合

主体框架

<form action="">
        <table border="" cellpadding="" cellspacing="">
            <tBody>   
                <tr>
                    <td></td>
                </tr>
            </tBody>
        </table>
    </form>

效果展示

十八、div与span

div(块):
< div >标签用来划分一个区域，可使用多层嵌套
span(内联):
用来修饰文字的

div与span都是没有任何默认样式的，需要配合CSS才行。

十九、CSS基础语法格式

格式：
选择器{属性1：值1；属性2：值2}
单位：
px–>像素（pixel）、%–>百分比
基本样式：
width、height、background-color

二十、内联样式与内部样式

• 内联样式(行内、行间)—style属性
  在html标签上添加style属性来实现的

<body>
    <div style="width: 100px;height: 100px;background-color: blue;">我是个蓝蓝的块</div>
    <div style="width: 100px;height: 100px;background-color: blue;">我是它的兄弟</div>
</body>

• 内部样式—style标签
  在< style >标签内添加的样式

<head>
    <style>
        div{width: 100px;height: 100px;background-color: :blue;}
    </style>
</head>
<div>我是个蓝蓝的块</div>
<siv>我是它的兄弟</siv>
</body>

注:内部样式的优点，可以复用代码

二十一、外部样式

外部css样式(也可称为外联式)就是把CSS代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在< head >内（不是在< style >标签内）使用< link >标签将css样式文件链接到HTML文件内

< link >标签
rel属性指定资源跟页面的关系
herf属性表示资源的地址

在css中代码演示：
div{width: 100px;height: 100px;background-color: blue;}

通过@import方式引入外部样式（这种方式有很多问题，不建议使用）

二十二、CSS颜色表示法

1. 单词表示法：red、blue、green、yellow…
2. 十六进制表示法：#000000、#ffffff
3. RGB三原色表示法：rgb(255,255,255)
   取值范围0~255

提取颜色的两种方法
 1. FeHelper ( 浏览器插件 )
 2.Photoshop

二十三、CSS背景样式

• background-color:背景颜色
• background-image:背景图片

url（背景地址）

• background-repeat:背景图片的平铺方式

① repeat-x 沿x轴平铺
② repeat-y 沿y轴平铺
③ repeat（x，y都进行平铺，默认值
④ no-repeat 都不平铺

• background-position:背景图片的位置
• background-attachment:背景图随滚动条的移动方式

scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）

img多用于网页展示 background-image多用于装饰性

二十四、背景实现视觉差效果

部分示例

<style>
        #div1{width: 1366px;height: 768px;background-image: url(./p1.jpg);background-attachment: fixed;}
        #div2{width: 1366px;height: 768px;background-image: url(./p2.jpg);background-attachment: fixed;}
        #div3{width: 1366px;height: 768px;background-image: url(./p5.jpg);background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

利用background-attachment设置为fixed来实现视觉差

二十五、边框样式

• border-style：边框样式
  solid：实线
  dashed：虚线
  dotted：点线
• border-width：边框大小
  px…
• border-color：边框颜色
  black #000000

<style>
        div{width: 300px;height: 300px;border-style: dashed;border-color: blue;border-width: 3px;}
    </style>
</head>
<body>
    <div></div>
</body>

边框也可以针对某一边进行单独设置：border-left-style–>中间嵌入方向 left、right、top、bottom

二十六、边框实现三角形

原理：边框间均为两两45°斜角构成，利用宽高设为0使边框实现为正方形，再通过将剩余三条边设置为透明色即可得到三角形

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>triangle</title>
<style>
div{width: 0px;height: 0px;
    border-top-color: transparent;
    border-top-style: solid;
    border-top-width: 30px;
    border-right-color: black;
    border-right-style: solid;
    border-right-width: 30px;
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 30px;
    border-left-color: transparent;
    border-left-style: solid;
    border-left-width: 30px;}
</style>
</head>
<body>
    <div></div>
</body>
</html>

二十七、CSS文字样式

• font-family：字体类型

英文字体：Arial、‘Times New Roman’…
中文字体：SimSun（宋体）…

若字体名称间有空格则需要添加单引号

<style>
        div{font-family: SimSun;}

    </style>
</head>
<body>
    <div>字体测试</div>
</body>

效果展示

可以去控制面板查看兼容的字体

• 衬线体和非衬线体
• 设置多字体
  各字体间用逗号隔开即可对应body中各行div的文字内容
• 字体大小
  起初默认大小16px
  写法：
  （不推荐使用）

属性取值	字体大小
xx-small	最小
x-small	较小
small	小
medium	正常（默认值）
large	大
x-large	较大
xx-large	最大

字体大小一般为偶数

• font-weight：字体粗细
  模式：
  1.正常（normal）加粗（bold）
  2.number（100-500正常、600-900加粗）
• font-style：字体样式
  模式：正常（normal） 斜体（italic）
  oblique也表示斜体，用的比较少，一般了解即可。

区别：
italic 所有带有倾斜字体的才可以设置
oblique 没有倾斜属性的字体也可以设置倾斜操作

• color：字体颜色

二十九、CSS段落样式

• text-decoration：文本修饰

下划线–>underline
删除线–>line-through
上划线–>overline
不添加任何装饰–>none

添加多个文本修饰需要使用空格隔开

• text-transform：文本大小写（针对英文）

小写：lowercase
大写：uppercase
只首字母大写：capitalize

• text-indent：文本缩进
  首行缩进–>em单位：相对单位，1em永远都是跟字体大小相同

p{text-indent:2em;font-size:16px;}

若段落内容中出现英文，则也会出现对不齐的问题

• text-align：文本对齐方式
  对齐方式：

左对齐（left）
右对齐（right）
居中对齐（center）
两端点对齐（justify）

p{text-align:left;}  //这段采用左对齐

• line-height：定义行高
  定义

默认行高：不是固定值，根据当前字体大小不断变化
取值：number（px）| scale（比例值，跟文字大小成比例）

p{line-height:1;}

• letter-spacing：定义字间距

p{letter-spacing:10px;}

• word-spacing：定义词间距（针对英文）

p{word-spacing:10px;}

• 强制折行：（针对英文）

word-break：break-all；（非常强烈的折行）

 <style>
        div{width: 300px;height: 300px;border: 1px solid grey;word-break: break-all;}
    </style>
</head>
<body>
    <div>The front end is the front part of the website, running on the PC end, mobile end and other browsers to show users to browse the web page. With the development of Internet technology, the application of HTML5, CSS3, front-end framework, cross-platform responsive web design can adapt to various screen resolutions, appropriate dynamic design, to bring users a very high user experience.

    </div>
</body>

word-wrap：break-word；（不是那么强烈的折行，会产生一些空白区）

<style>
        div{width: 300px;height: 300px;border: 1px solid grey;word-wrap: break-word;}
    </style>
</head>
<body>
    <div>The front end is the front part of the website, running on the PC end, mobile end and other browsers to show users to browse the web page. With the development of Internet technology, the application of HTML5, CSS3, front-end framework, cross-platform responsive web design can adapt to various screen resolutions, appropriate dynamic design, to bring users a very high user experience.

    </div>
</body>

三十、CSS复合样式

• 一个CSS属性只控制一种样式，叫做单一样式。
• 一个CSS属性控制多种样式，叫做复合样式。

复合样式
复合的写法：是通过空格的方式实现的。
background：color url() repeat…
border：size color
font（需要关心顺序）：weight style size family…
最少要有两个值 size family

尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式

三十一、CSS选择器

ID选择器

css:#elem{} html:id=“elem”

 <style>
        #div1{width: 100px;height: 100px;background: black;}
        #div2{width: 100px;height: 100px;background: gray;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

效果展示

1. 在一个页面中，ID值是唯一的。
2. 命名规范，字母_-数字（命名的第一位不能是数字）
3. 命名方式，驼峰式、下划线式、短线式。
   更多命名参考

CLASS选择器

css:.elem{} html:class=“elem”

1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4.标签+类的写法

<style>
        .box{width: 100px;height: 100px;background-color: lightgray;}
        .content{font-size: 30px;}
    </style>
</head>
<body>
    <p class="box"></p>
    <p class="box content">我还是一个块</p>
</body>

效果展示

关于CSS的优先级