Web前端2

纸星客

已于 2023-04-05 20:48:56 修改

阅读量1.3k

点赞数 1

文章标签：前端学习 javascript

于 2022-10-28 13:00:42 首次发布

本文链接：https://blog.csdn.net/clshz_hwk/article/details/127466866

版权

Web前端学习第二周021：嵌套列表

一.嵌套列表

1.1简介

列表可以互相嵌套形成多层级列表，是一种非常常见的网页展示格式。

1.2演示

~~大晚上的给我看饿了~~

<!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>Document</title>
</head>
<body>
<h1><strong>好美味小吃</strong></h1>
<ul>
    <li>小吃类
        <ul>
            <li>蒸粉干</li>
            <li>拌青菜</li>
            <li>蛋炒饭</li>
            <li>煎蛋</li>
            <li>米饭</li>
        </ul>
    </li>
    <li>炖罐类
        <ul>
            <li>猪蹄黄豆</li>
            <li>猪肚莲子</li>
            <li>猪心枸杞</li>
            <li>羊肉枸杞</li>
            <li>牛肉枸杞</li>
        </ul>
    </li>
</ul>
<em>亲，20元以上可送餐哦！！</em>
</body>
</html>

效果是这样的：

Web前端学习第二周022：表格标签

一.表格标签

1.1`<table>`

表格的最外层容器

1.2`<tr>`

定义表格行

1.3`th`

定义表头

1.4`td`

定义表格单元

1.5`caption`

定义表格标题

1.6`<tHead>，<tBody>，<tFood>`

三个语义化标签，对网页并没有实际影响，为了符合语义规范，方便团队合作，修改网站。
在一个<table>中<tBody>可以出现多次，另外两个只能出现一次。

二.演示

<!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>Document</title>
</head>
<body>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022年10月21日</td>
                <td>晴</td>
                <td>适合看室友谈恋爱</td>
            </tr>
            <tr>
                <td>2022年10月22日</td>
                <td>多云</td>
                <td>适合出行</td>
            </tr>
        </tBody>
        <tFood>
            
        </tFood>
    </table>
</body>
</html>

Document

天气预报
日期	天气情况	出行情况
2022年10月21日	晴	适合看室友谈恋爱
2022年10月22日	多云	适合出行

Web前端学习第二周023：表格属性

一.表格属性

表格的属性，比如边框，对齐之类的。

1.1`<border>`

表格边框。在<table>标签里面

1.2`<cellpadding>`

单元格内空间。在<table>标签里面

1.3`<cellspacing>`

单元格之间的空间。在<table>标签里面

1.4`<rowspan><colspan>`

合并行，合并列，在<th><td>内

1.5`<align><valign>`

左右对齐方式，上下对齐方式，在<tr>里面
alingn:left,center,right（左，中，右）
valign:top,middle,bottom（上，中，下）

二.演示

<!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>Document</title>
</head>
<body>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>                			  
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022年10月21日</td>
                <td>晴</td>
                <td>适合看室友谈恋爱</td>
            </tr>
            <tr>
                <td>2022年10月22日</td>
                <td>多云</td>
                <td>适合出行</td>
            </tr>
        </tBody>
        <tFood>
            
        </tFood>
    </table>
</body>
</html>

这是上一节的代码，我们以它为基础进行演示
它本来是这样的：
在这里插入图片描述

我们加上边框，在<table>一栏里添加border="1"
在这里插入图片描述
修改单元格内空间，加上cellpadding="30"

修改单元格之间的空间，加上cellspacing="30"

我们修改一下<tHead>，使它有两个日期

<!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>Document</title>
</head>
<body>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022年10月21日</td>
                <td>晴</td>
                <td>适合看室友谈恋爱</td>
            </tr>
            <tr>
                <td>2022年10月22日</td>
                <td>多云</td>
                <td>适合出行</td>
            </tr>
        </tBody>
        <tFood>
            
        </tFood>
    </table>
</body>
</html>

在这里插入图片描述
我们删去一个日期，再进行如下修改：

                <th rowspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>

这样两个日期就合并在一起了
合并列同理，删去后面一个，再colspan="2"即可。合并几个就写几。

对齐：
比如说<tr align="right" valign="top"
这就是向右对齐，向上对齐。

Web前端学习第二周024：表单标签

一.表单标签

1.1`<form>`

表单的最外层容器

1.2`<input>`

是个单标签，有一个type属性
标签用于搜集用户信息，根据不同type属性值，展示不同的控件，如输入框，密码框，复选框等。输入input然后Tab默认是<input type="text">，即输入框。
先来个演示

<!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>Document</title>
</head>
<body>
    <form>
        <h2>输入框：</h2>
        <input type="text">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框：</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">橘子
        <input type="checkbox">榴莲
        <h2>单选框：</h2>
        <input type="radio">男
        <input type="radio">女
    </form>
</body>
</html>

看上去没有什么问题，效果是这样的：
在这里插入图片描述
问题在这：为什么单选框还可以选两个？
这个时候就需要name，以此来表明：这两个单选框是一组。name的值是自定义的。
像这样：

<!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>Document</title>
</head>
<body>
    <form>
        <h2>输入框：</h2>
        <input type="text">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框：</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">橘子
        <input type="checkbox">榴莲
        <h2>单选框：</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
    </form>
</body>
</html>

这样就是单选了。除此之外还有别的东西：上传文件，提交按钮和重置按钮。

        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">

打开来效果是这样的：
在这里插入图片描述
提交之后数据上传到哪？
在form后添加链接即可，但这个会涉及后台知识，目前不必深究，以后会详细介绍。
还可以设置默认选中和禁止选中：

        <h2>复选框：</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">橘子
        <input type="checkbox">榴莲

这是原来的代码，我想要橘子默认选中，榴莲禁止选中
~~！！！榴莲打咩！！！~~
这样修改：
<h2>复选框：</h2> <input type="checkbox">苹果 <input type="checkbox">香蕉 <input type="checkbox" checked="checked">橘子 <input type="checkbox" disabled="disabled">榴莲
效果：
在这里插入图片描述
还有一些标注效果，如这样

        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">

在这里插入图片描述

Web前端学习第二周025：表单其他标签

一. 其他标签

1.1`<textarea>`

多行文本框
输入出来是这样：
<textarea name="" id="" cols="30" rows="10"></textarea>
name和id先不管，cols是行数，rows是列数，可以通过改变数字来改变文本框大小。CSS也能干。
在这里插入图片描述

1.2`<select><option>`

下拉菜单。
一般来讲会让选项的第一项作为默认选项。
如果要设置，可以在option后添加selected，以默认选项。disabled就是禁止选择，上一节讲过。

        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>

结果是这样的
在这里插入图片描述
我们还可以让它显示两项甚至更多项

        <select size="3">
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>

结果是这样的：
在这里插入图片描述
还可以多选，multiple就是多选的意思。

        <select multiple>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>

结果是这样的，使用Ctrl+鼠标点击或鼠标拖动来进行多选。
在这里插入图片描述
multiple多选不仅仅可以用在下拉菜单里，还可以用在上一节的上传文件里。

1.3`<lable>`

辅助表单，用于辅助，提升用户体验。

        <h2>单选框：</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女

这是上一节的单选框，用户在选择时必须点击那个点，对于我这种手会抖的贫弱大学生来说非常不友好。所以我们可以让字也能被点击

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

首先用<label></label>包上，再添加一个for属性，再用id使前后产生映射关系。要和name区分，别映射在name上了。

Web前端学习第二周026：表格表单组合实例

一.实例

表单表格之间可以互相组合形成数据展示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td> 
                </tr>
                <tr align="right">
                    <td>用户名：</td> 
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td> 
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td> 
                </tr>
            </tBody>
        </table>
    </form>
</body>
</html>

效果如下，相当好用，孩子很喜欢吃。
在这里插入图片描述

Web前端学习第二周027：div与span

一.div与span

1.1`<div>`

做一个区域划分的块
div全称为division,“ 分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

1.2.`span`

用来修饰文字的，div与span都是没有默认样式的，需要配合CSS才行。
听不懂对不对，来看看实操。

二.实例

把结构写好，再配合上相应的样式，就能做出网页来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <div>这是一个块</div>
    <span>这是一个内联</span> -->
    <div style="border:1px gray solid;">
        <h2><a href="#">【千锋教育】<span style="color:red">html5</span>-中国数万程序员的选择-官方首页</a></h2>
        <a href="#"><img src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=2492331056,4193866086&fm=202&mola=new&crop=v1" alt=""></a>
        <p>优势: 三师护航就业薪资: 10K-20K培训方式: 全程面授培训类型: IT培训
                千锋-致力于互联网应用研发培训,中国程序员认可的培训机构;千锋开设web大前端,java,UI设计,PHP,VR,linux,大数据,pyhton,物联..</p>
        <a href="#">www.mobiletrain.org 2019-04- 评价 广告</a>
    </div>

    <div>
        <h2><a href="#"><span>html5</span>_零基础如何学<span>Html5</span>_从小白到大神进阶</a></h2>
        <a href="#"><img src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=2922130382,676357541&fm=202&mola=new&crop=v1" alt=""></a>
        <p>培训类型: Web前端特色: 包吃包住价格: 12期免息城市: 319个分校
                html5,中公优就业上市企业,免费试学5天,不合适全额退款,先就业后付款,过万家合作名企,学员与保险公司签订就业保障协议,毕业..</p>
        <a href="#">www.ujiuye.cn 2019-04- 评价 广告</a>
    </div>
</body>
</html>

在这里插入图片描述
就像是搜索引擎搜出来的那个一样。
块也有属性，比如可以加边框。这些东西以后学CSS再说。

Web前端学习第二周028：CSS语法格式

一.格式

1.1格式

选择器{属性1:值1;属性2:值2;}
需要在基本格式的<head></head>中添加一个<style></style>,表示给页面添加样式。上一节我们在标签上添加样式，这次在style中。

属性有这些：
width : 宽
height : 高
background-color : 背景色
长度单位 :
1.px -> 像素
2.% -> 百分比
外容器1 -> 600px 当前容器 50% -> 300px
外容器2 -> 400px 当前容器 50% -> 200px

一定要产生映射关系，div对应div，span对于span。

CSS的注释是/*注释*/

二.演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{ width : 25% ; height : 100px ; background-color : red }
        span{ background-color:blue;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

在这里插入图片描述

映射关系！

Web前端学习第二周029：内联样式与内部样式

一.内联样式与内部样式

1.1简介

内联样式：html标签内添加style属性来实现的，内联样式可以分别处理。
内部样式：在style标签内添加的样式。内部样式可以复用代码，符合W3C的规范标准，进行让结构和样式分开处理。

1.2演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{ width:100px;height:100px;background-color:red }
    </style>
</head>
<body>
    <!-- <div style="width:100px;height:100px;background-color:red">这是一个块</div>
    <div style="width:100px;height:100px;background-color:red">另外一个块</div> -->
    <div>这是一个块</div>
    <div>另外一个块</div>
</body>
</html>

可以通过对style注释来对比内联样式和内部样式的区别。（复制该代码用VS Code打开）

Web前端学习第二周030：外部样式即两种写法

一.外部样式

1.1外部样式

外部样式引入一个单独的CSS文件，name.css通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。通过@import方式引入外部样式 ( 这种方式有很多问题，不建议使用 )

首先，你需要先创建一个.css文件。

1.2`<link>`

当前页面与外部资源的映射关系。通过link标签引入外部资源
rel属性:引入资源的类型，资源和页面的关系
herf属性：引入外部资源的地址
神奇链接
神奇链接里有更多属性值。
link标签一般写在<head>中<meta>和<title>之间,打出来后会自动添加，rel默认的值是stylesheet（链接外部样式表）

二.方法

在外部创建一个.css文件:

div{ width:100px; height:100px; background-color:red}

再用link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./common.css">
    <title>Document</title>
    <!-- <style>
    @import url('./common.css');
    </style> -->
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

这样就成功引入外部样式了。注释区域为第二种方法，有很多问题，不推荐！
神奇链接

Web前端学习第二周031：CSS的颜色表示法

一.方法

1.1单词表示法

色图：~~不可以色色~~
在这里插入图片描述

div{ width:100px;height:100px;background-color:red }

比如这个。

1.2十六进制表示法

#000000是黑色，#ff0000是红色，#ffffff是白色等等。

1.3RGB三原色表示法

rgb（255，255，255）

取值范围0~255

Web前端学习第二周032：背景样式

一.背景样式

background-color 背景色

background-image 背景图

url(背景地址)
默认：会水平垂直都铺满背景图

background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat ( x , y 都进行平铺，默认值 )
no-repeat 都不平铺

background-position : 背景位置
x y : 数字(px、%) | 单词
x : left、center、right(左中右)
y : top、center、bottom（上中下）

background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
fixed ( 背景位置是按照浏览器进行偏移的 )

二.演示

就演示一下最后一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{ height : 2000px;}
    div{ width:1440px; height:800px; background-color :red; 
         background-image:url(./img/dog.jpg);
         background-repeat : no-repeat;
         background-position: 50% 50%;
         background-attachment: fixed;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

打开是这样的：
在这里插入图片描述
修改background-attachment，看看会有什么效果。

Web前端学习第二周033：背景实现视觉差效果

这是一个练习章节，是对前面知识的运用。
如何做出炫酷的背景视觉差效果？

一.练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #div1{ width:1400px; height: 800px; background-image:url(./img/1.jpg); background-attachment: fixed;}
    #div2{ width:1400px; height: 800px; background-image:url(./img/2.jpg); background-attachment: fixed;}
    #div3{ width:1400px; height: 800px; background-image:url(./img/3.jpg); background-attachment: fixed;}

    table{ background-color:white;}
    </style>
</head>
<body>
    <div id="div1">
            <table border="1" cellpadding="30" cellspacing="30">
                    <caption>天气预报</caption>
                    <tHead>
                        <tr align="right">
                            <th colspan="2">日期</th>
                            <th>天气情况</th>
                            <th>出行情况</th>
                        </tr>
                    </tHead>
                    <tBody>
                        <tr valign="top">
                            <td rowspan="2">2019年1月1日</td>
                            <td>白天</td>
                            <td><img src="./img/tianqi_1.png" alt=""></td>
                            <td>天气晴朗，适合出行</td>
                        </tr>
                        <tr>
                            <td>夜晚</td>
                            <td><img src="./img/tianqi_2.png" alt=""></td>
                            <td>天气晴朗，适合出行</td>
                        </tr>
                        <tr valign="bottom">
                            <td rowspan="2">2019年1月2日</td>
                            <td>白天</td>
                            <td><img src="./img/tianqi_1.png" alt=""></td>
                            <td>有小雨，出门请带伞</td>
                        </tr>
                        <tr>
                            <td>夜晚</td>
                            <td><img src="./img/tianqi_2.png" alt=""></td>
                            <td>有小雨，出门请带伞</td>
                        </tr>
                    </tBody>
                    <tFood>
            
                    </tFood>
                </table>

    </div>
    <div id="div2">
            form action="http://www.baidu.com">
            <!-- <h2>输入框：</h2>
            <input type="text" placeholder="请输入用户名">
            <h2>密码框：</h2>
            <input type="password" placeholder="请输入密码">
            <h2>复选框</h2>
            <input type="checkbox" checked>苹果
            <input type="checkbox" checked>香蕉
            <input type="checkbox" disabled>葡萄
            <h2>单选框</h2>
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <h2>上传文件</h2>
            <input type="file">
            <h2>提交按钮和重置按钮</h2>
            <input type="submit">
            <input type="reset"> -->
            <h2>多行文本框</h2>
            <textarea cols="30" rows="10"></textarea>
            <h2>下拉菜单</h2>
            <select>
                <option selected disabled>请选择</option>
                <option>北京</option>
                <option>上海</option>
                <option>杭州</option>
            </select>
            <select size="3">
                <option>北京</option>
                <option>上海</option>
                <option>杭州</option>
            </select>
            <select multiple>
                <option>北京</option>
                <option>上海</option>
                <option>杭州</option>
            </select>
            <input type="file" multiple>
    
            <input type="radio" name="gender" id="man"><label for="man">男</label>
            <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    
        </form>
    </div>
    <div id="div3">

            <table border="1" cellpadding="30" cellspacing="30">
                    <caption>天气预报</caption>
                    <tHead>
                        <tr align="right">
                            <th colspan="2">日期</th>
                            <th>天气情况</th>
                            <th>出行情况</th>
                        </tr>
                    </tHead>
                    <tBody>
                        <tr valign="top">
                            <td rowspan="2">2019年1月1日</td>
                            <td>白天</td>
                            <td><img src="./img/tianqi_1.png" alt=""></td>
                            <td>天气晴朗，适合出行</td>
                        </tr>
                        <tr>
                            <td>夜晚</td>
                            <td><img src="./img/tianqi_2.png" alt=""></td>
                            <td>天气晴朗，适合出行</td>
                        </tr>
                        <tr valign="bottom">
                            <td rowspan="2">2019年1月2日</td>
                            <td>白天</td>
                            <td><img src="./img/tianqi_1.png" alt=""></td>
                            <td>有小雨，出门请带伞</td>
                        </tr>
                        <tr>
                            <td>夜晚</td>
                            <td><img src="./img/tianqi_2.png" alt=""></td>
                            <td>有小雨，出门请带伞</td>
                        </tr>
                    </tBody>
                    <tFood>
            
                    </tFood>
                </table>
    </div>
</body>
</html>

这是前面学习的代码的组合运用。

Web前端学习第二周034：边框样式

一.边框样式

1.1边框样式

border-style : 边框样式
solid : 实线
dashed : 虚线
dotted : 点线

border-width : 边框大小
px …

border-color : 边框颜色
red #f00 …

边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom

颜色：透明颜色 transparent

二.演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
div{ width:300px; height:300px; border-style:solid; border-color:red; border-width:1px; }
div{ width:300px; height:300px; border-style:dashed; border-color:red; border-width:30px; }
div{ width:300px; height:300px; border-right-style: dotted; border-right-width: 10px; border-right-color:green; border-top-style: solid; border-top-width: 10px; border-top-color:red;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

上面的代码是有问题的，三个div是冲突的。需要注释其中两个。可以进行对比。这里就不发图了。

Web前端学习第二周035：边框实现三角形

练习
边框做个三角形
原理十分简单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{ background-color:green;}
    div{ width:0px; height:0px;
        border-top-color: transparent;
        border-top-style:solid;
        border-top-width:30px;;
        border-right-color: red;
        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>

在这里插入图片描述

尝试将transparent（透明）改成别的颜色，就会明白这是怎么回事了。

Web前端学习第二周036：family字体类型

一.CSS文字样式

1.1`font-family`：字体类型

字体类型分为两种。英文字体，比如"Arial"“Times New Roman"中文字体。比如“微软雅黑”“宋体”。
在网页中默认中文为微软雅黑。
在head中写个style，写个div{font-family:Arial}，就改变了字体，但是输入中文发现是没有改变的。这是因为Arial是英文字体，对中文无效。
微软雅黑的英文是"Microsoft YaHei”
宋体的英文是"SimSun"
名字用中文英文都可以。

1.2衬线体和非衬线体

在这里插入图片描述
衬线体（如宋体）有棱角，非衬线体（如微软雅黑）很平滑。
一般字体后面会跟很多种，比如

div{ font-family: 华文彩云 , 'Times New Roman' , SimSun , 微软雅黑; }

这是因为，计算机内可能没有该字体，当计算机没有的时候，它就会选择下一个。如果都没有，就会显示默认字体。
需要注意的是，字体名字有空格时，必须用引号包起来！

Web前端学习第二周037：字体大小粗细样式

一.字体大小粗细格式

1.1`font-size`：字体大小

默认大小16px，除了写像素，也可以写单词（如图），但是不推荐。为了文字对齐，像素尽量写偶数。
在这里插入图片描述

1.2`font-weight`：字体粗细

normal正常，bold加粗
也可以写数值（100-500是正常的，600-900是加粗的），只能写整百。

1.3`font-style`：字体样式

normal正常，italic斜体，oblique也表示斜体。但用的少。
区别：
italic 带有倾斜属性的字体的才可以设置倾斜操作。
oblique 没有倾斜属性的字体也可以设置倾斜操作。

1.4`color`：字体颜色

略
这还要写笔记？

Web前端学习第二周038：文本修饰与文本大小写

一.CSS段落样式

1.1 `text-decoration`：文本装饰

下划线 : underline
删除线 :line-through
上划线 : overline
不添加任何装饰 : none
注：添加多个文本修饰：line-through underline overline（把逗号去了，用空格隔开）

1.2`text-transform`：文本大小写

针对英文段落
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

Web前端学习第二周039：文本缩进与文本对齐

接上一节

1.3`text-indent`: 文本缩进

首行缩进
单位em是个相对单位，1em与字体大小相同

1.4`text-align`: 文本对齐方式

对齐方式 :
left左对齐、right右对齐、center居中、justify两端点对齐，中间间距拉开。

Web前端学习第二周040：文本的行高

接上一节

1.5`line-height`: 定义行高

一行文字的高度
行高由三部分组成，上边距，字体大小，下边距。
第一行的上边距等价于第二行的下边距。
默认行高不是固定值，是变化的。根据当前字体的大小不断的变化。
取值可以用数字（px），也可以用scale（比例值）跟文字大小成比例。
比如，文字大小是16px，比例值为1，那就是16px，比例值是2那就是32px。

Web前端学习第二周041：文本间距与英文折行

接上一节

1.6文本间距

letter-spacing: 字之间的间距
word-spacing: 词之间的间距 (针对英文段落的，中文无效)
中文会自动这行，但英文单词（或数字）特别长的时候不会自动折行，可以这样设置英文强制折行：
word-break : break-all; (非常强烈的折行，单词紧紧挨在一起~~贴贴变密接)~~
word-wrap : break-word;(不是那么强烈的折行，会产生一些空白区域)

Web前端学习第二周042：文本与段落实现个人简介

练习章节，来写个个人简介。
瞧瞧这个head：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{ width:800px;}
    h1{ text-align:center; color:#ff6600;}
    h2{ color:#00a0ff; text-indent: 2em;}
    #p1{ font-style:italic; font-weight: bold; text-indent: 2em;}
    #p2{ color:#66ff00; line-height: 30px; text-indent: 2em;}
    #p3{ color:#00ffff; line-height: 30px; text-indent: 2em; text-decoration: underline; font-style:italic;}
    #p4{ font-weight: bold; letter-spacing: 10px; line-height: 30px; text-indent: 2em;}
    #p5{ color:#cc00cc; line-height: 30px; text-indent: 2em;}
    </style>
</head>

这个#和下面内容的id对应，这个以后会讲。（Web前端学习第二周044：ID选择器及注意事项）~~我知道你很急但你先别急。~~

Web前端学习第二周043：css复合样式

一.CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。控制多种样式叫做复合样式。
复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序的，例如font。
比如background : red url(背景图片) repeat 0 0
border : 1px red solid
font是这样的：最少要有两个值 size family
比如：weight style size family
建议复合样式和单一样式分开写，如果非要混合去写的话，要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。
~~别混写，你也不希望看别人代码没注释吧~~

Web前端学习第二周044：ID选择器及注意事项

一.ID选择器

1.1ID选择器

HTML中用的是id="elem"，CSS里用的是#elem{}
ID是唯一值，存在一一对应的关系，在一个页面中只能出现一次。出现多次可以用，但不合规范。
命名也有讲究，由字母、下划线、中划线、字母（并且第一个不能是数字）
来个实例，下面的两个就有对应关系

#div1{ background:red;}

<div id="div1">这是一个块</div>

二.驼峰写法

2.1驼峰写法

第一个单词正常，第二个单词首字母大写的写法（小驼峰）
searchButton (小驼峰) SearchButton (大驼峰) searchSmallButton
建议使用驼峰写法。
还有短线写法也不错，下划线也不错。
短线写法：search-small-button
下划线写法：search_small_button

常用的CSS命名规则
1.注释的写法:
/Footer/
内容区
/End Footer/

id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

3.class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

Web前端学习第二周045：CLASS选择器及注意事项

一.CLASS选择器

1.1CLASS选择器

CSS：.elem{}
HTML:class="elem"
class选择器是可以复用的。可以添加多个class样式。
比如这样

<div class="box content">这是一个块</div>

多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。（就是上面head里的那个顺序）
标签+类的写法。CLASS就是类。
比如说<p class="box">这是一个段落</p>
这样只会控制p标签里的段落。

纸星客

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Web前端2

Web前端学习
复制链接

扫一扫

Web前端2

Web前端学习第二周021：嵌套列表

一.嵌套列表

1.1简介

1.2演示

Web前端学习第二周022：表格标签

一.表格标签

1.1<table>

1.2<tr>

1.3th

1.4td

1.5caption

1.6<tHead>，<tBody>，<tFood>

二.演示

Web前端学习第二周023：表格属性

一.表格属性

1.1<border>

1.2<cellpadding>

1.3<cellspacing>

1.4<rowspan><colspan>

1.5<align><valign>

二.演示

Web前端学习第二周024：表单标签

一.表单标签

1.1<form>

1.2<input>

Web前端学习第二周025：表单其他标签

一. 其他标签

1.1<textarea>

1.2<select><option>

1.3<lable>

Web前端学习第二周026：表格表单组合实例

一.实例

Web前端学习第二周027：div与span

一.div与span

1.1<div>

1.2.span

二.实例

Web前端学习第二周028：CSS语法格式

一.格式

1.1格式

二.演示

Web前端学习第二周029：内联样式与内部样式

一.内联样式与内部样式

1.1简介

1.2演示

Web前端学习第二周030：外部样式即两种写法

一.外部样式

1.1外部样式

1.2<link>

二.方法

Web前端学习第二周031：CSS的颜色表示法

一.方法

1.1单词表示法

1.2十六进制表示法

1.3RGB三原色表示法

Web前端学习第二周032：背景样式

一.背景样式

二.演示

Web前端学习第二周033：背景实现视觉差效果

一.练习

Web前端学习第二周034：边框样式

一.边框样式

1.1边框样式

二.演示

Web前端学习第二周035：边框实现三角形

Web前端学习第二周036：family字体类型

一.CSS文字样式

1.1font-family：字体类型

1.2衬线体和非衬线体

Web前端学习第二周037：字体大小粗细样式

一.字体大小粗细格式

1.1font-size：字体大小

1.2font-weight：字体粗细

1.3font-style：字体样式

1.4color：字体颜色

Web前端学习第二周038：文本修饰与文本大小写

一.CSS段落样式

1.1 text-decoration：文本装饰

1.2text-transform：文本大小写

1.1`<table>`

1.2`<tr>`

1.3`th`

1.4`td`

1.5`caption`

1.6`<tHead>，<tBody>，<tFood>`

1.1`<border>`

1.2`<cellpadding>`

1.3`<cellspacing>`

1.4`<rowspan><colspan>`

1.5`<align><valign>`

1.1`<form>`

1.2`<input>`

1.1`<textarea>`

1.2`<select><option>`

1.3`<lable>`

1.1`<div>`

1.2.`span`

1.2`<link>`

1.1`font-family`：字体类型

1.1`font-size`：字体大小

1.2`font-weight`：字体粗细

1.3`font-style`：字体样式

1.4`color`：字体颜色

1.1 `text-decoration`：文本装饰

1.2`text-transform`：文本大小写

1.3`text-indent`: 文本缩进

1.4`text-align`: 文本对齐方式

1.5`line-height`: 定义行高