web前端教程

已于 2022-11-18 06:50:25 修改
阅读量3.2k 收藏 7
点赞数 3
文章标签： 前端
于 2022-10-19 20:31:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/to_control/article/details/127335294
版权

１.HTML和CSS之导学

拨云见日

HTML CSS 切图流程 PC企业站流程 PC游戏站流程

溯本求源

扩展HTML 扩展CSS HTML5新语法 CSS3新语法 兼容与hack

风生水起

弹性布局 网格布局 移动端布局 响应式布局 Bootstrap

巧夺天工

预编译CSS postCSS CSS架构 高级功能 CSS与JS互动

２.1什么是HTML和CSS

了解什么是HTML和CSS

它们是两种编程语言，一般要配合使用，是作为网站开发的基础语言
练习：什么是HTML，CSS
css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

３.VScode

３.１学习编辑器基本使用

设置：文件—>首选项—>设置(大小，是否换行world wrap)

ctrl + s:保存
ctrl + a:全选
ctrl + x,ctrl + c,ctrl + v:剪切，复制，粘贴
ctrl + z,ctrl + y:撤销和前进
shift + end:从头选中一行
shift + home :从头选中一行
shift + alt +↓ ：快速复制一行
alt + ↑或↓ ：快速移动一行
tab ：向后缩进
多光标：alt + 鼠标左键
ctrl + d : 选择相同元素的下一个

４．Chrome浏览器

5.深入了解网站开发

5.1 网站开发人员

UI设计师：设计稿
web前端工程师（H5开发）
1.将设计稿转成代码
2.数据库数据显示到页面
web后端工程师

5.2HTML什么是HTML和CSS？

HTML:结构
CSS:样式

一个大型网站的开发，需要团队的配合，各个岗位不可或缺。

6.web前端三大核心技术

HTML:结构

CSS:样式

Javascript:行为

代码:

<style> 
div{color:red;font-style: italic;}
</style>

<div>HTML+CSS系列教程</div>

<script>    
let div=document.querySelector('div');  
let timer=null;
div.onmouseover=function(){
timer=setinterval(()=>{
    if(flag){
div.style.color='blue';
div.style.fontstyle='italic';
    }
    else{
div.style.color='red';
div.style.rontstyle='italic';

    }
    flag=!flag;
} ,500);
};
div.onmouseout=function  (){
    clearInterval(timer);
};
</script>

7.HTML的基本结构和属性

7.1html的基本结构：

HTML：超文本 标记 语言，标准通用标记语言下的一个应用
语言：编程语言
超文本：文本内容和非文本内容（图片，视频，音频等）
标记：<单词>如：

标记也叫标签
写法分为两种：
单标签：

双标签:

创建标签的快捷键：写单词按tab键
标签是可以上下排列，也可以组合嵌套
HTML常见标签

7.2属性：

标签的属性：来修饰标签的，设置当前当前标签的功能。
<标签 属性="值"属性2=“值2”>

代码:

<header title="hello">hello world
    <div> aaa  
        <div>bbb </div>
       </div>
    <div>aaa</div>
</header>

<footer title="hi">hi foot </footer>

8.HTML初始代码

8.1html初始代码是什么

每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页， 这些代码都是要有的，这就是初始代码。

8.2 初始代码快捷键

！+tab键：快速的创建HTML的初始代码

代码：

<!DOCTPYE html>  文档声明：告诉浏览器这是一个html文件
<html lang="en">  html文件的最外层标签：包裹着所有html标签代码   lang="en"表示是一个英文网站   lang="zh-CN"表示是一个中文网站
<head>
    <meta charset="UTF_8">  元信息：是辅助信息

    <title>Document</title>  设置网页标题
    </head>
    <body>
          显示网页内容的区域
    </body>
    </html>

9.HTML注释

9.1写法：

<!--注释的内容-->在浏览器中看不到，只能在代码中看到注释的内容。

9.2意义：

1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员提示的作用

快捷添加注释与删除：
1.添加：ctrl+/
2.删除：shift+alt+a

代码：

<!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>
    <!--hello world!!-->
    <!--登录-->
    
</body>
</html>

10.HTML语义化

所谓HTML语义化指的是，根据网页中的内容的结构，选择适合的HTML标签进行编写。

10.1好处：

1.在没有Css的情况下，页面也能呈现出很好的内容结构.
2.有利于seo，让搜索引擎爬虫更好的理解网站
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.便于团队开发与维护。

11.HTML标题和段落

标题

标签->双标签：

…

在一个网页中：h1标题最重要，并且在一个HTML文件中h1只能存在一个。

h5,h6标签在网页中不经常使用。

段落

段落—>双标签：

代码：

<!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>标题</h1>
   <h2 >标题</h2>
   <h3>标题</h3>
   <h4>标题</h4> 
   <P>段落</P>
</body>

</html>

12.文本修饰标签

强调—>双标签：<strong></strong>，<em></em>

区别：
1.写法和展示效果是有区别的，一个加粗，一个斜体

2.strong的强调性更强，em的强调性更弱。

下标：<sub></sub>
上标：<sup></sup>
删除文本：<del></del>
插入文本：<ins></ins>
注：一般情况下，删除文本和插入文本配合使用

代码：

<!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>
    <p>
   <strong>这是一段需要强调的文本</strong>
   <em>这是一段需要强调的文本</em>
    </p>
    <p>
    a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
</p>
<P>
促销：原价<del>300</del>,现价<ins>100</ins>
</P>

</body>

</html>

13.图片标签与图片属性

  img—>单标签
        spc:引入图片的地址
        zlt:当图片出现问题时，可以显示一段有好的提示文字
        title：提示信息
        width、height:图片的大小

代码：

<!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>
    <p>第一个段落</p>
  <img srg="https://msn-img-nos.yiyouliao.com/inforec-20221019-9a1d2dca3b641a4a4561768f00d040e9.jpg?time=1666175010&signature=D14F8F7432F5A714C2BC9251CA17663D9" alt="图片出不来咯"title="sb"
  width="300">
  <p>第二个段落</p>

</body>
</html>

14.引入文件的地址路径

相对路径

.在路径中表示当前路径
…在路径中表示上一级路径

绝对路径

网络地址不能用反斜线

代码：

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

   <img src=".\paojie.jpg" alt=""><!--反斜线和斜线在调用自己电脑图片时都可以用-->
   
   <!-- <img src="../img/tupian/paojie.jpg" alt=""> -->
</body>
</html>

15.跳转链接

链接标签

a->双标签：
href属性：链接的地址
target属性：可以改改变链接打开方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank
base->单标签：改变链接默认行为的。

代码：

<!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>
    <base target="_blank">
</head>
<body>
    <!-- <a href="http://www.baidu.com">访问百度</a>
<a href="http://www.bilibili.com"> 
    <img src="./paojie.jpg" alt=""> -->
    <!-- <a href="http://www.baidu.com" target="_blank">访问百度</a> -->
    <a href="http://www.baidu.com" target="_blank">访问百度</a>
    <a href="http://www.baidu.com" target="_blank">访问百度</a>
    <a href="http://www.baidu.com" target="_blank">访问百度</a>
</body>
</html>

16.跳转锚点

实现一
#号
id属性
实现二
#号
name属性(注意name属性加给的时a标签)

代码：

<!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>
<!-- <a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#Javascript">Javascript</a>

<h2 id="html">HTML 超文本标记语言</h2>
<P>模拟段落</P>
<P>模拟段落</P>
<P>模拟段落</P>
<P>模拟段落</P>
<P>模拟段落</P>
<h2 id="css">guishi</h2>
<P>模拟段落</P>
<P>模拟段落</P>
<P>模拟段落</P>
<h2>java</h2>
<P id="Javascript">模拟段落</P> -->

<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#Javascript">Javascript</a>
<a name="html"></a>
<h2>HTML 超文本标记语言</h2>
<P>模拟段落</P>
<P>模拟段落</P>
<P>模拟段落</P>
<P>模拟段落</P>
<P>模拟段落</P>
<a name="css"></a>
<h2 >guishi</h2>
<P>模拟段落</P>
<P>模拟段落</P>
<P>模拟段落</P>
<h2>java</h2>
<a name="Javascript"></a>
<P >模拟段落</P>
</body>
</html>

17.特殊符号

1.& + 字符
2、解决冲突 左右键括号、添加多个空格
17.列表标签

代码：

<!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>
    <p>
        &lt;html&gt;
    </p>
    <p>
hello  &nbsp;&nbsp;world
    </p>
</body>
</html>

18.列表标签

1.无序列表

<ul>,<li>:列表最外层容器、列表项
注：ul和li必须是组合出现的，他们之间不能有其他标签
1.无序列表->ul li 符合嵌套的规范
type属性：改变前面标记的样式（一般都是用CSS去控制）
(http://www.w3school.com.cn/tags/att_ul_type.asp)

2.有序列表

<ol>\<li>:列表的最外层容器、列表项
注：有序列表用的非常少，进场用的是无序列表，无序列表可以去替代有序列表。
有序列表-> ol li 一般用的比较少，可以用无序列表来实现
type属性：改变前面标记的样式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att_ol_type.asp）

3.定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
定义列表-> dl dt dd 列表项需要添加标题和对标题惊醒描述的内容。

代码：

<!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>
    <!-- <ui  type="">
        <li>第一项</li>
        <li>第二项</li> -->

    <!-- </ui> -->
    <ol>
        <li>
            第一标签
        </li>
        <li>第二标签</li>

    </ol>
</body>
</html>

19.表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
table、tr、td、caption等
注：之间是有嵌套关系的，要符合嵌套规范、

语义化标签：<tHead>、<tBody>、<tFood>
注：在一个table中tBody可以有多个，但是tHead和tFood只能有一个。

代码：

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>2019年1月1日</td>
            <td>☀</td>
            <td>天气晴朗</td>
        </tr>
        </tBody>
    </table> -->
    <table border="1" cellpanding="30" cellspacing="30" >
        <caption>天气预报</caption>
        <tHead>
        <tr>
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行</th>
        </tr>
        </tHead>
        <tBody>
        <tr>
            <td>2019年1月1日</td>
            <td>☀</td>
            <td>天气晴朗</td>
        </tr>
      
        </tBody>
    </table>
</body>
</html>

20.表格属性

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

21.表单标签

<form>:表单最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
form,input…
<textarae>:多行文本框
<select>、<option>:下拉菜单
<label>辅助标签
常见属性：checked、disabled、name、for…

代码：

<!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 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">鸭梨
<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" row="10"></textarea>
<h2>下拉菜单</h2>
<select>
    <option selected disabled>请选择</option>
<option >北京</option>
<option>南京</option>
</select>
<select size="3">
    <option>福州</option>
    <option>北京</option>
    <option>南京</option>
    <option>广州</option>
</select>
<select multiple>
    <option>福州</option>
    <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>
</body>
</html>

22.表格表单组合

代码：

!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 action="">
<table border="1" cellpadding="30">
    <tBody>
        <tr>
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
        </tr>
        <tr align="right">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr align="rignt">
<td>密码</td>
<td><input type="password" placeholder="请输入密码" ></td>
        </tr>
        <tr colspan="center">
<td colspan="2">
    <input type="submit">&nbsp;&nbsp;&nbsp;
    <input type="reset">
</td>
        </tr>
    </tBody>


</table>

    </form>
</body>
</html>

23.<div>与<span>

div:做一个区域划分的块
span:对文字进行修饰的内联

代码：

<!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>
    <!-- <div>这是一个块</div>
    <span>这是一个内联</span> -->
    <div>
        <h2><a href=#>【一坨答辩】<span>html5</span>-千万用户的选择-官方首页</a></h2>
        <a href="#"><img src="" alt=""></a>
    </div>
</body>
</html>

24.CSS基础语法

格式：
选择器{属性1：值1；属性2：值2}
单位：
px->像素（pixel）、% -> 百分比
基本样式：
width：宽、height：高、background-color：背景色
长度单位：
1.px->像素
2%->百分比
外容器->600px 当前容器 50%->300px
CSS注释：
/CSS注释的内容/

代码：

<!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>
    <style>
    div{width : 100%; height:100px;background-color:aqua }
    /* span{background-color:blue} */
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

25.内联样式与内部样式

style属性
1.内联（行内、行间）样式
在html标签上添加style属性来实现的
注:内部样式的优点，可以复用代码
2.内部样式：
style标签

区别：
内部样式的代码可以复用、复合w3c的规格标准，进行让结构和样式分开处理。

3.外部样式
引入一个单独的CSS文件，name，css

通过link标签引入外部资源，rel属性指定资源和页面的关系，herf属性资源的地址。
通过@import方式引入外部样式，
<link>标签
rel
href

代码：

<!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>
    <style>
        div{width:100px;height:100px;background-color:red}
        
    </style>
</head>
<body>
   <div>这是一个快</div>
    <!-- <div style="width:100px;height:100px;background-color:red">这是一个块</div> -->
</body>
</html>

26.CSS中的颜色表示法

1.单词表示法：red blue green yellow …

2.十六进制表示法 #000000 #ffffff

3.rgb三原色表示法，rgb(0,0,0)
取值范围0~255

代码：

<!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>
    <style>
        /* div{ background-color:#000000} */
        div{background-color:rgb(red,green,blue)}
    </style>
</head>
<body>
    
</body>
</html>

27.CSS背景样式

background-color:背景颜色
background-image:背景图片
url(背景地址)
默认：会水平垂直都铺满背景图
background-repeat:背景图片的平铺方式
repeat-x
repeat-y
repeat(x,y轴都平铺)
no-repeat
background-position:背景图片的位置
x y:number(px、%)|单词
x : left、center、right
y : top、center、bottom
background-attachment:背景图随滚动条的移动方式
scrol:默认值 （背景位置是按照当前元素进行偏移的）
fixed:固定不动（背景位置按照浏览器进行偏移）

代码：

<!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>
    <style>
        body{height:200px}
        div{ width:300px;height:300px;background-color:red;
        background-repeat : repeat;
    background-position:center center;
background-attachment: scroll;
}
    </style>
</head>
<body>
    
</body>
</html>

28.CSS边框样式

border-style:边框的样式
solid：实线
dashed：虚线
dotted：点线
border-width：边框的大小
px…
border-color：边框的颜色
red #f00 …
注：针对某一条边进行单独设置
颜色：透明颜色 transparent

代码：

<!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>
    <style>
        /* div{width: 300px;height:30px ;border-style:solid ;border-color: red;border-width: 1px;} */
div{width: 300px;height: 300px;border-right-style: dotted;border-top-color: red;border-right-color: blue;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

29.CSS文字样式

font-family:字体类型
英文字体：Arial，
中文字体：微软雅黑，宋体
字体名称中有空格要用引号引起来
衬线体与非衬线体
font-size:字体大小
默认：16px
写法：number（通常用偶数）|单词（不推荐）
font-weight:字体粗细
模式：正常（normal），加粗（bold）
写法：单词（normal、bold）|number（100，200，…900 100到500都是正常的，600到900是加粗的）|font-style：字体样式
模式：正常（normal），斜体（italic）
写法：单词（normal、italic）
注：oblique也是表示斜体，用法的比较少，一般了解即可。
区别：1.italic 所有带有倾斜字体的才可以设置倾斜操作
2.oblique 没有倾斜属性的字体也可以设置倾斜操作
fcolor：字体颜色

代码：

<!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>
    <style>
        #div1{font-family: 宋体;}
        #div2{font-family:Arial;}
        div{font-size:16px;}
        div{font-weight: bolder;}
    </style>
</head>
<body>
    <div id="div1">这是一段文字</div>
    <div id="div2">this is a text</div>
</body>
</html>

30.CSS段落样式

text-decoration 文本装饰
下划线:underline
删除线:line-throuh
上划线:overline
不添加任何装饰：none
注：添加多个可以用逗号隔开
text-transform：文本大小写（针对英文段落）
大写：uppercase
小写：lowercase
只针对首字母大写：capitalize
text-indent：文本缩进
首行缩进
em单位：相对单位。1em永远都是跟字体大小相同
text-align文本对齐方式
对齐方式：left,right,centrer,justify(两端点对齐)
line-height:定义行高
什么是行高：一行文字的高度，上边距和下边距的等价关系。
默认行高，不是固定值，而是变化的。根据当前字体的大小再不断的变化

  取值：1.number(px)|scale(比例值，跟文字大小)

letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
强制拆行（针对英文）(默认情况英文和数字下并不会折行)
1.word-break:break-all;(非常强烈的折行)
2.word-wrap:break-word;（不是那么强烈的折行,会产生一些空白区域）

代码：

<!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>
    <style>
        /* p{width: 300px;text-decoration:underline;} */
        /* p{text-transform: lowercase;} */
        /* p{text-indent: 32px;} */
        /* p{text-align: left;} */
        /* p{line-height: 2;} */
        /* p{letter-spacing:10px;} */
        div{width: 300px;height: 300px;border: 1px solid red;word-break:break-all;}
    </style>
</head>
<body>
 <p>我测牛魔王尼玛是大家觉得还是嗲海盗活动
    爱读囧Audio Jodi垃圾的
    赛的话u皇帝客户尽快
 </p>
 <div>asdadjaodjo sjdioajdoajd jsjdjaskljdklasjdkljdlkajadjaldj jsidaj kjsdla</div>
 <!-- <p>dhadikha ahisdhoiahjdo ajdoiashjdoijho adjasdoaj 
    sdkjakjdhkjashdkakjsdhjikashdjka klasdjkashjkashdkja
    asuidhiukashduikashdksokdhjaj 
 </p>    -->
</body>
</html>

31.CSS复合样式

一个CSS属性智能控制仪中央是，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式
复合的写法是通过空格来实现的。复合写法有的是不需要关心顺序的，例如background、border;有的要关心顺序，例如font

 1. background：red url() repeat 0 0;
 2. border:1px red solid;
 3. font:
  注：最少要有两个值 size family
      weight style size family
      style weightt size family
      weignt style size/line-height family
      注：尽量不要混写，如果一定要写，要先写复合样式再写单一样式，这样样式才不会被覆盖掉。

代码:

<!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>
    <style>
        div{width: 300px;height: 300px;
background:red url(./Desktop/paojie.jpg) no-repeat center;
/* border:2px black solid; */
border-right:2px blue dashed;
font:bold italic 30px 宋体;
        }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

32.CSS选择器

  1.ID选择器
  #elem{}    id="elem"
  注：1.在一个页面中，ID值是唯一的，在一个页面中只能出现一次
      2.命名规范，由字母、下划线、中划线、数字组成（命名第一位不能是数字）。
      3.命名方式，驼峰式、下划线式、短线式。
      驼峰写法：searchButton(小驼峰) SearchButton(大驼峰)
      短线写法：search-samll-button
      下划线写法：search_button
  2.CLASS选择器
        css:.elem{}
        html:class="elem"
              注：
              1.class选择其实可以复用的。
              2.可以添加多个抽拉式沈阳市。
              3.多个央视的时候，样式优先级根据CSS决定，而不是class属性中的顺序。
              4.标签+类的写法(.前面是标签，.后面是样式名)

代码：

<!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>
    <style>
        /* #div1{background:red;}
        #div2{background:blue;} */
        p.box{background:red;}
        .content{font-size:30px; background:blue;}
    </style>
</head>
<body>
    <!-- <div id="div1">这是一个块</div>
    <div id="div2">这是一个块</div>
    <div id="xiaoming"></div>
    <div id="search"></div> -->
    <div class="box content">这是一个块</div>
    <div class="box">这是一个块</div>
    <p class="box">这是一段段落</p>
</body>
</html>

3.标签选择器(TAG选择器)
div{} <div></div>
使用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择其中，如层次选择器
4.群组选择器(分组选择器)
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用.
css：div，p，span{}
5.通配选择器

        *{ } ->div,u1,li,p,h1,h2......{}
        注：尽量避免使用通配选择器，因为会给所有标签添加样式
        使用的场景：去掉所有标签默认样式时用
  6.层次选择器

        后代：M中间用空格隔开N { }
        父子：M>N { }
        兄弟：M~N { }当前M下面的所有兄弟标签
        相邻：M+N { }当前M下面相邻的N标签
  7.属性选择器

    M[attr] {}
    =：完全匹配
    *= ：部分匹配
    ^=:起始匹配
    $=:结束匹配
   [][][]...:组合匹配
   8.伪类选择器
  CSS伪类用于像某些元素添加特殊的效果。一般用与初始央视添加不上的时候，用伪类来添加。
      M :伪类{}
        ：link、  访问前的样式（只能添加给a标签）
        :visited、 访问后的样式(只能添加给a标签)
        :hover、   鼠标移入是的样式（可以给所有标签加）
        ：active   鼠标按下时的样式（可以给所有标签加）

注： 如果四个伪类都生效，一定要注意顺序：L V H a
一般网站都只设置设置：a{} a:hover{}

        ：after、:before  通过伪类的方式给元素添加一段文本内容，使用content属性
        :checked、：disable、：focus 都是针对表单元素的

        结构性伪类选择器
           nth-of-type()   nth-child()
        角标是从1开始的，1表示第一项，2表示第二项| n值  表示0到无穷大
           first-of-type
           last-of-type
           only-of-type
           nth-of-type()和nth-of-child()之间的区别
           type：类型
           child：孩子

代码：

<!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>
    <style>
        /* #div1{background:red;}
        #div2{background:blue;} */
        /* p.box{background:red;}
        .content{font-size:30px; background:blue;} */

        /* div{ background:red;}
        #text{background:red;}
        .text{background:red;} */

        /* div,#text,.title{ background:red;} */
        /* *{border:1px red solid} */
    /* #list > li{ border:1px red solid;} */
    /* div~h2{ background:red;} */
    /* div+h2{background:red;} */
/* div[class][id=elem] { background:red;} */
/* div{ width: 200px;height: 200px; background-color: red;}
div:hover{ background:blue;}
div:active{background:green;} */
/* a:link{color:red;}
a:visited{color:blue;}
a:hover{color:green;}
a:active{color:yellow;} */
/* div:after{content:"world";color:red;} */
:disabled{width: 100px;height: 100px;}
:focus{background-color: red;}

    </style>
</head>
<body>
    <!-- <div id="div1">这是一个块</div>
    <div id="div2">这是一个块</div>
    <div id="xiaoming"></div>
    <div id="search"></div> -->
    <!-- <div class="box content">这是一个块</div>
    <div class="box">这是一个块</div>
    <p class="box">这是一段段落</p> -->
    <!-- <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2> -->
    <!-- <ul id="list">
        <li>
            <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol> -->
    <!-- <h2>这是一个标题</h2>

    <div>这是一个块</div>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2> -->
    <!-- <div>aaaa</div>
    <div class="box" id="elem">aaaa</div>
    <div class="search" id="pigu">bbbb</div>
    <div class="search-button">cccc</div>
    <div class="button-search">eeee</div> -->
<!-- <div></div> -->
<!-- <a >这是一个链接</a> -->

<input type="checkbox">
<input type="checkbox">
<input type="checkbox" disabled>
<input type="text">
</body>
</html>

代码二：

<!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>
    <style>
   /* li:nth-of-type(2n+1)  { background-color: red;}
li:nth-of-type(2n){background-color: blue;;} */
/* li:last-of-type{background-color: red;}
li:first-of-type{background-color: blue;}
li:only-of-type{background-color: yellow;} */
div:only-of-type{background-color: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <div>aaa</div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        
    </ul>
</body>
</html>

33.CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承(默认是不能继承的，但可以设置继承属性 inherit 值 )

代码：

<!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>
    <style>
        div{width: 300px;height: 300 px;border: 1px red solid;color: red;font-size: 30px;}
        p{border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

34.CSS优先级

  1.相同样式优先级
     当设置项同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
  2.内部样式和外部样式
     内部样式与外部样式优先级相同，如果都设置了相同样式，呢么后写入的引进方式优先级高
  3.单一样式优先级
     style行间>id>class>tag>*>继承

     注：style行间 权重 1000
         id  权重     100
         class 权重  10
         tag  权重    1

4.!important
提升样式优先级,非常规方式，不建议使用。（不能针对继承属性优先级的提升）
5.标签+类与单类
标签+类>单类
6.群组优先级
群组选择器於单一选择器的优先级相同，靠后的优先级高。
7.层次优先级
1.权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100
2.约分比较
li .box p input{} li p input{}
.hello span #elem{} #elem{}

代码：

<!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>
    <style>
        /* div{color:red}
        div{color:blue} */
        /* #elem{color:red;} */
        /* .box{color:blue;} */
        /* div{color:green;} */
        /* *{color:red;} */
        /* body{color:blue;} */
        /* #elem{color:red    !important;}
        *{color:blue;}
        body{color:green ;} */

        /* .box{color:blue;}
        div.box{color:red;} */
        div{color:blue;}
        div,p{color:red;}
    </style>
</head>
<body>
    <!-- <div>这是一个块</div> -->
    <!-- <div id="elem" class="box">这是一个块</div> -->
    <!-- <div id="elem" style="color:blue">这是一个块</div> -->
    <!-- <div class="box">这是一个块</div> -->
    <div class="box">这是一个块</div>
    <p>这是一个段落</p>
</body>
</html>

35.CSS盒子模型

组成：

         content->padding->border->margin
          物品     填充物   包装盒   盒子与盒子之间的间距

        content:内容区域 width和height组成的
        padding:内边距（内填充）
              只写一个值：30px（上下、左右）
              写两个值：30px、40px(上下、左右)
              写四个值：30px、40px、50px、60px(上、右、下、左)
              单一样式只能写一个值
            number:30px 
            padding-left
            padding-right
            padding-top
            padding-bottom
        margin：外边距（外填充）
              只写一个值：30px（上下、左右）
              写两个值：30px、40px(上下、左右)
              写四个值：30px、40px、50px、60px(上、右、下、左)
              单一样式只能写一个值
            number:30px 
            margin-left
            margin-right
            margin-top
            margin-bottom

注：1.背景颜色会填充到margin以内的区域。
2.文字会在content区域
3.padding不能出现负值，margin是可以出现负值的。

box-sizing
盒尺寸：可以改变盒子模型的展示形态
默认值： content-box: width,height->content
border-box:width,height->content padding border

  使用场景；
          1.不用再去计算一些值
          2.解决一些百分比问题

盒子模型的一些问题：
margin叠加
当给两个盒子同时添加上下边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。
出现上下中值较大的会作为叠加的值。
解决方案：
1.BFC规范
2.想办法只给一个元素添加间距
margin传递
margin传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding
拓展：
1.margin左右自适应是可以的，但是上下自适应是不行的。
2.width、height不设置的时候，对盒子模型的影响,会自动计算容器大小，节省代码。

代码：

<!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>
    <style>
        /* #box{width: 200px; height: 200px;background-color: red;border:10px blue solid;
        padding:30px;
        margin:10px;
        }
        #box2{width: 200px;height: 200px;background-color: green;} */
        #box{width: 200px;height: 200px;background-color: green;border:10px red solid;
        padding:30px;
        box-sizing:border-box;
        }
    </style>
</head>
<body>
    <!-- <div id="box">这是一个盒子</div>
    <div id="box2">这是一个盒子</div> -->
    <div id="box">这是一个盒子</div>
</body>
</html>

代码二(盒子模型的问题）：

<!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>
    <style>
/* #box1{width: 200px;height: 200px;background-color: red;margin-bottom:30px;}
#box2{width: 200px;height: 200px;background-color: blue ;margin-bottom:20px;} */
#box1{width: 200px;height: 200px;background-color: red;}
#box2{width: 100px;height: 100px;background-color: blue;margin-top:100px}


    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

代码三（盒子模型的拓展）：

<!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>
    <style>
/* #box{width: 400px;height: 100px;background-color: red;margin-right:auto;margin-left:auto;} */
#box{width: 300px;height: 300px;background-color: red;}
#box2{height: 100px;background-color: blue;}
    </style>
</head>
<body>
    <div id="box">
    <div id="box2"></div>
    </div>
</body>
</html>

36.标签分类

  按类型:
        block:块 div,p,ul,li,h1-h6...
        1.独占一行
        2.支持所有样式
        3.不写宽的时候，和父容器的宽相同
        4.所占区域是一个矩形
        inlin:内联 span,a,em,strong,img ...
        1.挨在一起的
        2.有些样式不支持，例如：width，height，margin，padding
        3.不写宽的时候，宽度由内容决定
        4.所占的区域不一定是矩形
        5.内敛标签之间会有空隙，原因:换行产生的
        inline-block: input,select ...
              1.挨在一起，但是支持宽高
              2.
        注：布局一般用快标签，修饰文本一般用内联标签
  按内容：
        Flow：流内容
        Metadata：元数据
        Sectioning：分区
        Heading：标题
        Phrashing：措辞
        Embedded：嵌入的
        Interactive：互动的
  按显示：
        替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
        img，input...
        非替换元素：将内容直接告诉浏览器，将其显示出来。
         div,h1,p ...

代码：

<!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>
    <style>
        /* #box1,box2{width: 200px;height: 200px;background-color:red;} */
        /* input{width: 100px;height: 10px;}
        #content1,#content2{width: 200px;height: 200px;background-color:red;font-size:16px}  */
    </style>
</head>
<body>
    <!-- <div></div>
    <span></span>
    <input type="text"> -->

<!-- <div id="box1"></div>
<div id="box2"></div> -->
<!-- <span id="content1">内联1</span>
<span id="content2">内敛2</span>
<input type="text"> -->

<!-- 替换元素 -->
<!-- <img src="" alt=""> -->
<input type="checkbox">

<!-- 非替换元素 -->
<h1>标题</h1>
</body>
</html>

37.显示框类型

  block， inline， inline-block，none
  区别：
  display:none 不占空间的隐藏
  visbility:hidden 占空间的隐藏

代码：

<!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>
    <style>
        /* div{width: 100px;height: 100px;background-color: red;display:inline-block;}
        span{width: 100px;height: 100px;background-color: red;display:inline-block;}
        input{display:none;} */

        #box1,#box2{width: 100px;height: 100px;background-color: red;}
        #box1{display:none}
    </style>
</head>
<body>
    <!-- <div>块1</div>
    <div>块2</div>
    <span>内联1</span>
    <span>内联2</span>
    <input type="text"> -->
    <div id="box1">块1</div>
    <div id="box2">块2</div>
</body>
</html>

38.标签嵌套规范

  ul,li
  dl,dt,dd
  table,tr,td
块标签可以嵌套内联标签
块标签不一定能嵌套块标签
  如：<p>
        <div></div>
        </p>
        这样写是错误的
 内联是不能嵌套块的
 错误：
 <span>
        <div></div>
  </span>
 特殊：<a herf="#">
        <div></div>
        </a>
        这是正确的

39.溢出隐藏

overflow
visble:默认值
hidden
scroll
auto
x轴y轴 overflow-x,overflow-y分别针对两个轴分别设置

代码：

<!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>
    <style>
        /* div{width: 300px;height: 300px;border: black solid;overflow:scroll;} */
        div{width: 300px;height: 300px;border: black solid;overflow:auto;}
    </style>
</head>
<body>
    <div>
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏
    </div>
</body>
</html>

39.透明度和手势

opacity:0(透明 占空间)~1（不透明）
0.5（半透明）
注：占空间，所有子内容也会透明
rgba():0~1
注：可以让指定的样式透明，而不影响其他样式

cursor：手势
default:默认箭头
要实现自定义手势：
准备图片：.cur、.ico

代码：

<!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>
    <style>
        #div1{width: 100px;height: 100px;background-color: red;opacity:0.5;}
        #div2{width: 100px;height: 100px;background-color:rgba(255,0,0,1);
        cursor:help;
        }
    </style>
</head>
<body>
    <div id="div1">zheshiyigek</div>
    <div id="div2">hduiakd</div>
    <P>zhwiaojdoadaj</P>
</body>
</html>

40.最大、最小宽高

  min-width、max-width
  min-height、max-height

注：强化百分比单位的概念
%单位：换算->以父容器进行换算

一个容器怎么适应屏幕的高：容器加height:100%; body:100%; html:100%;

  html,body{height:100%}
  .contrainer{height:100%}

代码：

<!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>
    <style>
        /* div{width: 200px;max-height: 200px;border:1px red solid;} */
        #box1{width: 200px;height: 200px;background: red;}
        #box2{width: 100%;height: 80%;background: blue;}
    </style>
</head>
<body>
    <!-- <div>
         这是一段内容
       S
        这是一段内容 -->
    </div> -->
    <div id="box1">
    <div id="box2"></div>
    </div>
</body>
</html>

41.CSS默认样式

有些标签有默认样式，有些标签没有默认样式。
没有默认样式的：div、span
有默认样式的：body->margin:spx
h1->margin:上下21.440px
fornt-weight:bold
p->margin:上下 16px
ul->margin:上下 16px padding：左 .440px
默认点：list-style:disc
a-> text-decoration:underline;

代码：

     <!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>
    <div>这是一个块</div>
</body>
</html>

42.CSS reset

简单的CSS reset：
*{margin:0 padding:0;}
优点：不用烤炉哪些标签有默认的margin和padding
缺点：稍微的影响性能
ul{list-style:none;}

a{text-decoration:none;color:#666;}
img{display:block;}
问题的现象：图片跟容器底部有一些空虚。
原因：内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-aligin：baseline; 基线对齐方式，默认值
img{vertical-align:bottom;}解决方式是推荐的
写具体页面的时候或写一个布局效果的时候：
1.写结构
2.CSS重置样式
3.写具体样式

43.float浮动

文档流

      文档流是文档中可显示对象在排列十所占用的位置。

float特性

        加浮动的元素，会脱离文档流，会延迟父容器靠左或者靠右排列，如果之前已经
        洋浦浮动的元素，会挨着浮动的元素进行排列

float取值

     left
     right
     none（默认）

float注意点

      只会影响后面的元素。
      内容默认提升半层
      默认宽根据内容决定。
      换行排列
      主要给元素添加，但也可以给内联元素添加。

如何清除浮动

     上下排列：clear属性，表示清除浮动的，left、right、both
      嵌套排列：
         固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
         父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
         overflow:hidden（BFC规范），如果有了子元素想溢出，那么会受到影响。
         display：inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。
         设置空标签：不推荐，会多添加一个标签。
         after伪类：推荐，是空标签的加强版，目前各大公司的做法。
                    (clear属性指挥操纵块标签，对内联标签不起作用)

代码：

<!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>
    <style>
        body{border:1px black solid;}
#box1{width: 100px;height: 100px;background-color: red;float:left;}
#box2{width: 200px;height: 200px;background-color: yellow;float:left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
     </html>

代码二（float注意点）：

       <!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>
    <style>
            body{border:1px black solid;}
/* #box1{width: 100px;height: 100px;background-color: red;}
#box2{width: 200px;height: 200px;background-color: yellow;float:left;}
#box3{width: 300px;height: 300px;background-color: blue;}
#box4{background-color: green;float:left} */
u1{margin:0;padding:0;list-style:none;width:300px;height: 300px;border:1px black solid;}
li{width: 100px;height: 100px;background-color: red;border: 1px yellow solid;box-sizing: border-box;
float:left;
}
li:nth-of-type(1){height:120px;}
li:nth-of-type(2){height:80px;}
span:last-of-type{float:right;}

    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">叽叽叽叽</div>
    <div id="box4">这是一个欸有宽度的块元素</div> -->

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span>aaaaa</span><sapn>bbbbb</sapn>
</body>
</html>

代码三（清除浮动）：

  <!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>
    <style>
        /* #box1{width: 100px;height: 100px;background: red;float:left;}
        #box2{width: 200px;height: 200px;background: blue ;clear:both;} */
  /* #box1{width:200px;border:1px black solid ;overflow:hidden;}
#box2{width: 100px;height: 200px;background-color: red;float:left;} */
/* .class{clear:both;} */
  #box1{width:200px;border:1px black solid ;overflow:hidden;}
#box2{width: 100px;height: 200px;background-color: red;float:left;} 
.clear{content:'~~~~~~~';}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
    <!-- <div id="box1">
        <div id="box2"></div>
        <div class="clear"></div>
    </div>
    aaaaa -->
    <div id="box1" class="clear">
        <div id="box2"></div>
        </div>
 aaaaaa

</body>
</html>

44.CSS定位

  position特性
   css position属性用于指定一个元素在文档中的定位方式。op、right、bottom、left属性则决定了该元素的最终位置
  position取值
        static
        relative
        absolute
        fixed
        sticky
  relative：
        如果没有定位偏移量，对元素本身没任何影响
        不是元素脱离文档流
        不印象其他元素布局
        left、top、right、bottom师弟当前元素自身进行偏移的
  absolute:
        使元素脱离文档流
        使内联元素支持宽高(让内联具备块特性)
        使块元素默认宽根据内容决定 (让内联元素具有内联特性)
        如果有定位相对于定位祖先员素发生偏移，没有定位祖先相对于整个文档发生偏移（绝对、相对、固定）
  fixed固定定位
        使元素脱离文档流
        使内联元素支持宽高(让内联具备块特性)
        使块元素默认宽根据内容决定 (让内联元素具有内联特性)
        相对整个浏览器窗口进行偏移，不受浏览器滚动条的影响
  stickey定位:
  在指定的位置进行黏性操作

代码（position定位让图片居中）：

在这里插入图片描述

<!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>
    <style>
        #box1{width:100px;height: 100px;background: red;}
        #box2{width:100px;height: 100px;background: blue;position: relative;left:100px;top:100px; }
        #box3{width:100px;height: 100px;background: yellow;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

代码（position定位）：

在这里插入图片描述

<!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>
    <style>
        /* body{height: 2000px;}
        div{position:fixed;} */
        body{height:2000px;}
        #box1{width: 300px;height: 300px;border:1px black solid;margin:200px;position: relative;}
        #box1{width: 100px;height: 100px;border:1px black solid;margin:200px;position: relative;}
    </style>
</head>
<body>
    <!-- <div>这是一个块</div> -->
    <div id="box1">
        <div id="ox2"></div>
    </div>
</body>
</html>

代码（下拉菜单）:

在这里插入图片描述

<!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>
    <style>
        *{margin:0;padding:0;}
        ul{list-style: none;}
        #menu{width: 100px;height: 30px;margin:20px auto;border:1px black solid; position:relative;}
        #menu ul{width: 100px;border: 1px black solid;position:absolute;left:-1px;top: 30px;background:white;
        display:none;
    }
    p{text-align: center;}
#menu:hover ul{display:block;}
#menu ul li:hover{background: grey;}
    </style>
</head>
<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>
    </div>
    <p>测试段咯</p>
</body>
</html>

45.CSS添加省略号

  width
  必须有一个固定的宽
  white-space:nowrap
  不让内容折行
  overflow：hidden
  隐藏一处的内容
  text-overflow:ellipsis
  添加省略号

46.CSS Sprite

  特性
  CSS雪碧也叫CSS精灵，是一种网页图片引用处理方式。它语序你将一个页面设计到的所有零星图片都包含到一张大图中去加载。
  好处：
  可以减少图片的质量，网页的图片加载速度快
  减少图片请求次数，加快网页打开

47.CSS圆角

border-radius
给标签添加圆角。

代码：

<!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>Documen</title>
    <style>
        /* #box{width: 200px;height: 200px;background:red ;border-radius:100px; } */
        /* #box{width: 300px;height: 300px;background:red ;border-radius:50%; } */
        /* #box{width: 300px;height: 300px;background:red ;border-radius:10px 20px; } */
        #box{width: 300px;height: 300px;background:red ;border-radius:150px 150px 0 0; }
        
        

    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

PC布局

通栏：自适应浏览器的宽度
版心：固定一个宽度，让容器居中

代码：

<!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>
    <link rel="stylesheet" href="./commen.css">
    <style>
        #banner{position: relative;}
        #banner .banner_list{width: 100%;height: 469px;position: relative;}
        #banner .banner_list li{width: 100%;height: 100%;background:center 0 no-repeat;position: absolute;left: 0;top: 0;opacity: 0;z-index: 10;}
        #banner .banner_list a{display: block;width: 100%;height: 100%;}
        #banner .banner_btn{width: 100%;position: absolute;bottom: 19px;z-index: 20;font-size: 0;text-align: center;}
        #banner .banner_btn li{display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 6px;}
        #banner .banner_btn li.active{background-color: white;}

        #service{overflow: hidden;min-height: 407px;}
        #service .service_list{text-align: center;margin-top: 34px;}
        #service .service_list li{float: left;width: 250px;margin: 0 10px;}
        #service .service_list div{width: 102px;height: 102px;}
        #service .service_list li:nth-of-type(1) div{background-image: url(./images/web1.png);}
        #service .service_list li:nth-of-type(2) div{background-image: url(./images/web2.png);}
        #service .service_list li:nth-of-type(3) div{background-image: url(./images/web3.png);}
        #service .service_list li:nth-of-type(4) div{background-image: url(./images/web4.png);}
        #service .service_list h3{font-size: 18px; color: #434343;line-height: 36px;margin-top: 25px;}
        #service .service_list p{font-size: 14px;color: #6D6D6D;line-height: 22px;}
    
        #case{background: #f8f8f8;}
        #case .container{min-height: 460px;overflow: hidden;}
        #case .area_title{margin-top: 55px;}
        #case .area_title h2{counter-reset: #66C5B4;}
        #case .case_list{margin-top: 28px;}
        #case .case_list li{float: left;width: 340px;margin: 0 10px;}
        #case .case_btn{width: 176px;height: 37px;background: #66C5B4;margin: 0 auto;border-radius: 25px;line-height: 37px;text-align: center;font-size: 14;margin-top: 36px;}
        #case .case_btn a{display: block;width: 100%;height: 100%;color: white;}

        #news{min-height: 450px;overflow: hidden;}
        #news .area_title{margin-top: 65px;}
        #news dl{margin-top: 48px;}
        #news dt{float: left;width: 234px;}
        #news dd{width: 846px;}
        #news .news_list{width: 100%;}
        #news .news_list li{width: 50%;float: left;margin-bottom: 48px;}
        #news .news_date{width: 71px;border-right: 1px solid #DCDCDC;text-align: center;}
        #news .news_date i{color: #66C5B4;font-size: 39px;display: block;font-weight: bold;}
        #news .news_date span{color: #999999;font-size: 20px;line-height: 36px;}
        #news .news_text{width: 310px;margin-left: 20px;}
        #news .news_text h3{font-size: 14px;}
        #news .news_text h3 a{color: #3F3F3F;}
        #news .news_text p{color: #A4A4A4;font-size: 12px;line-height: 21px;margin-top: 17px;}
    </style>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="博文尚美" title="博文尚美">
            </a>
        </div>
        <ul class="head_menu r">
            <li>
                <a href="#">HOME</a>
            </li> 
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PROTFOLIO</a>
            </li>
            <li>
                <a href="#">SERVICE</a>
            </li>
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
    <div id="banne" class="contaner-fluid">
        <ul class="banner_list">
            <li class="active" style="background-image: url(../images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(../images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(../images/banner.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(../images/banner.png);">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div id="service" class="comtainer">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICES</p>
        </div>
        <ul class="service_list">
            <li>
                <div></div>
                <h3>1.web design</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>2.graphic design</h3>
                <p>
                    标志logo设计/产品宣传册设计
                    <br>
                    企业广告/海报设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>3.e-business plan</h3>
                <p>
                    淘宝/天猫装修设计及运营推广
                    <br>
                    企业微博、微信营销
                </p>
            </li>
            <li>
                <div></div>
                <h3>4.mailboxagents</h3>
                <p>
                    腾讯/网易企业邮箱品牌代理
                    <br>
                    个性化邮箱定制开发
                </p>
            </li>
        </ul>
    </div>
    <div id="case" class="container-fluid">
        <div class="comtainer">
            <div class="area_title"></div>
            <h2>{客户案例}</h2>
            <p>With the best professional technology, to design the best innovative web site</p>
        </div>
        <ul class="case_list" clear>
            <li>
                <a href="#"><img src="./images/20141121095216750.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/20141121095528549.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/20141121105856226.png" alt=""></a>
            </li>
        </ul>
        <div class="case_btn">
            <a href="#">VIEW MORE</a>
        </div>
    </div>
    <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>THE LATEST NEWS</p>
        </div>
        <dl>
            <dt>
                <img src="./images/xs1.png" alt="">
            </dt>
            <dd>
                <ul class="news_list">
                    <li>
                        <div class="news_date" l>
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text" l>
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>有很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了，那么网站优...
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date" l>
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text" l>
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>有很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了，那么网站优...
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date" l>
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text" l>
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>有很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了，那么网站优...
                            </p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
    <div id="foot" class="container-fluid">
        <div class="container">
            <p class="l">Copyright 2006-2014 Bowenshangmei Culture All Rights Reserved</p>
            <div class="r">
                <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a>
            </div>
        </div>
    </div>
</body>
</html>
to_control
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端基础-VUE入门教程(一)
hjw15910531612的博客
07-21 3361
总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识
前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
大大的博客
07-17 573
目录一、 模板语法插值语法二、 指令2.1 文本指令v-html：让HTML渲染成页面v-text：标签内容显示js变量对应的值v-show：显示/隐藏内容v-if：显示/删除内容2.2 事件指令v-on:click 可以缩写成@click2.3 属性指令v-bind:class=’js变量’可以缩写成：:class=’js变量’三、 Style 和 Class数据的绑定下方试验的命令四、 条件渲染五、 列表渲染1. v-if+v-for+v-else控制购物车商品的显示2. v-for遍历数组(列表)、对
前端笔记 | CSS基础
Huffie博客
03-13 497
CSS的主要使用目的就是美化网页，布局页面。只用HTML时，网页显示效果很不好看。CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
Web前端学习路线，超全面整理「HTML+CSS+JS+Ajax+jQuery+VUE
最新发布
weixin_49376454的博客
05-12 1238
Web前端学习路线，超全面整理「HTML+CSS+JS+Ajax+jQuery+VUEWeb前端学习路线，超全面整理「HTML+CSS+JS+Ajax+jQuery+VUEWeb前端学习路线，超全面整理「HTML+CSS+JS+Ajax+jQuery+VUE
前端入门教程(一)
qq_51164450的博客
07-22 1805
1.网页 1.1 什么是网页 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。 1.2 什么是HTML HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。 HTML不是一
前端学习——样式绑定，外部样式表Class与内联样式Style
Wby_Nju的博客
02-07 999
文章目录一 样式表，绑定HTML Class1.1 v-bind和CSS复习1.2 简单绑定多个样式1.3 逐一判断样式-单个样式1.4 逐一判断样式-多个样式1.5 数组语法（有误）二 内联样式2.1 使用方式三 总结3.1 不使用vue，样式表a 单个属性b 多个属性3.2 不使用vue，内联样式a 单个属性b 多个属性3.3 使用vue，非逐个判断a 单个属性b 多个属性3.4 使用vue ...
Web前端教程汇总
07-09
Web前端教程汇总视频教程 Web前端教程汇总视频教程
web前端开发教程.doc
11-29
Web 前端开发教程 本文将深入研究浏览器工作原理，拆解分析当你输入一个网址的时候，后台到底发生了一件件什么样的事。 一、浏览器工作原理 1. 输入网址：用户在浏览器中输入网址，浏览器会根据用户输入的网址...
web前端教程：nodejs的前后端分离模式.pdf
10-27
【标题】：“Web前端教程：Node.js的前后端分离模式” 【描述】：该教程旨在解决传统Web开发中出现的问题，通过引入Node.js，探讨一种全新的前后端分离开发模式，以适应多终端需求，提高开发效率，实现更好的用户...
[Web开发]自学笔记5：style标签
weixin_46285081的博客
03-01 760
1.定义 <style> 标签用于为 HTML 文档定义样式信息。 style 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 style 元素。 2 .属性 3 .实例 <!DOCTYPE html> <html> <head> <title>第一个程序</title> <sty...
前端基础教程
08-17
初级HTML和CSS教程。初级HTML和CSS教程,高清PDF版,00000000000
webstyle
weixin_34232617的博客
09-17 167
<div id="mainarea"> <div class="nav_two"> <ul> <li class="currently">基本资料</li> </ul> <div class="clear"&g...
中文匹配（正则）
m0_60541499的博客
10-03 1421
中文匹配（正则）
HTML中的style标签怎么写,html style标签是什么意思？关于style标签的使用方
weixin_42498987的博客
05-31 9195
本篇文章主要讲的是html style标签的定义和属性介绍，先让我们了解style标签在HTML中的一些用途和位置，然后介绍了使用中的一些方法和细节技巧，让我们一起来看看吧html style标签的定义和用法：style 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 t...
前端的几种特殊样式
GordanXu的专栏
05-05 664
1:在DIV出现滚动条  在DIV上应用此样式即可（颜色可以根据具体情况进行调节） .scroll     {         WIDTH: 120px;         HEIGHT: 140px;         overFlow-x: hidden;         overFlow-y: scroll;               scrollbar-3dlight-c
前端最全css样式完整版
webHtml5Css3的博客
03-14 4804
/*  * 将具有默认margin和padding的标记置零  * @overlay *  * @desc 所有标记的margin、padding都在使用时具体定义  */ *{margin:0;padding:0;} /*  * 修正IE5.x和IE6的斜体溢出bug  * @bugfix  * @css-for    IE 5.x/Win, IE6  */ * html
2014年辛星web前端教程贺岁版第一本即HTML基础
10-21
这是2014年辛星web前端教程第一本，希望您能喜欢。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值